:root {
--bg-color: #e0e5ec;
--text-color: #2d3436;
--shadow-light: #ffffff;
--shadow-dark: #a3b1c6;
--accent: #0984e3;
--card-bg: #ffffff;
--geocoder-bg: rgba(255, 255, 255, 0.85);
--geocoder-border: rgba(0, 0, 0, 0.08);
--geocoder-text-main: #1c1c1e;
--geocoder-text-muted: #8e8e93;
--geocoder-hover: rgba(0, 0, 0, 0.05);
}
body.dark-mode {
--bg-color: #121214;
--text-color: #f1f3f5;
--shadow-light: #1c1c1f;
--shadow-dark: #000000;
--accent: #6482e4;
--card-bg: #1c1c1f;
--geocoder-bg: rgba(28, 28, 30, 0.85);
--geocoder-border: rgba(255, 255, 255, 0.12);
--geocoder-text-main: #ffffff;
--geocoder-text-muted: #8e8e93;
--geocoder-hover: rgba(255, 255, 255, 0.1);
}
/* --- PREMIUM GLASSMORPISM HEADER --- */
#main-header.desktop-only {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
height: 80px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(35px) saturate(200%);
-webkit-backdrop-filter: blur(35px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 24px;
z-index: 10000 !important; /* MÁXIMA PRIORIDAD */
display: flex;
align-items: center;
padding: 0 25px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode #main-header.desktop-only {
background: rgba(18, 18, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.header-left {
flex: 1.2;
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0; /* Protect nav from shrinking */
}
.header-main-nav {
display: flex;
align-items: center;
gap: 0;
}
.header-main-nav .nav-item {
text-decoration: none;
color: #1e272e;
font-weight: 800;
font-size: 1rem;
transition: all 0.3s ease;
opacity: 0.6;
position: relative;
padding: 10px 4px;
margin: 0 10px;
white-space: nowrap;
}
body.dark-mode .header-main-nav .nav-item {
color: #ffffff;
}
.header-main-nav .nav-item:hover {
opacity: 1;
color: #3367f6;
}
.header-main-nav .nav-item.active {
opacity: 1;
color: #3367f6;
background: transparent;
}
.header-main-nav .nav-item::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 3px;
background: #3367f6;
transition: width 0.3s ease;
border-radius: 4px;
}
.header-main-nav .nav-item.active::after {
width: 100%;
}
.header-logo-container {
display: flex;
flex-direction: column;
text-decoration: none;
transition: transform 0.2s;
}
.header-logo-container:hover {
transform: scale(1.02);
}
.header-logo {
height: 32px;
width: auto;
}
.logo-text-sub {
font-size: 0.65rem;
font-weight: 600;
color: #636e72;
margin-top: -2px;
letter-spacing: 0.5px;
opacity: 0.8;
}
body.dark-mode .logo-text-sub {
color: #a4b0be;
}
.header-center {
flex: 1.5;
display: flex;
justify-content: center;
}
.premium-search-box {
width: 100%;
max-width: 550px;
}
.search-box-inner {
height: 52px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
display: flex;
align-items: center;
padding: 0 6px 0 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
backdrop-filter: blur(10px);
}
body.dark-mode .search-box-inner {
background: rgba(45, 52, 54, 0.4);
border-color: rgba(255, 255, 255, 0.05);
}
.search-box-inner:focus-within {
background: #ffffff;
box-shadow: 0 15px 40px rgba(51, 103, 246, 0.12);
border-color: #3367f6;
transform: translateY(-2px);
}
.search-pill-icon {
color: #a4b0be;
margin-right: 12px;
display: flex;
align-items: center;
}
.search-divider {
width: 1px;
height: 24px;
background: rgba(0, 0, 0, 0.1);
margin: 0 15px;
}
body.dark-mode .search-divider {
background: rgba(255, 255, 255, 0.1);
}
.premium-filter-btn {
background: transparent;
border: none;
display: flex;
align-items: center;
gap: 8px;
padding: 0 15px;
cursor: pointer;
font-weight: 700;
font-size: 0.9rem;
color: #2d3436;
transition: color 0.2s;
}
body.dark-mode .premium-filter-btn {
color: #f1f3f5;
}
.premium-filter-btn:hover {
color: #3367f6;
}
.premium-search-action-btn-rect {
width: 42px;
height: 42px;
background: #3367f6;
border: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(51, 103, 246, 0.3);
}
.premium-search-action-btn-rect:hover {
transform: scale(1.05);
background: #2563eb;
box-shadow: 0 6px 18px rgba(51, 103, 246, 0.4);
}
.header-right {
flex: 1.2;
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0; /* Protect profile/favs from shrinking */
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
.list-property-btn {
display: flex;
align-items: center;
gap: 12px;
background: #3367f6;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(51, 103, 246, 0.2);
padding: 6px 20px 6px 6px;
border-radius: 50px;
cursor: pointer;
font-weight: 800;
font-size: 0.95rem;
color: #ffffff;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(51, 103, 246, 0.3);
}
body.dark-mode .list-property-btn {
background: #3367f6;
border-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
box-shadow: 0 4px 12px rgba(51, 103, 246, 0.3);
}
.list-property-btn:hover {
transform: translateY(-2px);
background: #2563eb;
box-shadow: 0 10px 25px rgba(51, 103, 246, 0.4);
}
.plus-circle {
width: 34px;
height: 34px;
background: white !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
color: #3367f6 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.notification-bell-container {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #636e72;
transition: all 0.2s;
border-radius: 50%;
}
body.dark-mode .notification-bell-container {
color: #a4b0be;
}
.notification-bell-container:hover {
background: rgba(0, 0, 0, 0.05);
color: #3367f6;
}
.bell-badge {
position: absolute;
top: 10px;
right: 10px;
width: 8px;
height: 8px;
background: #ff4757;
border-radius: 50%;
border: 2px solid white;
}
body.dark-mode .bell-badge {
border-color: #1c1c1f;
}
.premium-signin-btn {
background: #3367f6;
color: white;
padding: 10px 24px;
border-radius: 12px;
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(51, 103, 246, 0.3);
}
.premium-signin-btn:hover {
background: #2563eb;
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(51, 103, 246, 0.4);
}
.premium-hamburger-btn {
background: transparent;
border: none;
color: #2d3436;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
padding: 5px;
}
body.dark-mode .premium-hamburger-btn {
color: #f1f3f5;
}
.premium-hamburger-btn:hover {
transform: scale(1.1);
color: #3367f6;
}
/* Map container - Full height behind the floating header */
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
margin-top: 0;
z-index: 1;
background-color: #f8f9fa;
}
/* Override MapTiler SDK internal styles to blend in */
[id^="geocoder-wrapper"] .maptilersdk-geocoding-control {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: none !important;
}
[id^="geocoder-wrapper"] input {
background: transparent !important;
border: none !important;
padding: 0 !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: #1a1a1a !important; /* Negro intenso al escribir */
-webkit-text-fill-color: #1a1a1a !important;
}
body.dark-mode [id^="geocoder-wrapper"] input {
color: #f1f3f5 !important;
-webkit-text-fill-color: #f1f3f5 !important;
}
[id^="geocoder-wrapper"] input::placeholder {
color: rgba(0, 0, 0, 0.3) !important; /* Color difuminado sugerente */
opacity: 1 !important;
font-style: italic;
font-weight: 400 !important;
-webkit-text-fill-color: rgba(0, 0, 0, 0.3) !important;
}
/* Selector específico para el buscador del mapa */
#geocoder-wrapper-map input::placeholder {
color: rgba(0, 0, 0, 0.35) !important;
opacity: 1 !important;
font-style: italic;
-webkit-text-fill-color: rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode [id^="geocoder-wrapper"] input::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.35) !important;
}
@media (max-width: 900px) {
#main-header {
display: none !important;
}
.header-left {
flex: 0 0 auto;
order: 1;
}
.header-logo-container {
display: none;
/* Hide logo on mobile as per screenshot */
}
.header-center {
flex: 1;
order: 2;
display: flex !important;
margin: 0;
max-width: none;
}
.header-right {
display: none;
/* Hide nav and profile on mobile header as per screenshot */
}
.premium-search-pill {
max-width: 100%;
height: 44px;
width: 100%;
padding: 0 12px;
}
.header-nav-links {
display: none;
}
.desktop-only {
display: none !important;
}
#map {
height: 100vh;
margin-top: 0;
}
/* Hide entire header in specific mobile views (Inbox/Profile) */
body.hide-header-search #main-header {
display: none !important;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
-webkit-tap-highlight-color: transparent;
}
body,
html {
width: 100%;
height: 100%;
background-color: var(--bg-color);
overflow: hidden;
/* Control view via bottom sheet */
color: var(--text-color);
}
#view-mapa,
#view-dashboard {
width: 100%;
height: 100vh;
position: relative;
}
#view-dashboard {
display: none;
}
#map {
width: 100%;
height: 100vh;
z-index: 1;
}
/* Bottom Sheet styles removed. Replaced by filter modal overlay! */
.sheet-content {
flex: 1;
overflow-y: auto;
}
/* Soft UI (Neumorphism) Inputs & Filters */
.filters-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.filter-group label {
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
padding-left: 2px;
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modern-select {
background: #f1f3f5;
border: 1px solid #e1e5e8;
border-radius: 10px;
padding: 8px 12px;
color: var(--text-color);
font-size: 0.9rem;
font-weight: 600;
outline: none;
cursor: pointer;
transition: all 0.2s;
}
.modern-select:focus {
border-color: var(--accent);
background: #ffffff;
}
.soft-input {
width: 100%;
background: #f1f3f5;
border: 1px solid #e1e5e8;
border-radius: 12px;
padding: 14px 18px;
color: var(--text-color);
font-size: 1rem;
font-weight: 500;
outline: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
}
select.soft-input {
height: 50px;
padding: 12px 35px 12px 18px !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
text-align: center;
text-align-last: center;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 20px;
}
.soft-input:focus {
background: #ffffff;
border-color: #6482e4;
box-shadow: 0 0 0 3px rgba(100, 130, 228, 0.1);
}
/* Global Registrar Form Soft UI Inputs (Shared Mobile & Desktop) */
.panel-registrar-form .soft-input {
font-family: 'Nunito', 'Inter', sans-serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
border-radius: 14px !important;
padding: 13px 16px !important;
transition: all 0.2s ease !important;
}
body:not(.dark-mode) .panel-registrar-form .soft-input {
background: #ffffff !important;
border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
color: #2d3436 !important;
}
body:not(.dark-mode) .panel-registrar-form .soft-input::placeholder {
color: #b2bec3 !important;
opacity: 0.8;
}
body.dark-mode .panel-registrar-form .soft-input {
background: rgba(0, 0, 0, 0.3) !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
body.dark-mode select.soft-input {
background-image: url("data:image/svg+xml;utf8,") !important;
}
body.dark-mode select.soft-input option {
background-color: #1e1e20 !important;
color: #ffffff !important;
}
body.dark-mode .panel-registrar-form .soft-input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
.panel-registrar-form .soft-input:focus {
border-color: #6c5ce7 !important;
box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15) !important;
background: #ffffff !important;
}
body.dark-mode .panel-registrar-form .soft-input:focus {
background: rgba(0, 0, 0, 0.45) !important;
border-color: #a29bfe !important;
box-shadow: 0 0 0 4px rgba(162, 155, 254, 0.2) !important;
}
.glass-input {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
.pill-search-input {
background: rgba(30, 45, 70, 0.65) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
border-radius: 50px !important;
color: white !important;
outline: none;
transition: all 0.3s ease;
}
.pill-search-input::placeholder {
color: rgba(255, 255, 255, 0.85);
}
.pill-search-input:focus {
background: rgba(40, 60, 90, 0.8) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.price-range {
display: flex;
align-items: center;
gap: 10px;
}
.price-range span {
font-weight: 600;
color: var(--text-color);
}
.soft-btn {
padding: 14px 20px;
border: none;
border-radius: 12px;
background: #2563eb;
color: white;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
transition: all 0.2s ease;
width: 100%;
}
.soft-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4);
background: #1d4ed8;
}
.soft-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.soft-btn-purple {
background: rgba(108, 92, 231, 0.2);
color: #a29bfe;
border: 1px solid rgba(108, 92, 231, 0.4);
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.soft-btn-purple:hover {
background: rgba(108, 92, 231, 0.4);
color: white;
transform: translateY(-2px);
}
.soft-btn-blue {
background: linear-gradient(135deg, #3367f6 0%, #2563eb 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
width: 100%;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(51, 103, 246, 0.3);
}
.soft-btn-blue:hover {
background: linear-gradient(135deg, #4a7aff 0%, #3367f6 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(51, 103, 246, 0.5);
}
#header-publish-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(51, 103, 246, 0.45);
filter: brightness(1.1);
}
/* User Profile Pill in Header */
.header-user-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px 6px 6px;
background: #ffffff;
border: 1px solid #e0e5ec;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.dark-mode .header-user-pill {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.1);
}
.header-user-pill:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(51, 103, 246, 0.15);
border-color: #3367f6;
}
.header-user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.header-user-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-color);
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ------------------------------------- */
/* Dark UI Inputs & Dual Range Slider */
/* ------------------------------------- */
.dark-input {
width: 100%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding: 12px 14px;
color: #ffffff;
font-size: 0.95rem;
outline: none;
transition: all 0.2s ease;
}
.dark-input:focus {
border-color: #0abde3;
box-shadow: 0 0 0 2px rgba(10, 189, 227, 0.2);
}
.dark-input.with-icon {
padding-left: 36px;
}
select.dark-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 24px;
padding-right: 45px !important;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #d1d8e0;
pointer-events: none;
}
.dual-range-container {
position: relative;
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 4px;
margin: 25px 0 15px 0;
transition: background 0.3s ease;
}
body.dark-mode .dual-range-container {
background: #2d3748;
}
.range-track {
position: absolute;
height: 100%;
background: #3367f6;
border-radius: 4px;
top: 0;
z-index: 1;
transition: background 0.3s ease;
}
body.dark-mode .range-track {
background: #6366f1;
}
.dual-range-container input[type="range"] {
position: absolute;
width: 100%;
height: 6px;
top: 0;
-webkit-appearance: none;
appearance: none;
z-index: 2;
margin: 0;
background: transparent;
pointer-events: none;
}
.dual-range-container input[type="range"]::-webkit-slider-thumb {
pointer-events: all;
width: 22px;
height: 22px;
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
background: #3367f6;
box-shadow: 0 3px 8px rgba(51, 103, 246, 0.3);
cursor: grab;
border: 3px solid #ffffff;
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
body.dark-mode .dual-range-container input[type="range"]::-webkit-slider-thumb {
background: #6366f1;
border-color: #121214;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.dual-range-container input[type="range"]::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}
.dual-range-container input[type="range"]::-moz-range-thumb {
pointer-events: all;
width: 22px;
height: 22px;
border: 3px solid #ffffff;
border-radius: 50%;
background: #3367f6;
box-shadow: 0 3px 8px rgba(51, 103, 246, 0.3);
cursor: grab;
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
body.dark-mode .dual-range-container input[type="range"]::-moz-range-thumb {
background: #6366f1;
border-color: #121214;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.dual-range-container input[type="range"]::-moz-range-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}
.range-labels {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #a4b0be;
margin-top: 15px;
}
/* Google Maps InfoWindow Customization */
.info-window-content {
font-family: 'Inter', sans-serif;
color: var(--text-color);
width: 280px;
/* Wider for better text fit */
max-height: 60vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
margin: 0;
border-radius: 8px;
}
.info-window-content::-webkit-scrollbar {
display: none;
}
.info-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 8px 8px 0 0;
display: block;
}
.info-body {
padding: 12px 0 5px 0;
}
.info-body h3 {
margin: 0 0 4px 0;
font-size: 1.1rem;
font-weight: 700;
}
.info-price {
margin: 0 0 12px 0;
font-weight: 700;
color: var(--accent);
font-size: 1.05rem;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
/* More breathing room */
}
.info-item {
font-size: 0.85rem;
color: #2d3436;
display: flex;
flex-direction: column;
align-items: flex-start;
/* Strict left alignment */
background: #fdfdfd;
/* Clean white-ish */
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #f1f3f5;
/* Subtle cell border */
font-weight: 800;
/* Crisp numbers */
}
.info-item span {
font-weight: 600;
color: #a3b1c6;
font-size: 0.65rem;
margin-bottom: 4px;
text-transform: capitalize;
/* Less aggressive than ALL CAPS */
letter-spacing: 0px;
}
/* Carousel InfoWindow */
.carousel-container {
position: relative;
width: 100%;
height: 140px;
background: #000;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
.carousel-container .info-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.15s ease-in-out;
border-radius: 0;
/* Reset since container has it */
}
/* ------------------------------------- */
/* Mini Card Like Button Hover (Top Level) */
/* ------------------------------------- */
.card-like-btn-top {
position: absolute;
top: 15px;
left: 15px;
/* Opposite side of the native X */
color: #b2bec3;
/* soft grey to contrast with Google's white box */
background: transparent;
border: none;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 10000;
transition: all 0.2s;
outline: none;
padding: 0;
}
.card-like-btn-top:hover {
transform: scale(1.15);
color: #ff7675;
}
.card-like-btn-top:active {
transform: scale(0.9);
}
.card-like-btn-top.liked svg {
fill: #ff7675;
stroke: #ff7675;
}
.card-like-btn-top svg {
width: 100%;
height: 100%;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #2d3436;
border: none;
width: 26px;
height: 26px;
border-radius: 13px;
font-size: 14px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.2s;
user-select: none;
outline: none;
}
.carousel-btn:hover {
background: rgba(255, 255, 255, 1);
transform: translateY(-50%) scale(1.1);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.9);
}
.carousel-btn.prev {
left: 8px;
}
.carousel-btn.next {
right: 8px;
}
/* Hide scrollbar for a cleaner look */
.sheet-content::-webkit-scrollbar {
display: none;
}
/* Custom Map Pins (Advanced Markers) */
.custom-map-pin {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
cursor: pointer;
}
.pin-price {
background: #ffffff;
color: var(--text-color);
padding: 4px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
margin-bottom: 6px;
/* Space between price and icon */
box-shadow: 0 4px 10px rgba(163, 177, 198, 0.4);
border: 1px solid #e0e5ec;
white-space: nowrap;
position: relative;
z-index: 2;
}
/* Triangle pointing from the price tag to the pin */
.pin-price::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
}
.pin-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 12px rgba(163, 177, 198, 0.6);
border: 3px solid #ffffff;
z-index: 1;
position: relative;
transition: transform 0.2s ease;
}
.custom-map-pin:hover .pin-icon {
transform: scale(1.1);
}
.pin-icon svg {
width: 20px;
height: 20px;
}
/* Toggle Switch (Apagar Google Maps) */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-color);
transition: .4s;
box-shadow: inset 4px 4px 6px rgba(163, 177, 198, 0.6), inset -4px -4px 6px rgba(255, 255, 255, 0.8);
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: #a3b1c6;
transition: .4s;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
input:checked+.slider {
/* Cuando está activo (Cyan) */
background-color: #00d2d3 !important;
box-shadow: inset 4px 4px 6px rgba(0, 210, 211, 0.3), inset -4px -4px 6px rgba(255, 255, 255, 0.1);
}
input:checked+.slider:before {
transform: translateX(22px);
background-color: #ffffff;
/* White knob for cyan slider */
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.sheet-content {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Nuevo Diseño de Pin (Tarjeta con Imagen Miniatura) */
.custom-map-pin-card {
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.2s ease;
}
/* Auth Primary Button */
.btn-primary-blue {
background: #0984e3;
color: white;
border: none;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 15px rgba(9, 132, 227, 0.4);
transition: all 0.2s ease;
}
.btn-primary-blue:hover {
background: #00a8ff;
transform: translateY(-2px);
}
.custom-map-pin-card:hover {
transform: scale(1.05) translateY(-5px);
}
/* Integrated Editor Grid */
.editor-layout-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 40px;
padding-bottom: 50px;
}
#integrated-preview-column {
position: sticky;
top: 20px;
height: fit-content;
}
@media (max-width: 1024px) {
.editor-layout-grid {
grid-template-columns: 1fr;
}
#integrated-preview-column {
position: static;
order: -1;
margin-bottom: 30px;
}
}
/* [NUEVO] PREMIUM GLASSMORMISM SIDEBAR */
.sidebar-overlay-premium {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 150000000 !important;
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-overlay-premium.active {
opacity: 1;
pointer-events: auto;
}
.sidebar-content-premium {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
width: 380px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(40px) saturate(210%);
-webkit-backdrop-filter: blur(40px) saturate(210%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 32px;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
padding: 35px;
transform: translateX(110%);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
body.dark-mode .sidebar-content-premium {
background: rgba(18, 18, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: -15px 0 60px rgba(0, 0, 0, 0.5);
}
.sidebar-overlay-premium.active .sidebar-content-premium {
transform: translateX(0);
}
.sidebar-close-btn-premium {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.05);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #2d3436;
transition: all 0.2s;
z-index: 10;
}
body.dark-mode .sidebar-close-btn-premium {
background: rgba(255, 255, 255, 0.05);
color: #f1f3f5;
}
.sidebar-close-btn-premium:hover {
background: rgba(0, 0, 0, 0.1);
transform: rotate(90deg);
}
/* User Card */
.sidebar-user-card {
margin-top: 20px;
margin-bottom: 30px;
}
.user-profile-glass-btn {
width: 100%;
background: linear-gradient(135deg, #3367f6 0%, #2563eb 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 22px;
padding: 16px 20px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
display: block;
text-align: left;
box-shadow: 0 12px 30px rgba(51, 103, 246, 0.2);
color: #ffffff;
}
body.dark-mode .user-profile-glass-btn {
background: linear-gradient(135deg, #3367f6 0%, #1e3a8a 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.user-profile-glass-btn:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 18px 45px rgba(51, 103, 246, 0.35);
filter: brightness(1.1);
}
body.dark-mode .user-profile-glass-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.user-card-inner {
display: flex;
align-items: center;
gap: 15px;
}
.user-avatar-wrapper {
width: 48px;
height: 48px;
background: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
flex-shrink: 0;
}
.user-avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.user-name-label {
font-weight: 800;
font-size: 1.15rem;
color: #2d3436;
word-break: break-word;
}
body.dark-mode .user-name-label {
color: #fff;
}
.badge-dot {
width: 8px;
height: 8px;
background: #ff4757;
border-radius: 50%;
margin-top: 4px;
}
.profile-badge-count {
background: #ff4757;
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
padding: 2px 6px;
border-radius: 9px;
margin-left: auto;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(255, 71, 87, 0.3);
flex-shrink: 0;
}
/* Menu Items */
.sidebar-links-premium {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
overflow-y: auto;
padding-right: 5px;
}
.sidebar-section-label {
font-size: 0.72rem;
font-weight: 800;
color: #3367f6;
text-transform: uppercase;
letter-spacing: 2px;
margin: 30px 0 12px 10px;
opacity: 0.9;
}
body.dark-mode .sidebar-section-label {
color: #a4b0be;
opacity: 1;
}
.premium-menu-item {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 20px;
border-radius: 20px;
text-decoration: none;
color: #1e272e;
font-weight: 800;
font-size: 1.05rem;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
text-align: left;
width: 100%;
margin-bottom: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
body.dark-mode .premium-menu-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #f1f3f5;
}
.premium-menu-item:hover {
background: rgba(255, 255, 255, 0.8);
color: #3367f6;
transform: translateY(-3px) scale(1.02);
border-color: #3367f6;
box-shadow: 0 12px 30px rgba(51, 103, 246, 0.15);
}
body.dark-mode .premium-menu-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #3367f6;
}
.item-icon {
width: 42px;
height: 42px;
background: #ffffff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #3367f6;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
body.dark-mode .item-icon {
background: rgba(255, 255, 255, 0.05);
color: #3367f6;
}
.premium-menu-item:hover .item-icon {
transform: scale(1.1);
background: #3367f6;
color: #ffffff;
}
.badge-count {
background: #3367f6;
color: white;
font-size: 0.7rem;
font-weight: 800;
padding: 2px 8px;
border-radius: 10px;
margin-left: auto;
}
.legal-group-glass {
background: rgba(0, 0, 0, 0.02);
border-radius: 18px;
padding: 5px;
}
body.dark-mode .legal-group-glass {
background: rgba(255, 255, 255, 0.02);
}
.premium-menu-item-small {
display: block;
padding: 10px 15px;
font-size: 0.85rem;
color: #636e72;
text-decoration: none;
transition: all 0.2s;
border-radius: 12px;
}
body.dark-mode .premium-menu-item-small {
color: #a4b0be;
}
.premium-menu-item-small:hover {
background: rgba(0, 0, 0, 0.03);
color: #3367f6;
}
.business-item-glass {
background: rgba(51, 103, 246, 0.08);
border: 1px solid rgba(51, 103, 246, 0.1);
}
.sidebar-spacer {
height: 20px;
}
.logout-btn-premium {
width: 100%;
box-sizing: border-box;
margin-top: auto;
background: #ff4757;
border: none;
border-radius: 20px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: white;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 20px rgba(255, 71, 87, 0.2);
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.logout-btn-premium:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(255, 71, 87, 0.35);
background: #ff3f4f;
}
/* Subviews */
.sidebar-sub-view-premium {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 20;
padding: 30px;
display: flex;
flex-direction: column;
}
body.dark-mode .sidebar-sub-view-premium {
background: rgba(15, 23, 42, 0.1);
}
.back-btn-glass {
background: rgba(0, 0, 0, 0.05);
border: none;
border-radius: 12px;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-weight: 700;
margin-bottom: 20px;
transition: all 0.2s;
color: #2d3436;
}
body.dark-mode .back-btn-glass {
background: rgba(255, 255, 255, 0.05);
color: #f1f3f5;
}
.back-btn-glass:hover {
background: rgba(0, 0, 0, 0.1);
padding-left: 12px;
}
.sub-view-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.clear-notifs-btn {
background: rgba(255, 71, 87, 0.1);
padding: 5px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 71, 87, 0.3);
color: #ff4757;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.sub-view-scroll {
flex: 1;
overflow-y: auto;
padding-right: 5px;
}
.sub-view-title {
margin: 0 0 20px;
font-weight: 800;
font-size: 1.4rem;
}
.modern-sidebar-btn svg {
opacity: 0.9;
}
/* User Profile specific style (Modern & Premium) */
.user-profile-btn {
background: linear-gradient(135deg, #6c5ce7 0%, #3367f6 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 10px 25px rgba(51, 103, 246, 0.25) !important;
opacity: 1 !important;
padding: 18px 24px !important;
border-radius: 20px !important;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.user-profile-btn:hover {
background: linear-gradient(135deg, #7d6dfa 0%, #4a7aff 100%) !important;
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 15px 35px rgba(51, 103, 246, 0.4) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.user-profile-btn:active {
transform: translateY(0) scale(0.98) !important;
}
.user-name-label {
color: #ffffff !important;
font-weight: 800 !important;
letter-spacing: 0.3px;
font-size: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-avatar {
border: 2px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease;
}
.user-profile-btn:hover .user-avatar {
transform: rotate(5deg) scale(1.1);
}
.sidebar-close-btn {
position: absolute;
right: 20px;
top: 20px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 1.2rem;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
}
.sidebar-close-btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.05);
}
.sidebar-link:hover {
transform: translateX(5px);
}
/* Auth Modal Styles */
.auth-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.auth-overlay.active {
opacity: 1 !important;
pointer-events: auto !important;
display: flex !important;
z-index: 150000000 !important; /* Raised above everything including bottom nav (100M) to prevent overlap */
}
.auth-card {
background: #ffffff;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 28px;
padding: 40px 30px 35px;
width: 95%;
max-width: 440px;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
position: relative;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
align-items: center;
color: #1c1c1e;
opacity: 1 !important;
visibility: visible !important;
margin: auto;
}
.modern-login-card {
border-radius: 32px;
padding: 45px 35px 40px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.modern-login-card .auth-header h2 {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.modern-login-card .auth-header p {
font-size: 0.95rem;
color: #8e8e93;
margin-bottom: 30px;
}
/* Modifier class for Dark Theme (Profile/Filter Modal) */
.auth-card.dark-theme {
background: rgba(22, 22, 24, 0.98) !important;
backdrop-filter: blur(40px) !important;
-webkit-backdrop-filter: blur(40px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9) !important;
border-radius: 32px !important;
opacity: 1 !important;
visibility: visible !important;
}
.auth-card.dark-theme h2 {
color: #ffffff !important;
}
.auth-card.dark-theme p {
color: #a4b0be !important;
}
.auth-card.dark-theme .auth-close-btn {
color: #ffffff !important;
}
.auth-card.dark-theme label {
color: #a4b0be !important;
}
.auth-card.dark-theme input,
.auth-card.dark-theme select {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.auth-card.dark-theme .filter-group-container {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.auth-overlay.active .auth-card {
transform: translateY(0);
}
.social-auth-container {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
margin: 10px 0 20px;
}
.social-auth-btn {
display: flex;
align-items: center;
width: 100%;
height: 42px;
/* IGUALADO A GOOGLE LARGE */
background: #ffffff;
border: 1px solid #dadce0;
border-radius: 20px;
/* IGUALADO A GOOGLE PILL SHAPE */
padding: 0 20px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.social-auth-btn:hover {
background: #f8f9fa;
border-color: #d0d0d0;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.social-auth-btn:active {
transform: translateY(0);
}
.social-auth-icon {
width: 20px;
height: 20px;
margin-right: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.social-auth-text {
flex: 1;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #3c4043;
}
/* Specific Social Button Themes */
.microsoft-btn {
background: #2f2f2f !important;
border-color: #2f2f2f !important;
}
.microsoft-btn .social-auth-text {
color: #ffffff !important;
}
.microsoft-btn:hover {
background: #404040 !important;
}
.yahoo-btn {
background: #6001d2 !important;
border-color: #6001d2 !important;
}
.yahoo-btn .social-auth-text {
color: #ffffff !important;
font-weight: 600;
}
.yahoo-btn:hover {
background: #7209e5 !important;
box-shadow: 0 4px 12px rgba(96, 1, 210, 0.3);
}
.apple-btn {
background: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
}
.apple-btn .social-auth-text {
color: #ffffff !important;
font-weight: 600;
}
.apple-btn:hover {
background: #1c1c1e !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.facebook-btn {
background: #1877f2 !important;
border-color: #1877f2 !important;
color: #ffffff !important;
}
.facebook-btn .social-auth-text {
color: #ffffff !important;
font-weight: 600;
}
.facebook-btn:hover {
background: #166fe5 !important;
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);
}
.google-official-btn {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 0;
border-radius: 20px;
overflow: hidden;
}
.social-divider {
display: flex;
align-items: center;
width: 100%;
margin: 20px 0;
color: #636e72;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-divider::before,
.social-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(0, 0, 0, 0.08);
}
.social-divider::before {
margin-right: 15px;
}
.social-divider::after {
margin-left: 15px;
}
.social-icons-row {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 5px;
}
.social-icon-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #e0e0e0;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.social-icon-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
background: #f8f9fa;
}
.social-icon-btn.facebook {
color: #1877f2;
}
.social-icon-btn.apple {
color: #000000;
}
.social-icon-btn.x-twitter {
color: #000000;
}
.auth-footer-link {
margin-top: 25px;
font-size: 14px;
font-weight: 600;
color: #636e72;
cursor: pointer;
text-align: center;
transition: color 0.2s;
}
.auth-footer-link:hover {
color: #1c1c1e;
}
.auth-header h2 {
color: #1c1c1e;
margin-bottom: 8px;
font-size: 1.4rem;
font-weight: 800;
text-align: center;
}
.auth-header p {
color: #636e72;
font-size: 0.9rem;
margin-bottom: 20px;
line-height: 1.4;
text-align: center;
}
.auth-close-btn {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
color: #1c1c1e;
font-size: 1.2rem;
cursor: pointer;
padding: 5px;
opacity: 0.6;
}
.auth-header h2 {
color: #1c1c1e;
margin-bottom: 8px;
font-size: 1.5rem;
}
.auth-header p {
color: #636e72;
font-size: 0.9rem;
margin-bottom: 25px;
line-height: 1.4;
}
.btn-google {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px;
background: white;
color: #333;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.btn-google:active {
transform: scale(0.98);
}
.btn-google img {
width: 22px;
height: 22px;
}
.auth-divider {
text-align: center;
margin: 25px 0;
position: relative;
}
.auth-divider::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.auth-divider span {
position: relative;
background: #ffffff;
padding: 0 10px;
color: #636e72;
font-size: 0.85rem;
}
.auth-btn-small {
padding: 14px 20px;
white-space: nowrap;
font-size: 0.95rem;
border-radius: 12px;
margin: 0;
display: flex;
align-items: center;
}
.user-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
margin-right: 6px;
}
.user-name-label {
display: inline-block;
margin-left: 8px;
font-weight: 700;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
vertical-align: middle;
}
.auth-close-btn:hover {
opacity: 1;
}
.pin-card-content {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 12px;
padding: 6px;
/* Gap/margen interno amplio para separar la foto */
box-shadow: 0 5px 12px rgba(163, 177, 198, 0.6);
border: 1px solid #e0e5ec;
height: 48px;
/* Mantiene buena proporción para la previsualización */
z-index: 2;
position: relative;
}
body.dark-mode .pin-card-content {
background: #1c1c1f;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}
.pin-card-icon {
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
margin-left: 6px;
}
.pin-card-icon svg {
width: 100%;
height: 100%;
}
.pin-card-price {
padding: 0 16px 0 6px;
display: flex;
align-items: center;
color: var(--text-color);
font-weight: 800;
font-size: 13.5px;
white-space: nowrap;
}
.pin-card-arrow {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #ffffff;
filter: drop-shadow(0 4px 3px rgba(163, 177, 198, 0.4));
z-index: 1;
margin-top: -1px;
}
body.dark-mode .pin-card-arrow {
border-top: 10px solid #1c1c1f;
filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5));
}
/* Contenedor Superior de Amenidades */
.amenidades-container {
display: flex;
gap: 8px;
/* Adjusted for chips */
flex-wrap: wrap;
padding: 12px 8px;
background: #ffffff;
justify-content: flex-start;
/* Clean left edge instead of jagged center alignment */
border-bottom: 2px solid #f8f9fa;
}
/* Chips Textuales para las Amenidades */
.amenity-chip {
background: #f8f9fa;
color: #2d3436;
font-size: 0.70rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 16px;
border: 1px solid #e0e5ec;
box-shadow: 2px 2px 4px rgba(163, 177, 198, 0.4), -2px -2px 4px rgba(255, 255, 255, 0.9);
transition: all 0.2s ease;
cursor: default;
}
.amenity-chip:hover {
background: #ffffff;
color: #00b894;
transform: translateY(-2px);
box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.5), -3px -3px 6px rgba(255, 255, 255, 1);
}
/* ------------------------------------- */
/* Contact Actions inside InfoWindow */
/* ------------------------------------- */
.contact-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 15px;
padding-top: 12px;
border-top: 1px dashed #b2bec3;
}
.contact-btn {
flex: 1;
/* Makes them take equal 50/50 space */
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 10px 0;
border-radius: 8px;
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
transition: all 0.2s ease;
color: white;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}
.contact-btn:active {
transform: scale(0.95);
}
.contact-btn svg {
width: 16px;
height: 16px;
}
.contact-btn.btn-wa {
background: linear-gradient(135deg, #25D366, #128C7E);
}
.contact-btn.btn-wa:hover {
box-shadow: 3px 5px 10px rgba(37, 211, 102, 0.4);
}
.contact-btn.btn-call {
background: linear-gradient(135deg, #0984e3, #6c5ce7);
}
.contact-btn.btn-call:hover {
box-shadow: 3px 5px 10px rgba(9, 132, 227, 0.4);
}
/* ------------------------------------- */
/* Carousel Overlays (Dots & Counter) */
/* ------------------------------------- */
.carousel-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 5;
background: rgba(0, 0, 0, 0.35);
padding: 6px 10px;
border-radius: 12px;
backdrop-filter: blur(2px);
}
.carousel-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
transition: all 0.25s ease;
}
.carousel-dot.active {
background: #ffffff;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
transform: scale(1.4);
}
.carousel-counter {
position: absolute;
bottom: 10px;
right: 12px;
color: white;
font-size: 0.70rem;
font-weight: 800;
background: rgba(0, 0, 0, 0.55);
padding: 4px 8px;
border-radius: 6px;
z-index: 5;
backdrop-filter: blur(4px);
pointer-events: none;
}
/* ------------------------------------- */
/* Fullscreen Lightbox Overlay */
/* ------------------------------------- */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.92);
z-index: 9999;
justify-content: center;
align-items: center;
flex-direction: column;
}
.lightbox.active {
display: flex;
}
.lightbox-img {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
transition: opacity 0.2s ease;
}
.lightbox-like {
position: absolute;
top: 25px;
left: 30px;
color: white;
background: transparent;
border: none;
width: 34px;
height: 34px;
cursor: pointer;
z-index: 10000;
transition: all 0.2s;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
outline: none;
}
.lightbox-like:hover {
transform: scale(1.15);
}
.lightbox-like:active {
transform: scale(0.9);
}
.lightbox-like.liked svg {
fill: #ff7675;
stroke: #ff7675;
}
.lightbox-like svg {
width: 100%;
height: 100%;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 50px;
font-weight: 300;
cursor: pointer;
z-index: 10000;
user-select: none;
transition: color 0.2s;
line-height: 1;
}
.lightbox-close:hover {
color: #ff7675;
}
.lightbox-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 24px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
backdrop-filter: blur(8px);
z-index: 10000;
}
.lightbox-btn:hover {
background: rgba(255, 255, 255, 0.35);
transform: translateY(-50%) scale(1.1);
}
.lightbox-btn.prev {
left: 4vw;
}
.lightbox-btn.next {
right: 4vw;
}
#lightbox-counter {
bottom: 30px;
right: auto;
font-size: 1rem;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.2);
}
/* ------------------------------------- */
/* COMPACTACIÓN EXTREMA MÓVIL (InfoWindows y Lightbox) */
/* ------------------------------------- */
@media (max-width: 768px) {
/* Evitar que se cree barra de scroll en la tarjeta reduciendo todas las alturas */
.info-window-content {
width: 250px !important;
}
.carousel-container {
height: 115px !important;
}
.amenidades-container {
padding: 5px 4px !important;
gap: 4px !important;
border-bottom: 1px solid #f1f3f5 !important;
}
.amenity-chip {
padding: 3px 6px !important;
font-size: 0.60rem !important;
}
.info-body {
padding: 8px 0 2px 0 !important;
}
.info-body h3 {
font-size: 0.95rem !important;
margin-bottom: 2px !important;
}
.info-price {
font-size: 0.9rem !important;
margin-bottom: 6px !important;
}
.info-grid {
gap: 6px !important;
}
.info-item {
padding: 4px 6px !important;
font-size: 0.75rem !important;
}
.info-item span {
font-size: 0.60rem !important;
margin-bottom: 2px !important;
}
.contact-actions {
margin-top: 8px !important;
padding-top: 8px !important;
}
.contact-btn {
padding: 8px 0 !important;
font-size: 0.75rem !important;
}
/* Arreglo Lightbox (Imagen se va para abajo) */
.lightbox {
height: 100dvh;
/* Adaptación a barra de dirección de iOS Safari */
}
.lightbox-img {
max-width: 95vw !important;
max-height: 70vh !important;
transform: translateY(-5%);
/* Compensa espacios de los controles para verse visualmente centrada */
}
/* Aniquilar la molesta barra de scroll horizontal nativa de Google Maps */
.gm-style-iw-d {
overflow-x: hidden !important;
}
}
/* ==========================================================================
SELLER DASHBOARD STYLES (SPA INTEGRATION)
========================================================================== */
#view-dashboard {
display: none;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 2000;
background: #f0f2f5;
flex-direction: row;
}
.admin-sidebar {
width: 250px;
min-width: 250px;
z-index: 10;
display: flex;
flex-direction: column;
padding: 1.5rem 1rem;
background: #282c34;
border-right: none;
color: #f5f6fa;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}
.admin-sidebar h2 {
color: #f5f6fa !important;
font-size: 1.5rem;
margin-bottom: 20px !important;
letter-spacing: 0px;
}
.admin-sidebar h2 span {
color: #6482e4 !important;
}
.admin-nav-item {
padding: 12px 14px;
margin-bottom: 5px;
border-radius: 8px;
cursor: pointer;
color: #b1b8c0;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s;
box-shadow: none !important;
}
.admin-nav-item:hover,
.admin-nav-item.active {
background: rgba(255, 255, 255, 0.1);
color: white !important;
box-shadow: none !important;
}
#submenu-registrar {
margin-left: 5px;
border-left: 2px solid rgba(255, 255, 255, 0.1);
padding-left: 10px;
margin-bottom: 10px;
font-size: 0.85rem;
}
.sub-nav-item {
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 2px;
cursor: pointer;
color: #b1b8c0;
transition: all 0.2s;
box-shadow: none !important;
}
.sub-nav-item:hover,
.sub-nav-item.submenu-active {
background: rgba(255, 255, 255, 0.15);
color: white !important;
font-weight: 600;
}
.admin-main {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
}
.admin-panel {
display: none;
width: 100%;
height: 100%;
position: relative;
flex-direction: column;
}
.admin-panel.active {
display: flex;
}
.panel-registrar-map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: #e5e3df;
}
.panel-registrar-form {
position: absolute;
top: 1.5rem;
left: 1.5rem;
bottom: 1.5rem;
width: 592px;
z-index: 5;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 1.5rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.hint-overlay {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 12px 24px;
border-radius: 30px;
font-weight: 700;
font-size: 0.8em;
color: #4a4a4a;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 10;
font-family: 'Inter', sans-serif;
border: 1px solid #eee;
display: flex;
align-items: center;
gap: 8px;
}
#map-picker,
#map-admin {
width: 100%;
height: 100%;
}
#mobile-map-container-slot {
display: none;
}
.section-title {
font-size: 0.95rem;
font-weight: 800;
color: #636e72;
margin-top: 15px;
margin-bottom: 8px;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.pill-checkbox-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pill-checkbox-container label {
cursor: pointer;
}
.pill-checkbox-container input[type="checkbox"] {
display: none;
}
.pill-checkbox {
display: inline-block;
background: #f1f3f5;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
color: #636e72;
border: 1px solid #e1e5e8;
transition: all 0.2s;
font-weight: 700;
}
.pill-checkbox-container input[type="checkbox"]:checked+.pill-checkbox {
background: #e8f0fe;
color: #2563eb;
border-color: #2563eb;
}
#panel-editar {
flex-direction: column;
padding: 2rem;
overflow-y: auto;
background: #f8f9fa;
width: 100%;
}
.soft-card-admin {
background: white;
padding: 12px 16px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid rgba(163, 177, 198, 0.4);
box-shadow: 2px 5px 15px rgba(163, 177, 198, 0.1);
transition: transform 0.2s;
margin-bottom: 10px;
cursor: pointer;
}
.soft-card-admin:hover {
transform: translateY(-2px);
border-color: #2563eb;
}
.soft-btn-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
background: white;
cursor: pointer;
transition: all 0.2s;
font-size: 1rem;
}
.soft-btn-icon:hover {
background: #2563eb;
color: white;
border-color: #2563eb;
transform: scale(1.1);
}
body.dark-mode .soft-btn-icon {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
/* Botón Editar - Personalizado para resaltar y funcionar en ambos temas */
.soft-btn-icon.edit {
background: rgba(9, 132, 227, 0.1);
color: #0984e3;
border-color: rgba(9, 132, 227, 0.2);
}
.soft-btn-icon.edit:hover {
background: #0984e3;
color: white;
border-color: #0984e3;
}
body.dark-mode .soft-btn-icon.edit {
background: rgba(100, 130, 228, 0.15);
color: #6482e4;
border-color: rgba(100, 130, 228, 0.25);
}
body.dark-mode .soft-btn-icon.edit:hover {
background: #6482e4;
color: white;
border-color: #6482e4;
}
/* Botón Estadísticas - Personalizado para ambos temas */
.soft-btn-icon.stats {
background: rgba(108, 92, 231, 0.1);
color: #6c5ce7;
border-color: rgba(108, 92, 231, 0.2);
}
.soft-btn-icon.stats:hover {
background: #6c5ce7;
color: white;
border-color: #6c5ce7;
}
body.dark-mode .soft-btn-icon.stats {
background: rgba(108, 92, 231, 0.15);
color: #a29bfe;
border-color: rgba(108, 92, 231, 0.25);
}
body.dark-mode .soft-btn-icon.stats:hover {
background: #6c5ce7;
color: white;
border-color: #6c5ce7;
}
/* Botón Borrar - Personalizado para ambos temas */
.soft-btn-icon.delete {
background: rgba(214, 48, 49, 0.1);
color: #d63031;
border-color: rgba(214, 48, 49, 0.2);
}
.soft-btn-icon.delete:hover {
background: #d63031;
color: white;
border-color: #d63031;
}
body.dark-mode .soft-btn-icon.delete {
background: rgba(214, 48, 49, 0.15);
color: #ff7675;
border-color: rgba(214, 48, 49, 0.25);
}
body.dark-mode .soft-btn-icon.delete:hover {
background: #d63031;
color: white;
border-color: #d63031;
}
/* Botón Compartir - Personalizado para ambos temas */
.soft-btn-icon.share {
background: rgba(0, 184, 148, 0.1);
color: #00b894;
border-color: rgba(0, 184, 148, 0.2);
}
.soft-btn-icon.share:hover {
background: #00b894;
color: white;
border-color: #00b894;
}
body.dark-mode .soft-btn-icon.share {
background: rgba(0, 184, 148, 0.15);
color: #00b894;
border-color: rgba(0, 184, 148, 0.25);
}
body.dark-mode .soft-btn-icon.share:hover {
background: #00b894;
color: white;
border-color: #00b894;
}
/* Dark Mode overrides for admin/edit panel */
body.dark-mode #panel-editar {
background: #121214 !important;
}
body.dark-mode #panel-editar h2 {
color: #f1f5f9 !important;
}
body.dark-mode #panel-editar p {
color: #94a3b8 !important;
}
body.dark-mode #bulk-actions-bar {
background: rgba(28, 28, 30, 0.8) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #bulk-actions-bar label {
color: #f1f5f9 !important;
}
body.dark-mode .soft-card-admin {
background: #1c1c1f !important;
border-color: rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .admin-card-title {
color: #f1f5f9 !important;
}
body.dark-mode .status-select-admin option {
background: #1e293b;
color: white;
}
@media (max-width: 768px) {
#view-dashboard {
flex-direction: column;
}
.admin-sidebar {
width: 100%;
min-width: 100%;
height: auto;
padding: 1rem;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-registrar-form {
width: 90%;
left: 5%;
bottom: 10px;
top: auto;
height: 60vh;
}
.admin-sidebar h2 {
margin-bottom: 10px !important;
}
/* Mobile overrides for list-edit panels and cards */
#panel-editar {
padding: 1rem !important;
}
.soft-card-admin {
flex-direction: column !important;
align-items: stretch !important;
padding: 12px !important;
gap: 12px !important;
}
.admin-card-actions {
justify-content: space-between !important;
width: 100% !important;
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding-top: 8px !important;
margin-top: 4px !important;
}
body.dark-mode .admin-card-actions {
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
}
/* ============================================
EDITOR OVERLAY & LIVE PREVIEW SYSTEM
============================================ */
.editor-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
animation: editorFadeIn 0.3s ease;
}
.editor-container {
width: 95%;
max-width: 1400px;
height: 90vh;
background: white;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.editor-header {
padding: 20px 40px;
border-bottom: 1px solid #f1f3f5;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
.editor-main-layout {
flex: 1;
display: flex;
overflow: hidden;
background: #f8f9fa;
}
.editor-controls-column {
flex: 1.2;
padding: 30px 40px;
overflow-y: auto;
border-right: 1px solid #eee;
}
.editor-preview-column {
flex: 1;
padding: 30px 40px;
background: #f1f3f5;
overflow-y: auto;
}
.preview-sticky-container {
position: sticky;
top: 0;
}
.preview-section-box {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
}
.preview-label {
display: block;
font-size: 0.75rem;
font-weight: 800;
color: #b2bec3;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
.preview-canvas-pin {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 12px;
border: 1px dashed #dfe6e9;
}
.preview-canvas-card {
min-height: 200px;
background: #f8f9fa;
border-radius: 12px;
border: 1px dashed #dfe6e9;
padding: 20px;
}
/* Quick Status Dropdown in List */
.status-select-admin {
background: #e8f0fe;
color: #2563eb;
border: 1px solid #2563eb;
border-radius: 20px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 800;
cursor: pointer;
outline: none;
transition: 0.2s;
appearance: none;
-webkit-appearance: none;
text-align: center;
}
.status-select-admin:hover {
background: #2563eb;
color: white;
}
@keyframes editorFadeIn {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 1024px) {
.editor-main-layout {
flex-direction: column;
}
.editor-preview-column {
order: -1;
flex: none;
height: 350px;
border-bottom: 1px solid #eee;
}
.preview-sticky-container {
position: relative;
}
}
/* --- Drag & Drop Image Feedback --- */
.preview-img-container {
transition: all 0.2s ease;
z-index: 1;
}
.preview-img-container:hover {
transform: scale(1.05);
z-index: 10;
}
.preview-img-container[draggable="true"]:active {
cursor: grabbing;
}
.preview-img-container.dragging {
opacity: 0.5 !important;
transform: scale(0.9) !important;
}
.btn-remove-img:hover {
background: #d63031 !important;
transform: scale(1.1);
}
/* Search Bar Enhancements (Icons inside) */
.search-bar-icon-left {
position: absolute;
left: 18px;
width: 22px;
height: 22px;
pointer-events: none;
z-index: 5;
stroke: white;
}
.search-bar-filter-btn {
position: relative;
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.15);
/* Dark transparent */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
z-index: 5;
backdrop-filter: blur(8px);
margin-left: 5px;
/* Spacing between buttons */
}
.search-bar-filter-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.05);
}
.search-bar-filter-btn:active {
transform: scale(0.95);
}
/* --- Map Nav Floating Controls (Premium Refined) --- */
#map-controls-vertical,
#map-picker-controls-vertical {
display: flex;
flex-direction: column;
gap: 12px;
}
.map-control-btn {
width: 52px;
height: 52px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
font-size: 1.5rem;
position: relative;
color: #2d3436;
}
.map-control-btn:hover {
transform: translateY(-3px) scale(1.05);
background: white;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
border-color: #6c5ce7;
}
.map-control-btn:active {
transform: scale(0.95);
}
.map-control-btn.active {
background: #6c5ce7;
color: white !important;
border-color: #6c5ce7;
}
.map-control-btn.active:hover {
background: #5b4bc4;
border-color: #5b4bc4;
}
/* Dynamic Map Controls Positioning */
.dynamic-map-controls {
position: absolute;
bottom: 30px;
right: 20px;
z-index: 2500;
display: flex;
flex-direction: column;
gap: 15px;
transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Shift left when catalog is active */
body.split-view-active .dynamic-map-controls {
right: calc(var(--catalog-width, 450px) + 50px); /* Al lado del catálogo (ancho dinámico + 50px de espacio libre) */
}
@media (max-width: 1024px) {
body.split-view-active .dynamic-map-controls {
right: 20px; /* En móvil no se desplazan */
}
}
/* Layer Menu Logic */
#layer-options-menu {
position: absolute;
right: 65px; /* Vuelve a abrir hacia la izquierda */
bottom: 0;
display: flex;
gap: 8px;
padding: 8px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: right center;
}
.layer-menu-hidden {
opacity: 0;
visibility: hidden;
transform: scale(0.8) translateX(20px);
pointer-events: none;
}
.layer-menu-visible {
opacity: 1;
visibility: visible;
transform: scale(1) translateX(0);
pointer-events: auto;
}
.layer-option-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.2s;
}
.layer-option-btn:hover {
background: #f1f3f5;
transform: scale(1.1);
}
.layer-option-btn.active {
background: #6c5ce7;
color: white;
border-color: #6c5ce7;
}
/* Tooltip enhancements */
.map-control-btn::after,
.layer-option-btn::after {
content: attr(data-tooltip);
position: absolute;
right: 65px;
background: rgba(45, 52, 54, 0.95);
color: white;
padding: 6px 12px;
border-radius: 8px;
font-size: 0.7rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: 0.2s;
font-weight: 700;
pointer-events: none;
/* [CRÍTICO] Evita bloquear clics en otros elementos */
z-index: 3000;
}
/* Tooltips específicos para los botones del menú de capas (arriba del botón) */
.layer-option-btn::after {
right: 50% !important;
transform: translateX(50%);
bottom: 55px;
left: auto;
}
.map-control-btn:hover::after,
.layer-option-btn:hover::after {
opacity: 1;
visibility: visible;
}
@media (max-width: 600px) {
#map-controls-vertical {
bottom: 95px;
right: 15px;
z-index: 2000;
}
.map-control-btn {
width: 48px;
height: 48px;
font-size: 1.3rem;
}
}
/* --- User Location Marker (Blue Dot) --- */
.user-location-marker {
width: 20px;
height: 20px;
background: #4285F4;
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1000;
}
.user-location-pulse-container {
position: relative;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.user-location-pulse {
position: absolute;
width: 24px;
height: 24px;
background: rgba(66, 133, 244, 0.45);
border-radius: 50%;
animation: user-pulse 2.2s infinite;
z-index: 1;
pointer-events: none;
}
.user-location-marker {
position: absolute;
width: 18px;
height: 18px;
background: #4285F4;
border: 3px solid white;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 15px rgba(66, 133, 244, 0.6);
}
@keyframes user-pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(4.5);
opacity: 0;
}
}
/* ==========================================================================
MESSAGE CENTER & MODERN CHAT STYLES
========================================================================== */
#message-center-view {
position: fixed !important;
top: 0;
left: 0;
width: 100vw !important;
height: auto;
bottom: 80px;
/* Space for bottom nav on mobile */
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(35px) saturate(200%);
-webkit-backdrop-filter: blur(35px) saturate(200%);
color: #2d3436;
z-index: 150000 !important;
display: none;
flex-direction: column;
animation: slideInFromRight 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.mc-container {
height: 100%;
max-height: 100vh;
overflow: hidden;
position: relative;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(35px) saturate(200%);
-webkit-backdrop-filter: blur(35px) saturate(200%);
}
/* DESKTOP LAYOUT (Grid) */
@media (min-width: 993px) {
#message-center-view {
top: 64px !important;
height: calc(100vh - 64px) !important;
bottom: 0 !important;
}
.mc-container {
display: grid !important;
grid-template-columns: 320px 1fr 250px !important;
}
.mc-threads {
grid-column: 1;
}
.mc-chat {
grid-column: 2;
}
.mc-profile {
grid-column: 3;
}
.mc-threads,
.mc-chat,
.mc-profile {
position: relative !important;
transform: none !important;
width: auto !important;
height: 100% !important;
left: auto !important;
top: auto !important;
}
}
/* MOBILE LAYOUT (Absolute Slider) */
@media (max-width: 992px) {
.mc-container {
display: block !important;
}
.mc-threads,
.mc-chat,
.mc-profile {
position: absolute !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
left: 0 !important;
z-index: 1;
}
.mc-threads {
transform: translateX(0);
z-index: 5;
}
.mc-chat {
transform: translateX(100%);
z-index: 10;
}
.mc-profile {
transform: translateX(200%);
z-index: 15;
}
.mc-container.chat-active .mc-chat {
transform: translateX(0) !important;
}
.mc-container.chat-active .mc-threads {
transform: translateX(-20%) !important;
opacity: 0 !important;
/* Total isolation */
visibility: hidden !important;
}
.mc-container.profile-active .mc-profile {
transform: translateX(0) !important;
display: flex !important;
/* Force display */
background: rgba(255, 255, 255, 0.6) !important;
z-index: 1000 !important;
visibility: visible !important;
opacity: 1 !important;
}
.mc-container.profile-active .mc-profile * {
opacity: 1 !important;
visibility: visible !important;
}
.mc-container.profile-active .mc-chat {
transform: translateX(-20%) !important;
opacity: 0 !important;
visibility: hidden !important;
}
}
/* Sidebar: Threads */
.mc-threads {
background: rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.mc-threads-header {
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.mc-threads-header h3 {
font-size: 1.1rem;
font-weight: 800;
}
#mc-threads-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
height: 100%;
min-height: 0;
/* Crucial para scroll en flex */
box-sizing: border-box;
}
/* Custom Scrollbars for Message Center */
#mc-threads-list::-webkit-scrollbar,
#mc-chat-messages::-webkit-scrollbar,
.mc-profile::-webkit-scrollbar {
width: 6px;
}
#mc-threads-list::-webkit-scrollbar-track,
#mc-chat-messages::-webkit-scrollbar-track,
.mc-profile::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
}
#mc-threads-list::-webkit-scrollbar-thumb,
#mc-chat-messages::-webkit-scrollbar-thumb,
.mc-profile::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
#mc-threads-list::-webkit-scrollbar-thumb:hover,
#mc-chat-messages::-webkit-scrollbar-thumb:hover,
.mc-profile::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.mc-thread-item {
padding: 15px;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 8px;
display: flex;
gap: 12px;
border: 1px solid transparent;
}
.mc-thread-item:hover {
background: rgba(0, 0, 0, 0.03);
}
.mc-thread-item.active {
background: rgba(108, 92, 231, 0.1);
border-color: rgba(108, 92, 231, 0.2);
}
.mc-thread-avatar {
width: 48px;
height: 48px;
border-radius: 12px;
object-fit: cover;
background: #f1f3f5;
}
.mc-thread-info {
flex: 1;
min-width: 0;
}
.mc-thread-name {
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc-thread-preview {
font-size: 0.75rem;
color: #636e72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Main Chat Area */
.mc-chat {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
/* Crucial for flex nested in grid */
background: rgba(255, 255, 255, 0.4);
/* Solid background to avoid overlap ghosting */
}
.mc-chat-header {
padding: 15px 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
#mc-header-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
#thread-title-admin {
margin: 0;
font-size: 1rem;
color: #2d3436;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#mc-chat-messages {
flex: 1;
min-height: 0;
/* Permite que el contenedor se encoja en vez de desbordar */
overflow-y: auto;
padding: 25px;
display: flex;
flex-direction: column;
gap: 15px;
}
.mc-bubble {
max-width: 80%;
padding: 12px 18px;
border-radius: 18px;
font-size: 0.95rem;
line-height: 1.4;
position: relative;
word-break: break-word;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.mc-bubble.in {
align-self: flex-start;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
color: #2d3436;
}
.mc-bubble.out {
align-self: flex-end;
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
border-bottom-right-radius: 4px;
color: white;
}
.mc-bubble-time {
font-size: 0.65rem;
opacity: 0.6;
margin-top: 5px;
display: block;
text-align: right;
}
/* Chat Input */
.mc-chat-input-wrapper {
width: 100% !important;
box-sizing: border-box !important;
align-self: stretch !important;
padding: 20px 25px;
background: rgba(255, 255, 255, 0.6);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mc-chat-input-box {
display: flex;
gap: 12px;
background: #ffffff;
padding: 8px 8px 8px 18px;
border-radius: 24px;
border: 1px solid rgba(0, 0, 0, 0.08);
width: 100%;
box-sizing: border-box;
}
.mc-chat-input-box input {
flex: 1;
background: transparent;
border: none;
color: #2d3436;
outline: none;
font-size: 0.95rem;
padding: 12px 0;
}
.mc-btn-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: #6c5ce7;
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Profile Reference Styles (Screenshot Sync) */
.mc-profile-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 18px;
padding: 22px 18px;
text-align: center;
width: 100%;
margin-bottom: 15px;
box-sizing: border-box;
overflow-wrap: anywhere;
}
.mc-profile-card label {
display: block;
font-size: 0.7rem;
font-weight: 800;
color: #636e72;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.mc-profile-card value {
display: block;
font-size: 1rem;
font-weight: 700;
color: #fff;
line-height: 1.4;
overflow-wrap: anywhere;
}
.mc-profile-back-btn {
align-self: flex-start;
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
padding: 12px 20px;
border-radius: 14px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 25px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.mc-profile-back-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
.mc-btn-archive {
width: 100%;
padding: 18px;
border-radius: 16px;
background: #ff4757;
color: white;
font-weight: 800;
font-size: 1.1rem;
border: none;
cursor: pointer;
margin-top: 20px;
transition: transform 0.2s;
box-shadow: 0 10px 30px rgba(255, 71, 87, 0.3);
}
.mc-btn-send:hover {
transform: scale(1.05);
background: #5b4cc4;
}
/* Right Panel: Profile */
.mc-profile {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
background: rgba(255, 255, 255, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.05);
overflow-y: auto;
box-sizing: border-box;
text-align: center;
}
.mc-profile-card {
text-align: center;
margin-bottom: 30px;
}
.mc-profile-pic {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid rgba(108, 92, 231, 0.3);
margin: 0 auto 15px auto;
display: block;
object-fit: cover;
}
.mc-profile-name {
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 5px;
}
.mc-profile-role {
font-size: 0.8rem;
color: #a4b0be;
text-transform: uppercase;
letter-spacing: 1px;
}
.mc-profile-section {
margin-top: 25px;
background: #ffffff;
padding: 18px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mc-profile-label {
font-size: 0.75rem;
color: #636e72;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
display: block;
}
.mc-profile-value {
font-size: 0.9rem;
font-weight: 600;
color: #2d3436;
line-height: 1.5;
word-break: break-all;
}
/* Responsive Adaptations */
/* Responsive Adaptations: Tiered Layout */
/* 1. Desktop Estrecho (1025px - 1400px) - Reducir anchos laterales */
@media (max-width: 1400px) {
.mc-container {
grid-template-columns: 280px 1fr 280px;
}
}
/* 2. Tablet (769px - 1024px) - Ocultar panel lateral derecho para priorizar chat */
@media (max-width: 1024px) {
.mc-container {
grid-template-columns: 300px 1fr;
}
.mc-profile {
display: none !important;
}
}
/* 3. Mobile ( < 768px) - Overlay de una sola columna */
@media (max-width: 768px) {
.mc-container {
display: block;
position: relative;
}
.mc-threads {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
transition: transform 0.3s ease;
background: #ffffff;
color: #2d3436;
}
.mc-threads-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.mc-container .admin-hamburger-btn,
#mc-threads-header .admin-hamburger-btn {
background: rgba(0, 0, 0, 0.05) !important;
border-color: rgba(0, 0, 0, 0.08) !important;
color: #2d3436 !important;
}
.mc-chat {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
border: none;
}
.mc-profile {
display: none;
z-index: 1000;
background: #ffffff;
color: #2d3436;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.mc-container.profile-active .mc-profile {
display: flex !important;
}
.mc-container.chat-active .mc-threads {
transform: translateX(-100%);
}
/* Asegurar que el botón de volver sea visible en móvil */
#mc-back-btn {
display: flex !important;
}
}
/* intl-tel-input Dark Mode Overrides */
.iti {
width: 100% !important;
display: block !important;
}
.iti__dropdown-content {
background-color: #1e272e !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-radius: 12px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}
.iti__country-list {
background-color: transparent !important;
color: #fff !important;
padding: 10px !important;
border: none !important;
}
.iti__country {
padding: 10px 15px !important;
border-radius: 8px !important;
}
.iti__country:hover,
.iti__country--highlight {
background-color: rgba(108, 92, 231, 0.2) !important;
}
.iti__selected-dial-code {
color: #fff !important;
font-weight: 600;
}
.iti__arrow {
border-top-color: #a4b0be !important;
}
.iti__arrow--up {
border-bottom-color: #a4b0be !important;
}
.iti__search-input {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-radius: 8px !important;
margin: 10px !important;
width: calc(100% - 20px) !important;
}
.iti__search-input:focus {
border-color: #6c5ce7 !important;
outline: none !important;
}
/* Global Unread Badge Styles */
.unread-badge {
position: absolute;
top: -5px;
right: -5px;
background: #ff4757;
color: white;
border-radius: 10px;
padding: 2px 6px;
font-size: 10px;
font-weight: 800;
min-width: 18px;
height: 18px;
display: none;
/* Hidden if 0 */
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 2px solid white;
z-index: 100;
pointer-events: none;
}
.admin-nav-item {
position: relative;
/* For badges */
}
/* --- Optimization: Migrated from app.js Geocoder Overrides --- */
.maplibregl-ctrl-geocoder,
.maptiler-ctrl-geocoder,
.maptiler-ctrl-geocoder form,
.maplibregl-ctrl-geocoder form,
.maptiler-gc-wrapper,
.maptiler-gc-input-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
max-width: none !important;
width: 100% !important;
}
/* Aggressive catch-all for any MapTiler internal elements that might have borders/backgrounds */
[id^="geocoder-wrapper"],
[id^="geocoder-wrapper"] *,
.maptiler-ctrl-geocoder,
.maptiler-ctrl-geocoder * {
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
background-color: transparent !important;
}
[id^="geocoder-wrapper"] .search-button,
[id^="geocoder-wrapper"] button.svelte-zh3kmv {
display: none !important;
}
[id^="geocoder-wrapper"] input,
.maplibregl-ctrl-geocoder input,
.maptiler-ctrl-geocoder input,
.maptiler-gc-input {
height: 52px !important;
padding: 12px 5px !important;
font-size: 1.05rem !important;
color: #2d3436 !important; /* Texto oscuro por defecto (Light Mode) */
font-weight: 500 !important;
outline: none !important;
border: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
background: transparent !important;
width: 100% !important;
pointer-events: auto !important;
cursor: text !important;
position: relative !important;
z-index: 100 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
body.dark-mode [id^="geocoder-wrapper"] input,
body.dark-mode .maplibregl-ctrl-geocoder input,
body.dark-mode .maptiler-ctrl-geocoder input,
body.dark-mode .maptiler-gc-input {
color: white !important;
}
[id^="geocoder-wrapper"] input::placeholder,
.maplibregl-ctrl-geocoder input::placeholder,
.maptiler-ctrl-geocoder input::placeholder {
color: rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode [id^="geocoder-wrapper"] input::placeholder,
body.dark-mode .maplibregl-ctrl-geocoder input::placeholder,
body.dark-mode .maptiler-ctrl-geocoder input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
/* --- Restablecer sugerencias clásicas blancas --- */
.maplibregl-ctrl-geocoder--results,
.maptiler-ctrl-geocoder--results,
.maptiler-gc-results,
[id^="geocoder-wrapper"] ul {
position: absolute !important;
top: 60px !important; /* Un poco más de espacio */
left: 0px !important;
width: 100% !important;
background: white !important;
border: 1px solid rgba(0,0,0,0.1) !important;
z-index: 2147483647 !important; /* Máximo posible */
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
border-radius: 16px !important;
padding: 10px 0 !important;
overflow: hidden !important;
list-style: none !important;
margin: 0 !important;
display: block !important;
}
}
.maplibregl-ctrl-geocoder--suggestion,
.maplibregl-ctrl-geocoder li,
.maptiler-ctrl-geocoder li,
.maptiler-gc-item {
padding: 12px 15px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
background: white !important;
color: #202124 !important;
border-bottom: 1px solid #eee !important;
transition: background 0.1s !important;
}
.maplibregl-ctrl-geocoder--suggestion:hover,
.maplibregl-ctrl-geocoder li:hover,
.maptiler-ctrl-geocoder li:hover {
background: #f1f3f4 !important;
}
.maplibregl-ctrl-geocoder--suggestion-title,
.primary {
font-size: 1rem !important;
font-weight: 700 !important;
color: #202124 !important;
display: block !important;
text-align: left !important;
}
.maplibregl-ctrl-geocoder--suggestion-address,
.secondary {
font-size: 0.85rem !important;
color: #70757a !important;
font-weight: 500 !important;
display: inline !important;
}
/* Icono clásico de marcador */
.maplibregl-ctrl-geocoder--suggestion::before,
.maplibregl-ctrl-geocoder li::before,
.maptiler-ctrl-geocoder li::before {
content: "📍" !important;
font-size: 1.1rem !important;
filter: grayscale(100%) brightness(0.6) !important;
opacity: 0.8 !important;
margin-right: 5px !important;
display: inline-block !important;
background: none !important;
}
.maplibregl-ctrl-geocoder--icon-search,
.maplibregl-ctrl-geocoder--icon-close,
.maplibregl-ctrl-geocoder--button {
display: none !important;
}
[id^="geocoder-wrapper"] *,
.maptiler-ctrl-geocoder *,
.maplibregl-ctrl-geocoder * {
outline: none !important;
box-shadow: none !important;
}
/* Force hide all MapTiler Geocoder accessories (buttons, icons, clear, search) */
[id^="geocoder-wrapper"] button,
[id^="geocoder-wrapper"] .maptiler-ctrl-icon,
[id^="geocoder-wrapper"] .maplibregl-ctrl-icon,
[id^="geocoder-wrapper"] .maptiler-ctrl-geocoder-icon,
[id^="geocoder-wrapper"] div[class*="button"],
[id^="geocoder-wrapper"] span[class*="icon"],
[id^="geocoder-wrapper"] svg,
.maptiler-ctrl-geocoder button,
.maptiler-ctrl-geocoder .maptiler-ctrl-icon {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Ensure the input itself takes the full space and remains visible */
[id^="geocoder-wrapper"] input {
background: transparent !important;
border: none !important;
width: 100% !important;
padding-left: 10px !important;
}
/* Final and definitive fix for the white rectangle/border in the search bar */
[id^="geocoder-wrapper"],
[id^="geocoder-wrapper"] div,
[id^="geocoder-wrapper"] form,
[id^="geocoder-wrapper"] section,
[id^="geocoder-wrapper"] input,
.maptiler-ctrl-geocoder,
.maptiler-ctrl-geocoder form,
.maptiler-gc-input-container,
.maptiler-gc-root,
.maptiler-ctrl-geocoder--input,
.maplibregl-ctrl-geocoder,
.maplibregl-ctrl-geocoder form {
background-color: transparent !important;
background: transparent !important;
border: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
[id^="geocoder-wrapper"] input:focus,
.maptiler-ctrl-geocoder input:focus,
.maplibregl-ctrl-geocoder input:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
/* 🟢 Restablecer fondo blanco SOLO para las sugerencias sin afectar la transparencia de la barra */
[id^="geocoder-wrapper"] .maplibregl-ctrl-geocoder--results,
[id^="geocoder-wrapper"] .maptiler-ctrl-geocoder--results,
[id^="geocoder-wrapper"] .maptiler-gc-results,
[id^="geocoder-wrapper"] ul,
[id^="geocoder-wrapper"] li {
background-color: white !important;
background: white !important;
border: 1px solid #ddd !important;
visibility: visible !important;
opacity: 1 !important;
}
[id^="geocoder-wrapper"] li:hover {
background-color: #f1f3f4 !important;
transform: none !important;
transition: background 0.1s ease !important;
}
/* 🚫 Estabilización total: Eliminar cualquier movimiento, icono extra o recuadro blanco residual */
[id^="geocoder-wrapper"] .maplibregl-ctrl-geocoder--results,
[id^="geocoder-wrapper"] .maptiler-ctrl-geocoder--results,
[id^="geocoder-wrapper"] .maptiler-gc-results,
[id^="geocoder-wrapper"] ul,
[id^="geocoder-wrapper"] li,
[id^="geocoder-wrapper"] li *,
.maplibregl-ctrl-geocoder--suggestion,
.maplibregl-ctrl-geocoder li,
.maptiler-ctrl-geocoder li,
.maptiler-gc-item {
transform: none !important;
transition: background 0.1s ease !important;
box-shadow: none !important;
}
[id^="geocoder-wrapper"] li,
.maplibregl-ctrl-geocoder li,
.maptiler-ctrl-geocoder li,
.maptiler-gc-item {
padding: 12px 15px !important;
/* Padding idéntico en normal y hover */
margin: 0 !important;
border: none !important;
border-bottom: 1px solid #eee !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Matar CUALQUIER icono o imagen de la librería para evitar duplicados y saltos */
[id^="geocoder-wrapper"] li img,
[id^="geocoder-wrapper"] li svg,
[id^="geocoder-wrapper"] li span[class*="icon"],
[id^="geocoder-wrapper"] li div[class*="icon"],
[id^="geocoder-wrapper"] li .maptiler-gc-icon {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Asegurar que el texto no tenga fondos propios que creen "cuadros blancos" */
[id^="geocoder-wrapper"] li .primary,
[id^="geocoder-wrapper"] li .secondary,
[id^="geocoder-wrapper"] li .texts,
[id^="geocoder-wrapper"] li div {
background: transparent !important;
background-color: transparent !important;
}
/* ============================================
MARKER PICKER STYLES (WIZARD STEP 3)
============================================ */
.custom-picker-marker {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
pointer-events: auto;
/* Permitir clics en el mapa a través del contenedor si es necesario */
}
/* El diseño real del PIN se mueve a un hijo para NO interferir con el transform del mapa */
.marker-pin {
width: 34px;
height: 34px;
background: #d63031;
border: 3px solid white;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
cursor: pointer;
box-shadow: 0 4px 12px rgba(214, 48, 49, 0.4);
display: flex;
align-items: center;
justify-content: center;
animation: markerDrop 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275);
pointer-events: auto;
position: relative;
}
.marker-pin::after {
content: '';
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
}
@keyframes markerDrop {
from {
transform: rotate(-45deg) translateY(-60px);
opacity: 0;
}
to {
transform: rotate(-45deg) translateY(0);
opacity: 1;
}
}
/* Efecto de pulso interactivo */
.marker-pin::before {
content: '';
position: absolute;
width: 45px;
height: 45px;
background: rgba(214, 48, 49, 0.25);
border-radius: 50%;
animation: markerPulse 2.5s infinite;
z-index: -1;
}
@keyframes markerPulse {
0% {
transform: scale(0.6);
opacity: 0.8;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
/* ============================================
[NUEVO] MOBILE BOTTOM SHEET STYLES
============================================ */
.mobile-sheet {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
border-radius: 28px 28px 0 0;
z-index: 5000;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 -15px 45px rgba(0, 0, 0, 0.15);
max-height: 70vh;
display: flex;
flex-direction: column;
pointer-events: auto;
visibility: hidden;
will-change: transform;
}
.mobile-sheet.dragging {
transition: none !important;
}
.mobile-sheet.active {
transform: translateY(0);
visibility: visible;
}
.sheet-handle {
width: 45px;
height: 5px;
background: #d1d8e0;
border-radius: 10px;
margin: 15px auto 10px;
flex-shrink: 0;
cursor: grab;
}
.sheet-handle:active {
cursor: grabbing;
}
.sheet-content {
flex: 1;
overflow: hidden;
/* Controlado por scroll-area interno */
display: flex;
flex-direction: column;
}
.sheet-scroll-area {
flex: 1;
overflow-y: auto;
padding: 0 20px 20px;
}
.sheet-fixed-footer {
padding: 15px 20px;
background: white;
border-top: 1px solid #f1f2f6;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.02);
}
.sheet-content::-webkit-scrollbar {
display: none;
}
/* Specific UI enhancements for Sheet Buttons (matched to screenshot) */
.btn-wa-sheet {
background: #008f6b !important;
/* Emerald green */
color: white !important;
height: 54px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 800;
font-size: 1rem;
text-decoration: none;
margin-bottom: 12px;
box-shadow: 0 4px 15px rgba(0, 143, 107, 0.2);
transition: transform 0.1s, opacity 0.2s;
}
.btn-details-sheet {
background: #3c348d !important;
/* Deep royal purple */
color: white !important;
height: 54px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 800;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 4px 15px rgba(60, 52, 141, 0.2);
transition: transform 0.1s, opacity 0.2s;
}
.btn-wa-sheet:active,
.btn-details-sheet:active {
transform: scale(0.97);
opacity: 0.9;
}
.sheet-price {
font-size: 1.6rem;
font-weight: 800;
color: #2d3436;
margin-bottom: 5px;
display: block;
}
.sheet-title {
font-size: 1rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 20px;
display: block;
}
/* Grid logic inside sheet */
.sheet-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 25px;
}
.sheet-info-item {
background: #f8f9fa;
padding: 12px 15px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 5px;
border: 1px solid #f1f3f5;
}
.sheet-info-item .label {
font-size: 0.75rem;
color: #a4b0be;
font-weight: 600;
}
.sheet-info-item .value {
font-size: 0.9rem;
color: #2d3436;
font-weight: 800;
}
.sheet-amenities-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* UI Unificación para Desktop - TARJETA FLOTANTE IZQUIERDA CENTRADA */
@media (min-width: 1025px) {
.mobile-sheet {
width: 440px !important;
left: 20px !important;
top: 130px !important; /* Debajo del header */
bottom: 20px !important;
height: auto !important;
transform: translateX(-20px) !important; /* Animación lateral solamente */
opacity: 0 !important;
border-radius: 32px !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
max-height: calc(100vh - 160px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
background: #ffffff !important;
}
.mobile-sheet.active {
transform: translateX(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
.sheet-handle {
display: none !important;
}
.sheet-close-btn-desktop {
display: flex !important;
}
}
.sheet-close-btn-desktop {
display: none;
/* Escondido en móvil por defecto */
background: #f1f2f6;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
align-items: center;
justify-content: center;
cursor: pointer;
color: #2d3436;
font-size: 1.2rem;
transition: all 0.2s;
border: 1px solid #dfe4ea;
}
.sheet-close-btn-desktop:hover {
background: #e1e2e6;
transform: rotate(90deg);
}
.sheet-amenity-chip {
background: #f1f2f6;
color: #2d3436;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #dfe4ea;
}
.sheet-heart-btn-circle {
background: #f1f2f6;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #a4b0be;
transition: all 0.2s;
border: 1px solid #dfe4ea;
}
.sheet-heart-btn-circle svg {
width: 22px;
height: 22px;
}
.sheet-heart-btn-circle.liked {
color: #ff4757;
background: #fff0f3;
border-color: #ffccd5;
}
.settings-card {
background: #ffffff;
width: 95%;
max-width: 600px;
height: 550px;
border-radius: 32px;
display: flex;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.08);
animation: settingsFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes settingsFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.settings-sidebar {
width: 80px;
background: #f8f9fa;
border-right: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
gap: 20px;
}
.settings-nav-item {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
}
.settings-nav-item:hover {
background: rgba(0, 0, 0, 0.05);
color: #1e293b;
}
.settings-nav-item.active {
background: #3367f6;
color: white;
box-shadow: 0 8px 20px rgba(51, 103, 246, 0.35);
}
.settings-main {
flex: 1;
display: flex;
flex-direction: column;
padding: 30px 40px;
position: relative;
background: #ffffff;
}
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.settings-header h2 {
font-size: 1.6rem;
font-weight: 800;
color: #1e293b;
margin: 0;
}
.settings-close-btn {
background: rgba(0, 0, 0, 0.05);
border: none;
color: #1e293b;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
font-weight: 800;
}
.settings-close-btn:hover {
background: rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}
.tab-title {
font-size: 1.3rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 25px;
letter-spacing: -0.5px;
}
.settings-tab-content {
display: none;
animation: tabFadeIn 0.3s ease;
}
.settings-tab-content.active {
display: block;
}
@keyframes tabFadeIn {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.settings-option-card {
background: #f8f9fa;
border-radius: 20px;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border: 1px solid rgba(0, 0, 0, 0.04);
transition: transform 0.2s, box-shadow 0.2s;
}
.settings-option-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
border-color: rgba(51, 103, 246, 0.1);
}
.option-info h4 {
font-size: 1rem;
font-weight: 800;
color: #1e293b;
margin: 0 0 6px 0;
}
.option-info p {
font-size: 0.85rem;
color: #64748b;
margin: 0;
font-weight: 500;
}
/* Modern Switches */
.modern-switch {
position: relative;
display: inline-block;
width: 46px;
height: 24px;
}
.modern-switch input {
opacity: 0;
width: 0;
height: 0;
}
.modern-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: .4s;
border-radius: 24px;
}
.modern-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #fff;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input:checked+.modern-slider {
background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
}
input:checked+.modern-slider:before {
transform: translateX(22px);
}
.settings-footer {
margin-top: auto;
padding-top: 20px;
display: flex;
justify-content: center;
}
.settings-save-btn {
background: linear-gradient(135deg, #3367f6 0%, #6c5ce7 100%);
color: white;
border: none;
padding: 16px 45px;
border-radius: 20px;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(51, 103, 246, 0.35);
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.settings-save-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(51, 103, 246, 0.45);
}
/* Mobile Bottom Navigation */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.88);
/* Premium light glassmorphism */
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-top: 1px solid rgba(0, 0, 0, 0.06);
z-index: 999999;
padding-bottom: env(safe-area-inset-bottom, 20px);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease;
}
.mobile-bottom-nav-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 80px;
padding: 0 5px;
}
.mobile-bottom-nav .nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #747d8c;
/* Soft grey for inactive */
text-decoration: none;
font-size: 0.65rem;
font-weight: 600;
gap: 4px;
flex: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
-webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav .nav-item svg {
width: 22px;
height: 22px;
stroke: currentColor;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0.85;
padding: 6px 14px;
border-radius: 20px;
box-sizing: content-box;
background: transparent;
}
.mobile-bottom-nav .nav-item:active {
transform: scale(0.92);
}
.mobile-bottom-nav .nav-item.active {
color: #3367f6;
/* Royal Blue */
}
.mobile-bottom-nav .nav-item.active span {
font-weight: 700;
color: #2d3436;
}
.mobile-bottom-nav .nav-item.active svg {
transform: translateY(-2px);
stroke-width: 2.5;
opacity: 1;
background: rgba(51, 103, 246, 0.08);
/* Soft premium light blue pill background */
color: #3367f6;
}
/* Force message badge border to white for light theme */
#nav-msg-badge {
border: 2px solid #ffffff !important;
}
/* Dark Mode overrides for Mobile Bottom Navigation */
body.dark-mode .mobile-bottom-nav {
background: rgba(18, 18, 20, 0.85);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
body.dark-mode .mobile-bottom-nav .nav-item {
color: #a4b0be;
}
body.dark-mode .mobile-bottom-nav .nav-item.active {
color: var(--accent);
}
body.dark-mode .mobile-bottom-nav .nav-item.active span {
color: var(--text-color);
}
body.dark-mode .mobile-bottom-nav .nav-item.active svg {
background: rgba(100, 130, 228, 0.12);
color: var(--accent);
}
body.dark-mode .mobile-bottom-nav #nav-publish svg {
background: rgba(100, 130, 228, 0.12) !important;
color: var(--accent) !important;
}
body.dark-mode #nav-msg-badge {
border: 2px solid #18181a !important;
}
@media (max-width: 1024px) {
.mobile-bottom-nav {
display: block;
}
/* Adjust map controls to not be hidden behind the taller nav bar */
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left,
.maptiler-ctrl-bottom-right,
.maptiler-ctrl-bottom-left,
#map-controls-vertical {
bottom: 120px !important;
transition: bottom 0.3s ease;
}
#floating-radius-controls {
bottom: 180px !important;
}
/* Prevent bottom sheet footer from being covered by the nav bar */
.sheet-fixed-footer {
padding-bottom: 110px !important;
}
}
/* ============================================
FULL SCREEN SEARCH LIST VIEW
============================================ */
/* ============================================
FULL SCREEN SEARCH LIST VIEW
============================================ */
/* Old catalog container rules removed */
.search-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 25px;
max-width: 1200px; /* Expandido para permitir más columnas */
margin: 0 auto;
padding: 20px;
padding-bottom: 60px;
}
.search-list-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.search-list-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.search-list-card-img {
width: 100%;
height: 220px;
object-fit: cover;
background: #dfe4ea;
}
.search-list-card-badge {
position: absolute;
top: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
color: #2d3436;
font-weight: 800;
font-size: 0.75rem;
padding: 6px 12px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.search-list-card-heart {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
color: #a4b0be;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-list-card-heart svg {
width: 18px;
height: 18px;
transition: fill 0.2s;
}
.search-list-card-heart.liked {
color: #ff4757;
}
.search-list-card-heart.liked svg {
fill: #ff4757;
}
.search-list-card-heart:hover {
transform: scale(1.1);
}
.search-list-card-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.search-list-card-price {
font-size: 1.5rem;
font-weight: 800;
color: #3367f6;
margin: 0;
}
.search-list-card-title {
font-size: 1rem;
font-weight: 600;
color: #2d3436;
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-list-card-features {
display: flex;
gap: 15px;
margin: 5px 0;
color: #636e72;
font-size: 0.85rem;
font-weight: 600;
}
.search-list-card-actions {
margin-top: 5px;
display: flex;
gap: 10px;
}
.search-list-btn-whatsapp {
flex: 1;
background: #25D366;
color: white;
border: none;
border-radius: 12px;
padding: 12px;
font-weight: 800;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
}
.search-list-btn-whatsapp:hover {
background: #128C7E;
}
.search-list-btn-details {
flex: 1;
background: #f1f2f6;
color: #2d3436;
border: none;
border-radius: 12px;
padding: 12px;
font-weight: 800;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.search-list-btn-details:hover {
background: #dfe4ea;
}
/* Desktop layout for cards */
@media (min-width: 768px) {
/* Optimized cards for side panels (Search & Favorites) */
#full-search-list-view .search-list-card,
#full-favorites-list-view .search-list-card {
flex-direction: row; /* Let's keep row but fix ratios */
height: 180px;
width: 100%;
border-radius: 20px;
background: white;
margin-bottom: 15px;
}
#full-search-list-view .search-list-card-img,
#full-favorites-list-view .search-list-card-img {
width: 150px; /* Smaller image to give room to text */
height: 100%;
}
#full-search-list-view .search-list-card-body,
#full-favorites-list-view .search-list-card-body {
padding: 12px 15px;
gap: 8px;
}
#full-search-list-view .search-list-card-price,
#full-favorites-list-view .search-list-card-price {
font-size: 1.2rem;
}
#full-search-list-view .search-list-card-title,
#full-favorites-list-view .search-list-card-title {
font-size: 0.9rem;
}
/* Standard desktop layout for cards elsewhere */
.search-list-card {
flex-direction: row;
height: 250px;
}
.search-list-card-img {
width: 350px;
height: 100%;
}
.search-list-card-body {
flex: 1;
justify-content: space-between;
}
.search-list-card-actions {
margin-top: 15px;
display: flex;
gap: 12px;
width: 100%;
}
.search-list-btn-whatsapp,
.search-list-btn-details {
flex: 1 !important;
padding: 12px 10px !important;
justify-content: center !important;
text-align: center !important;
font-size: 0.9rem !important;
white-space: nowrap;
}
}
/* Enforce scroll and body lock */
body.split-view-active {
overflow: hidden !important;
}
.full-search-list-container {
/* Ensure it has a way to scroll if children fail */
display: flex;
flex-direction: column;
@media (max-width: 768px) {
.auth-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.auth-overlay .auth-card {
width: 100% !important;
max-width: 100% !important;
border-radius: 32px 32px 0 0 !important;
margin: 0 !important;
transform: translateY(100%);
padding: 40px 25px 80px !important;
/* Extra padding en el fondo para áreas seguras */
max-height: 90vh !important;
overflow-y: auto !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.auth-overlay.active .auth-card {
transform: translateY(0);
}
/* Pequeña "agarradera" (pill) para indicar que se puede bajar */
.auth-overlay .auth-card::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 5px;
background: rgba(164, 176, 190, 0.5);
border-radius: 10px;
}
/* Premium mobile bottom-sheet styling for search filters modal */
.filter-modal-card {
width: 100% !important;
max-width: 100% !important;
border-radius: 32px 32px 0 0 !important;
margin: 0 !important;
transform: translateY(100%) !important;
padding: 30px 24px calc(25px + env(safe-area-inset-bottom, 20px)) !important;
max-height: 85vh !important;
display: flex !important;
flex-direction: column !important;
border: none !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.dark-mode .filter-modal-card {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body:not(.dark-mode) .filter-modal-card {
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.auth-overlay.active .filter-modal-card {
transform: translateY(0) !important;
}
.filter-modal-card::before {
content: '' !important;
position: absolute !important;
top: 12px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 40px !important;
height: 5px !important;
border-radius: 3px !important;
background: rgba(164, 176, 190, 0.4) !important;
}
.filter-modal-card .sheet-content {
max-height: 60vh !important;
overflow-y: auto !important;
padding-bottom: 20px !important;
}
}
/* Fix Settings Modal on Mobile (Center it instead of Bottom Sheet) */
#settings-modal {
align-items: center !important;
padding: 10px !important;
}
.settings-card {
flex-direction: row !important;
/* Mantener diseño web */
height: 550px !important;
/* Altura fija como en web */
max-height: 90vh;
width: 100% !important;
overflow: hidden !important;
}
.settings-sidebar {
flex-direction: column !important;
/* Mantener diseño web */
width: 60px !important;
/* Ligeramente más delgado para móvil */
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
border-bottom: none !important;
padding: 20px 0 !important;
justify-content: flex-start !important;
gap: 15px !important;
}
.settings-nav-item {
width: 40px !important;
height: 40px !important;
}
.settings-main {
padding: 20px 15px !important;
overflow-y: auto !important;
/* Permitir scroll solo en el contenido si es largo */
}
.settings-header {
margin-bottom: 20px !important;
}
.settings-header h2 {
font-size: 1.2rem !important;
}
}
/* Visibility Helpers */
.desktop-only {
display: none !important;
}
.mobile-only {
display: flex !important;
}
@media (min-width: 901px) {
.desktop-only {
display: flex !important;
}
.mobile-only {
display: none !important;
}
}
/* Botón Flotante de Catálogo (Nuevo) */
.floating-catalog-btn {
position: fixed;
top: 120px; /* Debajo del perfil/header */
right: 20px;
z-index: 5000;
display: none; /* Solo en desktop/map */
align-items: center;
gap: 10px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 100px;
color: var(--text-color);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1025px) {
.floating-catalog-btn {
display: flex;
}
}
.floating-catalog-btn:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
body.split-view-active .floating-catalog-btn,
body.hide-header-search .floating-catalog-btn,
#home-landing-view.active ~ #desktop-catalog-toggle,
#home-landing-view:not([style*="display: none"]) ~ #desktop-catalog-toggle {
display: none !important; /* Ocultar el botón cuando el panel está abierto, en publicar, o en el inicio (landing-page) */
}
#home-landing-view.active ~ .dynamic-map-controls,
#home-landing-view:not([style*="display: none"]) ~ .dynamic-map-controls {
display: none !important; /* Ocultar controles de mapa en la página de inicio (landing-page) */
}
.floating-catalog-btn svg {
transition: transform 0.3s ease;
}
.floating-catalog-btn.active svg {
transform: rotate(90deg);
}
/* Search Bar Fixes for Desktop */
@media (min-width: 769px) {
#top-search-container {
padding: 0 8px 0 18px !important;
gap: 5px;
}
[id^="geocoder-wrapper"] {
flex: 1;
min-width: 0;
}
[id^="geocoder-wrapper"] input {
width: 100% !important;
padding-right: 5px !important;
}
.search-bar-filter-btn {
flex-shrink: 0;
width: 36px !important;
height: 36px !important;
}
}
/* [NUEVO] HOME LANDING PAGE STYLES */
.landing-page-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #f8f9fa;
z-index: 50;
/* Below header, above map */
overflow-y: auto;
display: block; /* Visible por defecto en escritorio para carga instantánea */
}
@media (max-width: 1024px) {
.landing-page-container {
display: none; /* Oculto por defecto en móvil */
}
}
body.dark-mode .landing-page-container {
background: #0b0b0c;
}
/* Hero Section */
.hero-section {
position: relative;
width: 100%;
height: 75vh;
display: flex;
align-items: center;
justify-content: center;
overflow: visible; /* Allow suggestions to overflow */
}
.hero-bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; /* Clip the background here */
z-index: 1;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
animation: slowZoom 20s linear infinite alternate;
}
@keyframes slowZoom {
from {
transform: scale(1.0);
}
to {
transform: scale(1.1);
}
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
width: 90%;
max-width: 800px;
}
.hero-title {
font-size: 4.5rem;
font-weight: 900;
color: white;
line-height: 1.1;
margin-bottom: 40px;
letter-spacing: -2px;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.hero-search-container {
width: 100%;
display: flex;
justify-content: center;
position: relative;
z-index: 10000;
}
.premium-glass-search {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(25px) saturate(180%);
-webkit-backdrop-filter: blur(25px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
width: 100%;
max-width: 650px;
padding: 12px 12px 12px 30px;
display: flex;
align-items: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-glass-search:focus-within {
transform: translateY(-5px) scale(1.02);
background: rgba(255, 255, 255, 0.5);
border-color: white;
}
.premium-glass-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: white;
font-size: 1.2rem;
font-weight: 500;
}
.premium-glass-search input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.hero-search-btn {
background: white;
color: #1e293b;
border: none;
width: 54px;
height: 54px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.hero-search-btn:hover {
transform: scale(1.05);
background: #ff4757;
color: white;
}
/* Featured Section */
.featured-section {
padding: 80px 5% 100px;
}
.section-header {
display: flex;
align-items: flex-end;
margin-bottom: 40px;
position: relative;
}
.section-title {
font-size: 2.2rem;
font-weight: 800;
color: #1e293b;
margin-right: 20px;
}
body.dark-mode .section-title {
color: white;
}
.section-subtitle {
font-size: 1.1rem;
color: #64748b;
margin-bottom: 8px;
}
.section-nav-arrows {
margin-left: auto;
display: flex;
gap: 12px;
}
.arrow-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
body.dark-mode .arrow-btn {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
.arrow-btn:hover {
background: #ff4757;
color: white;
border-color: #ff4757;
}
.featured-scroll-row {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0 40px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.featured-scroll-row::-webkit-scrollbar {
display: none;
}
.property-glass-card {
min-width: 340px;
background: white;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s;
cursor: pointer;
}
body.dark-mode .property-glass-card {
background: #161619;
border-color: rgba(255, 255, 255, 0.05);
}
.property-glass-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}
.card-image {
width: 100%;
height: 220px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.property-glass-card:hover .card-image img {
transform: scale(1.1);
}
.card-info {
padding: 25px;
}
.card-info .price {
font-size: 1.6rem;
font-weight: 800;
color: #ff4757;
margin-bottom: 8px;
}
.card-info .details {
font-size: 0.95rem;
color: #64748b;
margin-bottom: 12px;
}
body.dark-mode .card-info .details {
color: #94a3b8;
}
.card-info .location {
font-size: 1.05rem;
font-weight: 600;
color: #1e293b;
}
body.dark-mode .card-info .location {
color: white;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-title {
font-size: 2.8rem;
letter-spacing: -1px;
}
.featured-section {
padding: 40px 5% 60px;
}
.property-glass-card {
min-width: 280px;
}
}
/* Hide headers when profile modal or settings modal is active */
body:has(#profile-modal.active) #main-header,
body:has(#settings-modal.active) #main-header,
body:has(#profile-modal.active) #top-nav-island,
body:has(#settings-modal.active) #top-nav-island {
display: none !important;
}
/* [NUEVO] PREMIUM GLASSMORMISM PROFILE MODAL */
.premium-profile-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
z-index: 9998; /* Debajo de la bottom nav (9999) */
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.premium-profile-modal-overlay.active {
display: flex;
opacity: 1;
}
.premium-profile-modal-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.5);
width: 90%;
max-width: 550px;
max-height: 85vh;
border-radius: 32px;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
from {
transform: scale(0.9) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
body.dark-mode .premium-profile-modal-card {
background: rgba(18, 18, 22, 0.95);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.profile-scroll-container {
padding: 50px 30px 40px;
overflow-y: auto;
flex: 1;
}
.profile-header-premium {
text-align: center;
margin-bottom: 35px;
}
.profile-img-wrapper {
position: relative;
width: 110px;
height: 110px;
margin: 0 auto 20px;
border-radius: 50%;
padding: 4px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
box-sizing: border-box;
}
.profile-img-wrapper img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--card-bg);
box-sizing: border-box;
}
.profile-img-edit-badge {
position: absolute;
bottom: 2px;
right: 2px;
background: #3b82f6;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--card-bg);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.profile-header-premium h2 {
font-size: 1.8rem;
font-weight: 900;
margin: 0 0 5px;
color: #1a1a1a;
letter-spacing: -0.5px;
}
body.dark-mode .profile-header-premium h2 {
color: white;
}
.profile-header-premium p {
color: #7f8c8d;
font-size: 0.9rem;
}
body.dark-mode .profile-header-premium p {
color: #94a3b8;
}
.profile-form-glass {
background: transparent;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding: 25px 0;
margin-bottom: 5px;
}
body.dark-mode .profile-form-glass {
border-top-color: rgba(255, 255, 255, 0.05);
}
.profile-field-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.profile-field-group label {
font-size: 0.7rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.glass-input,
.glass-input-readonly {
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 14px 16px;
border-radius: 16px;
font-size: 0.95rem;
color: #1a1a1a;
outline: none;
transition: all 0.2s;
}
body.dark-mode .glass-input {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: white !important;
}
.glass-input:focus {
border-color: #ff4757;
background: white;
}
body.dark-mode .glass-input:focus {
background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .glass-input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
.glass-input-readonly {
background: rgba(0, 0, 0, 0.06);
color: #7f8c8d;
}
body.dark-mode .glass-input-readonly {
background: rgba(0, 0, 0, 0.3);
}
.glass-select-wrapper select {
width: 100%;
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 14px 16px;
border-radius: 16px;
font-size: 0.95rem;
color: #1a1a1a;
appearance: none;
outline: none;
}
body.dark-mode .glass-select-wrapper select {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
.phone-input-glass-group {
display: flex;
gap: 12px;
width: 100%;
}
.phone-input-glass-group .iti,
.phone-input-glass-group .glass-input {
flex: 1;
width: 100%;
}
.whatsapp-verify-btn {
background: #2ecc71;
border: none;
border-radius: 16px;
width: 54px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
flex-shrink: 0;
}
.premium-save-btn {
width: 100%;
background: #ff4757;
color: white;
border: none;
border-radius: 20px;
padding: 18px;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 20px rgba(255, 71, 87, 0.2);
transition: all 0.3s;
margin-top: 10px;
}
.premium-save-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(255, 71, 87, 0.3);
}
.premium-profile-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
color: white;
border: none;
border-radius: 16px;
padding: 12px 24px;
font-size: 0.95rem;
font-weight: 800;
cursor: pointer;
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 5px;
text-transform: none;
letter-spacing: 0.5px;
}
.premium-profile-view-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(108, 92, 231, 0.4);
background: linear-gradient(135deg, #5f27cd 0%, #6c5ce7 100%);
}
.premium-profile-view-btn:active {
transform: scale(0.97);
}
/* [REFINAMIENTO] LANDING PAGE PREMIUM CAPSULE & CARDS */
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 50px;
font-weight: 500;
}
.premium-glass-capsule-search {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 100px;
width: 100%;
max-width: 850px;
padding: 10px 10px 10px 35px;
display: flex;
align-items: center;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 10001;
overflow: visible !important;
}
.search-type-toggle {
color: white;
font-weight: 700;
font-size: 0.9rem;
white-space: nowrap;
cursor: pointer;
padding: 0 10px;
}
.search-divider-v {
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
margin: 0 20px;
}
.premium-glass-capsule-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: white;
font-size: 1.1rem;
}
.hero-search-action-btn {
background: #ff4757;
color: white;
border: none;
padding: 15px 40px;
border-radius: 100px;
font-weight: 900;
font-size: 0.9rem;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
}
.hero-search-action-btn:hover {
transform: scale(1.05);
background: #ff3f4f;
box-shadow: 0 15px 35px rgba(255, 71, 87, 0.5);
}
/* Premium Property Cards */
.property-glass-card-premium {
min-width: 320px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
transition: all 0.4s;
}
body.dark-mode .property-glass-card-premium {
background: rgba(30, 41, 59, 0.7);
border-color: rgba(255, 255, 255, 0.05);
}
.property-glass-card-premium:hover {
transform: translateY(-15px);
background: white;
}
body.dark-mode .property-glass-card-premium:hover {
background: rgba(30, 41, 59, 0.9);
}
.card-wishlist {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.card-stats {
display: flex;
gap: 15px;
margin-bottom: 20px;
font-size: 0.85rem;
color: #64748b;
}
.card-detail-btn {
width: 100%;
background: #ff4757;
color: white;
border: none;
padding: 12px;
border-radius: 16px;
font-weight: 800;
cursor: pointer;
transition: 0.3s;
}
.card-detail-btn:hover {
background: #1e293b;
color: white;
}
/* [PERFECCIONAMIENTO] EXACT MOCKUP REPLICA STYLES */
.search-input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.search-icon-inside {
position: absolute;
right: 15px;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.premium-glass-capsule-search:focus-within .search-icon-inside {
color: white;
}
.card-stats span {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.card-stats svg {
width: 16px;
height: 16px;
opacity: 0.7;
}
.hero-bg {
filter: brightness(0.85);
/* Slightly darker to pop the text like the mockup */
}
/* Ensure the red button is exactly like the mockup */
.hero-search-action-btn {
padding: 18px 45px;
font-size: 0.95rem;
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
color: white;
font-weight: 900;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
transition: all 0.3s;
}
.hero-search-action-btn:hover {
background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
}
.property-glass-card-premium .price {
font-size: 1.4rem;
/* Match mockup size */
margin-bottom: 5px;
}
.property-glass-card-premium .location {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 15px;
}
body.dark-mode .property-glass-card-premium .location {
color: #94a3b8;
}
.card-detail-btn {
text-transform: none;
/* Mockup style */
letter-spacing: 0.5px;
}
/* [NUEVO] LANDING PAGE EXTENDED SECTIONS */
.hero-categories-container {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
position: relative;
z-index: 1;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s;
opacity: 0.8;
}
.category-item:hover {
transform: translateY(-5px);
opacity: 1;
}
.cat-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.category-item span {
color: white;
font-size: 0.85rem;
font-weight: 600;
}
/* Neighborhoods */
.neighborhoods-section {
padding: 80px 5%;
background: white;
}
body.dark-mode .neighborhoods-section {
background: #0b0b0c;
}
.neighborhoods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
@media (min-width: 1024px) {
.neighborhoods-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.neighbor-card {
position: relative;
height: 350px;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
}
.neighbor-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.neighbor-card:hover img {
transform: scale(1.1);
}
.neighbor-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
}
.neighbor-overlay h3 {
margin: 0;
font-size: 1.4rem;
}
.neighbor-overlay span {
font-size: 0.9rem;
opacity: 0.8;
}
/* Seller CTA Banner */
.seller-cta-section {
padding: 60px 1% 80px 1%; /* Reducido a 1% para hacerlo aún más ancho */
}
.cta-glass-banner {
background: #1e272e; /* Color más sólido y oscuro como la imagen */
border-radius: 40px;
display: flex;
align-items: center;
overflow: hidden;
color: white;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.cta-content {
flex: 1.2;
padding: 60px 80px;
}
.cta-content h2 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 900;
letter-spacing: -1.5px;
}
.cta-content p {
font-size: 1.2rem;
opacity: 0.8;
margin-bottom: 45px;
max-width: 550px;
line-height: 1.5;
}
.cta-action-btn {
background: #ff4757;
color: white;
border: none;
padding: 20px 50px;
border-radius: 20px;
font-weight: 900;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(255, 71, 87, 0.3);
}
.cta-action-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 71, 87, 0.4);
background: #ff6b81;
color: white;
}
.cta-image {
flex: 1;
height: 450px;
}
.cta-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Footer */
.landing-footer {
background: #ffffff;
padding: 100px 10% 60px 10%;
border-top: 1px solid #f8f9fa;
font-family: 'Inter', sans-serif;
}
body.dark-mode .landing-footer {
background: #000000;
border-color: rgba(255, 255, 255, 0.05);
}
.footer-grid {
display: grid;
grid-template-columns: 2.5fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 80px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.footer-brand img {
height: 32px;
margin-bottom: 25px;
}
.footer-brand p {
color: #7f8c8d;
font-size: 0.95rem;
max-width: 260px;
line-height: 1.5;
font-weight: 500;
}
.footer-links h4,
.footer-social h4 {
margin-bottom: 30px;
font-size: 1rem;
font-weight: 800;
color: #1e272e;
letter-spacing: -0.2px;
}
body.dark-mode .footer-links h4,
body.dark-mode .footer-social h4 {
color: #ffffff;
}
.footer-links a {
display: block;
color: #7f8c8d;
text-decoration: none;
margin-bottom: 18px;
transition: all 0.2s;
font-weight: 500;
font-size: 0.95rem;
}
.footer-links a:hover {
color: #1e272e;
}
body.dark-mode .footer-links a:hover {
color: #ffffff;
}
.social-icons span {
font-size: 0.9rem;
font-weight: 800;
color: #1e272e;
cursor: pointer;
transition: 0.2s;
opacity: 0.8;
}
body.dark-mode .social-icons span {
color: #ffffff;
}
.social-icons span:hover {
opacity: 1;
}
.footer-bottom {
text-align: center;
padding-top: 40px;
border-top: 1px solid #f1f3f5;
color: #95a5a6;
font-size: 0.85rem;
font-weight: 500;
}
body.dark-mode .footer-bottom {
border-color: rgba(255, 255, 255, 0.05);
}
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-brand p {
margin: 0 auto;
}
.social-icons {
justify-content: center;
}
}
@media (max-width: 900px) {
.cta-glass-banner {
flex-direction: column;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.hero-categories-container {
display: none;
}
}
/* [PERFECCIONAMIENTO] CONDITIONAL HEADER SEARCH VISIBILITY */
.hide-header-search .header-center {
display: none !important;
}
/* PREMIUM NOTIFICATION SIDE PANEL */
.notif-side-panel {
position: fixed;
top: 20px;
right: 20px;
width: 400px;
height: calc(100vh - 40px);
background: rgba(255, 255, 255, 0.95); /* Light Glass Version */
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 32px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12);
z-index: 200100 !important; /* Encima de todo, incluyendo cabecera y botón de perfil */
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
display: flex;
flex-direction: column;
color: #1e293b; /* Dark text for light background */
overflow: hidden;
}
body.dark-mode .notif-side-panel {
background: rgba(15, 23, 42, 0.85);
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
.notif-side-panel.active {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.notif-side-panel:not(.active) {
transform: translateX(20px);
opacity: 0;
pointer-events: none;
}
.notif-close-btn-fixed {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 14px;
color: #1e293b;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 11000;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode .notif-close-btn-fixed {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
.notif-close-btn-fixed:hover {
background: rgba(255, 71, 87, 0.2);
border-color: rgba(255, 71, 87, 0.3);
color: #ff4757;
transform: rotate(90deg);
}
.notif-panel-header {
padding: 30px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.notif-panel-header h2 {
margin: 0;
font-size: 1.6rem;
font-weight: 900;
color: #1e293b;
letter-spacing: -0.5px;
}
body.dark-mode .notif-panel-header h2 {
color: #ffffff;
}
.notif-close-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
width: 40px;
height: 40px;
border-radius: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.notif-close-btn:hover {
background: rgba(255, 71, 87, 0.2);
border-color: rgba(255, 71, 87, 0.3);
color: #ff4757;
transform: rotate(90deg);
}
.notif-panel-content {
flex: 1;
overflow-y: auto;
padding: 20px 25px;
}
.notif-section-title {
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #a4b0be;
margin: 25px 0 15px 0;
display: flex;
align-items: center;
gap: 10px;
}
.notif-card-premium {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.notif-card-premium:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.notif-user-name {
font-weight: 800;
color: #2d3436 !important;
margin: 0;
font-size: 0.95rem;
}
.notif-message-text {
font-size: 0.85rem;
color: #64748b;
margin: 2px 0;
line-height: 1.4;
font-weight: 500;
}
body.dark-mode .notif-message-text {
color: #94a3b8;
}
.notif-btn-action {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
color: #1e293b !important;
padding: 10px 20px;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.notif-btn-action:hover {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.notif-btn-action.primary {
background: linear-gradient(135deg, #3367f6 0%, #2563eb 100%);
border-color: #3b82f6;
color: white !important;
}
.notif-btn-action.primary:hover {
background: linear-gradient(135deg, #3b82f6 0%, #3367f6 100%);
box-shadow: 0 6px 15px rgba(51, 103, 246, 0.3);
}
/* RECOMMENDATIONS SECTION */
.recommendations-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.recommendation-card {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 15px;
height: 180px;
}
.recommendation-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommendation-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 15px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.featured-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 4px 12px;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 700;
color: white;
text-transform: uppercase;
}
body.dark-mode .notif-card-premium {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .notif-property-title,
body.dark-mode .notif-user-name {
color: white;
}
body.dark-mode .notif-footer {
border-color: rgba(255, 255, 255, 0.05);
}
/* [REFINAMIENTO] PREMIUM GLASS PROPERTY SHEET */
#property-bottom-sheet {
position: fixed;
bottom: 40px !important; /* Float above the bottom map area */
top: auto !important;
left: 20px !important;
width: 380px;
height: auto !important;
max-height: 80vh !important;
background: #ffffff !important; /* Keep it always light mode */
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 24px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
z-index: 5000 !important;
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1) !important;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(-120%) !important;
color: #2d3436 !important;
}
#property-bottom-sheet.active {
transform: translateX(0) !important;
}
body.dark-mode #property-bottom-sheet {
background: #ffffff !important; /* Keep it light mode as explicitly requested */
color: #2d3436 !important;
border-color: rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
}
#sheet-content-area {
height: 100%;
display: flex;
flex-direction: column;
}
.sheet-scroll-area {
flex: 1;
overflow-y: auto;
padding: 0 !important; /* No padding around the carousel */
}
.sheet-scroll-area::-webkit-scrollbar {
width: 6px;
}
.sheet-scroll-area::-webkit-scrollbar-track {
background: transparent;
}
.sheet-scroll-area::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.sheet-scroll-area::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
.sheet-price {
font-size: 1.8rem;
font-weight: 900;
color: #3367f6;
display: block;
letter-spacing: -0.5px;
}
.sheet-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
display: block;
margin-top: 4px;
line-height: 1.4;
}
.sheet-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 25px;
}
.sheet-info-item {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 16px;
border-radius: 18px;
display: flex;
flex-direction: column;
}
body.dark-mode .sheet-info-item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.sheet-info-item .label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: #636e72;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
body.dark-mode .sheet-info-item .label { color: #a4b0be; }
.sheet-info-item .value {
font-size: 1rem;
font-weight: 800;
color: var(--text-color);
}
.sheet-amenity-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(51, 103, 246, 0.1);
color: #3367f6;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
margin: 0 8px 8px 0;
border: 1px solid rgba(51, 103, 246, 0.15);
}
body.dark-mode .sheet-amenity-chip {
background: rgba(255, 255, 255, 0.08);
color: white;
border-color: rgba(255, 255, 255, 0.1);
}
.sheet-fixed-footer {
padding: 20px 25px 30px 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
gap: 12px;
}
body.dark-mode .sheet-fixed-footer {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.05);
}
.btn-wa-sheet {
flex: 1;
background: #00b894;
color: white;
text-decoration: none;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 800;
font-size: 0.95rem;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
}
.btn-wa-sheet:hover {
background: #00a884;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 184, 148, 0.4);
}
.btn-details-sheet {
flex: 1;
background: #3367f6;
color: white;
text-decoration: none;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.95rem;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(51, 103, 246, 0.3);
}
.btn-details-sheet:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(51, 103, 246, 0.4);
}
.sheet-close-btn-desktop {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.05);
border: none;
color: var(--text-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.sheet-close-btn-desktop:hover {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
transform: rotate(90deg);
}
.sheet-heart-btn-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 71, 87, 0.1);
border: none;
color: #ff4757;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.sheet-heart-btn-circle.liked {
background: #ff4757;
color: white;
}
@media (max-width: 1024px) {
#property-bottom-sheet {
top: auto !important;
bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important; /* Floats above bottom nav */
left: 16px !important;
right: 16px !important;
width: calc(100% - 32px) !important;
height: auto !important;
max-height: 55vh !important;
border-radius: 24px !important; /* Rounded corners on all sides */
background: #ffffff !important; /* Force light mode background */
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15) !important;
transform: translateY(150%) !important;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
z-index: 99988 !important; /* Above maps, below menus */
border: 1px solid rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
color: #2d3436 !important;
}
#property-bottom-sheet.active {
transform: translateY(0) !important;
}
body.dark-mode #property-bottom-sheet {
background: #ffffff !important; /* Keep it light mode as explicitly requested */
color: #2d3436 !important;
border-color: rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}
}
/* ============================================
BOTTOM SHEET MOBILE OPTIMIZATIONS
============================================ */
/* ============================================
BOTTOM SHEET WEB & MOBILE OPTIMIZATIONS
============================================ */
.sheet-scroll-area {
padding: 0 !important;
overflow-y: auto;
}
.sheet-carousel {
border-radius: 24px 24px 0 0 !important;
margin-bottom: 20px;
height: 240px;
overflow: hidden;
position: relative;
}
.sheet-body-content {
padding: 0 16px 16px 16px !important;
}
.sheet-price-title {
font-size: 1.8rem !important;
color: #2d3436 !important;
font-weight: 800 !important;
margin: 0;
line-height: 1.1;
}
body.dark-mode .sheet-price-title {
color: #2d3436 !important; /* Stay dark text inside the light-mode card */
}
.sheet-handle {
display: none !important; /* Hide drag handle for clean Zillow layout */
}
/* Elegant dots for sheet carousels */
.carousel-dots-container {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
background: rgba(0, 0, 0, 0.3);
padding: 4px 8px;
border-radius: 10px;
backdrop-filter: blur(4px);
}
.carousel-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transition: all 0.2s ease;
}
.carousel-dot.active {
background: #ffffff;
transform: scale(1.1);
width: 6px;
height: 6px;
}
/* Floating circular buttons over image */
.sheet-floating-btn {
position: absolute;
top: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 12;
color: #2d3436 !important;
transition: all 0.2s ease;
padding: 0;
outline: none;
}
.sheet-floating-btn:active {
transform: scale(0.9);
}
.sheet-floating-btn.liked {
color: #ff4757 !important;
}
.sheet-floating-btn.close-btn {
right: 12px;
font-size: 14px;
font-weight: bold;
}
.sheet-floating-btn.heart-btn {
right: 56px;
}
/* Price and ellipsis/dots row */
.sheet-price-menu-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.sheet-menu-container {
position: relative;
z-index: 99;
}
.sheet-menu-btn {
background: transparent;
border: none;
color: #2d3436;
cursor: pointer;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
outline: none;
}
.sheet-menu-btn:active {
background: rgba(0,0,0,0.06);
}
.sheet-dropdown-menu {
display: none;
position: absolute;
right: 0;
bottom: 40px; /* Open upwards since we are at the bottom of the screen */
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
z-index: 10000;
min-width: 180px;
overflow: hidden;
animation: fadeInDropdown 0.2s ease;
}
.sheet-dropdown-menu.active {
display: block;
}
.sheet-dropdown-menu a {
display: flex;
align-items: center;
padding: 12px 16px;
color: #2d3436 !important;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: background 0.2s;
border-bottom: 1px solid #f1f2f6;
}
.sheet-dropdown-menu a:last-child {
border-bottom: none;
}
.sheet-dropdown-menu a:hover, .sheet-dropdown-menu a:active {
background: #f8f9fa;
}
/* Features, address, seller typography */
.sheet-features-line {
font-size: 0.85rem;
color: #636e72;
margin-bottom: 6px;
font-weight: 500;
line-height: 1.4;
}
.sheet-features-line b {
color: #2d3436;
font-weight: 700;
}
.sheet-address-line {
font-size: 0.85rem;
color: #636e72;
margin-bottom: 6px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.sheet-seller-line {
font-size: 0.72rem;
color: #b2bec3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
line-height: 1.3;
}
/* Actions buttons row at the bottom of mobile card */
.sheet-actions-row-mobile {
display: flex;
gap: 10px;
margin-top: 15px;
z-index: 10;
}
.sheet-btn-action-mobile {
flex: 1;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.2s ease;
}
.sheet-btn-action-mobile.whatsapp {
background: rgba(0, 184, 148, 0.1);
color: #00b894 !important;
border: 1px solid rgba(0, 184, 148, 0.15);
}
.sheet-btn-action-mobile.whatsapp:active {
background: rgba(0, 184, 148, 0.2);
}
.sheet-btn-action-mobile.details {
background: rgba(51, 103, 246, 0.1);
color: #3367f6 !important;
border: 1px solid rgba(51, 103, 246, 0.15);
}
.sheet-btn-action-mobile.details:active {
background: rgba(51, 103, 246, 0.2);
}
@keyframes fadeInDropdown {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
.sheet-carousel {
height: 200px !important;
margin-bottom: 15px;
}
.sheet-price-title {
font-size: 1.7rem !important;
}
}
/* ============================================
DESKTOP SPLIT-VIEW CATALOG (SIDE PANEL)
============================================ */
.full-search-list-container {
position: fixed;
top: 120px; /* Debajo de la cabecera */
right: 20px;
bottom: 20px;
width: var(--catalog-width, 450px);
max-width: 80vw;
min-width: 320px;
background: rgba(255, 255, 255, 0.95); /* Light Glass Version */
backdrop-filter: blur(45px) saturate(210%);
-webkit-backdrop-filter: blur(45px) saturate(210%);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 32px;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
z-index: 99999 !important;
display: none; /* Se activa con .split-view-active */
flex-direction: column;
overflow-y: auto !important;
overflow-x: hidden !important;
pointer-events: auto !important;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}
/* Resizer handle */
.sidebar-resizer {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 10px;
cursor: ew-resize;
z-index: 10;
transition: background 0.2s;
}
.sidebar-resizer:hover {
background: rgba(51, 103, 246, 0.1);
}
body.dark-mode .sidebar-resizer:hover {
background: rgba(255, 255, 255, 0.1);
}
body.resizing-catalog {
cursor: ew-resize;
user-select: none;
}
body.dark-mode .full-search-list-container {
background: rgba(15, 23, 42, 0.9);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}
/* Header del catálogo */
.catalog-sidebar-header {
padding: 30px 25px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .catalog-sidebar-header {
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.catalog-sidebar-header h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-color);
margin: 0;
}
/* Lista/Grid dinámico para el sidebar */
.search-results-grid {
flex: 1;
min-height: 0;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 25px;
padding-bottom: 150px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-content: flex-start;
background: #f8f9fa;
}
.catalog-section-title {
width: 100%;
/* En modo flex-wrap, forzamos que el título ocupe toda la fila */
flex-basis: 100%;
padding: 15px 25px;
margin: 20px 0 10px;
font-size: 1.1rem;
font-weight: 800;
color: #3367f6;
border-left: 4px solid #3367f6;
background: rgba(51, 103, 246, 0.05);
border-radius: 0 12px 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body.dark-mode .catalog-section-title {
background: rgba(255, 255, 255, 0.05);
color: #6482e4;
}
#full-search-results-container .search-list-card {
width: 100% !important;
max-width: 420px;
justify-self: center;
background: white;
border-radius: 32px;
overflow: hidden;
height: auto !important;
flex-shrink: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.02);
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
#full-search-results-container .search-list-card .search-list-card-body {
justify-content: flex-start !important;
gap: 15px;
}
#full-search-results-container .search-list-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
#full-search-results-container::-webkit-scrollbar {
width: 8px;
}
#full-search-results-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
#full-search-results-container::-webkit-scrollbar-thumb {
background: rgba(51, 103, 246, 0.3);
border-radius: 10px;
}
#full-search-results-container::-webkit-scrollbar-thumb:hover {
background: rgba(51, 103, 246, 0.5);
}
/* Ajustes cuando el modo split-view está activo */
@media (min-width: 1025px) {
body.split-view-active #map {
width: 100% !important;
left: 0 !important;
border-radius: 0 !important;
top: 0 !important;
height: 100vh !important;
box-shadow: none !important;
}
body.split-view-active .full-search-list-container {
display: flex;
z-index: 4000; /* Superposición sobre el mapa */
animation: slideInRightCatalog 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
}
@keyframes slideInRightCatalog {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Botón de cierre del catálogo */
.catalog-close-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.05); /* Más sutil y elegante */
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
z-index: 1000;
}
.catalog-close-btn:hover {
transform: scale(1.1) rotate(90deg);
background: #3367f6;
color: white;
box-shadow: 0 4px 15px rgba(51, 103, 246, 0.3);
}
.catalog-close-btn:active {
transform: scale(0.95);
}
/* Estilos de las tarjetas del buscador (List View) */
.search-list-card {
background: white;
width: 380px; /* Tamaño fijo para consistencia */
border-radius: 20px;
overflow: hidden;
border: 1px solid #f1f3f5;
transition: all 0.3s;
cursor: pointer;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
body.dark-mode .search-list-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.08);
}
.search-list-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.1);
border-color: var(--accent);
}
.search-list-card-img {
width: 100%;
height: 180px;
object-fit: cover;
}
.search-list-card-body {
padding: 15px;
}
.search-list-card-price {
font-size: 1.25rem;
font-weight: 800;
color: var(--accent);
margin-bottom: 5px;
}
.search-list-card-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-list-card-features {
display: flex;
gap: 12px;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 15px;
}
.search-list-card-actions {
display: flex;
gap: 10px;
}
.search-list-btn-details {
flex: 1;
background: #f1f3f5;
color: #2d3436;
text-decoration: none;
padding: 8px;
border-radius: 10px;
text-align: center;
font-size: 0.85rem;
font-weight: 700;
transition: all 0.2s;
}
.search-list-btn-details:hover {
background: var(--accent);
color: white;
}
.search-list-btn-whatsapp {
background: #00b894;
color: white;
width: 40px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.search-list-card-heart {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ff4757;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
z-index: 5;
}
.search-list-card-heart.liked {
background: #ff4757;
color: white;
}
@media (max-width: 1024px) {
#full-search-list-view.full-search-list-container,
#full-favorites-list-view.full-search-list-container {
width: 100vw !important;
height: calc(100vh - 80px - env(safe-area-inset-bottom, 20px)) !important;
height: calc(100dvh - 80px - env(safe-area-inset-bottom, 20px)) !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
border-radius: 0 !important;
z-index: 2005 !important;
display: none;
flex-direction: column !important;
max-width: none !important;
min-width: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important; /* Ensure internal scrolling only */
}
body:not(.dark-mode) #full-search-list-view.full-search-list-container,
body:not(.dark-mode) #full-favorites-list-view.full-search-list-container {
background: #f0f2f5 !important;
}
body.dark-mode #full-search-list-view.full-search-list-container,
body.dark-mode #full-favorites-list-view.full-search-list-container {
background: #0b0b0c !important;
}
#full-search-list-view.full-search-list-container.active,
#full-favorites-list-view.full-search-list-container.active {
display: flex !important;
}
#full-search-results-container.search-results-grid,
#full-favorites-results-container.search-results-grid {
display: block !important;
padding: 10px 0 120px 0 !important; /* Safety padding so last cards scroll fully */
width: 100% !important;
flex: 1 !important;
height: auto !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
background: transparent !important;
touch-action: pan-y !important;
}
#full-search-results-container .catalog-section-title {
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
padding: 12px 25px !important;
margin: 15px 0 10px 0 !important;
font-size: 1rem !important;
background: rgba(51, 103, 246, 0.05) !important;
border-left: 4px solid #3367f6 !important;
}
#full-search-results-container .search-list-card,
#full-favorites-results-container .search-list-card {
display: flex !important;
flex-direction: row !important; /* Horizontal layout */
width: calc(100% - 32px) !important;
max-width: none !important;
height: auto !important;
min-height: 140px !important;
margin: 12px 16px !important; /* Floating card style */
padding: 12px !important;
border-radius: 20px !important; /* Rounded corners like vendedor form card */
overflow: visible !important;
border: none !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
body:not(.dark-mode) #full-search-results-container .search-list-card,
body:not(.dark-mode) #full-favorites-results-container .search-list-card {
background: #ffffff !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}
body.dark-mode #full-search-results-container .search-list-card,
body.dark-mode #full-favorites-results-container .search-list-card {
background: #1c1c1e !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
#full-search-results-container .search-list-card-img,
#full-favorites-results-container .search-list-card-img {
width: 110px !important;
height: 110px !important;
margin: 0 !important;
border-radius: 12px !important; /* Rounded image */
object-fit: cover !important;
flex-shrink: 0 !important;
}
#full-search-results-container .search-list-card-body,
#full-favorites-results-container .search-list-card-body {
padding: 0 0 0 15px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
overflow: hidden !important;
min-width: 0 !important;
}
#full-search-results-container .search-list-card-price,
#full-favorites-results-container .search-list-card-price {
font-size: 1.1rem !important;
margin-bottom: 2px !important;
}
#full-search-results-container .search-list-card-title,
#full-favorites-results-container .search-list-card-title {
font-size: 0.85rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#full-search-results-container .search-list-card-features,
#full-favorites-results-container .search-list-card-features {
font-size: 0.75rem !important;
gap: 8px !important;
}
#full-search-results-container .search-list-card-actions,
#full-favorites-results-container .search-list-card-actions {
margin-top: 8px !important;
gap: 8px !important;
}
#full-search-results-container .search-list-btn-details,
#full-search-results-container .search-list-btn-whatsapp,
#full-favorites-results-container .search-list-btn-details,
#full-favorites-results-container .search-list-btn-whatsapp {
padding: 6px 10px !important;
font-size: 0.75rem !important;
border-radius: 8px !important;
}
}
/* --- [NUEVO] ESTILOS PARA MODAL LEGAL PREMIUM --- */
.loading-spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(51, 103, 246, 0.1);
border-top: 3px solid #3367f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.legal-modal-inner-content {
color: #a4b0be;
font-size: 0.95rem;
line-height: 1.7;
animation: fadeIn 0.4s ease-out;
}
.legal-modal-inner-content h2 {
color: #3367f6 !important;
font-size: 1.2rem;
margin: 25px 0 10px 0;
font-weight: 700;
}
.legal-modal-inner-content p {
margin-bottom: 15px;
color: #a4b0be !important;
}
.legal-modal-inner-content b,
.legal-modal-inner-content strong {
color: #ffffff;
}
.legal-modal-inner-content ul {
padding-left: 20px;
margin-bottom: 20px;
}
.legal-modal-inner-content li {
margin-bottom: 8px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- [NUEVO] ESTILOS PREMIUM PARA BOTONES DE LA FICHA (SHEET) --- */
.sheet-fixed-footer {
display: flex;
gap: 15px;
padding: 20px 25px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(0, 0, 0, 0.05);
position: sticky;
bottom: 0;
z-index: 10;
}
.btn-wa-sheet, .btn-details-sheet {
flex: 1;
height: 54px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-weight: 800;
font-size: 0.95rem;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.btn-wa-sheet {
background: linear-gradient(135deg, #00b894 0%, #00d285 100%);
color: white;
}
.btn-wa-sheet:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(0, 184, 148, 0.3);
filter: brightness(1.1);
}
.btn-details-sheet {
background: linear-gradient(135deg, #3367f6 0%, #2563eb 100%);
color: white;
}
.btn-details-sheet:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(51, 103, 246, 0.3);
filter: brightness(1.1);
}
.btn-wa-sheet:active, .btn-details-sheet:active {
transform: translateY(-1px);
}
/* --- [REFINAMIENTO TOTAL] DISEÑO CALCADO DE LA IMAGEN DE REFERENCIA --- */
/* Grid de Cajas (Terreno, Construido, etc) */
.sheet-boxy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
.boxy-item {
background: #f8f9fa;
border-radius: 16px;
padding: 15px 18px;
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid rgba(0,0,0,0.02);
}
body.dark-mode .boxy-item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.boxy-label {
font-size: 0.75rem;
font-weight: 700;
color: #a4b0be;
}
.boxy-value {
font-size: 1rem;
font-weight: 800;
color: #2d3436;
}
body.dark-mode .boxy-value {
color: #ffffff;
}
@media (max-width: 1024px) {
.sheet-boxy-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 8px;
}
.boxy-item {
padding: 8px 10px;
border-radius: 12px;
align-items: center;
text-align: center;
}
.boxy-label {
font-size: 0.65rem;
}
.boxy-value {
font-size: 0.85rem;
}
}
/* Botones Superiores (Corazón y X) */
.sheet-top-action-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #f1f3f5;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #2d3436;
cursor: pointer;
transition: all 0.2s;
}
.sheet-top-action-btn svg {
width: 20px;
height: 20px;
}
.sheet-top-action-btn:hover {
background: #e9ecef;
transform: scale(1.05);
}
.sheet-top-action-btn.liked {
color: #ff4757;
background: rgba(255, 71, 87, 0.1);
}
/* Chips de Amenidades */
.sheet-amenities-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sheet-amenity-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #ffffff;
border: 1px solid #dfe4ea;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 700;
color: #2d3436;
}
/* Footer Apilado (Botones Grandes) */
.sheet-stacked-footer {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 25px;
background: #ffffff;
border-top: 1px solid #f1f2f6;
}
body.dark-mode .sheet-stacked-footer {
background: rgba(15, 23, 42, 0.95);
border-top-color: rgba(255, 255, 255, 0.05);
}
@media (max-width: 1024px) {
.sheet-stacked-footer {
flex-direction: row;
gap: 12px;
padding: 15px 20px;
padding-bottom: 95px; /* Espacio para la bottom nav */
}
.btn-wa-stacked, .btn-details-stacked {
width: auto;
flex: 1;
height: 50px;
font-size: 0.9rem;
border-radius: 14px;
white-space: nowrap;
}
}
.btn-wa-stacked, .btn-details-stacked {
width: 100%;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-weight: 800;
font-size: 1rem;
transition: all 0.3s;
}
.btn-wa-stacked {
background: #009473;
color: white;
}
.btn-wa-stacked:hover {
background: #00a37e;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 148, 115, 0.2);
}
.btn-details-stacked {
background: #3c3b8a;
color: white;
}
.btn-details-stacked:hover {
background: #4a49a5;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(60, 59, 138, 0.2);
}
/* ============================================
ULTIMATE REFINEMENT: SIDE PANEL CARDS
(Search & Favorites) - GOLD STANDARD
============================================ */
@media (min-width: 1025px) {
#full-search-list-view .search-list-card,
#full-favorites-list-view .search-list-card {
display: flex !important;
flex-direction: row !important;
width: calc(100% - 30px) !important;
max-width: 450px !important;
height: 195px !important;
margin: 0 auto 12px auto !important;
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 24px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.04) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
}
#full-search-list-view .search-list-card:hover,
#full-favorites-list-view .search-list-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
border-color: #3367f6 !important;
}
/* Image Container in Side Panel */
#full-search-list-view .search-list-card-img,
#full-favorites-list-view .search-list-card-img {
width: 140px !important;
height: 100% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
/* Body in Side Panel */
#full-search-list-view .search-list-card-body,
#full-favorites-list-view .search-list-card-body {
flex: 1 !important;
padding: 12px 15px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 0 !important;
overflow: hidden !important;
}
#full-search-list-view .search-list-card-price,
#full-favorites-list-view .search-list-card-price {
font-size: 1.15rem !important;
font-weight: 900 !important;
color: #3367f6 !important;
margin: 0 0 4px 0 !important;
}
#full-search-list-view .search-list-card-title,
#full-favorites-list-view .search-list-card-title {
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #1e293b !important;
margin: 0 !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
min-height: 2.6em !important;
}
#full-search-list-view .search-list-card-features,
#full-favorites-list-view .search-list-card-features {
display: flex !important;
gap: 12px !important;
margin: 6px 0 !important;
font-size: 0.78rem !important;
color: #64748b !important;
font-weight: 700 !important;
}
/* Actions in Side Panel */
#full-search-list-view .search-list-card-actions,
#full-favorites-list-view .search-list-card-actions {
display: flex !important;
gap: 8px !important;
margin-top: auto !important;
padding-top: 10px !important;
}
#full-search-list-view .search-list-btn-details,
#full-favorites-list-view .search-list-btn-details,
#full-search-list-view .search-list-btn-whatsapp,
#full-favorites-list-view .search-list-btn-whatsapp {
height: 38px !important;
border-radius: 12px !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s !important;
text-decoration: none !important;
}
#full-search-list-view .search-list-btn-details,
#full-favorites-list-view .search-list-btn-details {
flex: 1.2 !important;
background: #f1f5f9 !important;
color: #1e293b !important;
width: auto !important;
}
#full-search-list-view .search-list-btn-whatsapp,
#full-favorites-list-view .search-list-btn-whatsapp {
flex: 1 !important;
background: #25D366 !important;
color: white !important;
width: auto !important; /* FIXED: Was square 40px */
}
#full-search-list-view .search-list-btn-whatsapp svg,
#full-favorites-list-view .search-list-btn-whatsapp svg {
width: 14px !important;
height: 14px !important;
margin-right: 4px !important;
}
#full-search-list-view .search-list-btn-details:hover {
background: #e2e8f0 !important;
}
#full-search-list-view .search-list-btn-whatsapp:hover {
background: #1eb956 !important;
}
/* Badge & Heart Position Fix */
#full-search-list-view .search-list-card-badge,
#full-favorites-list-view .search-list-card-badge {
top: 10px !important;
left: 10px !important;
font-size: 0.65rem !important;
padding: 4px 10px !important;
}
#full-search-list-view .search-list-card-heart,
#full-favorites-list-view .search-list-card-heart {
top: 10px !important;
right: auto !important;
left: 98px !important;
width: 32px !important;
height: 32px !important;
}
body.dark-mode #full-search-list-view .search-list-card,
body.dark-mode #full-favorites-list-view .search-list-card {
background: #1e293b !important;
border-color: rgba(255,255,255,0.08) !important;
}
body.dark-mode #full-search-list-view .search-list-card-title,
body.dark-mode #full-favorites-list-view .search-list-card-title {
color: #f1f5f9 !important;
}
body.dark-mode #full-search-list-view .search-list-btn-details,
body.dark-mode #full-favorites-list-view .search-list-btn-details {
background: rgba(255,255,255,0.1) !important;
color: white !important;
}
} /* End of min-width: 1025px */
/*
==========================================================================
CLEAN SEARCH: Hiding disruptive SDK messages
==========================================================================
*/
.predict-message,
.maptiler-geocoding-error,
.maptiler-geocoding-no-results,
.maptiler-gc-error,
.maptiler-geocoder-error,
.maptiler-geocoding-results-list + p,
.maptiler-geocoding-results-list p,
.maptiler-geocoding-results p {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide mobile search overlay on desktop by default */
.mobile-search-overlay {
display: none;
}
/* ==========================================================================
SUPER-SEARCH OVERLAY (MOBILE ONLY)
========================================================================== */
@media (max-width: 1024px) {
.mobile-search-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
z-index: 2000000; /* Over everything */
flex-direction: column;
animation: msFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes msFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.mobile-search-overlay.active {
display: flex;
}
.ms-header {
padding: 60px 25px 20px;
background: white;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ms-close-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0,0,0,0.05);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ms-search-container {
position: relative;
width: 100%;
margin-top: 10px;
}
.ms-search-container input {
width: 100%;
padding: 16px 20px;
padding-right: 60px;
border-radius: 16px;
border: 2px solid #f1f2f6;
background: #f1f2f6;
font-size: 1.1rem;
font-weight: 600;
outline: none;
transition: all 0.3s;
}
.ms-search-container input:focus {
border-color: #3367f6;
background: white;
box-shadow: 0 10px 20px rgba(51, 103, 246, 0.1);
}
.ms-search-submit {
position: absolute;
right: 8px;
top: 8px;
width: 44px;
height: 44px;
background: #3367f6;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ms-search-submit svg {
width: 20px;
height: 20px;
}
.ms-content {
flex: 1;
overflow-y: auto;
padding: 30px 25px;
-webkit-overflow-scrolling: touch;
}
.ms-section {
margin-bottom: 35px;
}
.ms-section-title {
font-size: 1.2rem;
font-weight: 800;
color: #2d3436;
margin-bottom: 20px;
}
.ms-quick-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ms-pill {
padding: 10px 18px;
border-radius: 30px;
background: white;
border: 1.5px solid #f1f2f6;
color: #636e72;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.ms-pill.active {
background: #3367f6;
color: white;
border-color: #3367f6;
box-shadow: 0 5px 15px rgba(51, 103, 246, 0.3);
}
.ms-zones-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.ms-zone-card {
background: white;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
cursor: pointer;
}
.ms-zone-img-wrapper {
height: 80px;
overflow: hidden;
}
.ms-zone-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.ms-zone-card:active .ms-zone-img-wrapper img {
transform: scale(1.1);
}
.ms-zone-card span {
display: block;
padding: 12px;
font-weight: 700;
font-size: 0.9rem;
color: #2d3436;
text-align: center;
}
.ms-price-options {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
.ms-price-pill {
padding: 14px;
border-radius: 14px;
background: white;
border: 1.5px solid #f1f2f6;
color: #2d3436;
font-weight: 700;
font-size: 1rem;
text-align: left;
cursor: pointer;
}
.ms-price-pill:active {
background: #f1f2f6;
transform: scale(0.98);
}
.ms-footer {
padding: 20px 25px calc(env(safe-area-inset-bottom, 20px) + 85px) !important;
background: white;
border-top: 1px solid rgba(0,0,0,0.05);
}
.ms-show-results-btn {
width: 100%;
padding: 18px;
border-radius: 18px;
background: #3367f6;
color: white;
border: none;
font-weight: 800;
font-size: 1.1rem;
cursor: pointer;
box-shadow: 0 10px 30px rgba(51, 103, 246, 0.4);
transition: all 0.2s;
}
.ms-show-results-btn:active {
transform: scale(0.96);
background: #2851c5;
}
}
/* Responsiveness for premium sidebar on small screens */
@media (max-width: 480px) {
.sidebar-content-premium {
width: calc(100% - 40px) !important;
right: 20px !important;
left: 20px !important;
padding: 30px 20px !important;
border-radius: 24px !important;
}
}
/* Antigravity Custom Overrides: Persistent Mobile Navigation & Clean Layouts */
@media (max-width: 900px) {
/* 1. Ensure bottom navigation is always on top of EVERYTHING */
.mobile-bottom-nav {
z-index: 100000000 !important;
}
/* 2. Hide close buttons ("✕") on mobile for all relevant panels/modals */
.catalog-close-btn,
.ms-close-btn,
.mc-threads-header .sidebar-close-btn,
.notif-close-btn-fixed {
display: none !important;
}
/* 3. Add safety bottom padding to ensure contents are never cut off or hidden behind the persistent bottom nav */
#full-search-results-container,
.profile-scroll-container {
padding-bottom: 120px !important;
}
#message-center-view {
width: 100vw !important;
height: calc(100vh - 80px - env(safe-area-inset-bottom, 20px)) !important;
height: calc(100dvh - 80px - env(safe-area-inset-bottom, 20px)) !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
position: fixed !important;
z-index: 150000 !important;
}
body:not(.dark-mode) #message-center-view {
background: #ffffff !important;
}
body.dark-mode #message-center-view {
background: #1c1c1e !important;
}
/* 4. Restrict height of chat, threads, and chat profile to end above the bottom nav */
.mc-threads,
.mc-chat,
.mc-profile {
height: 100% !important;
}
/* 5. Integrate profile modal as full-screen page tab above the bottom nav */
.premium-profile-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
width: 100vw !important;
height: calc(100vh - 80px - env(safe-area-inset-bottom, 20px)) !important;
height: calc(100dvh - 80px - env(safe-area-inset-bottom, 20px)) !important;
padding: 0 !important;
margin: 0 !important;
z-index: 150000 !important;
display: none;
align-items: stretch !important;
justify-content: stretch !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.premium-profile-modal-overlay.active {
display: flex !important;
}
.premium-profile-modal-card {
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
animation: none !important;
}
body:not(.dark-mode) .premium-profile-modal-card {
background: #ffffff !important;
}
body.dark-mode .premium-profile-modal-card {
background: #1c1c1e !important;
}
/* Rating Widget Styles */
.profile-rating-widget {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: -10px;
margin-bottom: 20px;
}
.profile-rating-widget .rating-stars {
color: #ffb807;
font-size: 1.4rem;
display: flex;
gap: 2px;
}
.profile-rating-widget .rating-text {
font-size: 0.8rem;
font-weight: 700;
font-family: 'Inter', sans-serif;
}
.profile-rating-widget .rating-score {
color: #ff4757;
font-weight: 800;
font-size: 0.85rem;
margin-right: 4px;
}
body:not(.dark-mode) .profile-rating-widget .rating-subtext {
color: #747d8c;
}
body.dark-mode .profile-rating-widget .rating-subtext {
color: #a4b0be;
}
/* 6. Prominent prominent floating style for Publicar button (Always styled premium) */
.mobile-bottom-nav #nav-publish svg {
background: rgba(51, 103, 246, 0.08) !important;
color: #3367f6 !important;
opacity: 1 !important;
stroke-width: 2.5 !important;
transform: translateY(-2px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-bottom-nav #nav-publish:active svg {
transform: scale(0.9) translateY(-2px);
}
body.dark-mode .mobile-bottom-nav #nav-publish svg {
background: rgba(100, 130, 228, 0.15) !important;
color: var(--accent) !important;
}
/* 7. Hide admin sidebar on mobile to prevent blocking the property registration form (SPA integration only) */
body:not(.admin-page-body) #view-dashboard .admin-sidebar {
display: none !important;
}
/* 8. Modern fixed-height scrollable wizard for SPA mobile dashboard */
body:not(.admin-page-body) #view-dashboard {
height: calc(100vh - 80px - env(safe-area-inset-bottom, 20px)) !important;
padding-top: 0 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
overflow: hidden !important;
flex-direction: column !important;
z-index: 999 !important;
background: #f0f2f5 !important;
}
/* Hide top nav island and map controls on mobile when dashboard is active */
body.hide-header-search #top-nav-island,
body:has(#view-dashboard.active) #top-nav-island {
display: none !important;
}
body.hide-header-search .dynamic-map-controls,
body:has(#view-dashboard.active) .dynamic-map-controls {
display: none !important;
}
#view-dashboard #map-controls-vertical {
display: none !important;
}
body:not(.admin-page-body) #view-dashboard .admin-main {
height: 100% !important;
width: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
body:not(.admin-page-body):not(.dark-mode) #view-dashboard .panel-registrar-form {
background: white !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-registrar-form {
background: #1c1c1e !important;
}
body:not(.admin-page-body) #view-dashboard .panel-header {
padding: 15px 12px 10px 12px !important;
margin-bottom: 8px !important;
}
body:not(.admin-page-body) #view-dashboard .wizard-stepper {
padding: 0 16px !important;
margin-bottom: 12px !important;
}
/* Optimal font-size overrides for mobile publish view */
body:not(.admin-page-body) #view-dashboard .panel-registrar-form h3 {
font-size: 1.25rem !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form #wizard-step-title {
font-size: 0.72rem !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .wizard-stepper {
margin-bottom: 15px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .wizard-stepper::before {
top: 13px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .step-node {
font-size: 0.75rem !important;
width: 26px !important;
height: 26px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .step-label {
font-size: 0.65rem !important;
top: 32px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .section-title {
font-size: 0.8rem !important;
margin-top: 12px !important;
margin-bottom: 8px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .filter-group label {
font-family: 'Outfit', 'Inter', sans-serif !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin-bottom: 6px !important;
display: block !important;
}
body:not(.admin-page-body):not(.dark-mode) #view-dashboard .panel-registrar-form .filter-group label {
color: #4a5568 !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-registrar-form .filter-group label {
color: #cbd5e1 !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .soft-input {
font-size: 0.85rem !important;
padding: 10px 12px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .pill-checkbox {
font-size: 0.75rem !important;
padding: 6px 12px !important;
}
/* Mobile step 3 inline map picker styles */
#mobile-map-container-slot {
display: block !important;
width: 100% !important;
height: 380px !important;
border-radius: 18px !important;
overflow: hidden !important;
position: relative !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
#mobile-map-container-slot #map-picker {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 1 !important;
}
#mobile-map-container-slot #map-controls-vertical,
#mobile-map-container-slot #map-picker-controls-vertical {
position: absolute !important;
bottom: 12px !important;
right: 12px !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#mobile-map-container-slot .map-control-btn {
width: 36px !important;
height: 36px !important;
font-size: 0.95rem !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
background: #ffffff !important;
color: #2d3436 !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
body.dark-mode #mobile-map-container-slot .map-control-btn {
background: #1c1c1e !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
#mobile-map-container-slot .map-control-btn svg {
width: 18px !important;
height: 18px !important;
}
#mobile-map-container-slot #layer-options-menu {
right: 50px !important;
bottom: 0 !important;
padding: 5px !important;
border-radius: 14px !important;
gap: 6px !important;
background: rgba(255, 255, 255, 0.9) !important;
}
body.dark-mode #mobile-map-container-slot #layer-options-menu {
background: rgba(28, 28, 30, 0.9) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
#mobile-map-container-slot .layer-option-btn {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
font-size: 0.85rem !important;
}
#mobile-map-container-slot .layer-option-btn svg {
width: 16px !important;
height: 16px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-body {
flex: 1 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 8px 30px 8px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-registrar-form .glass-card {
padding: 16px !important;
border-radius: 16px !important;
margin-bottom: 16px !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
transition: all 0.3s ease !important;
}
body:not(.admin-page-body):not(.dark-mode) #view-dashboard .panel-registrar-form .glass-card {
background: #ffffff !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-registrar-form .glass-card {
background: rgba(30, 30, 32, 0.95) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
/* Mobile Wizard Buttons Adjustment */
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-back,
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-next,
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-guardar {
align-items: center !important;
justify-content: center !important;
font-size: 0.82rem !important;
padding: 10px 12px !important;
font-weight: 800 !important;
border-radius: 12px !important;
white-space: nowrap !important;
height: 46px !important;
box-sizing: border-box !important;
gap: 6px !important;
}
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-back svg,
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-next svg {
margin: 0 !important;
}
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-back {
flex: 1.1 !important;
border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
background: #eaedf2 !important;
color: #636e72 !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-footer #btn-wizard-back {
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: #cbd5e1 !important;
}
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-wizard-next,
body:not(.admin-page-body) #view-dashboard .panel-footer #btn-guardar {
flex: 1.9 !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-footer #btn-wizard-next {
background: rgba(108, 92, 231, 0.15) !important;
border: 1.5px solid rgba(108, 92, 231, 0.4) !important;
color: #a29bfe !important;
box-shadow: none !important;
}
body:not(.admin-page-body).dark-mode #view-dashboard .panel-footer #btn-guardar {
background: rgba(0, 184, 148, 0.15) !important;
border: 1.5px solid rgba(0, 184, 148, 0.4) !important;
color: #55efc4 !important;
box-shadow: none !important;
}
}
/* --- ADAPTIVE WIZARD INPUTS & PREVIEW (LIGHT/DARK) --- */
#domicilio-input-wrapper {
display: flex !important;
background: rgba(255, 255, 255, 0.9) !important;
border: 1.5px solid rgba(108, 92, 231, 0.2) !important;
border-radius: 16px !important;
padding: 5px !important;
gap: 5px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
align-items: center !important;
transition: all 0.3s ease !important;
}
#domicilio-input-wrapper:focus-within {
border-color: #6c5ce7 !important;
box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15) !important;
}
body.dark-mode #domicilio-input-wrapper {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode #domicilio-input-wrapper:focus-within {
border-color: #a29bfe !important;
box-shadow: 0 0 0 4px rgba(162, 155, 254, 0.2) !important;
}
#domicilio-input-wrapper .soft-input:focus {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#wizard-preview-container {
display: flex !important;
flex-direction: column !important;
gap: 25px !important;
align-items: center !important;
background: #f8f9fa !important;
border-radius: 20px !important;
padding: 20px !important;
border: 1px solid #e0e5ec !important;
transition: all 0.3s ease !important;
}
body.dark-mode #wizard-preview-container {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* ==========================================================================
Antigravity Desktop Dashboard Custom Layout & Aesthetics (width > 900px)
========================================================================== */
@media (min-width: 901px) {
/* 1. Glassmorphic Sidebar Navigation */
.admin-sidebar {
position: fixed !important;
top: 120px !important;
left: 20px !important;
bottom: 20px !important;
height: calc(100vh - 140px) !important;
width: 270px !important;
min-width: 270px !important;
z-index: 1010 !important;
border-radius: 24px !important;
margin: 0 !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body:not(.dark-mode) .admin-sidebar {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
body.dark-mode .admin-sidebar {
background: rgba(28, 28, 30, 0.8) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Adjust Navigation Item Colors */
body:not(.dark-mode) .admin-nav-item {
color: #636e72 !important;
}
body:not(.dark-mode) .admin-nav-item svg {
stroke: #636e72 !important;
}
body:not(.dark-mode) .admin-nav-item:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: #2d3436 !important;
}
body:not(.dark-mode) .admin-nav-item:hover svg {
stroke: #2d3436 !important;
}
/* Keep active style for standard items */
body:not(.dark-mode) .admin-nav-item.active:not(#btn-sidebar-publish) {
background: rgba(0, 0, 0, 0.08) !important;
color: #2d3436 !important;
}
body:not(.dark-mode) .admin-nav-item.active:not(#btn-sidebar-publish) svg {
stroke: #2d3436 !important;
}
body.dark-mode .admin-nav-item {
color: #b1b8c0 !important;
}
body.dark-mode .admin-nav-item svg {
stroke: #b1b8c0 !important;
}
body.dark-mode .admin-nav-item:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
body.dark-mode .admin-nav-item:hover svg {
stroke: #ffffff !important;
}
body.dark-mode .admin-nav-item.active:not(#btn-sidebar-publish) {
background: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
}
body.dark-mode .admin-nav-item.active:not(#btn-sidebar-publish) svg {
stroke: #ffffff !important;
}
/* 2. Main Workspace Layout */
.admin-main {
margin-left: 310px !important;
width: calc(100% - 310px) !important;
height: 100vh !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
}
.admin-panel {
position: absolute !important;
top: 120px !important;
left: 20px !important;
right: 20px !important;
bottom: 20px !important;
width: auto !important;
height: auto !important;
border-radius: 24px !important;
overflow: hidden !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
z-index: 1000 !important;
}
body:not(.dark-mode) .admin-panel {
border: 1px solid rgba(0, 0, 0, 0.08) !important;
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
body.dark-mode .admin-panel {
border: 1px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(28, 28, 30, 0.8) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
/* Style inner scroll wrapper for Edit/Management Panel */
.panel-content-wrapper {
height: 100% !important;
overflow-y: auto !important;
padding: 24px !important;
}
/* Solid backgrounds under map panels to avoid flash during tile loads */
body:not(.dark-mode) #panel-registrar,
body:not(.dark-mode) #panel-admin {
background: #f0f2f5 !important;
}
body.dark-mode #panel-registrar,
body.dark-mode #panel-admin {
background: #1c1c1e !important;
}
.panel-registrar-form {
position: absolute !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: 608px !important;
height: 100% !important;
z-index: 1010 !important;
border-radius: 24px 0 0 24px !important;
padding: 24px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-family: 'Outfit', 'Inter', sans-serif !important;
}
body:not(.dark-mode) .panel-registrar-form {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border: none !important;
border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.dark-mode .panel-registrar-form {
background: rgba(28, 28, 30, 0.85) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border: none !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
body.dark-mode .panel-registrar-form p {
color: #a4b0be !important;
}
.panel-registrar-form .glass-card {
padding: 24px !important;
border-radius: 20px !important;
margin-bottom: 20px !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
transition: all 0.3s ease !important;
}
body:not(.dark-mode) .panel-registrar-form .glass-card {
background: #ffffff !important;
}
body.dark-mode .panel-registrar-form .glass-card {
background: rgba(30, 30, 32, 0.95) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
/* Style titles */
.panel-registrar-form h3 {
font-family: 'Outfit', sans-serif !important;
font-weight: 800 !important;
font-size: 1.6rem !important;
}
.panel-registrar-form #wizard-step-title {
font-family: 'Outfit', sans-serif !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
}
/* Stepper Style Overrides */
.panel-registrar-form .wizard-stepper {
font-family: 'Outfit', sans-serif !important;
}
.panel-registrar-form .step-node {
font-family: 'Outfit', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 800 !important;
}
.panel-registrar-form .step-label {
font-family: 'Outfit', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
/* Label Font Size & Color Adjustments (to match screenshot & be visible) */
.panel-registrar-form .filter-group label {
font-family: 'Outfit', sans-serif !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin-bottom: 6px !important;
display: block !important;
}
body:not(.dark-mode) .panel-registrar-form .filter-group label {
color: #636e72 !important;
}
body.dark-mode .panel-registrar-form .filter-group label {
color: #b1b8c0 !important;
}
/* Custom registrar form soft-inputs adjustments moved to global styles */
/* Section Titles Styles (Remove bottom border, align fonts) */
.panel-registrar-form .section-title {
font-family: 'Outfit', sans-serif !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
border-bottom: none !important;
margin-top: 20px !important;
margin-bottom: 12px !important;
padding-bottom: 0 !important;
}
body:not(.dark-mode) .panel-registrar-form .section-title {
color: #2d3436 !important;
}
body.dark-mode .panel-registrar-form .section-title {
color: #ffffff !important;
}
/* Adjust checkbox container labels */
.panel-registrar-form .pill-checkbox-container {
gap: 8px !important;
}
.panel-registrar-form .pill-checkbox {
font-family: 'Outfit', sans-serif !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
padding: 8px 14px !important;
border-radius: 10px !important;
}
}
/* 4. Hide Client-Side Map Controls when Seller Dashboard is Active */
body:has(#view-dashboard.active) .dynamic-map-controls {
display: none !important;
}
/* --- PREMIUM MOBILE MENU BUTTON --- */
.soft-btn-blue-square {
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
background: #3367f6;
border: none;
color: #ffffff;
box-shadow: 0 4px 12px rgba(51, 103, 246, 0.3);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.soft-btn-blue-square:hover {
background: #2563eb;
box-shadow: 0 6px 16px rgba(51, 103, 246, 0.45);
transform: translateY(-1px);
}
.soft-btn-blue-square:active {
transform: translateY(1px);
box-shadow: 0 3px 8px rgba(51, 103, 246, 0.2);
}
/* --- PREMIUM LIGHT MOBILE SEARCH PILL --- */
.mobile-search-pill {
flex: 1;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
border-radius: 24px;
padding: 0 5px 0 15px;
height: 48px;
cursor: text;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-search-pill:focus-within {
background: #ffffff;
box-shadow: 0 12px 40px rgba(51, 103, 246, 0.12);
border-color: rgba(51, 103, 246, 0.4);
}
body.dark-mode .mobile-search-pill {
background: rgba(30, 41, 59, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.dark-mode .mobile-search-pill:focus-within {
background: rgba(30, 41, 59, 0.95);
border-color: rgba(99, 102, 241, 0.4);
}
.mobile-search-pill .search-icon-svg {
width: 20px;
height: 20px;
margin-right: 12px;
flex-shrink: 0;
stroke: #475569;
transition: stroke 0.3s ease;
}
.mobile-search-pill:focus-within .search-icon-svg {
stroke: #3367f6;
}
body.dark-mode .mobile-search-pill .search-icon-svg {
stroke: #cbd5e1;
}
body.dark-mode .mobile-search-pill:focus-within .search-icon-svg {
stroke: #818cf8;
}
.mobile-search-pill .mobile-filter-btn {
flex-shrink: 0;
background: #f1f5f9;
color: #475569;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: none;
padding: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.mobile-search-pill .mobile-filter-btn:hover {
background: #e2e8f0;
}
body.dark-mode .mobile-search-pill .mobile-filter-btn {
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
}
body.dark-mode .mobile-search-pill .mobile-filter-btn:hover {
background: rgba(255, 255, 255, 0.15);
}
/* --- ESTILO PREMIUM DE BOTONES EN REGISTRO (DESKTOP) --- */
.panel-registrar-form .panel-footer {
justify-content: flex-end !important;
gap: 12px !important;
padding: 20px 24px !important;
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
body:not(.dark-mode) .panel-registrar-form .panel-footer {
background: rgba(255, 255, 255, 0.8) !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.dark-mode .panel-registrar-form .panel-footer {
background: rgba(28, 28, 30, 0.8) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.panel-registrar-form .panel-footer .soft-btn,
.panel-registrar-form .panel-footer button {
flex: none !important;
width: auto !important;
min-width: 160px !important;
padding: 12px 24px !important;
font-size: 0.88rem !important;
font-weight: 800 !important;
border-radius: 12px !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* Estilo del botón Anterior */
#btn-wizard-back {
border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
background: #f1f3f5 !important;
color: #4e5d6c !important;
}
body.dark-mode #btn-wizard-back {
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: #cbd5e1 !important;
}
.panel-registrar-form .panel-footer .soft-btn:hover,
.panel-registrar-form .panel-footer button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}
#btn-wizard-next:hover {
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3) !important;
}
#btn-guardar:hover {
box-shadow: 0 8px 20px rgba(0, 184, 148, 0.3) !important;
}
.panel-registrar-form .panel-footer .soft-btn:active,
.panel-registrar-form .panel-footer button:active {
transform: translateY(0);
}
/* --- ALINEACIÓN DEL MAPA A LA DERECHA (DESKTOP) --- */
#map-picker {
position: absolute !important;
top: 0 !important;
left: 608px !important;
width: calc(100% - 608px) !important;
height: 100% !important;
border-radius: 0 24px 24px 0 !important;
}
/* --- MOBILE SIDEBAR SLIDE FROM LEFT --- */
@media (max-width: 900px) {
.sidebar-content-premium {
left: 20px !important;
right: auto !important;
transform: translateX(-110%) !important;
box-shadow: 20px 0 60px rgba(0, 0, 0, 0.12) !important;
}
body.dark-mode .sidebar-content-premium {
box-shadow: 15px 0 60px rgba(0, 0, 0, 0.5) !important;
}
.sidebar-overlay-premium.active .sidebar-content-premium {
transform: translateX(0) !important;
}
}
/* --- PREMIUM LIGHT/DARK ADAPTIVE FILTER MODAL CARD --- */
.filter-modal-card {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
width: 100%;
max-width: 420px;
border-radius: 32px;
padding: 30px;
position: relative;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body.dark-mode .filter-modal-card {
background: #121214;
border-color: rgba(255, 255, 255, 0.05);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}
.filter-modal-title {
color: #1e293b;
font-size: 1.4rem;
font-weight: 800;
margin: 0;
font-family: 'Outfit', sans-serif !important;
}
body.dark-mode .filter-modal-title {
color: #ffffff;
}
.filter-modal-close-btn {
position: absolute;
right: 25px;
top: 25px;
background: none;
border: none;
color: #64748b;
cursor: pointer;
font-size: 1.5rem;
font-weight: 300;
transition: color 0.2s ease, transform 0.2s ease;
line-height: 1;
}
.filter-modal-close-btn:hover {
color: #1e293b;
transform: scale(1.1);
}
body.dark-mode .filter-modal-close-btn {
color: #a4b0be;
}
body.dark-mode .filter-modal-close-btn:hover {
color: #ffffff;
}
.filter-modal-section-label {
color: #475569;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 10px;
display: block;
letter-spacing: 0.8px;
font-family: 'Outfit', sans-serif !important;
}
body.dark-mode .filter-modal-section-label {
color: #a4b0be;
}
.filter-modal-select {
background: #f1f5f9;
color: #0f172a;
border: 1px solid #e2e8f0;
border-radius: 12px;
height: 50px;
padding: 0 15px;
outline: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.filter-modal-select:focus {
background: #ffffff;
border-color: #3367f6;
box-shadow: 0 0 0 3px rgba(51, 103, 246, 0.12);
}
body.dark-mode .filter-modal-select {
background: #1e1e1e;
color: #ffffff;
border-color: #333;
}
body.dark-mode .filter-modal-select:focus {
background: #1e1e1e;
border-color: #6366f1;
}
.filter-modal-btn-sec {
background: #f1f5f9;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-modal-btn-sec:hover {
background: #e2e8f0;
transform: translateY(-1px);
}
body.dark-mode .filter-modal-btn-sec {
background: #1e272e;
color: #ffffff;
border-color: #3367f6;
box-shadow: 0 0 15px rgba(51, 103, 246, 0.1);
}
body.dark-mode .filter-modal-btn-sec:hover {
background: #2c3e50;
}
#btn-radio.filter-modal-btn-sec {
height: 48px;
}
.filter-modal-desc {
color: #64748b;
font-size: 0.7rem;
margin-top: 8px;
line-height: 1.4;
font-weight: 500;
}
body.dark-mode .filter-modal-desc {
color: #636e72;
}
.filter-modal-price-labels {
display: flex;
justify-content: space-between;
color: #475569;
font-size: 0.7rem;
font-weight: 600;
}
body.dark-mode .filter-modal-price-labels {
color: #a4b0be;
}
.filter-modal-input {
width: 100%;
background: #f1f5f9;
color: #0f172a;
border: 1px solid #e2e8f0;
border-radius: 12px;
height: 50px;
padding: 0 15px 0 45px;
font-weight: 600;
font-size: 0.9rem;
outline: none;
transition: all 0.2s ease;
}
.filter-modal-input:focus {
background: #ffffff;
border-color: #3367f6;
box-shadow: 0 0 0 3px rgba(51, 103, 246, 0.12);
}
body.dark-mode .filter-modal-input {
background: #1e1e1e;
color: #ffffff;
border-color: #333;
}
body.dark-mode .filter-modal-input:focus {
border-color: #6366f1;
}
.filter-modal-row-toggle {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-top: 15px;
border-top: 1px solid #e2e8f0;
}
body.dark-mode .filter-modal-row-toggle {
border-top-color: rgba(255,255,255,0.05);
}
.filter-modal-toggle-label {
color: #475569;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
font-family: 'Outfit', sans-serif !important;
}
body.dark-mode .filter-modal-toggle-label {
color: #a4b0be;
}
#btn-aplicar.filter-modal-apply-btn {
width: 100% !important;
height: 76px !important;
background: linear-gradient(135deg, #3367f6 0%, #2563eb 100%) !important;
color: white !important;
border: none !important;
border-radius: 22px !important;
font-weight: 800 !important;
font-size: 1.15rem !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
box-shadow: 0 10px 25px rgba(51, 103, 246, 0.25) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#btn-aplicar.filter-modal-apply-btn:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(51, 103, 246, 0.35) !important;
}
#btn-aplicar.filter-modal-apply-btn:active {
transform: translateY(0) !important;
}
body.dark-mode #btn-aplicar.filter-modal-apply-btn {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3) !important;
}
body.dark-mode #btn-aplicar.filter-modal-apply-btn:hover {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45) !important;
}
/* Lasso Button Specific - High Contrast & Premium Accent */
#btn-draw-lasso.filter-modal-btn-sec {
background: rgba(108, 92, 231, 0.08);
color: #6c5ce7;
border: 2px dashed #6c5ce7;
border-radius: 16px;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.3px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(108, 92, 231, 0.05);
}
#btn-draw-lasso.filter-modal-btn-sec:hover {
background: #6c5ce7;
color: #ffffff;
border-style: solid;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.25);
}
#btn-draw-lasso.filter-modal-btn-sec:active {
transform: translateY(0);
}
/* Lasso Button Active State */
#btn-draw-lasso.filter-modal-btn-sec.active {
background: #6c5ce7;
color: #ffffff;
border-style: solid;
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
animation: buttonPulse 2s infinite;
}
@keyframes buttonPulse {
0% {
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}
50% {
box-shadow: 0 8px 25px rgba(108, 92, 231, 0.5), 0 0 0 4px rgba(108, 92, 231, 0.25);
}
100% {
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}
}
/* Dark Mode adaptation for Lasso Button */
body.dark-mode #btn-draw-lasso.filter-modal-btn-sec {
background: rgba(162, 155, 254, 0.1);
color: #a29bfe;
border-color: #a29bfe;
box-shadow: 0 4px 12px rgba(162, 155, 254, 0.05);
}
body.dark-mode #btn-draw-lasso.filter-modal-btn-sec:hover {
background: #6c5ce7;
color: #ffffff;
border-color: #6c5ce7;
}
body.dark-mode #btn-draw-lasso.filter-modal-btn-sec.active {
background: #6c5ce7;
color: #ffffff;
border-color: #6c5ce7;
}
/* ==========================================================================
Property Catalog Filter Bar and Selectors
========================================================================== */
.catalog-filters-bar {
display: flex;
gap: 8px;
width: 100%;
box-sizing: border-box;
padding: 2px 0;
}
.catalog-filter-select {
flex: 1;
min-width: 0;
font-family: 'Outfit', 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #1e293b;
background-color: #f8f9fa;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 8px 26px 8px 14px;
height: 38px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
cursor: pointer;
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.catalog-filter-select:hover {
background-color: #f1f5f9;
border-color: #cbd5e1;
}
.catalog-filter-select:focus {
background-color: #ffffff;
border-color: #3367f6;
box-shadow: 0 0 0 3px rgba(51, 103, 246, 0.12);
}
/* Dark Mode Adaptation */
body.dark-mode .catalog-filter-select {
color: #cbd5e1;
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
background-image: url("data:image/svg+xml;utf8,");
}
body.dark-mode .catalog-filter-select:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .catalog-filter-select:focus {
background-color: #121214;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
body.dark-mode .catalog-filter-select option {
background-color: #121214;
color: #ffffff;
}
/* Fix visibility of apple geocoder autocomplete results dropdown by overriding aggressive resets */
[id^="geocoder-wrapper"] .apple-geocoder-results {
background-color: var(--geocoder-bg) !important;
background: var(--geocoder-bg) !important;
border: 1px solid var(--geocoder-border) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
max-height: 380px !important;
overflow-y: auto !important;
}
body.dark-mode [id^="geocoder-wrapper"] .apple-geocoder-results {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-item {
background-color: transparent !important;
background: transparent !important;
color: var(--geocoder-text-main) !important;
border-bottom: 1px solid var(--geocoder-border) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-item:hover {
background-color: var(--geocoder-hover) !important;
background: var(--geocoder-hover) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-item *:not(.apple-geocoder-icon-badge):not(.apple-geocoder-icon-badge *) {
background-color: transparent !important;
background: transparent !important;
color: inherit !important;
}
/* Specificity overrides to bypass aggressive resets on custom geocoder badges */
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge svg {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 14px !important;
height: 14px !important;
color: white !important;
fill: none !important;
stroke: currentColor !important;
margin: 0 !important;
padding: 0 !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge.badge-blue {
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge.badge-purple {
background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge.badge-red {
background: linear-gradient(135deg, #f43f5e, #be123c) !important;
box-shadow: 0 2px 6px rgba(190, 18, 60, 0.25) !important;
}
[id^="geocoder-wrapper"] .apple-geocoder-icon-badge.badge-gray {
background: linear-gradient(135deg, #9ca3af, #4b5563) !important;
box-shadow: 0 2px 6px rgba(75, 85, 99, 0.25) !important;
}
/* --- VISTA PERSPECTIVA 3D PARA MAPAS DE APPLE --- */
.tilted-3d {
transform: perspective(1200px) rotateX(46deg) scale(1.55) translateY(-8%) !important;
transform-origin: center center !important;
}
/* --- PREMIUM OVERRIDES FOR NATIVE MAPKIT JS CALLOUTS --- */
.mk-callout {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.mk-callout-content {
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
.mk-callout-close-button {
display: none !important; /* Hide MapKit default close button */
}
.mk-callout-arrow {
display: none !important; /* Hide default callout arrow for a clean floating card feel */
}
/* Custom map callout container style */
.custom-map-callout-container {
width: 360px;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 24px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
overflow: hidden;
color: #2d3436 !important;
display: flex;
flex-direction: column;
/* Evitar que las coordenadas fraccionarias de MapKit desenfoquen el contenido */
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Premium Sliding Carousel */
.carousel-track {
display: flex;
height: 100%;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-slide {
width: 100%;
height: 100%;
flex-shrink: 0;
}
.carousel-slide img {
/* Forzar nitidez máxima en pantallas Retina de alta densidad */
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* ============================================
ESTADÍSTICAS MODAL STYLES (PREMIUM)
============================================ */
#stats-modal .auth-card {
background: #ffffff;
color: #2d3436;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
border: 1px solid rgba(0,0,0,0.05);
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
body.dark-mode #stats-modal .auth-card {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35) !important;
}
body.dark-mode #stats-modal h3,
body.dark-mode #stats-modal h4 {
color: #ffffff !important;
}
body.dark-mode #stats-modal .auth-close-btn {
background: #334155 !important;
color: #e2e8f0 !important;
}
body.dark-mode #stats-modal .auth-close-btn:hover {
background: #475569 !important;
}
body.dark-mode #stats-modal canvas {
filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
}
/* Rejilla de Métricas */
.stats-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 25px;
width: 100%;
}
@media (max-width: 768px) {
.stats-metrics-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* Tarjetas de Métrica */
.metric-card {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 18px;
padding: 16px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.04);
border-color: #cbd5e1;
}
body.dark-mode .metric-card {
background: #161619;
border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .metric-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
border-color: rgba(255, 255, 255, 0.15);
}
/* Iconos de Métrica */
.metric-card-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.metric-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
}
.metric-icon-wrapper.exposicion-color {
background: rgba(243, 84, 34, 0.1);
color: #f35422;
}
.metric-icon-wrapper.visualizaciones-color {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.metric-icon-wrapper.interesados-color {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.metric-card-title {
font-size: 0.9rem;
font-weight: 700;
color: #64748b;
margin-left: 10px;
}
body.dark-mode .metric-card-title {
color: #94a3b8;
}
/* Cuerpo de Tarjeta */
.metric-card-body {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.metric-value {
font-size: 1.6rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.5px;
}
body.dark-mode .metric-value {
color: #ffffff;
}
/* Sub-fila de Tarjeta para Interesados */
.metric-card-subrow {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f1f5f9;
padding-top: 8px;
margin-top: 4px;
margin-bottom: 8px;
}
body.dark-mode .metric-card-subrow {
border-color: rgba(255, 255, 255, 0.05);
}
.subrow-label {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
}
body.dark-mode .subrow-label {
color: #cbd5e1;
}
/* Pie de Tarjeta */
.metric-card-footer {
font-size: 0.72rem;
color: #94a3b8;
line-height: 1.35;
margin-top: auto;
}
body.dark-mode .metric-card-footer {
color: #64748b;
}
/* Distintivos de Tendencia (Trend Badges) */
.trend-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.68rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 8px;
white-space: nowrap;
}
.trend-badge.trend-up {
background: rgba(46, 204, 113, 0.12);
color: #2ecc71;
}
.trend-badge.trend-down {
background: rgba(231, 76, 60, 0.12);
color: #e74c3c;
}
.trend-badge.trend-neutral {
background: rgba(148, 163, 184, 0.12);
color: #94a3b8;
}
/* Fila de Pestañas */
.stats-tabs-row {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #e2e8f0;
margin-top: 30px;
margin-bottom: 20px;
padding-bottom: 0;
width: 100%;
}
body.dark-mode .stats-tabs-row {
border-color: rgba(255, 255, 255, 0.1);
}
.stats-tabs-group {
display: flex;
gap: 25px;
}
.stats-tab {
background: none;
border: none;
font-size: 0.95rem;
font-weight: 700;
color: #64748b;
padding: 8px 2px 12px 2px;
cursor: pointer;
position: relative;
transition: color 0.2s;
}
.stats-tab:hover {
color: #1e293b;
}
body.dark-mode .stats-tab:hover {
color: #ffffff;
}
.stats-tab::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: transparent;
border-radius: 3px 3px 0 0;
transition: background-color 0.2s;
}
.stats-tab.active.exposicion-active {
color: #f35422;
}
.stats-tab.active.exposicion-active::after {
background: #f35422;
}
.stats-tab.active.visualizaciones-active {
color: #3b82f6;
}
.stats-tab.active.visualizaciones-active::after {
background: #3b82f6;
}
.stats-tab.active.interesados-active {
color: #10b981;
}
.stats-tab.active.interesados-active::after {
background: #10b981;
}
/* Botón de descarga */
.stats-download-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 8px;
}
.stats-download-btn:hover {
background: #f8fafc;
color: #1e293b;
border-color: #cbd5e1;
transform: scale(1.08);
}
body.dark-mode .stats-download-btn {
background: #1e293b;
border-color: #334155;
color: #94a3b8;
}
body.dark-mode .stats-download-btn:hover {
background: #334155;
color: #ffffff;
border-color: #475569;
}
/* Contenedor del Gráfico */
.stats-graph-wrapper {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 20px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}
body.dark-mode .stats-graph-wrapper {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.05);
}
/* Leyenda Custom del Gráfico */
#chart-custom-legend {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
}
.legend-badge {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.85rem;
color: #1e293b;
}
body.dark-mode .legend-badge {
color: #ffffff;
}
.legend-badge span {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.legend-dot-exposicion {
background: #f35422;
}
.legend-dot-visualizaciones {
background: #3b82f6;
}
.legend-dot-interesados {
background: #10b981;
}
.legend-subtext {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 4px;
}
body.dark-mode .legend-subtext {
color: #64748b;
}
/* Mensajes / Contactos */
.stats-message-card {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 12px;
transition: transform 0.2s, border-color 0.2s;
}
.stats-message-card:hover {
transform: translateY(-1px);
border-color: var(--accent);
}
body.dark-mode .stats-message-card {
background: #161619 !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .stats-message-card strong {
color: #ffffff !important;
}
body.dark-mode .stats-message-card div {
color: #cbd5e1 !important;
}
/* ==========================================================================
PREMIUM DARK MODE OVERRIDES
========================================================================== */
/* 1. MapKit JS Annotation Callouts & Mobile Bottom Sheet */
body.dark-mode #property-bottom-sheet,
body.dark-mode .custom-map-callout-container {
background: rgba(30, 41, 59, 0.95) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
color: #f1f5f9 !important;
}
body.dark-mode .sheet-price-title {
color: #ffffff !important;
}
body.dark-mode .sheet-features-line {
color: #cbd5e1 !important;
}
body.dark-mode .sheet-features-line b {
color: #ffffff !important;
}
body.dark-mode .sheet-address-line {
color: #94a3b8 !important;
}
body.dark-mode .sheet-seller-line {
color: #64748b !important;
}
body.dark-mode .sheet-floating-btn {
background: rgba(15, 23, 42, 0.6) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
body.dark-mode .sheet-floating-btn:hover {
background: rgba(15, 23, 42, 0.85) !important;
color: #3367f6 !important;
}
body.dark-mode .sheet-floating-btn.heart-btn.liked {
color: #ff4757 !important;
}
body.dark-mode .sheet-menu-btn {
color: #94a3b8 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .sheet-menu-btn:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .sheet-dropdown-menu {
background: #161619 !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .sheet-dropdown-menu a {
color: #cbd5e1 !important;
}
body.dark-mode .sheet-dropdown-menu a:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
body.dark-mode .sheet-btn-action-mobile.whatsapp {
background: rgba(0, 184, 148, 0.15) !important;
color: #00b894 !important;
border-color: rgba(0, 184, 148, 0.3) !important;
}
body.dark-mode .sheet-btn-action-mobile.details {
background: rgba(51, 103, 246, 0.18) !important;
color: #5d83f8 !important;
border-color: rgba(51, 103, 246, 0.3) !important;
}
/* 2. Message Center (Chat Panel) */
body.dark-mode .mc-container {
background: rgba(15, 23, 42, 0.85) !important;
}
body.dark-mode .mc-threads {
background: rgba(15, 23, 42, 0.45) !important;
border-right-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-threads-header {
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-threads-header h3 {
color: #ffffff !important;
}
body.dark-mode .mc-thread-item {
background: rgba(255, 255, 255, 0.02) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .mc-thread-item:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .mc-thread-item.active {
background: rgba(108, 92, 231, 0.15) !important;
border-color: #6c5ce7 !important;
}
body.dark-mode .mc-thread-item div {
color: #ffffff !important;
}
body.dark-mode .mc-thread-name {
color: #ffffff !important;
}
body.dark-mode .mc-thread-preview {
color: #94a3b8 !important;
}
body.dark-mode .mc-chat {
background: rgba(15, 23, 42, 0.2) !important;
}
body.dark-mode .mc-chat-header {
background: rgba(15, 23, 42, 0.6) !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #thread-title-admin {
color: #ffffff !important;
}
body.dark-mode .mc-bubble.in {
background: #1e293b !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: #f1f5f9 !important;
}
body.dark-mode .mc-bubble-time {
color: #94a3b8 !important;
}
body.dark-mode .mc-chat-input-wrapper {
background: rgba(15, 23, 42, 0.7) !important;
border-top-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-chat-input-box {
background: #0b0b0c !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .mc-chat-input-box input {
color: #ffffff !important;
}
body.dark-mode .mc-profile {
background: rgba(15, 23, 42, 0.55) !important;
border-left-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-profile-name {
color: #ffffff !important;
}
body.dark-mode .mc-profile-section {
background: #1e293b !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-profile-label {
color: #94a3b8 !important;
}
body.dark-mode .mc-profile-value {
color: #ffffff !important;
}
body.dark-mode .mc-profile-card {
background: #1e293b !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mc-profile-card label {
color: #94a3b8 !important;
}
body.dark-mode .mc-profile-card value {
color: #ffffff !important;
}
@media (max-width: 768px) {
body.dark-mode .mc-threads {
background: #0b0b0c !important;
color: #ffffff !important;
}
}
/* 3. Auth Modals (Login, Register, Recover Password) */
body.dark-mode .auth-card {
background: rgba(22, 22, 24, 0.98) !important;
backdrop-filter: blur(40px) !important;
-webkit-backdrop-filter: blur(40px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9) !important;
}
body.dark-mode .auth-card h2 {
color: #ffffff !important;
}
body.dark-mode .auth-card p {
color: #a4b0be !important;
}
body.dark-mode .auth-card .auth-close-btn {
color: #ffffff !important;
}
body.dark-mode .auth-card label {
color: #a4b0be !important;
}
body.dark-mode .auth-card input,
body.dark-mode .auth-card select {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode .auth-card input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
body.dark-mode .auth-card .filter-group-container {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* 4. Search Geocoder Suggestions Dropdowns */
body.dark-mode .maplibregl-ctrl-geocoder--results,
body.dark-mode .maptiler-ctrl-geocoder--results,
body.dark-mode .maptiler-gc-results,
body.dark-mode [id^="geocoder-wrapper"] ul {
background: #1e293b !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
}
body.dark-mode .maplibregl-ctrl-geocoder--suggestion,
body.dark-mode .maplibregl-ctrl-geocoder li,
body.dark-mode .maptiler-ctrl-geocoder li,
body.dark-mode .maptiler-gc-item {
background: #1e293b !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .maplibregl-ctrl-geocoder--suggestion:hover,
body.dark-mode .maplibregl-ctrl-geocoder li:hover,
body.dark-mode .maptiler-ctrl-geocoder li:hover,
body.dark-mode .maptiler-gc-item:hover {
background: #334155 !important;
}
body.dark-mode .maplibregl-ctrl-geocoder--suggestion-title,
body.dark-mode .primary {
color: #ffffff !important;
}
body.dark-mode .maplibregl-ctrl-geocoder--suggestion-address,
body.dark-mode .secondary {
color: #94a3b8 !important;
}
/* 5. Homepage/Landing Page Footer refinements */
body.dark-mode .footer-brand p {
color: #94a3b8 !important;
}
body.dark-mode .footer-brand img {
filter: brightness(0) invert(1);
}
/* ==========================================================================
FOLLOW-UP DARK MODE OVERRIDES (Settings, Catalog, Publish Background)
========================================================================== */
/* 1. settings-modal (Configuración) Dark Mode Overrides */
body.dark-mode .settings-card {
background: rgba(22, 22, 24, 0.98) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7) !important;
}
body.dark-mode .settings-sidebar {
background: #111112 !important;
border-right-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .settings-nav-item {
color: #94a3b8 !important;
}
body.dark-mode .settings-nav-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
body.dark-mode .settings-nav-item.active {
background: #3367f6 !important;
color: white !important;
}
body.dark-mode .settings-main {
background: #1c1c1f !important;
}
body.dark-mode .settings-header h2,
body.dark-mode .tab-title {
color: #ffffff !important;
}
body.dark-mode .settings-close-btn {
background: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
body.dark-mode .settings-close-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .settings-option-card {
background: #161618 !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .settings-option-card:hover {
border-color: rgba(51, 103, 246, 0.2) !important;
}
body.dark-mode .option-info h4 {
color: #ffffff !important;
}
body.dark-mode .option-info p {
color: #94a3b8 !important;
}
body.dark-mode .modern-slider {
background-color: #3f3f46 !important;
}
body.dark-mode .settings-option-card select {
background-color: #111112 !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* 2. Property Catalog (Catálogo de Propiedades) Dark Mode Overrides */
body.dark-mode #full-search-list-view,
body.dark-mode #full-favorites-list-view,
body.dark-mode .search-results-grid {
background: #121214 !important;
}
body.dark-mode .search-list-card {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .search-list-card-title {
color: #ffffff !important;
}
body.dark-mode .search-list-card-features {
color: #94a3b8 !important;
}
body.dark-mode .search-list-btn-details {
background: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
body.dark-mode .search-list-btn-details:hover {
background: var(--accent) !important;
color: #ffffff !important;
}
/* 3. Publish Property Page (Publicar) Background Overrides */
body.dark-mode:not(.admin-page-body) #view-dashboard,
body.dark-mode #view-dashboard {
background: #121214 !important;
}
/* 4. Property Catalog Header Zone Dark Mode Overrides */
body.dark-mode .catalog-sidebar-header {
background: #1c1c1f !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #catalog-search-input {
background: #111112 !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
body.dark-mode #catalog-search-input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
body.dark-mode .catalog-close-btn {
background: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
body.dark-mode .catalog-close-btn svg {
stroke: #ffffff !important;
}
/* SPA Public Profile Iframe View Container */
#view-perfil-publico {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9990; /* Just below bottom nav (9999) and settings modal (9998) */
background: #0b0b0c;
border: none;
display: none;
animation: slideUpProfile 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
#iframe-perfil-publico {
width: 100%;
height: 100%;
border: none;
background: transparent;
}
@keyframes slideUpProfile {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@media (max-width: 1024px) {
#view-perfil-publico {
bottom: 70px; /* Leave space for bottom nav bar on mobile */
}
}
/* ==========================================================================
NUEVAS SECCIONES OPTIMIZADAS DE LANDING PAGE: REDESIGN LUXE EDITORIAL
========================================================================== */
.landing-page-container {
--brand-luxe: #6366f1; /* Indigo */
--brand-luxe-accent: #c084fc; /* Violet */
--brand-coral: #ff4757;
--luxe-dark: #090d16; /* Midnight deep dark */
--luxe-light: #1e293b;
--text-luxe-main: #334155;
--text-luxe-muted: #64748b;
--bg-luxe-main: #fbfbfa; /* Warm sand/pearl background */
--bg-luxe-card: #ffffff;
--luxe-border: #e8e8e6;
--glass-luxe-bg: rgba(255, 255, 255, 0.7);
--glass-luxe-border: rgba(255, 255, 255, 0.4);
--shadow-soft: 0 10px 30px rgba(9, 13, 22, 0.04);
--shadow-luxe: 0 20px 40px rgba(9, 13, 22, 0.08);
background: var(--bg-luxe-main);
color: var(--text-luxe-main);
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
/* Modo Oscuro */
body.dark-mode .landing-page-container {
--navy-dark: #f8fafc;
--luxe-dark: #f8fafc;
--luxe-light: #cbd5e1;
--text-luxe-main: #e2e8f0;
--text-luxe-muted: #94a3b8;
--bg-luxe-main: #06080e;
--bg-luxe-card: #0d111a;
--luxe-border: rgba(255, 255, 255, 0.06);
--glass-luxe-bg: rgba(13, 17, 26, 0.85);
--glass-luxe-border: rgba(255, 255, 255, 0.06);
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
--shadow-luxe: 0 20px 50px rgba(0, 0, 0, 0.5);
}
/* Títulos generales */
.section-center-header {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
padding: 0 20px;
}
.luxe-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--brand-luxe);
margin-bottom: 18px;
}
.luxe-badge-outline {
display: inline-block;
padding: 6px 16px;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brand-luxe);
background: rgba(99, 102, 241, 0.06);
border: 1px solid rgba(99, 102, 241, 0.12);
margin-bottom: 18px;
}
.section-center-header .luxe-section-title {
font-size: 2.6rem;
font-weight: 800;
font-family: 'Outfit', sans-serif;
color: var(--luxe-dark);
margin: 0 0 14px 0;
letter-spacing: -0.8px;
}
.section-center-header .luxe-section-subtitle {
font-size: 1.08rem;
color: var(--text-luxe-muted);
line-height: 1.6;
margin: 0;
}
/* ==========================================
1. HERO LUXE SECTION
========================================== */
.hero-luxe-section {
position: relative;
width: 100%;
min-height: 85vh;
display: flex;
align-items: center;
padding: 100px 5% 80px;
overflow: hidden;
background: var(--bg-luxe-main);
}
.hero-luxe-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('hero_background.jpg');
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0.35;
animation: slowZoomHero 30s infinite alternate ease-in-out;
}
body.dark-mode .hero-luxe-section::before {
opacity: 0.15;
}
.hero-luxe-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--bg-luxe-main) 35%, rgba(251, 251, 250, 0.4) 65%, transparent 100%);
z-index: 1;
pointer-events: none;
}
body.dark-mode .hero-luxe-section::after {
background: linear-gradient(90deg, var(--bg-luxe-main) 35%, rgba(6, 8, 14, 0.4) 65%, transparent 100%);
}
@keyframes slowZoomHero {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
.hero-luxe-bg-decor {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
/* Blur Blobs */
.luxe-blob {
position: absolute;
border-radius: 50%;
filter: blur(140px);
opacity: 0.08;
mix-blend-mode: multiply;
animation: blobFloat 12s infinite alternate ease-in-out;
}
body.dark-mode .luxe-blob {
opacity: 0.12;
mix-blend-mode: screen;
filter: blur(160px);
}
.luxe-blob-1 {
top: -10%;
left: 10%;
width: 450px;
height: 450px;
background: var(--brand-luxe);
}
.luxe-blob-2 {
bottom: -10%;
right: 15%;
width: 500px;
height: 500px;
background: var(--brand-luxe-accent);
animation-delay: 4s;
}
@keyframes blobFloat {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(30px, -50px) scale(1.1); }
100% { transform: translate(-20px, 20px) scale(0.9); }
}
/* Subtle Grid Pattern */
.luxe-grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(99, 102, 241, 0.15) 1.2px, transparent 1.2px);
background-size: 32px 32px;
opacity: 0.45;
mask-image: radial-gradient(circle at 50% 50%, black 60%, transparent 100%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, black 60%, transparent 100%);
}
body.dark-mode .luxe-grid-pattern {
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.2px);
opacity: 0.6;
}
.hero-luxe-content {
display: flex;
align-items: center;
gap: 60px;
max-width: 1240px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 3;
}
.hero-luxe-left {
flex: 1.1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.luxe-hero-title {
font-size: 4rem;
font-weight: 800;
font-family: 'Outfit', sans-serif;
color: var(--luxe-dark);
line-height: 1.1;
margin: 0 0 20px 0;
letter-spacing: -2px;
}
.luxe-hero-subtitle {
font-size: 1.15rem;
color: var(--text-luxe-muted);
line-height: 1.6;
margin: 0 0 40px 0;
max-width: 520px;
}
/* Luxe Search Widget */
.luxe-search-widget {
background: var(--bg-luxe-card);
border-radius: 24px;
padding: 12px;
width: 100%;
max-width: 580px;
box-shadow: var(--shadow-luxe);
border: 1px solid var(--luxe-border);
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
}
.luxe-search-tabs {
display: flex;
gap: 4px;
}
.luxe-search-tab {
background: transparent;
border: none;
outline: none;
padding: 8px 20px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 700;
color: var(--text-luxe-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.luxe-search-tab:hover {
color: var(--luxe-dark);
}
.luxe-search-tab.active {
color: #ffffff;
background: var(--brand-luxe);
}
.luxe-search-input-box {
display: flex;
align-items: center;
background: var(--bg-luxe-main);
border: 1px solid var(--luxe-border);
border-radius: 16px;
padding: 4px 4px 4px 16px;
gap: 10px;
transition: all 0.2s;
}
.luxe-search-input-box:focus-within {
border-color: var(--brand-luxe);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.luxe-search-icon {
color: var(--text-luxe-muted);
display: flex;
align-items: center;
}
.luxe-search-btn {
background: var(--brand-luxe);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 26px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.luxe-search-btn:hover {
background: var(--brand-luxe-accent);
transform: translateY(-1px);
}
/* Custom Geocoder input inside Hero */
.luxe-search-input-box .apple-geocoder-input {
background: transparent !important;
color: var(--text-luxe-main) !important;
padding: 12px 0 !important;
font-size: 1rem !important;
font-weight: 600 !important;
font-family: inherit !important;
}
.luxe-search-input-box .apple-geocoder-input::placeholder {
color: var(--text-luxe-muted) !important;
opacity: 0.7;
}
/* Quick Categories pills */
.luxe-quick-categories {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.luxe-quick-btn {
background: transparent;
border: 1px solid var(--luxe-border);
color: var(--text-luxe-main);
border-radius: 9999px;
padding: 8px 18px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.luxe-quick-btn:hover {
background: var(--brand-luxe);
color: #ffffff;
border-color: var(--brand-luxe);
transform: translateY(-1px);
}
/* Hero Luxe Right Collage */
.hero-luxe-right {
flex: 0.9;
position: relative;
display: flex;
justify-content: flex-end;
}
.collage-container {
position: relative;
width: 100%;
max-width: 440px;
height: 480px;
}
.collage-img-main-box {
width: 85%;
height: 85%;
border-radius: 32px;
overflow: hidden;
box-shadow: var(--shadow-luxe);
border: 6px solid var(--bg-luxe-card);
}
.collage-img-main {
width: 100%;
height: 100%;
object-fit: cover;
}
.collage-img-accent-box {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-luxe);
border: 6px solid var(--bg-luxe-card);
z-index: 2;
}
.collage-img-accent {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Glassmorphic Luxe Floating Card */
.luxe-floating-card {
position: absolute;
top: 40%;
right: -30px;
background: var(--glass-luxe-bg);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid var(--glass-luxe-border);
border-radius: 20px;
padding: 16px 20px;
box-shadow: var(--shadow-luxe);
display: flex;
align-items: center;
gap: 14px;
z-index: 3;
animation: floatingLuxe 4s ease-in-out infinite alternate;
}
@keyframes floatingLuxe {
from { transform: translateY(0); }
to { transform: translateY(-10px); }
}
.card-pulse {
width: 10px;
height: 10px;
background: var(--brand-luxe);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
.card-details {
display: flex;
flex-direction: column;
}
.card-details .price {
font-size: 1.15rem;
font-weight: 800;
color: var(--brand-luxe);
font-family: 'Outfit', sans-serif;
}
.card-details .loc {
font-size: 0.85rem;
font-weight: 700;
color: var(--luxe-dark);
}
.card-details .specs {
font-size: 0.75rem;
color: var(--text-luxe-muted);
font-weight: 500;
margin-top: 2px;
}
/* ==========================================
2. FEATURED CAROUSEL (LUXE)
========================================== */
.featured-luxe-section {
padding: 100px 5%;
background: var(--bg-luxe-card);
border-top: 1px solid var(--luxe-border);
border-bottom: 1px solid var(--luxe-border);
}
.luxe-carousel-container {
position: relative;
display: flex;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.luxe-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-luxe-card);
border: 1px solid var(--luxe-border);
color: var(--luxe-dark);
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s;
}
.luxe-carousel-arrow:hover {
background: var(--brand-luxe);
border-color: var(--brand-luxe);
color: #ffffff;
}
.luxe-carousel-arrow.prev { left: -22px; }
.luxe-carousel-arrow.next { right: -22px; }
/* Custom property card styles overrides for Luxe */
.property-glass-card-premium {
min-width: 310px;
max-width: 310px;
background: var(--bg-luxe-card);
border: 1px solid var(--luxe-border);
border-radius: 20px;
box-shadow: var(--shadow-soft);
}
.property-glass-card-premium:hover {
border-color: var(--brand-luxe);
transform: translateY(-8px);
}
.property-glass-card-premium .price {
color: var(--brand-luxe) !important;
}
.property-glass-card-premium .card-detail-btn:hover {
background: var(--brand-luxe) !important;
border-color: var(--brand-luxe) !important;
}
/* ==========================================
3. INTERACTIVE EXPERIENCE SELECTOR
========================================== */
.experience-selector-section {
padding: 100px 5%;
background: var(--bg-luxe-main);
}
.experience-selector-container {
display: flex;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.selector-left-triggers {
flex: 0.9;
display: flex;
flex-direction: column;
gap: 20px;
}
.service-tab-trigger {
background: transparent;
border: 1px solid var(--luxe-border);
border-radius: 20px;
padding: 24px 30px;
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.service-tab-trigger:hover {
transform: translateX(6px);
border-color: var(--brand-luxe);
}
.service-tab-trigger .num {
font-size: 1.5rem;
font-weight: 800;
font-family: 'Outfit', sans-serif;
color: var(--text-luxe-muted);
line-height: 1;
transition: color 0.3s;
}
.service-tab-trigger h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--luxe-dark);
margin: 0 0 4px 0;
transition: color 0.3s;
}
.service-tab-trigger p {
font-size: 0.85rem;
color: var(--text-luxe-muted);
margin: 0;
}
/* Tab active trigger styles */
.service-tab-trigger.active {
background: var(--bg-luxe-card);
border-color: var(--brand-luxe);
box-shadow: var(--shadow-luxe);
}
.service-tab-trigger.active .num {
color: var(--brand-luxe);
}
.service-tab-trigger.active h3 {
color: var(--brand-luxe);
}
/* Selector right panels */
.selector-right-panels {
flex: 1.1;
position: relative;
min-height: 380px;
}
.service-detail-panel {
display: none;
background: var(--bg-luxe-card);
border: 1px solid var(--luxe-border);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-luxe);
opacity: 0;
transform: scale(0.96);
transition: all 0.4s ease;
}
.service-detail-panel.active {
display: flex;
flex-direction: column;
opacity: 1;
transform: scale(1);
}
.panel-visual {
width: 100%;
height: 200px;
overflow: hidden;
}
.panel-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.panel-info {
padding: 30px;
}
.panel-info h3 {
font-size: 1.4rem;
font-weight: 800;
color: var(--luxe-dark);
margin: 0 0 12px 0;
font-family: 'Outfit', sans-serif;
}
.panel-info p {
font-size: 0.92rem;
color: var(--text-luxe-muted);
line-height: 1.6;
margin: 0 0 24px 0;
}
.luxe-panel-btn {
background: var(--bg-luxe-main);
border: 1px solid var(--luxe-border);
color: var(--luxe-dark);
padding: 12px 28px;
border-radius: 12px;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.luxe-panel-btn:hover {
background: var(--brand-luxe);
border-color: var(--brand-luxe);
color: #ffffff;
}
.luxe-panel-btn.active {
background: var(--brand-luxe);
border-color: var(--brand-luxe);
color: #ffffff;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}
.luxe-panel-btn.active:hover {
background: var(--brand-luxe-accent);
border-color: var(--brand-luxe-accent);
}
/* ==========================================
4. MAGAZINE-STYLE NEIGHBORHOOD EXPLORER
========================================== */
.magazine-zones-section {
padding: 100px 5%;
background: var(--bg-luxe-card);
border-top: 1px solid var(--luxe-border);
border-bottom: 1px solid var(--luxe-border);
}
.magazine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
.magazine-card {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-soft);
aspect-ratio: 0.75;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.magazine-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-luxe);
}
.card-img-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.magazine-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.magazine-card:hover img {
transform: scale(1.06);
}
.magazine-card .card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(9, 13, 22, 0.1) 0%, rgba(9, 13, 22, 0.4) 60%, rgba(9, 13, 22, 0.9) 100%);
z-index: 2;
}
.magazine-card .card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 24px;
z-index: 3;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
.card-num {
font-size: 2.2rem;
font-weight: 300;
font-family: 'Outfit', sans-serif;
color: var(--brand-luxe-accent);
margin-bottom: auto;
opacity: 0.9;
}
.card-text h3 {
font-size: 1.35rem;
font-weight: 800;
margin: 0 0 4px 0;
font-family: 'Outfit', sans-serif;
}
.card-text p {
font-size: 0.85rem;
margin: 0;
opacity: 0.8;
}
.card-arrow {
position: absolute;
bottom: 24px;
right: 24px;
font-size: 1.4rem;
color: var(--brand-luxe-accent);
transition: transform 0.3s;
}
.magazine-card:hover .card-arrow {
transform: translateX(4px);
color: #ffffff;
}
/* ==========================================
5. TECHNOLOGY & SHOWCASE LUXE
========================================== */
.tech-luxe-section {
padding: 100px 5%;
background: var(--bg-luxe-main);
}
.tech-luxe-container {
display: flex;
align-items: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
.tech-luxe-visual {
flex: 1;
display: flex;
justify-content: center;
}
.mockup-frame {
position: relative;
width: 100%;
max-width: 440px;
border-radius: 28px;
overflow: hidden;
box-shadow: var(--shadow-luxe);
border: 6px solid var(--bg-luxe-card);
}
.mockup-img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.floating-badge-360 {
position: absolute;
top: 20px;
left: 20px;
background: rgba(9, 13, 22, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 8px 18px;
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
}
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: pulseDotEffect 1.5s infinite;
}
@keyframes pulseDotEffect {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.tech-luxe-text {
flex: 1;
}
.tech-luxe-text h2 {
font-size: 2.6rem;
font-weight: 800;
color: var(--luxe-dark);
margin: 12px 0 20px 0;
font-family: 'Outfit', sans-serif;
letter-spacing: -0.8px;
}
.tech-luxe-text p {
font-size: 1.05rem;
color: var(--text-luxe-muted);
line-height: 1.6;
margin: 0 0 35px 0;
}
.tech-points-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.tech-point-item {
display: flex;
gap: 24px;
align-items: flex-start;
}
.point-number {
font-size: 0.85rem;
font-weight: 800;
color: var(--brand-luxe);
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.15);
padding: 6px 12px;
border-radius: 8px;
font-family: 'Outfit', sans-serif;
}
.point-desc h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--luxe-dark);
margin: 0 0 6px 0;
}
.point-desc p {
font-size: 0.95rem;
color: var(--text-luxe-muted);
line-height: 1.5;
margin: 0;
}
/* ==========================================
6. BENEFITS LUXE SECTION
========================================== */
.benefits-luxe-section {
padding: 100px 5%;
background: var(--bg-luxe-card);
border-top: 1px solid var(--luxe-border);
border-bottom: 1px solid var(--luxe-border);
}
.benefits-luxe-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
.benefit-luxe-card {
background: var(--bg-luxe-main);
border: 1px solid var(--luxe-border);
border-radius: 20px;
padding: 35px 25px;
transition: all 0.3s;
}
.benefit-luxe-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-soft);
border-color: var(--brand-luxe);
}
.card-icon {
font-size: 2.2rem;
margin-bottom: 20px;
}
.benefit-luxe-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--luxe-dark);
margin: 0 0 10px 0;
}
.benefit-luxe-card p {
font-size: 0.9rem;
color: var(--text-luxe-muted);
line-height: 1.5;
margin: 0;
}
/* ==========================================
7. CTA SELLER LUXE SECTION
========================================== */
.cta-seller-luxe-section {
padding: 100px 5% 60px;
background: var(--bg-luxe-main);
}
.cta-luxe-banner {
background: var(--luxe-dark);
border-radius: 32px;
display: flex;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
box-shadow: var(--shadow-luxe);
}
body.dark-mode .cta-luxe-banner {
background: var(--bg-luxe-card);
border: 1px solid var(--luxe-border);
}
.cta-luxe-text {
flex: 1.2;
padding: 60px;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
}
.cta-luxe-text h2 {
font-size: 2.6rem;
font-weight: 800;
margin: 0 0 16px 0;
font-family: 'Outfit', sans-serif;
letter-spacing: -0.8px;
line-height: 1.2;
}
body.dark-mode .cta-luxe-text h2 {
color: #ffffff;
}
.cta-luxe-text p {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
margin: 0 0 35px 0;
}
.cta-luxe-buttons {
display: flex;
gap: 20px;
align-items: center;
}
.cta-luxe-btn-primary {
background: var(--brand-luxe);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 14px 32px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.cta-luxe-btn-primary:hover {
background: var(--brand-luxe-accent);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.cta-luxe-link-secondary {
color: #ffffff;
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
transition: transform 0.2s;
}
.cta-luxe-link-secondary:hover {
text-decoration: underline;
transform: translateX(4px);
}
.cta-luxe-visual {
flex: 0.8;
background: #0f172a;
overflow: hidden;
}
.cta-luxe-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================
8. SEO ARTICLE LUXE & POPULAR SEARCHES
========================================== */
.seo-luxe-article {
padding: 60px 5%;
max-width: 900px;
margin: 0 auto;
}
.seo-luxe-header h2 {
font-size: 1.8rem;
font-weight: 800;
color: var(--luxe-dark);
margin: 0 0 20px 0;
font-family: 'Outfit', sans-serif;
text-align: center;
}
.seo-luxe-body p {
font-size: 1rem;
color: var(--text-luxe-muted);
line-height: 1.7;
text-align: justify;
margin-bottom: 16px;
}
.popular-searches-modern {
padding: 80px 5%;
background: var(--bg-luxe-main);
border-top: 1px solid var(--luxe-border);
}
.popular-searches-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.search-column h3 {
font-size: 1.15rem;
font-weight: 800;
color: var(--luxe-dark);
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--brand-luxe);
font-family: 'Outfit', sans-serif;
}
.seo-links-list-modern {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.seo-links-list-modern a {
font-size: 0.95rem;
color: var(--text-luxe-muted);
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.seo-links-list-modern a:hover {
color: var(--brand-luxe);
padding-left: 4px;
}
/* ==========================================
9. FOOTER MODERN LUXE
========================================== */
.landing-footer-modern {
background: var(--bg-luxe-card);
border-top: 1px solid var(--luxe-border);
padding: 80px 5% 40px;
}
.footer-modern-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 60px;
max-width: 1200px;
margin: 0 auto 50px;
}
.footer-modern-brand h4,
.footer-modern-links h4 {
font-size: 1.05rem;
font-weight: 800;
color: var(--luxe-dark);
margin: 0;
font-family: 'Outfit', sans-serif;
}
.footer-logo {
height: 32px;
align-self: flex-start;
}
.footer-modern-brand p {
font-size: 0.95rem;
color: var(--text-luxe-muted);
line-height: 1.6;
margin: 0;
}
.footer-social-row {
display: flex;
gap: 12px;
}
.social-icon-link {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-luxe-main);
border: 1px solid var(--luxe-border);
color: var(--text-luxe-muted);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.social-icon-link:hover {
background: var(--brand-luxe);
border-color: var(--brand-luxe);
color: #ffffff;
transform: translateY(-2px);
}
.footer-modern-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-modern-links a {
font-size: 0.9rem;
color: var(--text-luxe-muted);
text-decoration: none;
transition: color 0.2s;
align-self: flex-start;
}
.footer-modern-links a:hover {
color: var(--brand-luxe);
}
.footer-modern-bottom {
border-top: 1px solid var(--luxe-border);
padding-top: 30px;
text-align: center;
font-size: 0.85rem;
color: var(--text-luxe-muted);
max-width: 1200px;
margin: 0 auto;
}
/* ==========================================
RESPONSIVE DESIGN (DESKTOP & TABLET > 1024px)
========================================== */
@media (max-width: 1200px) {
.magazine-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1100px) {
.hero-luxe-content {
flex-direction: column-reverse;
gap: 40px;
text-align: center;
}
.hero-luxe-left {
align-items: center;
text-align: center;
}
.luxe-hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.experience-selector-container {
flex-direction: column;
gap: 40px;
}
.selector-left-triggers {
width: 100%;
}
.selector-right-panels {
width: 100%;
}
.tech-luxe-container {
flex-direction: column-reverse;
gap: 40px;
}
.benefits-luxe-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-luxe-banner {
flex-direction: column;
}
.cta-luxe-text {
padding: 50px;
}
.cta-luxe-visual {
height: 250px;
}
}
@media (max-width: 1024px) {
.landing-page-container {
display: none !important;
}
}