/* ===========================================================
ESTILOS AISLADOS PARA MLS CARDS
=========================================================== */
:root {
/* Fondos */
--color-white: #ffffff;
/* Fondo general */
--color-grey-soft: #f8f9fa;
/* Secciones suaves, tarjetas claras */
--color-grey-hard: #cfcfcf;
/* Secciones gris medias */
/* Bordes */
--color-border: #e0e0e0;
/* Único borde necesario */
/* Texto */
--color-text: rgba(0, 0, 0, 0.87);
/* Texto principal */
--color-text-muted: #999999;
/* Texto secundario */
--color-text-hard: #030303;
/* Títulos o textos de alto contraste */
/* 🆕 COLORES SECUNDARIOS EXPANDIDOS */
--detail-warning-color: #ffc107;
--detail-danger-color: #dc3545;
--detail-info-color: #17a2b8;
--detail-gloho-bg: #011e60;
/* Espaciado EXISTENTE - MANTENIDO */
--spacing-0: 0;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
/* Tipografía EXISTENTE - MANTENIDO */
--detail-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--titles-font-family: 'Cormorant Infant', 'Georgia', 'Times New Roman', Times, serif;
--detail-font-size-xs: 0.625rem;
/*10px*/
--detail-font-size-sm: 0.75rem;
/*12px*/
--detail-font-size-base: 0.875rem;
/*14px*/
--detail-font-size-lg: 1.063rem;
/*17px*/
--detail-font-size-xl: 1.313rem;
/*21px*/
--detail-font-size-xxl: 2rem;
/*32px*/
--detail-font-size-xxxl: 2.5;
/*40px*/
/* Sombras y transiciones EXISTENTES - MANTENIDO */
--detail-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--detail-transition: all 0.3s ease;
/* 🆕 SOMBRAS EXPANDIDAS */
--detail-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--detail-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
--detail-shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.2);
/* 🆕 TRANSICIONES EXPANDIDAS */
--detail-transition-fast: all 0.15s ease;
--detail-transition-slow: all 0.5s ease;
}
/* ========================================================
COMPATIBILIDAD CON BOOTSTRAP EXISTENTE - MANTENIDO
======================================================== */
.mls-detail-container .h1,
.container-iframe-data .h1,
.mls-detail-container .h2,
.container-iframe-data .h2,
.mls-detail-container .h3,
.container-iframe-data .h3,
.mls-detail-container .h4,
.container-iframe-data .h4,
.mls-detail-container .h5,
.container-iframe-data .h5,
.mls-detail-container .h6,
.container-iframe-data .h6,
.mls-detail-container h1,
.container-iframe-data h1,
.mls-detail-container h2,
.container-iframe-data h2,
.mls-detail-container h3,
.container-iframe-data h3,
.mls-detail-container h4,
.container-iframe-data h4,
.mls-detail-container h5,
.container-iframe-data h5,
.mls-detail-container h6,
.container-iframe-data h6 {
font-family: var(--detail-font-family);
line-height: 1.3;
font-weight: 600;
}
button:focus {
outline: none;
}
.mls-text-muted {
color: var(--color-text-muted);
}
/* Para elementos que puedan tener clases Bootstrap residuales */
.mb-1,
.mb-3,
.mb-4 {
margin-bottom: var(--spacing-16) !important;
}
.mt-2 {
margin-top: var(--spacing-8) !important;
}
.mt-3 {
margin-top: var(--spacing-16) !important;
}
.text-muted {
color: var(--color-text-muted) !important;
}
.fw-bold {
font-weight: 600 !important;
}
.small {
font-size: var(--detail-font-size-sm) !important;
}
/* CLASES PERSONALIZADAS EXISTENTES - MANTENIDO */
.primary-background-color {
background-color: var(--color-text);
}
.primary-background-color * {
color: var(--color-text-color) !important;
}
.color-white {
color: var(--color-text-color) !important;
}
/* ========================================================
🆕 UTILIDADES EXPANDIDAS - NUEVAS
========================================================== */
/* 🎨 COLORES Y FONDOS EXPANDIDOS */
.text-primary {
color: var(--color-text) !important;
}
.text-secondary {
color: var(--color-text-muted) !important;
}
.text-success {
color: var(--color-text-hard) !important;
}
.text-warning {
color: var(--detail-warning-color) !important;
}
.text-danger {
color: var(--detail-danger-color) !important;
}
.text-info {
color: var(--detail-info-color) !important;
}
.text-white {
color: white !important;
}
.text-dark {
color: var(--color-text) !important;
}
/* Fondos */
.bg-primary {
background-color: var(--color-text) !important;
color: var(--color-text-color) !important;
}
.bg-primary * {
color: var(--color-text-color) !important;
}
.bg-secondary {
background-color: var(--color-grey-hard) !important;
}
.bg-success {
background-color: var(--color-text-hard) !important;
color: white !important;
}
.bg-warning {
background-color: var(--detail-warning-color) !important;
color: var(--color-text) !important;
}
.bg-danger {
background-color: var(--detail-danger-color) !important;
color: white !important;
}
.bg-info {
background-color: var(--detail-info-color) !important;
color: white !important;
}
.bg-light {
background-color: var(--color-border) !important;
}
.bg-white {
background-color: white !important;
}
.bg-transparent {
background-color: transparent !important;
}
/* 📝 TIPOGRAFÍA EXPANDIDA */
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-justify {
text-align: justify !important;
}
/* Tamaños de fuente EXPANDIDOS */
.fs-xs {
font-size: var(--detail-font-size-xs) !important;
}
.fs-sm {
font-size: var(--detail-font-size-sm) !important;
}
.fs-base {
font-size: var(--detail-font-size-base) !important;
}
.fs-lg {
font-size: var(--detail-font-size-lg) !important;
}
.fs-xl {
font-size: var(--detail-font-size-xl) !important;
}
.fs-xxl {
font-size: var(--detail-font-size-xxl) !important;
}
.fs-xxxl {
font-size: var(--detail-font-size-xxxl) !important;
}
/* Peso de fuente */
.fw-light {
font-weight: 300 !important;
}
.fw-normal {
font-weight: 400 !important;
}
.fw-medium {
font-weight: 500 !important;
}
.fw-semibold {
font-weight: 500 !important;
}
.fw-black {
font-weight: 900 !important;
}
/* Estilo y transformación de texto */
.fst-normal {
font-style: normal !important;
}
.fst-italic {
font-style: italic !important;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-decoration-none {
text-decoration: none !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
/* Altura de línea */
.lh-1 {
line-height: 1 !important;
}
.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
/* 📏 ESPACIADO EXPANDIDO - SISTEMA NUMERADO */
/* Margins */
.m-0 {
margin: var(--spacing-0) !important;
}
.m-1 {
margin: var(--spacing-4) !important;
}
.m-2 {
margin: var(--spacing-8) !important;
}
.m-3 {
margin: var(--spacing-12) !important;
}
.m-4 {
margin: var(--spacing-16) !important;
}
.m-5 {
margin: var(--spacing-20) !important;
}
.m-6 {
margin: var(--spacing-24) !important;
}
.m-8 {
margin: var(--spacing-32) !important;
}
.m-10 {
margin: var(--spacing-40) !important;
}
.m-12 {
margin: var(--spacing-48) !important;
}
.m-auto {
margin: auto !important;
}
/* Margin Top */
.mt-0 {
margin-top: var(--spacing-0) !important;
}
.mt-1 {
margin-top: var(--spacing-4) !important;
}
.mt-4 {
margin-top: var(--spacing-16) !important;
}
.mt-5 {
margin-top: var(--spacing-20) !important;
}
.mt-6 {
margin-top: var(--spacing-24) !important;
}
.mt-8 {
margin-top: var(--spacing-32) !important;
}
.mt-10 {
margin-top: var(--spacing-40) !important;
}
.mt-12 {
margin-top: var(--spacing-48) !important;
}
/* Margin Bottom */
.mb-0 {
margin-bottom: var(--spacing-0) !important;
}
.mb-2 {
margin-bottom: var(--spacing-8) !important;
}
.mb-5 {
margin-bottom: var(--spacing-20) !important;
}
.mb-6 {
margin-bottom: var(--spacing-24) !important;
}
.mb-8 {
margin-bottom: var(--spacing-32) !important;
}
.mb-10 {
margin-bottom: var(--spacing-40) !important;
}
.mb-12 {
margin-bottom: var(--spacing-48) !important;
}
/* Margin Left/Right (incluyendo versiones nuevas BS5) */
.ml-0,
.ms-0 {
margin-left: var(--spacing-0) !important;
}
.ml-1,
.ms-1 {
margin-left: var(--spacing-4) !important;
}
.ml-2,
.ms-2 {
margin-left: var(--spacing-8) !important;
}
.ml-3,
.ms-3 {
margin-left: var(--spacing-12) !important;
}
.ml-4,
.ms-4 {
margin-left: var(--spacing-16) !important;
}
.ml-auto,
.ms-auto {
margin-left: auto !important;
}
.mr-0,
.me-0 {
margin-right: var(--spacing-0) !important;
}
.mr-1,
.me-1 {
margin-right: var(--spacing-4) !important;
}
.mr-2,
.me-2 {
margin-right: var(--spacing-8) !important;
}
.mr-3,
.me-3 {
margin-right: var(--spacing-12) !important;
}
.mr-4,
.me-4 {
margin-right: var(--spacing-16) !important;
}
.mr-auto,
.me-auto {
margin-right: auto !important;
}
/* Margins combinados */
.mx-0 {
margin-left: var(--spacing-0) !important;
margin-right: var(--spacing-0) !important;
}
.mx-1 {
margin-left: var(--spacing-4) !important;
margin-right: var(--spacing-4) !important;
}
.mx-2 {
margin-left: var(--spacing-8) !important;
margin-right: var(--spacing-8) !important;
}
.mx-3 {
margin-left: var(--spacing-12) !important;
margin-right: var(--spacing-12) !important;
}
.mx-4 {
margin-left: var(--spacing-16) !important;
margin-right: var(--spacing-16) !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.my-0 {
margin-top: var(--spacing-0) !important;
margin-bottom: var(--spacing-0) !important;
}
.my-1 {
margin-top: var(--spacing-4) !important;
margin-bottom: var(--spacing-4) !important;
}
.my-2 {
margin-top: var(--spacing-8) !important;
margin-bottom: var(--spacing-8) !important;
}
.my-3 {
margin-top: var(--spacing-12) !important;
margin-bottom: var(--spacing-12) !important;
}
.my-4 {
margin-top: var(--spacing-16) !important;
margin-bottom: var(--spacing-16) !important;
}
/* Paddings */
.p-0 {
padding: var(--spacing-0) !important;
}
.p-1 {
padding: var(--spacing-4) !important;
}
.p-2 {
padding: var(--spacing-8) !important;
}
.p-3 {
padding: var(--spacing-12) !important;
}
.p-4 {
padding: var(--spacing-16) !important;
}
.p-5 {
padding: var(--spacing-20) !important;
}
.p-6 {
padding: var(--spacing-24) !important;
}
.p-8 {
padding: var(--spacing-32) !important;
}
/* Padding específicos */
.pt-0 {
padding-top: var(--spacing-0) !important;
}
.pt-1 {
padding-top: var(--spacing-4) !important;
}
.pt-2 {
padding-top: var(--spacing-8) !important;
}
.pt-3 {
padding-top: var(--spacing-12) !important;
}
.pt-4 {
padding-top: var(--spacing-16) !important;
}
.pt-5 {
padding-top: var(--spacing-20) !important;
}
.pt-6 {
padding-top: var(--spacing-24) !important;
}
.pb-0 {
padding-bottom: var(--spacing-0) !important;
}
.pb-1 {
padding-bottom: var(--spacing-4) !important;
}
.pb-2 {
padding-bottom: var(--spacing-8) !important;
}
.pb-3 {
padding-bottom: var(--spacing-12) !important;
}
.pb-4 {
padding-bottom: var(--spacing-16) !important;
}
.pb-5 {
padding-bottom: var(--spacing-20) !important;
}
.pb-6 {
padding-bottom: var(--spacing-24) !important;
}
.pl-0,
.ps-0 {
padding-left: var(--spacing-0) !important;
}
.pl-1,
.ps-1 {
padding-left: var(--spacing-4) !important;
}
.pl-2,
.ps-2 {
padding-left: var(--spacing-8) !important;
}
.pl-3,
.ps-3 {
padding-left: var(--spacing-12) !important;
}
.pl-4,
.ps-4 {
padding-left: var(--spacing-16) !important;
}
.pl-5,
.ps-5 {
padding-left: var(--spacing-20) !important;
}
.pr-0,
.pe-0 {
padding-right: var(--spacing-0) !important;
}
.pr-1,
.pe-1 {
padding-right: var(--spacing-4) !important;
}
.pr-2,
.pe-2 {
padding-right: var(--spacing-8) !important;
}
.pr-3,
.pe-3 {
padding-right: var(--spacing-12) !important;
}
.pr-4,
.pe-4 {
padding-right: var(--spacing-16) !important;
}
.pr-5,
.pe-5 {
padding-right: var(--spacing-20) !important;
}
/* Paddings combinados */
.px-0 {
padding-left: var(--spacing-0) !important;
padding-right: var(--spacing-0) !important;
}
.px-1 {
padding-left: var(--spacing-4) !important;
padding-right: var(--spacing-4) !important;
}
.px-2 {
padding-left: var(--spacing-8) !important;
padding-right: var(--spacing-8) !important;
}
.px-3 {
padding-left: var(--spacing-12) !important;
padding-right: var(--spacing-12) !important;
}
.px-4 {
padding-left: var(--spacing-16) !important;
padding-right: var(--spacing-16) !important;
}
.px-5 {
padding-left: var(--spacing-20) !important;
padding-right: var(--spacing-20) !important;
}
.py-0 {
padding-top: var(--spacing-0) !important;
padding-bottom: var(--spacing-0) !important;
}
.py-1 {
padding-top: var(--spacing-4) !important;
padding-bottom: var(--spacing-4) !important;
}
.py-2 {
padding-top: var(--spacing-8) !important;
padding-bottom: var(--spacing-8) !important;
}
.py-3 {
padding-top: var(--spacing-12) !important;
padding-bottom: var(--spacing-12) !important;
}
.py-4 {
padding-top: var(--spacing-16) !important;
padding-bottom: var(--spacing-16) !important;
}
.py-5 {
padding-top: var(--spacing-20) !important;
padding-bottom: var(--spacing-20) !important;
}
/* 📦 FLEXBOX Y LAYOUT */
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-grid {
display: grid !important;
}
/* Flex Direction */
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
/* Justify Content */
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.justify-content-evenly {
justify-content: space-evenly !important;
}
/* Align Items */
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
/* Flex Grow/Shrink */
.flex-fill {
flex: 1 1 auto !important;
}
.flex-grow-0 {
flex-grow: 0 !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.flex-shrink-0 {
flex-shrink: 0 !important;
}
.flex-shrink-1 {
flex-shrink: 1 !important;
}
/* Flex Wrap */
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
/* Gap */
.gap-0 {
gap: var(--spacing-0) !important;
}
.gap-1 {
gap: var(--spacing-4) !important;
}
.gap-2 {
gap: var(--spacing-8) !important;
}
.gap-3 {
gap: var(--spacing-12) !important;
}
.gap-4 {
gap: var(--spacing-16) !important;
}
.gap-5 {
gap: var(--spacing-20) !important;
}
.gap-6 {
gap: var(--spacing-24) !important;
}
/* 🎨 BORDES Y EFECTOS */
.border {
border: 1px solid var(--color-border) !important;
}
.border-0 {
border: 0 !important;
}
.border-top {
border-top: 1px solid var(--color-border) !important;
}
.border-bottom {
border-bottom: 1px solid var(--color-border) !important;
}
.border-left {
border-left: 1px solid var(--color-border) !important;
}
.border-right {
border-right: 1px solid var(--color-border) !important;
}
/* Border Colors */
.border-primary {
border-color: var(--color-text) !important;
}
.border-muted {
border-color: var(--color-text-muted) !important;
}
/* Border Radius */
.rounded {
border-radius: 6px !important;
}
.rounded-0 {
border-radius: 0 !important;
}
.rounded-sm {
border-radius: 3px !important;
}
.rounded-lg {
border-radius: 12px !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.rounded-pill {
border-radius: 50rem !important;
}
/* Sombras EXPANDIDAS */
.shadow {
box-shadow: var(--detail-shadow) !important;
}
.shadow-sm {
box-shadow: var(--detail-shadow-sm) !important;
}
.shadow-lg {
box-shadow: var(--detail-shadow-lg) !important;
}
.shadow-xl {
box-shadow: var(--detail-shadow-xl) !important;
}
.shadow-none {
box-shadow: none !important;
}
/* 📐 DIMENSIONES */
.w-25 {
width: 25% !important;
}
.w-30 {
width: 30% !important;
}
.w-40 {
width: 40% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
.w-100 {
width: 100% !important;
}
.w-auto {
width: auto !important;
}
.h-25 {
height: 25% !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}
.h-100 {
height: 100% !important;
}
.h-auto {
height: auto !important;
}
.mw-100 {
max-width: 100% !important;
}
.mh-100 {
max-height: 100% !important;
}
/* 🔧 POSITION Y OVERFLOW */
.position-static {
position: static !important;
}
.position-relative {
position: relative !important;
}
.position-absolute {
position: absolute !important;
}
.position-fixed {
position: fixed !important;
}
.position-sticky {
position: sticky !important;
}
.overflow-auto {
overflow: auto !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.overflow-visible {
overflow: visible !important;
}
.overflow-scroll {
overflow: scroll !important;
}
/* 👆 CURSOR Y INTERACCIÓN */
.cursor-pointer {
cursor: pointer !important;
}
.cursor-default {
cursor: default !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}
.user-select-none {
user-select: none !important;
}
.user-select-auto {
user-select: auto !important;
}
.user-select-all {
user-select: all !important;
}
/* 🎯 CLASES ESPECÍFICAS PARA MLS */
.status-active {
background-color: var(--color-text-hard) !important;
color: white !important;
}
.status-pending {
background-color: var(--detail-warning-color) !important;
color: var(--color-text) !important;
}
.status-sold {
background-color: var(--detail-danger-color) !important;
color: white !important;
}
/* Badges */
.badge {
display: inline-block;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Cards */
.card {
background: white;
border-radius: 8px;
border: 1px solid var(--color-border);
overflow: hidden;
}
.card-body {
padding: var(--spacing-16);
}
/* Precio destacado */
.price-highlight {
font-size: var(--detail-font-size-xl) !important;
font-weight: 900 !important;
color: var(--color-text) !important;
}
/* Transiciones EXPANDIDAS */
.transition {
transition: var(--detail-transition) !important;
}
.transition-fast {
transition: var(--detail-transition-fast) !important;
}
.transition-slow {
transition: var(--detail-transition-slow) !important;
}
/* ===========================================================
Ajuste dinámico de columnas según estado del mapa
=========================================================== */
/* 🔹 Modo MAP (mapa visible): 2 columnas */
#mlsWrapper #mlsGrid {
grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}
/* 🔹 Modo LIST (mapa oculto): 4 columnas */
#mlsWrapper.no-map #mlsGrid {
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
/* ===========================================================
CARD
=========================================================== */
.mls-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border-radius: var(--spacing-8);
/* overflow: hidden; */
text-decoration: none;
color: var(--color-text);
transition: box-shadow 0.25s ease, transform 0.25s ease;
min-height: 300px;
max-height: 300px;
height: auto;
max-width: 335px;
/* border: 1px solid var(--color-border); */
box-shadow: 0px 3px 4px -1px #0000001a, 0px 2px 1px 0px #00000024, 0px -1px 1px 0 #0000000f;
position: relative;
/* Para posicionamiento del popover */
}
.mls-card:hover {
box-shadow: 0px 2px 4px -1px #0003, 0px 4px 5px 0px #00000024, 0px 1px 10px 0px #0000001f;
color: var(--color-text) !important;
/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); */
/* transform: translateY(-2px); */
}
/* Highlight para fichas seleccionadas desde InfoWindow */
.mls-card.highlighted {
border: 1px solid #303749 !important;
box-shadow: 0 4px 12px #3037494d !important;
transform: scale(1.02) !important;
transition: all 0.3s ease !important;
}
/* Imagen principal */
.mls-card-media {
position: relative;
height: 200px;
/* aspect-ratio: 16/9; */
background-color: #f9f9f9;
overflow: hidden;
-webkit-border-top-left-radius: var(--spacing-8);
-webkit-border-top-right-radius: var(--spacing-8);
-moz-border-radius-topleft: var(--spacing-8);
-moz-border-radius-topright: var(--spacing-8);
border-top-left-radius: var(--spacing-8);
border-top-right-radius: var(--spacing-8);
}
.mls-card-media img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.mls-card-badge {
position: absolute;
top: 4px;
left: 4px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.mls-card-badge-item {
max-width: 200px;
padding: 4px 8px;
border: none;
background-color: var(--color-text-hard);
border-radius: 4px;
color: var(--color-white);
font-size: 10px;
font-weight: 600;
line-height: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
.badge-tour-virtual {
background-color: var(--detail-info-color);
}
.badge-standard-status {
background-color: var(--color-grey-soft);
color: var(--color-text-hard);
}
/* Contenido */
.mls-card-body {
flex: 1;
/* padding: var(--spacing-16); */
padding: 16px 8px 16px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.8rem;
position: relative;
}
/* Header: precio + status */
.mls-card-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.mls-card-price {
font-size: 1.125rem;
font-weight: 500;
}
.mls-card-status {
background: var(--color-grey-hard);
color: var(--color-text);
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
}
/* ========================================================
MLS SHARE POPOVER - SISTEMA COMPLETO
======================================================== */
.mls-filters button.mls-card-share {
display: flex;
justify-content: center;
align-items: center;
/* gap: 4px; */
background: transparent;
border: none;
border-radius: 50%;
/* padding: 6px 10px; */
font-size: var(--detail-font-size-sm);
color: var(--color-text);
cursor: pointer;
transition: all 0.2s ease;
height: 32px;
width: 32px;
}
.mls-card-share:hover {
background: var(--color-grey-soft);
}
.mls-card-share svg {
flex-shrink: 0;
}
.mls-share-popover {
position: absolute;
bottom: 0;
right: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--spacing-8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
padding: 8px;
z-index: 1060;
min-width: 200px;
max-width: 100%;
width: 100%;
margin-top: 0;
animation: fadeIn 0.15s ease-out;
display: none;
}
.mls-share-popover.active {
display: block;
}
.mls-filters button {
border:none!important;
}
.mls-filters button.popover-close {
height: 20px;
width: 20px;
border-radius: 50%;
}
@keyframes popoverFadeIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ========================================================
NOTIFICACIONES - SISTEMA COMPLETO
======================================================== */
.share-notification {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 12px 20px;
border-radius: 6px;
color: white;
font-weight: 500;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
animation: slideInUp 0.3s ease;
}
.share-notification.success {
background: #28a745;
}
.share-notification.success.link-copied {
background: #05abb2;
}
.share-notification.error {
background: #dc3545;
}
.share-notification.fade-out {
animation: fadeOut 0.3s ease forwards;
}
@keyframes slideInUp {
from {
transform: translateX(-50%) translateY(100%);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
@keyframes fadeOut {
to {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.popover-header {
padding: 0;
border-bottom: none;
background: none;
border-radius: 0;
margin-bottom: 0;
display: flex;
color: inherit;
justify-content: space-between;
align-items: center;
}
.popover-title {
font-size: var(--detail-font-size-sm);
font-weight: 600;
/* color: var(--color-text); */
}
.popover-close {
background: none;
border: none;
font-size: 16px;
color: #999;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s ease;
}
.popover-close:hover {
background: #e9ecef;
color: var(--color-text);
}
/* CSS MEJORADO PARA CENTRAR SVGs EN BOTONES CIRCULARES */
.share-actions {
display: flex;
align-content: center;
justify-content: space-between;
gap: inherit;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
border: none;
font-size: var(--detail-font-size-sm);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
height: 42px;
width: 42px;
border-radius: 50%;
opacity: .7;
/* background-color: rgb(245, 206, 206); */
/* ✅ CENTRADO MEJORADO */
position: relative;
}
.share-btn svg {
/* ✅ REMOVER BACKGROUND DE DEBUG */
/* background-color: aqua; */
/* ✅ CENTRADO PERFECTO */
display: block;
margin: auto;
/* ✅ ASEGURAR DIMENSIONES CONSISTENTES */
width: 20px !important;
height: 20px !important;
/* ✅ CENTRADO ADICIONAL CON FLEXBOX */
flex-shrink: 0;
}
.share-btn:hover {
background-color: var(--color-grey-soft);
opacity: 1;
}
.share-btn:active {
transform: translateY(1px);
}
/* ✅ COLORES ESPECÍFICOS PARA CADA BOTÓN */
.whatsapp-share {
/* background-color: #e8f5e8; */
}
.whatsapp-share:hover {
/* background-color: #25d366; */
/* color: white; */
}
.facebook-share {
/* background-color: #e7f3ff;
color: #1877f2; */
}
.facebook-share:hover {
/* background-color: #1877f2;
color: white; */
}
.twitter-share {
/* background-color: #f0f0f0;
color: #000000; */
}
.twitter-share:hover {
/* background-color: #000000;
color: white; */
}
.instagram-share {
/* background-color: #fce4ec;
color: #e91e63; */
}
.instagram-share:hover {
/* background-color: #e91e63;
color: white; */
}
.linkedin-share {
/* background-color: #e3f2fd;
color: #0077b5; */
}
.linkedin-share:hover {
/* background-color: #0077b5;
color: white; */
}
.email-share {
/* background-color: #fff3cd; */
}
.email-share:hover {
/* background-color: #ffc107; */
/* color: #212529; */
}
.copy-link {
/* background-color: #e8f4f8; */
}
.copy-link:hover {
/* background-color: #05abb2; */
/* color: white; */
}
/* Info: beds, baths, Sq Ft */
.mls-card-info {
/* color: var(--color-text-muted); */
color: var(--color-text);
font-size: 0.75rem;
font-weight: 500;
/* padding: 0 16px; */
}
.mls-card-info span.text-muted {
background-color: aqua;
}
/* Dirección */
.mls-card-address {
/* font-size: var(--detail-font-size-xs); */
font-size: 0.688rem;
color: var(--color-text);
letter-spacing: -0.001rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* padding: 0 16px; */
}
/* Ciudad */
.mls-card-city {
/* color: var(--color-text-muted); */
color: var(--color-text);
}
/* Pager */
.mls-pager {
margin: 16px 0 24px;
display: flex;
justify-content: center;
gap: 6px;
font-size: var(--detail-font-size-sm);
position: static !important;
z-index: auto !important;
width: 100%;
clear: both;
}
.mls-pager .mls-pager-button {
width: 30px;
height: 30px;
/* padding: 6px 10px; */
border: 1px solid var(--color-border);
font-weight: 500;
}
.mls-pager .mls-pager-button:first-child,
.mls-pager .mls-pager-button:last-child {
color: var(--color-text-hard);
font-weight: 600;
}
.mls-pager .mls-pager-button[disabled] {
opacity: .6;
pointer-events: none;
}
.mls-pager .mls-pager-button:hover {
background-color: var(--color-grey-soft) !important;
}
.mls-pager .mls-pager-more {
padding: 6px 10px;
border: 1px solid var(--color-border);
background: var(--color-white);
cursor: pointer;
}
/* Placeholder Compatibilidad con todos los navegadores */
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #d0d6e2;
font-size: 12px;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: #d0d6e2;
font-size: 12px;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: #d0d6e2;
font-size: 12px;
}
input:-moz-placeholder {
/* Firefox 18- */
color: #d0d6e2;
font-size: 12px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Chevron hacia abajo - MÁS DELGADO */
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
/* Transición suave */
transition: background-image 0.3s ease;
}
/* Cuando el select está abierto/activo, rotar el chevron */
select:focus,
select:active {
/* Chevron hacia arriba */
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.custom-select-display,
.price-range-display {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.price-range-display {
width: 120px;
}
/* ========================================================
CUSTOM SELECT MEJORADO - ESTILO BOOTSTRAP SELECT
======================================================== */
.custom-select-wrapper {
position: relative;
display: inline-block;
/* min-width: 150px; */
font-family: var(--detail-font-family);
line-height: 100%;
}
.custom-select-display {
/* display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border: 1px solid var(--color-border);
background: white;
cursor: pointer;
border-radius: 0;
min-height: 38px;
transition: var(--detail-transition-fast); */
}
.custom-select-display:hover {
border-color: #ddd;
}
.custom-select-wrapper.mlsPropertyType .custom-select-display {
min-width: 170px !important;
}
.custom-select-wrapper.mlsTransactionType .custom-select-display,
.custom-select-wrapper.mlsTransactionType .custom-select-option {
min-width: 120px !important;
}
.custom-select-wrapper.mlsBaths .custom-select-display,
.custom-select-wrapper.mlsBeds .custom-select-display,
.custom-select-wrapper.mlsBaths .custom-select-option,
.custom-select-wrapper.mlsBeds .custom-select-option {
width: 80px;
}
.custom-select-wrapper.open .custom-select-display {
border-color: var(--color-text);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
/* box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); */
}
.custom-select-text {
flex: 1;
font-size: var(--detail-font-size-sm);
color: var(--color-text);
width: 85px;
/* background-color: rgb(250, 226, 226); */
}
.price-range-text {
width: 95px;
/* background-color: rgb(229, 250, 226); */
}
.custom-select-text,
.price-range-text {
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Hides any content that overflows the element's box */
text-overflow: ellipsis; /* Displays an ellipsis (...) to indicate truncated text */
}
.custom-select-wrapper.open .custom-select-dropdown {
opacity: 1;
transform: translateY(0);
pointer-events: all;
display: block;
animation: dropdownFadeIn 0.15s ease;
width: max-content;
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.custom-select-icon {
margin-left: 0;
margin-right: 0;
transition: transform 0.2s ease;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-text-muted);
}
.custom-select-wrapper.open .custom-select-icon {
transform: rotate(180deg);
}
.custom-select-dropdown {
background: var(--color-white);
border: 1px solid var(--color-border);
opacity: 0;
transform: translateY(-5px);
transition: all 0.2s;
pointer-events: none;
flex-direction: column;
font-size: var(--detail-font-size-sm);
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-white);
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: var(--detail-shadow);
z-index: 1050;
max-height: 300px;
overflow: hidden;
display: none;
}
/* ========================================================
CUSTOM SELECT MEJORADO - ESTILO BOOTSTRAP SELECT
======================================================== */
/* Buscador */
.custom-select-search {
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
background: var(--color-grey-soft);
}
.search-icon {
color: var(--color-text-muted);
margin-right: 8px;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.custom-select-search-input {
flex: 1;
border: none;
outline: none;
font-size: var(--detail-font-size-sm);
padding: 4px;
background: transparent;
}
.custom-select-options {
max-height: 240px;
overflow-y: auto;
flex: 1;
}
/* ✅ NUEVO: Soporte para múltiples columnas */
.custom-select-options.multi-column {
display: grid;
gap: 0;
}
.custom-select-option {
transition: background-color 0.15s ease;
/* border: 1px solid red; */
/* border-bottom: 1px solid #f1f1f1; */
display: flex !important;
align-items: center;
cursor: pointer;
}
.custom-select-option:last-child {
border-bottom: none;
}
.custom-select-option:hover .option-main {
position: relative;
}
.custom-select-option:hover .option-main:after {
/* background-color: var(--color-grey-soft); */
/* font-weight: 400; */
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
background-color: var(--color-grey-soft)!important;
z-index: -2;
}
.custom-select-option.selected {
/* background-color: var(--color-grey-soft); */
/* color: #1976d2; */
}
/* Estructura de contenido de opción */
.option-content {
display: flex;
align-items: center;
width: 100%;
position: relative;
}
.mls-filters input.custom-select-checkbox {
appearance: none;
height: 16px !important;
width: 16px !important;
padding: 0 !important;
border-radius: 0 !important;
border: 1px solid var(--color-border);
background: white;
cursor: pointer;
transition: all 0.3s ease;
position: absolute;
z-index: -1;
top: 10px;
left: 8px;
}
.custom-select-checkbox:not(:checked) {
background-image: none !important;
background: white !important;
}
.custom-select-checkbox:checked {
height: 16px !important;
width: 16px !important;
padding: 0 !important;
border-radius: 0 !important;
border: 1px solid #0f1640;
background-color: var(--detail-gloho-bg);
}
.custom-select-checkbox:checked::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 14px;
pointer-events: none;
background-color: var(--detail-gloho-bg)!important;
/* z-index: -1; */
}
/* ✅ NUEVO: Iconos */
.option-icon-left {
font-size: 16px;
color: #666;
min-width: 20px;
text-align: center;
}
.option-icon-right {
font-size: 16px;
color: #666;
margin-left: auto;
}
.option-main {
flex: 1;
display: flex;
flex-direction: row;
position: relative;
widows: 100%;
/* gap: 8px; */
/* padding: 10px 12px; */
}
.option-text {
font-size: var(--detail-font-size-sm);
color: var(--color-text);
line-height: 1.4;
padding: 10px 12px;
/* background: rgba(172, 255, 47, 0.082); */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.custom-select-dropdown-multiple .option-text {
padding: 10px 12px 10px 30px;
}
/* ✅ NUEVO: Tick/check */
.option-tick {
color: #28a745;
font-weight: bold;
margin-left: auto;
font-size: 14px;
}
.custom-select-option.selected .option-tick {
display: inline-block;
}
.custom-select-no-results {
padding: 12px;
text-align: center;
color: var(--color-text-muted);
font-size: var(--detail-font-size-sm);
font-style: italic;
}
/* Mensaje sin resultados */
.custom-select-no-results {
padding: 20px;
text-align: center;
}
/* ✅ NUEVO: Estilos especiales para options con clases */
.custom-select-option.special {
background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
/* border-left: 3px solid #007bff; */
}
.custom-select-option.danger {
background-color: #f8d7da;
color: #721c24;
}
.custom-select-option.success {
background-color: #d4edda;
color: #155724;
}
.custom-select-option.warning {
background-color: #fff3cd;
color: #856404;
}
/* ✅ Estilos para múltiples selecciones */
.custom-select-wrapper[data-multiple="true"] .custom-select-option.selected {
background-color: #fff3cd;
border-left: 3px solid #ffc107;
}
/* ✅ NUEVO: Scrollbar personalizado para las opciones */
.custom-select-options::-webkit-scrollbar {
width: 6px;
}
.custom-select-options::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.custom-select-options::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Ocultar select original */
.custom-select-trigger {
display: none !important;
}
/* FIN SELECTS */
/* ✅ Badge support en data-content */
.option-main .badge {
display: inline-block;
padding: 0.25em 0.5em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.badge-success {
color: #fff;
background-color: #28a745;
}
.badge-primary {
color: #fff;
background-color: #007bff;
}
.badge-warning {
color: #212529;
background-color: #ffc107;
}
.badge-danger {
color: #fff;
background-color: #dc3545;
}
.badge-info {
color: #fff;
background-color: #17a2b8;
}
/* Price Range Dropdown - Panel Expandido */
.price-range-dropdown {
position: relative;
}
.price-range-dropdown.open .price-range-display {
border-color: var(--color-text);
}
.price-range-display .custom-select-icon {
width: 16px;
height: 16px;
transition: transform 0.2s;
flex-shrink: 0;
}
.price-range-dropdown.open .custom-select-icon {
transform: rotate(180deg);
}
.price-range-panel {
position: absolute;
top: calc(100% + 2px);
left: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
padding: 8px;
z-index: 1000;
opacity: 0;
transform: translateY(-5px);
transition: all 0.2s;
pointer-events: none;
box-sizing: border-box;
/* Panel más ancho que el trigger */
min-width: 320px;
/* ← Ancho mínimo */
/* width: max-content; */
}
.price-range-dropdown.open .price-range-panel {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.price-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.price-input-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.price-input-group label {
font-size: 12px;
color: var(--color-text);
margin-bottom: 0;
}
.input-with-currency {
position: relative;
display: flex;
align-items: center;
}
.currency-symbol {
position: absolute;
left: 10px;
color: var(--color-text);
pointer-events: none;
}
.price-input {
width: 100%;
padding: 8px 10px 8px 24px !important;
border: 1px solid var(--color-border) !important;
outline: none;
box-sizing: border-box;
}
.price-input:focus {
border-color: var(--color-text);
}
/* END Price Range */
/* ------------- default grid ------------- */
.container-iframe-data {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
#mlsWrapper {
display: flex;
flex-wrap: nowrap;
flex: 1;
transition: all 0.6s ease;
/* Ocupa el espacio restante después de los filtros */
overflow: hidden;
}
/* Desktop: 7/12 = 58.33% */
.side-left {
width: 58.33%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
transition: all 0.6s ease;
}
/* Desktop: 5/12 = 41.67% */
.side-right {
/* width: 41.67%; */
width: 793px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
transition: all 0.6s ease;
opacity: 1;
transform: translateX(0);
height: calc(90vh - 73px);
}
/* ==========================
Toggle Animación List / Map
========================== */
/* Modo LIST — mapa oculto */
.no-map .side-right {
width: 100%;
}
/* Cuando el mapa está oculto, el listado se expande */
.no-map .side-left {
opacity: 0;
transform: translateX(-100%);
width: 0;
pointer-events: none;
}
/* Map Spinner */
.mapSpinner,
#mapSpinner {
position: absolute;
top: 16px;
right: 16px;
z-index: 0;
padding: 2px;
text-align: center;
/* transform: translate(-50%, -50%); */
/* background: rgba(255, 255, 255, 0.9); */
/* border-radius: 8px; */
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
/* display: none; */
}
.mapSpinner-img {
width: 20px;
height: 20px;
display: block;
margin: 0 auto;
}
.mapSpinner-text {
color: var(--color-text);
font-size: 10px;
font-weight: 500;
}
/* #mlsGrid tiene scroll independiente */
.mlsGrid-container {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#mlsGrid {
transition: grid-template-columns 0.35s ease;
flex: 1;
/* Ocupa el espacio restante */
/* overflow-y: auto;
overflow-x: hidden; */
display: grid;
gap: var(--spacing-24);
padding: var(--spacing-24);
/* padding-right: calc(var(--spacing-24) + 8px); */
/* Espacio para scrollbar */
align-items: stretch;
box-sizing: border-box;
}
/* Mapa ocupa todo el espacio disponible */
.mls-map {
flex: 1;
min-height: 400px;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
/* Scrollbar personalizado para el grid */
#mlsGrid::-webkit-scrollbar {
width: 8px;
}
#mlsGrid::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
#mlsGrid::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
#mlsGrid::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.sugest-locations {
padding: 16px 8px;
font-size: 12px;
display: flex;
}
/* .title-strip permanece fijo arriba */
.title-strip {
flex-shrink: 0;
padding: 8px 16px;
font-size: 12px;
background: var(--color-white);
border-bottom: solid 1px var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.title-strip-left {
display: flex;
align-items: center;
justify-content: start;
gap: 16px;
}
.title-strip-right {}
.resultsCounter {
margin-bottom: 0;
}
/* Estilos personalizados para InfoWindow de Google Maps */
.gm-ui-hover-effect {
position: absolute !important;
right: 0 !important;
}
.mls-filters {
height: 74px;
border-bottom: solid 1px var(--color-border);
z-index: 1;
position: relative;
/* ← Cambiar de fixed a relative */
width: 100%;
background-color: var(--color-grey-soft);
flex-shrink: 0;
/* No se reduce */
box-sizing: border-box;
}
.mls-filters .container,
.mls-detail-container .header-content .container {
flex-direction: row;
}
.mls-detail-container .container {
flex-direction: column;
font-size: 0.75rem !important;
}
.mls-filters .container,
.mls-detail-container .container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
max-width: 1350px;
}
.multi-places-wrap,
.custom-select-display,
.price-range-dropdown,
.mls-filters input,
.mls-filters select,
.mls-filters button {
border: 1px solid var(--color-border)!important;
background: var(--color-white);
font-size: var(--detail-font-size-sm)!important;
height: 40px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
color: var(--color-text);
}
/* Input normal (mlsKeyword) */
.mls-filters input:is(:focus, :active) {
border-color: var(--color-text) !important;
}
/* 🆕 DROPDOWN DE PRECIOS ABIERTO */
.custom-select-wrapper.open,
.price-range-dropdown.open {
outline: solid 1px var(--color-text) !important;
}
/* 🆕 Contenedor dropdown (mlsOmniSearch) */
.multi-places-wrap:focus-within {
border-color: var(--color-text) !important;
}
.mls-filters input#mlsOmniSearch,
.mls-filters input#mlsOmniSearch:is(:focus, :active) {
border-color: transparent !important;
}
.mls-filters .container {
display: flex;
justify-content: space-between;
padding-left: 15px;
padding-right: 15px;
}
.mls-filters .container > div > div {
gap: 4px;
/* width: 100%; */
}
.mls-filters input.mlsKeyword {
/* min-width: 200px; */
}
.mls-filters input.mlsOmniSearch {}
.mls-filters button#toggleMapBtn {
min-width: 42px;
}
/* ========================================================
🆕 MULTI-LOCATION CHIPS CON POPOVER
======================================================== */
/* Wrapper principal */
.multi-places-wrap {
width: 400px;
max-width: 400px;
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 0;
white-space: nowrap;
/* NO SALTO GLOBAL */
}
/* Input dentro del wrapper */
.multi-places-wrap input {
/* border: none; */
border: 1px solid transparent;
height: 38px;
flex: 1 1 20px;
min-width: 20px;
width: 20px;
outline: none;
padding: 0 8px;
font-size: 14px;
background: transparent;
box-sizing: border-box;
overflow: hidden;
flex-shrink: 1 !important;
/* SOLO INPUT SE ENCOGE */
}
/* .multi-places-wrap input:active,
.multi-places-wrap input:focus {
border-color: var(--color-text) !important;
} */
.multi-places-wrap input::placeholder {
color: #9ca3af;
}
.multi-places-wrap>* {
flex-shrink: 0;
/* ELEMENTOS NO SE ENCOGEN */
}
/* Contenedor de chips */
.chips {
display: flex;
gap: 4px;
}
/* Estilos base del chip */
.chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f2f4f7;
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0px 8px;
font-size: 12px;
color: var(--color-text);
flex-shrink: 0;
white-space: nowrap;
}
.chip>span {
max-width: 230px;
display: inline-block;
/* NECESARIO para que text-overflow funcione */
white-space: nowrap;
/* evita que el texto haga salto de línea */
overflow: hidden;
/* oculta lo que sobresale */
text-overflow: ellipsis;
/* agrega los ... */
/* max-width: 340px;
overflow: hidden;
background-color: aqua; */
}
.chips .chip:first-child {
margin-left: 8px;
}
/* Chip "more" específico */
.chip-more {
background: #f2f4f7;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.chip-more:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
/* Botón de cerrar en chips */
.custom-close-btn {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
color: #6b7280;
cursor: pointer;
padding: 2px;
border-radius: 50%;
transition: all 0.2s ease;
width: 16px;
height: 16px;
}
.custom-close-btn:hover {
background: rgba(107, 114, 128, 0.1);
color: #374151;
}
.custom-close-btn svg {
width: 10px;
height: 10px;
}
.chip button {
border: 0;
background: transparent;
cursor: pointer;
color: var(--color-text);
height: auto;
padding: 0;
}
/* Popover de chips */
.chips-popover {
position: absolute;
top: 100%;
left: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
padding: 8px 24px 8px 8px;
display: none;
z-index: 1000;
min-width: 200px;
max-width: 300px;
margin-top: 4px;
animation: fadeIn 0.15s ease-out;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ✕ Estilos para el botón de cerrar */
.mls-filters button.popover-close-btn {
transition: all 0.2s ease !important;
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
border: none;
background: #f3f4f6;
border-radius: 50%;
color: #6b7280;
font-size: 12px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.popover-close-btn:hover {
transform: scale(1.1) !important;
}
/* Botón "Eliminar todos" en popover */
.chips-popover button[type="button"]:last-child {
width: auto;
height: 20px;
padding: 0 8px;
border-radius: 16px;
}
.chips-popover button[type="button"]:last-child:hover {
background: #f9fafb;
border-color: #9ca3af;
}
/* Chips de sugerencias de barrios */
.suggestion-chips {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.suggestion-chip {
background: #f8f9fb !important;
border: 1px solid var(--color-border) !important;
color: #6b7280 !important;
font-weight: 400;
font-size: 10px;
}
.suggestion-chip:hover {
background: #d1e9f8 !important;
border-color: #1565c0 !important;
}
/* =======================
Toggle Switch List / Map
======================= */
.toggle-switch * {
outline: solid 1px rgba(255, 166, 0, 0.068);
}
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
overflow: hidden;
cursor: pointer;
user-select: none;
width: 100px;
min-width: 100px;
height: 36px;
background: var(--color-white);
font-size: 12px;
letter-spacing: -.5px;
transition: all 0.3s ease;
padding: 0 8px;
}
.toggle-option {
flex: 1;
text-align: center;
z-index: 2;
color: var(--color-text);
transition: color 0.3s ease;
padding: 0;
}
.toggle-option.active {
color: var(--color-text);
}
.toggle-slider {
position: absolute;
top: 4px;
left: 6px;
width: calc(50% - 4px);
height: calc(100% - 9px);
background: var(--color-grey-soft);
border-radius: 999px;
transition: all 0.3s ease;
}
.toggle-switch.map-mode .toggle-slider {
transform: translateX(91%);
}
.toggle-switch.map-mode .toggle-option[data-mode="list"] {
color: var(--color-text);
}
.toggle-switch.list-mode .toggle-option[data-mode="map"] {
color: var(--color-text);
}
.mls-map {
width: 100% !important;
border-radius: 0 !important;
}
/* ===========================================================
A PARTIR DE AQUI VENDRÁN LOS ESTILOS DE MLS DETAIL
=========================================================== */
/* ========================================================
CONTENEDOR PRINCIPAL
======================================================== */
.mls-detail-container {
position: relative;
margin: 0 auto;
padding: 0;
/* 🆕 FORZAR altura fija para crear contexto de scroll */
height: 100vh;
overflow-y: auto;
/* 🆕 Crear contexto de posicionamiento para el header */
isolation: isolate;
font-family: var(--detail-font-family);
color: var(--color-text);
background: var(--color-white);
}
/* ========================================================
HEADER
======================================================== */
header.detail-header {
position: sticky;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
z-index: 100;
background-color: #e0e4eb;
color: currentColor !important;
display: flex;
align-items: center;
box-sizing: border-box;
/* 🆕 Forzar el sticky */
flex-shrink: 0;
}
.header-content {
width: 100%;
}
.header-content * {
/* color: currentColor!important; */
}
.header-left {
flex: 1;
min-width: 300px;
display: flex;
align-items: center;
}
.property-address {
font-size: var(--detail-font-size-xxl);
font-weight: 800;
margin: 0 0 var(--spacing-8) 0;
color: var(--color-text);
line-height: 1.2;
}
.property-location {
font-size: var(--detail-font-size-sm);
color: var(--color-text-muted);
margin: 0;
}
.header-right {
text-align: right;
flex-shrink: 0;
}
.property-price {
font-size: var(--detail-font-size-xxl);
font-weight: 900;
color: var(--color-text);
margin: 0 0 var(--spacing-8) 0;
}
.property-status {
display: inline-block;
padding: var(--spacing-4) var(--spacing-16);
background-color: var(--color-text);
color: white;
font-size: var(--detail-font-size-sm);
font-weight: 500;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* MENU HEADER */
.detail-back-button {
/* outline: solid 1px red; */
display: flex;
height: 24px;
width: 24px;
border-radius: 50%;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.detail-back-button:hover {
background-color: var(--color-border);
}
.detail-nav-menu {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
margin: 0;
align-items: center;
}
.detail-nav-item {
display: inline-block;
}
.detail-nav-link {
text-decoration: none;
color: inherit;
position: relative;
padding: 5px 0;
transition: all 0.3s ease;
}
.detail-nav-link:hover {
text-decoration: underline;
}
/* O si prefieres un underline más elegante */
.detail-nav-link::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: 0;
left: 0;
background-color: currentColor;
transition: width 0.3s ease;
}
.detail-nav-link:hover::after {
width: 100%;
}
/* =============================================
MLS DETAIL SCROLLSPY - IMPLEMENTACIÓN AISLADA
============================================= */
/* 🆕 Usar prefijo único para evitar conflictos */
.mls-detail-nav-link {
position: relative;
transition: all 0.3s ease;
}
/* Estado activo con clase específica */
.mls-detail-nav-link.mls-detail-active {
color: var(--color-text) !important;
font-weight: 600;
}
/* Indicador visual único */
.mls-detail-nav-link.mls-detail-active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--color-text);
border-radius: 1px;
width: 100%;
}
/* Hover específico */
.mls-detail-nav-link:not(.mls-detail-active):hover {
color: var(--color-text);
opacity: 0.8;
}
/* Asegurar que no se vea afectado por estilos externos */
.mls-detail-container .detail-nav-link {
all: initial;
font-family: inherit;
font-size: inherit;
color: inherit;
text-decoration: none;
display: inline-block;
padding: inherit;
position: relative;
transition: all 0.3s ease;
}
/* ========================================================
MAIN CONTENT
======================================================== */
.detail-main {
/* display: flex; */
/* flex-direction: column; */
/* padding-top: 90px; */
display: flex;
flex-direction: column;
/* 🆕 Asegurar altura mínima para scroll */
min-height: calc(100vh + 200px);
}
/* ========================================================
SECCIONES GENERALES
======================================================== */
section {
display: block;
margin: 0 !important;
padding: 0 !important;
}
.section-title {
font-size: var(--detail-font-size-xl);
font-weight: 500;
color: var(--color-text);
margin: 0 0 var(--spacing-24) 0;
padding-bottom: var(--spacing-8);
display: block;
text-align: center;
width: 100%;
}
/* Asegurar que TODOS los section-title estén centrados sin importar clases adicionales */
.section-title,
.section-title.d-inline-block,
.section-title.d-block {
display: block !important;
text-align: center !important;
width: 100% !important;
text-transform: uppercase;
}
/* Para section-title dentro de facts (fondo blanco) */
.facts-container .section-title {
color: white !important;
}
.facts-container * {
/* outline: solid 1px red; */
}
/* ========================================================
GALERÍA
======================================================== */
.gallery-section {
margin-bottom: var(--spacing-32);
}
.gallery {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
/* Mantengo compatibilidad con Slick Carousel existente */
.gallery__main {
/* border-radius: 8px; */
overflow: hidden;
background-color: var(--color-border);
}
.gallery__main img {
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
display: block;
}
.gallery__thumbs {
margin-top: var(--spacing-4);
display: flex;
/* gap: 0; */
}
.gallery__thumbs img {
width: 100%;
/* ✅ CAMBIAR: Para que ocupe todo el contenedor */
height: 110px;
object-fit: cover;
border-radius: 0;
transition: var(--detail-transition);
}
/* ✅ AGREGAR: Estilos específicos para Slick thumbnails */
.gallery__thumbs .slick-slide {
width: 200px !important;
/* ✅ Forzar ancho del slide */
height: 110px;
margin-right: 8px;
/* ✅ Separación entre slides */
}
.gallery__thumbs .slick-slide:last-child {
margin-right: 0;
/* ✅ Sin margen en el último */
}
.gallery__thumbs .slick-slide>div {
width: 200px;
height: 110px;
overflow: hidden;
border-radius: 0;
}
.gallery__thumbs .slick-track {
display: flex;
align-items: center;
}
/* ✅ AGREGAR: Centrar imagen dentro del contenedor */
.gallery__thumbs .slick-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
/* ✅ Centrar imagen */
display: block;
}
/* ========================================================
PROPERTY FACTS - TABLA VERDE/TEAL
======================================================== */
.facts-container .container {
display: flex;
flex-direction: column;
align-items: center;
}
.facts-container #facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-24);
width: 100%;
max-width: 1000px;
}
/* Estilos para los facts individuales generados por buildFacts() */
.facts-container .fact {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
text-align: center;
padding: var(--spacing-16);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--spacing-4);
}
.facts-container .fact .small {
font-size: var(--detail-font-size-sm);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
.facts-container .fact .fw-bold {
font-size: var(--detail-font-size-lg);
font-weight: 500;
}
/* ========================================================
PROPERTY INFO SECTION (con descripción integrada)
======================================================== */
.property-info-section {
margin: 0 !important;
padding: var(--spacing-48) 0 !important;
background: white;
}
.property-main-address {
font-size: var(--detail-font-size-xl);
font-weight: 500;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 1px;
/* margin: 0 0 var(--spacing-32) 0; */
margin: 0;
line-height: 1.3;
}
.property-icons-row {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-48);
margin: var(--spacing-32) 0;
flex-wrap: wrap;
}
.property-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
min-width: 80px;
}
.property-icon {
width: 48px;
height: 48px;
/* background: var(--color-border); */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
/* transition: var(--detail-transition); */
}
.property-icon svg {
width: 24px;
height: 24px;
}
.property-icon-value {
/* font-family: var(--detail-font-family); */
font-size: var(--detail-font-size-base);
font-weight: 400;
color: var(--color-text);
text-align: center;
font-style: italic;
}
.property-main-price {
font-size: var(--detail-font-size-xl);
font-weight: 500;
color: var(--color-text);
/* margin: var(--spacing-32) 0; */
}
/* Descripción integrada */
.property-info-section .description-content {
max-width: 800px;
margin: var(--spacing-32) auto 0;
text-align: center;
}
/* ========================================================
DESCRIPCIÓN
======================================================== */
.description-content {
font-size: var(--detail-font-size-base);
line-height: 1.8;
color: var(--color-text);
}
/* ========================================================
AGENT SECTION (NUEVA)
======================================================== */
.agent-section {
margin-bottom: var(--spacing-32);
padding: var(--spacing-32);
background-color: var(--color-border);
}
.agent-content {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
}
/* ========================================================
DESARROLLO (mantenida para debug)
======================================================== */
.dev-section {
margin-top: var(--spacing-48);
padding-top: var(--spacing-32);
border-top: 2px solid var(--color-border);
}
.dev-controls {
display: flex;
gap: var(--spacing-16);
margin-bottom: var(--spacing-24);
flex-wrap: wrap;
}
.search-input {
flex: 1;
min-width: 200px;
max-width: 360px;
padding: var(--spacing-8) var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: var(--detail-font-size-sm);
}
.dev-button {
padding: var(--spacing-8) var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: white;
color: var(--color-text);
text-decoration: none;
font-size: var(--detail-font-size-sm);
cursor: pointer;
transition: var(--detail-transition);
}
.dev-button:hover {
background-color: var(--color-border);
}
/* ========================================================
SISTEMA REUTILIZABLE "VER MÁS/VER MENOS"
======================================================== */
.expandable-text {
position: relative;
}
.expandable-content {
font-size: var(--detail-font-size-base);
line-height: 1.7;
color: var(--color-text);
text-align: justify;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
overflow: hidden;
}
.expandable-content.collapsed {
/* Altura dinámica basada en data-lines - se calcula desde JavaScript */
position: relative;
}
.expandable-content.collapsed::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 1.7em;
background: linear-gradient(to right, transparent, white 70%);
pointer-events: none;
}
.expand-toggle {
background: none;
border: none;
color: var(--color-text);
font-size: var(--detail-font-size-sm);
font-weight: 500;
cursor: pointer;
padding: var(--spacing-4) 0;
margin-top: var(--spacing-8);
text-decoration: underline;
transition: color 0.3s ease;
display: block;
text-align: center;
}
.expand-toggle:hover {
color: var(--color-grey-hard);
}
/* =============================================
PROPERTY FACTS SECTION STYLES
============================================= */
.facts-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
}
.facts-column-1,
.facts-column-2 {
flex: 1;
min-width: 300px;
/* Mínimo antes de quebrar */
}
.facts-column-1,
.facts-column-2 {
display: flex;
flex-direction: column;
}
.fact-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
margin-bottom: 1rem;
gap: 0.5rem;
}
.fact-label {
color: white;
text-transform: uppercase;
font-size: 0.875rem;
font-weight: normal;
opacity: 0.75;
}
.fact-value {
color: white;
font-size: 1.125rem;
font-weight: 400;
font-style: italic;
font-family: var(--titles-font-family);
/* Ellipsis automático aplicado por JavaScript */
}
/* =============================================
AUTO ELLIPSIS TOOLTIP STYLES
============================================= */
.auto-ellipsis-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 10px;
font-weight: normal;
white-space: normal;
z-index: 10000;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
max-width: 300px;
word-wrap: break-word;
}
.auto-ellipsis-applied {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
cursor: help;
}
/* =============================================
DEBUG TABLE STYLES (fillMLSFields)
============================================= */
.debug-main-container {
width: 100%;
font-family: sans-serif;
font-size: 13px;
}
.debug-section-title {
color: var(--color-text);
padding-bottom: 8px;
margin-top: 32px;
margin-bottom: 16px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid;
}
.debug-table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
font-size: 13px;
margin-bottom: 24px;
border: 1px solid var(--color-border);
}
.debug-table thead tr {
text-align: left;
font-weight: 500;
}
.debug-table th {
padding: 8px;
border-bottom: 1px solid var(--color-border);
}
.debug-table th:first-child,
.debug-table th:nth-child(2) {
width: 25%;
}
.debug-table td {
padding: 6px 8px;
border-bottom: 1px solid #eee;
}
.debug-table td:first-child,
.debug-table td:nth-child(2) {
width: 25%;
}
.debug-table td:nth-child(2) {
color: var(--color-text);
font-weight: 500;
}
.debug-value-null {
color: #c1c1c1;
font-style: italic;
}
.debug-value-empty {
color: #ccc;
font-style: italic;
}
.debug-value-code {
white-space: pre-wrap;
font-family: monospace;
background: #fafafa;
padding: 6px;
border-radius: 4px;
}
/* =============================================
AMENITIES SECTION STYLES
============================================= */
.amenities-grid {
/* background-color: red; */
}
.amenity-section {
/* background-color: orange; */
}
.amenity-section-title {
/* background-color: orangered; */
}
/* =============================================
AMENITIES TABS SYSTEM
============================================= */
.amenities-container .container {
width: 100%;
max-width: 1000px;
}
.amenities-tabs-container {
width: 100%;
}
/* Navegación de Tabs */
.amenities-tabs-nav {
display: flex;
gap: 1rem;
border-radius: 0;
overflow: hidden;
width: fit-content;
/* Solo el ancho necesario */
margin: 0 auto 1.5rem;
}
.amenity-tab {
padding: 1rem 1.5rem;
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: none;
cursor: pointer;
font-size: .75rem;
font-weight: 500;
transition: all 0.3s ease;
white-space: nowrap;
/* Evitar que el texto se divida */
outline: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.amenity-tab:last-child {
border-right: none;
}
.amenity-tab:hover {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
}
.amenity-tab.active {
background: rgba(255, 255, 255, 0.2);
}
/* Contenido de Tabs */
.amenities-tabs-content {
position: relative;
}
.amenity-tab-content {
display: none;
}
.amenity-tab-content.active {
display: block;
}
/* Lista con altura fija */
.amenity-list-container {
height: 150px;
/* Altura fija configurable */
overflow: hidden;
position: relative;
}
.amenity-tab-content.expanded .amenity-list-container {
height: auto;
}
/* Grid de amenities */
.amenity-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
padding-bottom: 1rem;
}
.amenity-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
color: white;
font-size: 0.875rem;
}
/* ✅ ALINEACIÓN DE ÍCONOS EN TÍTULOS DE AMENITIES */
.amenity-category-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.amenity-category-title svg {
flex-shrink: 0;
/* Evita que el ícono se comprima */
}
.amenity-text {
flex: 1;
}
/* Botón de expansión */
.amenity-expand-btn {
padding: 0.75rem 0;
margin-top: 1rem;
background: transparent;
color: white;
border: none;
border-radius: 0;
cursor: pointer;
font-size: 0.75rem;
font-weight: 500;
transition: all 0.3s ease;
transform: translateY(0);
letter-spacing: 1px;
}
.amenity-expand-btn:active {
transform: translateY(1px);
}
.amenity-expand-btn:visited,
.amenity-expand-btn:active,
.amenity-expand-btn:hover,
.amenity-expand-btn:focus {
text-decoration: underline;
background: transparent;
border: none;
outline: none;
}
/* Gradiente de fade para el overflow */
.amenity-list-container:not(.expanded)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(transparent, var(--color-text));
pointer-events: none;
}
.amenity-tab-content.expanded .amenity-list-container::after {
display: none;
}
/* Títulos de categorías */
.amenity-category-title {
font-size: 1rem;
font-weight: 500;
margin: 1.5rem 0 0.75rem 0;
padding-bottom: 0.5rem;
/* border-bottom: 1px solid rgba(216, 216, 216, 0.3); */
text-transform: uppercase;
letter-spacing: 1px;
text-transform: initial;
}
.amenity-category-title:first-child {
margin-top: 0;
}
/* Espaciado entre categorías */
.amenity-list+.amenity-category-title {
margin-top: 2rem;
}
/* ==========================================
PADDINGS OF SECTIONS
========================================== */
.videos-section,
.virtual-tour-section,
.map-section {
padding-top: var(--spacing-48) !important;
background: var(--section-bg, #f8f9fa);
}
.facts-section .facts-container,
.amenities-section .amenities-container,
.agent-section .container {
padding-top: var(--spacing-48) !important;
}
.amenities-section .amenities-container,
.agent-section .container {
padding-bottom: var(--spacing-48) !important;
}
/* ========================================================
VIRTUAL TOUR (NUEVA)
======================================================== */
.videos-content,
.virtual-tour-content {
width: 100%;
height: 400px;
border-radius: 0;
overflow: hidden;
background-color: var(--color-border);
}
.videos-content:hover,
.virtual-tour-content:hover {
/* transform: translateY(-2px); */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Contenedor horizontal para botón + texto */
.media-content {
display: flex;
align-items: center;
gap: 20px;
}
.videos-content:hover .media-overlay,
.virtual-tour-content:hover .media-overlay {
background: rgba(0, 0, 0, 0.6);
}
/* Botón de play en el centro */
.media-play-button {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: .8rem;
color: var(--color-white);
flex-shrink: 0;
/* No se encoge */
}
.media-play-button:hover {
background: rgba(255, 255, 255, .5);
border-color: var(--color-white)f;
transform: scale(1);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}
.media-play-button .play-icon {
margin-left: 3px;
/* Centrar visualmente el triángulo */
filter: drop-shadow(0 2px 4px #00000033);
}
/* Texto del botón - MEJORADO */
.media-button-text {
color: white;
font-size: 1.063rem;
font-weight: 500;
letter-spacing: 1px;
margin: 0;
}
/* Imagen de fondo como elemento HTML */
.media-background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Overlay encima de la imagen */
.media-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
z-index: 2;
/* 🆕 Encima de la imagen */
}
/* ==========================================
MODAL FULLSCREEN
========================================== */
.media-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.media-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
cursor: pointer;
}
.media-modal-content {
position: relative;
width: 95vw;
height: 90vh;
max-width: 1200px;
background: black;
border-radius: 8px;
overflow: hidden;
}
.media-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 1.8rem;
cursor: pointer;
z-index: 10;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
font-weight: 300;
backdrop-filter: blur(10px);
}
.media-modal-close:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--color-text);
transform: scale(1.1);
border-color: rgba(0, 0, 0, 0.2);
}
/* Navegación del modal */
.media-modal-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
.media-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.7);
border: none;
color: white;
font-size: 2rem;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
}
.media-nav-prev {
left: 25px;
}
.media-nav-next {
right: 25px;
}
.media-nav-btn:hover {
background: rgba(0, 0, 0, 0.9);
transform: translateY(-50%) scale(1.1);
}
.media-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Contenido del modal */
.media-modal-body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.media-modal-body iframe {
width: 100%;
height: 100%;
border: none;
}
/* CLASE REUTILIZABLE PARA FLECHAS DE NAVEGACIÓN */
.nav-arrow {
background: rgba(0, 0, 0, 0.75);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 1.8rem;
width: 55px;
height: 55px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
backdrop-filter: blur(10px);
user-select: none;
}
.nav-arrow:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--color-text);
transform: scale(1.15);
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.nav-arrow:active {
transform: scale(1.05);
}
.nav-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
background: rgba(0, 0, 0, 0.3);
}
.nav-arrow:disabled:hover {
transform: none;
background: rgba(0, 0, 0, 0.3);
color: white;
}
/* ==========================================
MAPA CON CONTROLES NATIVOS DE GOOGLE
========================================== */
.map-container {
width: 100%;
height: 500px;
border-radius: 0;
position: relative;
overflow: hidden;
background-color: var(--color-border);
}
/* Botón toggle para Street View */
.street-view-toggle {
position: absolute;
bottom: 60px;
left: 10px;
background: white;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
padding: 8px 12px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
color: #333;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
z-index: 1000;
}
.street-view-toggle:hover {
background: var(--color-grey-soft);
transform: translateY(-1px);
}
/* Panel de Street View */
.street-view-panel {
position: absolute;
bottom: 10px;
left: 10px;
width: 250px;
height: 150px;
background: white;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
transform: translateY(0);
/* ✅ CAMBIAR: Visible por defecto */
transition: transform 0.3s ease;
z-index: 1000;
}
.street-view-panel.visible {
transform: translateY(0);
/* ✅ Mantener visible */
}
/* Mejorar botón toggle */
.street-view-toggle.active {
background: var(--color-text, #303749);
color: white;
border-color: var(--color-text, #303749);
}
/* Mejorar panel de Street View no disponible */
.street-view-unavailable {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 15px;
text-align: center;
background: #f8f9fa;
border-radius: 0;
}
.unavailable-icon {
font-size: 1.5rem;
margin-bottom: 8px;
opacity: 0.6;
}
.unavailable-message {
font-size: 0.75rem;
color: var(--color-text);
line-height: 1.3;
font-weight: 500;
}
.street-view-unavailable div:first-child {
font-size: 2rem;
margin-bottom: 5px;
}
/* =============================================
AGENT SECTION STYLES
============================================= */
.agent-info-container {
/* Container principal - sin estilos específicos por ahora */
}
/* Agent Main Info */
.agent-main-info {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
/* Agent Photo */
.agent-photo-container {
flex-shrink: 0;
}
.agent-photo {
width: 80px;
height: 120px;
border-radius: 8px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--color-grey-soft);
border: 2px solid var(--color-border);
}
/* Agent Details */
.agent-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.agent-name-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.agent-name {
font-size: 1.75rem;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.2;
}
.profile-link {
color: #025dc0;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.profile-link:hover {
text-decoration: underline;
}
/* 🆕 CONTACT GRID - 4 COLUMNAS HORIZONTALES */
.agent-contact-grid {
display: grid;
grid-template-columns: minmax(300px, 4fr) minmax(150px, 3fr) minmax(150px, 3fr) auto;
gap: 1.5rem;
align-items: start;
}
.contact-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
/* Permite que el contenido se comprima */
}
.contact-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
/* Evita wrap en labels */
}
/* 🆕 Los elementos con ellipsis se manejan automáticamente por el sistema existente */
.contact-value,
.agent-company,
.agent-title,
.agent-license {
font-size: 0.95rem;
color: #333;
/* El ellipsis se aplica automáticamente por applySimpleEllipsis() */
}
.contact-value:hover,
.agent-company:hover,
.agent-title:hover {
color: #007bff;
}
/* Estilos específicos para diferentes elementos */
.agent-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
}
.agent-license {
font-size: 0.85rem;
color: #999;
margin-top: 0.25rem;
}
.contact-button-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
.contact-btn {
background-color: var(--color-text, #6f7e9f);
color: white;
border: none;
padding: 0.75rem 2rem;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
}
.contact-btn:hover {
background-color: #6f7e9f;
/* transform: translateY(-1px); */
}
/* =============================================
RESPONSIVE UTILITIES GENERALES
============================================= */
/* Mobile First - Breakpoints estándar */
/* xs: <576px (por defecto) */
/* sm: ≥576px */
/* md: ≥768px */
/* lg: ≥992px */
/* xl: ≥1200px */
/* xxl: ≥1400px */
/* Responsive */
@media (max-width: 1400px) {}
@media (max-width: 1350px) {
.mls-filters .container,
.mls-detail-container .container {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 1300px) {
.side-left {
width: 100%;
}
.side-right {
width: 600px;
min-width: 600px;
}
}
@media (max-width: 1200px) {
.side-left {
width: 100%;
}
.side-right {
width: 425px;
min-width: 425px;
}
.amenity-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1100px) {
/* ATENCIÓN:
En este punto se quiebra el query del los filtros!! */
}
@media (max-width: 1024px) {
.agent-contact-grid {
grid-template-columns: minmax(180px, 3fr) minmax(100px, 2fr) minmax(100px, 2fr) auto;
gap: 1rem;
}
}
/* 📱 Responsivo */
@media (max-width: 992px) {
#mlsWrapper #mlsGrid,
#mlsWrapper.no-map #mlsGrid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.main_content section.property-info-section,
.facts-container,
.amenities-container {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* Responsive: Ajustes para tablets */
@media (min-width: 769px) and (max-width: 992px) {
.mls-detail-container .header-content .container {
flex-direction: column !important;
gap: 8px;
}
.side-left {
width: 60%;
}
.side-right {
width: 40%;
}
/* Ajustar marcadores en tablet */
.mls-filters input#mlsKeyword,
.mls-filters input#mlsOmniSearch {
min-width: 200px;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.facts-container {
gap: 1.5rem;
}
.fact-row {
gap: 0.375rem;
}
}
@media (min-width: 769px) {
.d-md-block {
display: block !important;
}
.d-md-flex {
display: flex !important;
}
.d-sm-none {
display: none !important;
}
.flex-md-row {
flex-direction: row !important;
}
}
@media (max-width: 768px) {
.d-md-none {
display: none !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-flex {
display: flex !important;
}
.text-left-sm {
text-align: left !important;
}
body.iframe-mls {
margin-top: 68px;
}
.mls-detail-container .header-content .container {
flex-direction: column !important;
gap: 8px;
}
.header-right {
justify-content: center;
display: flex;
}
.container-iframe-data {
flex-direction: column;
/* Stack verticalmente */
}
.side-left {
width: 100%;
height: auto;
padding-right: 0;
margin-bottom: 20px;
}
.side-right {
width: 100%;
position: relative;
/* No sticky en móvil */
top: 0;
height: 400px;
/* Altura fija en móvil */
padding-left: 0;
}
.mlsMap {
height: 100% !important;
}
/* Filtros más compactos en móvil */
.mls-filters {
height: auto;
padding: 8px;
}
.mls-filters .container {
flex-wrap: wrap;
gap: 6px;
}
.mls-filters input,
.mls-filters select,
.mls-filters button {
min-width: 100px;
font-size: 11px;
height: 38px;
}
/* Grid más compacto en móvil */
#mlsGrid {
padding: 12px;
gap: 12px;
}
/* Cards más pequeñas en móvil */
.mls-card {
min-height: 390px;
}
.mls-card-media img {
height: 240px;
}
#mlsWrapper {
flex-direction: column;
}
#mlsWrapper .side-left {
width: 100%;
height: 0px;
}
#mlsWrapper .side-right {
width: 100%;
transition: all 0.4s ease;
}
#mlsWrapper.no-map .side-right {
display: none;
}
.property-main-address {
font-size: var(--detail-font-size-lg);
}
.property-icons-row {
gap: var(--spacing-24);
}
.property-main-price {
font-size: var(--detail-font-size-xl);
}
.facts-container {
flex-direction: column;
gap: 1.5rem;
}
.facts-column-1,
.facts-column-2 {
min-width: auto;
}
.fact-row {
gap: 0.25rem;
margin-bottom: 0.75rem;
}
.fact-label {
font-size: 0.8rem;
}
.fact-value {
font-size: 1rem;
}
.p-6 {
padding: 1rem !important;
}
.mb-8 {
margin-bottom: 2rem !important;
}
.gap-8 {
gap: 2rem !important;
}
.d-grid[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
.justify-content-between {
justify-content: center !important;
text-align: center;
}
.header-content {
flex-direction: column;
text-align: left;
}
.header-right {
text-align: left;
width: 100%;
}
.property-address {
font-size: var(--detail-font-size-xl);
}
.property-price {
font-size: var(--detail-font-size-xl);
}
.facts-container {
grid-template-columns: 1fr;
padding: var(--spacing-24);
}
/* Asegurar que section-title mantenga centrado en móviles */
.section-title {
text-align: center !important;
display: block !important;
width: 100% !important;
}
.dev-controls {
flex-direction: column;
}
.search-input {
max-width: 100%;
}
.amenity-list {
grid-template-columns: repeat(2, 1fr);
}
.amenities-tabs-nav {
flex-direction: column;
}
.amenity-tab {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.amenity-tab:last-child {
border-bottom: none;
}
.amenity-list-container {
height: 250px;
/* Menor altura en móviles */
}
.media-modal-content {
width: 98vw;
height: 95vh;
}
.media-play-button {
width: 60px;
height: 60px;
font-size: 1.2rem;
}
.media-button-text {
font-size: 1rem;
}
.map-container {
height: 300px;
}
.street-view-toggle {
bottom: 50px;
left: 8px;
padding: 6px 10px;
font-size: 0.7rem;
}
.street-view-panel {
width: 150px;
height: 100px;
bottom: 8px;
left: 8px;
}
.unavailable-message {
font-size: 0.7rem;
}
.unavailable-icon {
font-size: 1.2rem;
}
.agent-main-info {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.agent-photo {
width: 100px;
height: 100px;
}
.agent-name {
font-size: 1.5rem;
}
.agent-contact-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.contact-label {
justify-content: center;
}
.contact-button-container {
justify-content: center;
}
.contact-btn {
width: 100%;
max-width: 200px;
}
}
/* Responsive: chips en móvil */
@media (max-width: 768px) {
.multi-places-wrap {
padding: 4px 8px;
min-height: 36px;
}
.multi-places-wrap input {
min-width: 15px;
flex: 1 1 15px;
padding: 0 3px;
}
.chip {
font-size: 12px;
padding: 3px 8px;
max-width: 150px;
}
.multi-places-wrap input {
min-width: 120px;
font-size: 13px;
}
.chips-popover {
max-width: 250px;
left: 0;
right: 0;
}
.custom-select-dropdown {
max-height: 200px;
}
.custom-select-option {
padding: 12px;
}
/* En móvil, forzar a 1 columna */
.custom-select-options.multi-column {
grid-template-columns: 1fr !important;
}
.custom-select-dropdown {
max-height: 200px;
}
.custom-select-option {
padding: 12px;
}
/* En móvil, forzar a 1 columna */
.custom-select-options.multi-column {
grid-template-columns: 1fr !important;
}
.mls-share-popover {
width: 180px;
right: -10px;
}
.popover-content {
padding: 12px;
}
.share-actions {
gap: 16px;
}
.share-btn {
padding: 8px 10px;
}
}
/* Responsive: Mobile */
@media (max-width: 576px) {
.fs-xs {
font-size: 0.65rem !important;
}
.fs-sm {
font-size: 0.75rem !important;
}
.fs-base {
font-size: 0.875rem !important;
}
.fs-lg {
font-size: 1rem !important;
}
.fs-xl {
font-size: 1.125rem !important;
}
.fs-xxl {
font-size: 1.25rem !important;
}
.fs-xxxl {
font-size: 1.5rem !important;
}
}
@media (max-width: 575px) {
#mlsGrid {
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
}
}
/* Responsive: Mobile */
@media (max-width: 480px) {
.mls-detail-container .header-content .container {
flex-direction: row !important;
}
.header-left {
min-width: auto !important;
}
.header-right {
justify-content: start;
}
.detail-nav-menu {
gap: 16px;
}
.gallery__main img {
max-height: 260px;
}
.gallery__thumbs .slick-slide {
width: 120px !important;
height: 80px;
}
.property-main-address {
width: 100%;
}
.property-location,
.detail-nav-menu>li:first-child {
display: none
}
.detail-back-button {
height: 32px !important;
width: 32px !important;
margin-left: 24px;
}
.detail-back-button svg {
width: 24px !important;
height: 24px !important;
}
.property-icons-row {
gap: var(--spacing-16);
}
.property-icon-item {
min-width: 60px;
}
.property-icon {
width: 40px;
height: 40px;
}
.property-icon svg {
width: 20px;
height: 20px;
}
.property-address {
font-size: var(--detail-font-size-lg);
}
.property-price {
font-size: var(--detail-font-size-lg);
}
.facts-container {
padding: var(--spacing-16);
}
/* Asegurar que section-title mantenga centrado en móviles pequeños */
.section-title {
text-align: center !important;
display: block !important;
width: 100% !important;
}
.map-container,
.virtual-tour-content {
height: 300px;
}
.amenity-list {
grid-template-columns: 1fr;
}
.amenity-list-container {
height: 200px;
}
.map-container {
height: 250px;
}
.street-view-toggle {
bottom: 45px;
left: 5px;
padding: 5px 8px;
font-size: 0.65rem;
}
.street-view-panel {
width: 140px;
height: 90px;
bottom: 5px;
left: 5px;
}
.agent-photo {
width: 80px;
height: 80px;
}
.agent-name {
font-size: 1.25rem;
}
.agent-contact-grid {
gap: 1rem;
}
.multi-places-wrap input {
min-width: 10px;
flex: 1 1 10px;
padding: 0 2px;
}
.chip {
max-width: 120px;
font-size: 11px;
}
.chips-popover {
max-width: 200px;
}
}