/**
 * ACTUALIZADO (Fase 1 - adaptacion CI del prototipo aprobado).
 * Sincroniza los tokens reales con la direccion final validada tras
 * varias rondas de feedback en el prototipo independiente (Fase 0.5):
 * sin redondeados, tipografia Bricolage Grotesque + Inter (sustituye
 * "Museo", que era de una ronda anterior sin la validacion posterior
 * del cliente), lienzo calido en vez de blanco/gris plano.
 * Construido SOBRE lo ya existente - no sustituye Bootstrap 2.x ni
 * casas.do.css (decision ya documentada en FRONTEND_REDESIGN_MASTER.md).
 *
 * Colores de marca sin cambio: #2BA3E2 / #CF1918, confirmados
 * reales en casas.do.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- Color --- */
    --color-brand: #2BA3E2;
    --color-brand-dark: #2899D5;
    --color-accent: #CF1918;
    --color-accent-dark: #DE0E0E;
    --color-text: #1C2321;
    --color-text-muted: #8B8378;
    --color-text-light: #ADA89F;
    --color-bg: #FFFFFF;
    --color-bg-alt: #FAF8F5;
    --color-border: #E8E3DC;
    --color-success: #00A200;
    --color-danger: #AA0607;

    /* --- Tipografia (validada en el prototipo tras varias rondas de
         feedback - sustituye "Museo" de una version anterior sin
         validar) --- */
    --font-brand: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-brand-bold: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-xxl: 36px;

    /* --- Espaciado (escala de 4px, consistente con el grid de
         Bootstrap 2.x ya en uso) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* --- Radios: SIN redondeados (feedback explicito del cliente
         tras ver el prototipo - "no me gustan las cosas redondeadas,
         me gusta el estilo limpio"). Se mantienen las variables para
         no romper referencias existentes, todas en 0. --- */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
   COMPONENTES BASE — construidos sobre los tokens de arriba.
   Complementan, no sustituyen, las clases .btn/.badge/.alert
   ya provistas por Bootstrap 2.x.
   ========================================================== */

/* Botones: refuerzo visual sobre .btn-primary/.btn-danger ya
   existentes, sin cambiar su comportamiento ni sus clases. */
.btn-primary,
.btn-danger {
    font-family: var(--font-body);
    font-weight: bold;
    border-radius: var(--radius-md);
    transition: opacity 0.15s ease;
}
.btn-primary:hover,
.btn-danger:hover {
    opacity: 0.9;
}

/* Cards: contenedor generico reutilizable (property card, agency
   card) - no sustituye .media/.row-fluid ya usados, los envuelve. */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    transition: box-shadow 0.15s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
}

/* Alertas: refuerzo sobre .alert-* ya provisto por Bootstrap. */
.alert {
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* Formularios: coherencia tipografica/espaciado en labels e inputs
   de todo el sitio publico (no toca el Admin, que mantiene su
   propio estilo interno). */
.house-detail label,
.search-filters label,
.similar-houses label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Tipografia de titulos con la fuente de marca real. */
h1, h2, h3 {
    font-family: var(--font-brand);
}

/* NUEVO (Fase 3 frontend core, prioridad explicita del prompt
   maestro): CTA de contacto sticky en movil para la ficha de
   propiedad - el formulario real vive al final de la pagina,
   facil de perder al hacer scroll largo en pantallas pequeñas. */
.sticky-contact-cta {
    display: none;
}
@media (max-width: 767px) {
    .sticky-contact-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        padding: var(--space-3) var(--space-4);
    }
    .sticky-contact-cta a {
        flex: 1;
        text-align: center;
        background: var(--color-accent);
        color: #FFFFFF;
        padding: var(--space-3);
        border-radius: var(--radius-md);
        font-weight: bold;
        text-decoration: none;
    }
    /* Espacio al final del contenido para que el CTA fijo no tape
       el ultimo bloque real de la pagina (formulario de contacto). */
    .house-detail {
        padding-bottom: 70px;
    }
}

/* NUEVO (Fase 1 - adaptacion CI, hallazgo real critico): la
   navegacion principal (Comprar/Alquilar/Publicar) nunca tuvo
   mecanismo de colapso movil real - boostrap-responsive.css sabe
   manejarlo pero exige la estructura .nav-collapse/.btn-navbar
   clasica, que este header (construido con flex personalizado en
   una sesion anterior) nunca uso. En movil, el menu se quedaba
   intentando mostrarse en linea dentro de un contenedor estrecho.
   Misma tecnica de checkbox oculto ya validada en el prototipo
   Fase 0.5 (sin JS, funciona en cualquier navegador). */
.mobile-nav-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    color: var(--color-text);
}
#mobile-nav-check {
    display: none;
}
@media (max-width: 767px) {
    /* Se usa float (pull-right), coherente con el resto del sistema
       de floats de Bootstrap 2.x ya en uso aqui (#casas_do es
       pull-left, .nav es pull-right) - se evita position:absolute
       dependiendo de un ancestro sin position:relative, el mismo
       tipo de bug ya encontrado antes en esta sesion (.opt/.inmob). */
    .mobile-nav-toggle {
        display: block;
        float: right;
    }
    .navbar .nav.pull-right {
        display: none;
        position: fixed;
        top: 45px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFFFFF;
        z-index: 1000;
        flex-direction: column;
        float: none;
        margin: 0;
        padding: 8px 0;
        overflow-y: auto;
    }
    #mobile-nav-check:checked ~ .navbar-static-top .container .nav.pull-right {
        display: flex;
    }
    .navbar .nav.pull-right li {
        float: none;
        width: 100%;
    }
    .navbar .nav.pull-right li a {
        display: block;
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border);
        font-size: 16px;
    }

    /* NUEVO (hallazgo real, captura del cliente): ".navbar .brand"
       real (casas.do.css) tiene font-size:64px y margin-top:-30px -
       un tratamiento decorativo pensado para escritorio (logo grande
       superpuesto a la barra azul), nunca adaptado a movil. En
       pantallas estrechas el texto se desbordaba y se solapaba con
       la barra de navegacion. */
    .navbar .brand, #home h1.brand {
        font-size: 28px !important;
        margin-top: 0 !important;
        padding: 10px 10px 10px 15px !important;
    }

    /* NUEVO (hallazgo real, captura del cliente): la barra superior
       de utilidad (iconos sociales + ES/Acceso/Particulares/
       Profesionales/Contactar) nunca recibio tratamiento movil - a
       diferencia del navbar principal (Comprar/Alquilar/Publicar),
       que si tiene el menu hamburguesa ya corregido. En movil se
       reduce a lo esencial (idioma + acceso), el resto de enlaces ya
       estan disponibles dentro del menu hamburguesa principal o en
       el footer. */
    header > .container > .row > div#social-icons,
    header > .container > .row > .span6 > #social-icons {
        display: none;
    }
    header > .container > .row > nav.span6 {
        width: 100%;
        float: none;
    }
    header > .container > .row > nav.span6 .nav.nav-pills.pull-right {
        float: none;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px;
    }
    header > .container > .row > nav.span6 .nav.nav-pills.pull-right li a {
        font-size: 12px;
        padding: 4px 6px;
    }
    /* Particulares/Profesionales se ocultan en esta barra en movil -
       ya son accesibles desde el footer, evita el amontonamiento
       visto en la captura real. */
    header > .container > .row > nav.span6 .nav.nav-pills.pull-right li:has(a[href*="particulares"]),
    header > .container > .row > nav.span6 .nav.nav-pills.pull-right li:has(a[href*="profesionales"]) {
        display: none;
    }
}

/* NUEVO (skill disenowebinmo, escritorio grande - hallazgo real:
/* CORREGIDO (auditoria de causa raiz, hallazgo real en una MacBook
   Air de 13" - ancho nativo exactamente 1440px): esta regla tocaba
   la clase generica ".container", la MISMA que Bootstrap ya gestiona
   en su propio breakpoint de 1200px (.container:1170px + .span8:770px
   + .span4:370px, todo junto y proporcional, sumando correctamente).
   Al ensanchar SOLO el contenedor a 1440px sin tocar los .span*,
   quedaba una matematica rota justo en el rango 1200-1440px+ en
   monitores de ese ancho exacto - una intervencion innecesaria sobre
   una clase que Bootstrap ya resolvia por si solo. Se retira por
   completo: si en el futuro los componentes NUEVOS (.grid-3/.grid-4)
   necesitan mas ancho en pantallas grandes, deben tener su propia
   clase contenedora especifica, nunca reutilizar ".container". */

/* NUEVO (hallazgo real del cliente: "la paginación no se muestra
   como en el diseño") - estilo compartido, colocado aqui (no en
   frontend-redesign.css) porque este partial se usa TANTO en las
   paginas publicas rediseñadas COMO en el backoffice (addressbook,
   agency-panel/properties), y solo este archivo se carga en ambos
   layouts. */
.search-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 24px 0;
}
.search-pagination__nav {
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    padding: 8px 12px;
}
.search-pagination__nav--disabled {
    color: var(--color-text-muted);
    opacity: 0.5;
}
.search-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
}
.search-pagination__page--active {
    background: var(--color-text);
    color: #FFFFFF;
    border-color: var(--color-text);
    font-weight: 600;
}
.search-pagination__ellipsis {
    color: var(--color-text-muted);
    padding: 0 4px;
}