/**
 * NUEVO (Fase 3 - rediseño frontend, auditoria UX de ficha.php).
 * Componentes visuales nuevos (badges, specs, galeria con miniaturas)
 * que no existian en el original. Colores reutilizados TAL CUAL de
 * casas.do.css real (#2BA3E2 azul de marca, #CF1918 rojo de marca) -
 * no se inventa paleta nueva, siguiendo la instruccion de mantener
 * los colores primarios actuales.
 */

/* FUENTES REALES — Bricolage Grotesque + Inter, cargadas via Google
   Fonts en main.php. Sin esta regla Bootstrap sobreescribe con Arial. */
body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    text-transform: none;
}
/* CORREGIDO (hallazgo real del cliente: "todo se ha salido de la
   caja contenedora") - no existia NINGUNA regla que limitara el
   ancho de las imagenes en todo el sitio. Una foto real subida con
   resolucion nativa grande se renderizaba a tamaño completo,
   forzando a toda la rejilla (.ficha-layout, tarjetas, etc.) a
   desbordarse. Regla base fundamental de cualquier sitio responsive,
   nunca añadida hasta ahora. */
img {
    max-width: 100%;
    height: auto;
}

.house-detail__badges {
    margin-bottom: 8px;
}
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 6px;
    color: #FFFFFF;
}
.badge-action {
    background-color: #CF1918;
}
.badge-type {
    background-color: #2BA3E2;
}

.house-detail__gallery-main {
    margin-bottom: 8px;
}
.house-detail__gallery-main img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 4px;
}
.house-detail__gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.gallery-thumb {
    width: 90px;
    height: 65px;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.gallery-thumb:hover {
    border-color: #2BA3E2;
}
.house-detail__gallery-empty {
    background: #F3F3F3;
    border: 1px dashed #E0E0E0;
    border-radius: 4px;
    padding: 60px 0;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.house-detail__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 24px;
    padding: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
@media (max-width: 600px) {
    .house-detail__specs { grid-template-columns: repeat(2, 1fr); }
}
.spec-item {
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spec-item strong {
    font-family: var(--font-brand);
    display: block;
    font-size: 16px;
}
.spec-item i {
    color: #2BA3E2;
    margin-right: 4px;
}

/* Mobile: la galeria/specs no deben desbordar */
@media (max-width: 767px) {
    .house-detail__gallery-main img {
        aspect-ratio: 4/3;
    }
    .house-detail__specs {
        gap: 10px;
    }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #F3F3F3;
    border-radius: 4px;
    color: #666;
}
.empty-state i {
    font-size: 32px;
    color: #999;
    display: block;
    margin-bottom: 12px;
}
.clear-filters {
    /* CORREGIDO (skill todologo, colision semantica de color): el
       rojo de marca (#CF1918) se usa en todo el sitio para el CTA
       PRINCIPAL de conversion (Contactar, Publicar) - reutilizarlo
       aqui para "limpiar/deshacer" hace que el mismo color signifique
       dos cosas opuestas en la misma pantalla, reduciendo la
       velocidad de reconocimiento visual. Se usa el gris neutro de
       texto secundario, coherente con una accion de bajo compromiso. */
    margin-left: 10px;
    color: var(--color-text-muted);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .empty-state {
        padding: 30px 15px;
    }
    .house-detail__badges .badge {
        font-size: 11px;
        padding: 3px 7px;
    }
    .agency-contact-info li {
        margin-bottom: 6px;
    }
}

/* CORREGIDO (auditoria QA de maquetacion, causa raiz real): esta
   clase estaba DUPLICADA con otra definicion mas abajo para un
   contexto distinto (cabecera de ficha de inmobiliaria, tamaño fijo
   88x88px) - al compartir el mismo nombre, la segunda definicion
   ganaba en cascada para las propiedades que coincidian (max-width),
   forzando SIN QUERER el tamaño fijo tambien en el listado de
   inmobiliarias, que necesitaba max-width:100% flexible. Se separa
   en dos clases propias, sin ambiguedad. */
.agency-logo {
    max-width: 100%;
    border: 1px solid var(--color-border);
    padding: var(--space-2);
}

/* NUEVO (Fase 1 - adaptacion CI del prototipo aprobado): "cinta de
   precio", elemento de firma validado en el prototipo (Fase 0.5) -
   superpuesta en la esquina inferior izquierda de cada foto de
   propiedad, consistente en Home/Search/Ficha. */
.price-ribbon {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--color-text);
    color: #FFFFFF;
    padding: 6px 14px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    z-index: 2;
}

/* NUEVO (Fase 1 - adaptacion CI del prototipo aprobado): componente
   ".property-card" completo, validado en el prototipo tras varias
   rondas de feedback. IMPORTANTE: ".photo" declara position:relative
   explicitamente - el price-ribbon y los badges son position:absolute
   y necesitan este contexto, evita el mismo tipo de bug de
   posicionamiento ya encontrado antes en esta sesion (.opt/.inmob). */
.property-card {
    background: var(--color-bg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.15s ease;
    text-decoration: none;
    color: var(--color-text);
    display: block;
}
.property-card:hover {
    box-shadow: var(--shadow-md);
}
.property-card .photo {
    position: relative;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #DCE8EF 0%, #C9D9E3 50%, #B8CBD8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8FA5B3;
    font-size: 13px;
    overflow: hidden;
}
.property-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.property-card .card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.property-card .card-badges .badge.action { background: var(--color-accent); color: #FFFFFF; }
.property-card .card-badges .badge.type { background: rgba(255,255,255,0.9); color: var(--color-text); }
.property-card .info { padding: var(--space-4); }
.property-card .location { color: var(--color-text-muted); font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.property-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    font-family: var(--font-brand);
    /* CORREGIDO (auditoria QA de maquetacion, causa raiz): sin
       control de desbordamiento, un titulo real largo hacia crecer
       esa tarjeta mas que sus vecinas en el mismo grid, rompiendo la
       alineacion de alturas entre cards - fijado en el componente
       compartido, no por pagina. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}
.property-card .specs { display: flex; gap: 14px; font-size: 13px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 10px; }

/* Card "super destacada" - mayor peso grafico (Home: 4 grandes). */
.property-card.super .photo { aspect-ratio: 16/11; }
.property-card.super h3 { font-size: 20px; }
.property-card.super .price-ribbon { font-size: 22px; padding: 8px 16px; }

/* Card "destacada" pequeña (Home: 8 compactas, segundo nivel). */
.property-card.compact .photo { aspect-ratio: 1/1; }
.property-card.compact h3 { font-size: 14px; margin-bottom: 4px; }
.property-card.compact .info { padding: 10px; }
.property-card.compact .specs { font-size: 11px; gap: 8px; padding-top: 6px; }
.property-card.compact .price-ribbon { font-size: 13px; padding: 4px 10px; }

.grid-8-compact { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
@media (max-width: 767px) {
    .grid-8-compact { grid-template-columns: repeat(3, 1fr); }
}

/* NUEVO (Fase 1 - adaptacion CI, listado): etiqueta de seccion y
   badge "Destacado", validados en el prototipo. */
.section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin: 24px 0 16px;
}
.card-badges .badge.featured {
    background: var(--color-text);
    color: #FFFFFF;
}

/* NUEVO (Fase 1 - adaptacion CI del prototipo aprobado): alerta de
   precio + historico real, validados en el prototipo tras feedback
   explicito ("avisame si baja de precio"). */
.price-alert {
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.price-alert .txt {
    font-size: 14px;
}
.price-alert .txt strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.price-alert input[type="email"] {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    font-size: 13px;
}
.price-alert button {
    background: #FFFFFF;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.price-alert button:hover {
    background: var(--color-text);
    color: #FFFFFF;
}
.price-history {
    margin-top: var(--space-3);
}
.price-history summary {
    font-size: 13px;
    color: var(--color-brand);
    cursor: pointer;
    font-weight: 600;
}
.price-history-list {
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
}
.price-history-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.price-history-row .old-price {
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.price-history-row .new-price {
    font-weight: 600;
}
.price-history-row .date {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* NUEVO (Fase 1 - adaptacion CI): cabecera de inmobiliaria, version
   YA CORREGIDA validada en el prototipo (sin margen negativo /
   superposicion fragil - flex simple en linea). */
.agency-header__banner {
    height: 120px;
    background: linear-gradient(135deg, #2BA3E2, #1E7BAE);
}
/* CORREGIDO (hallazgo real del cliente: "las fichas de las
   inmobiliarias están desmaquetadas") - sin max-width/padding
   propios, este bloque se extendia a todo el ancho real del
   navegador (mismo patron de bug ya encontrado y corregido en la
   miga de pan de la ficha de propiedad). */
.agency-header {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px;
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
}
/* NUEVO: contenedor del cuerpo (descripcion+propiedades / contacto),
   mismo patron de rejilla ya usado en la ficha de propiedad
   (.ficha-layout) - antes usaba el sistema viejo de Bootstrap
   (.row/.span8/.span4), calibrado para un contenedor de 940px que
   ya no envuelve esta pagina. */
.agency-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 40px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    align-items: start;
    box-sizing: border-box;
}
.agency-body__main,
.agency-body__sidebar {
    min-width: 0;
}
@media (max-width: 767px) {
    .agency-body {
        grid-template-columns: 1fr;
        padding: 24px 16px 48px;
    }
    .agency-header {
        padding: 24px 16px;
        flex-wrap: wrap;
    }
}
.agency-header__logo-img {
    max-width: 88px;
    height: 88px;
    border: 1px solid var(--color-border);
    padding: var(--space-2);
    object-fit: contain;
}
.agency-logo--placeholder {
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-brand);
}
.agency-header__info h1 {
    font-size: 24px;
    margin-bottom: 6px;
}
.agency-header__info .location {
    color: var(--color-text-muted);
    font-size: 14px;
}
.agency-contact-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: var(--space-4);
}
.agency-contact-card h3 {
    font-size: 16px;
    margin-bottom: 16px;
}
.agency-contact-info li {
    margin-bottom: 10px;
    font-size: 14px;
}

/* NUEVO (Fase 1 - adaptacion CI, listado de inmobiliarias). */
.agency-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: var(--space-4);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    display: block;
    transition: box-shadow 0.15s ease;
}
.agency-card:hover {
    box-shadow: var(--shadow-md);
}
.agency-card h4 {
    font-size: 15px;
    margin-bottom: 4px;
    font-family: var(--font-brand);
}
.agency-card .meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* NUEVO (Fase 1 - adaptacion CI): formulario de publicar - los 3
   pasos reales (Casas::add()) nunca tuvieron ningun estilo, solo
   <label><input> en crudo. */
.publish-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}
.publish-wrap h1 {
    font-size: 24px;
    margin-bottom: var(--space-5);
}
.publish-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.publish-wrap input,
.publish-wrap select,
.publish-wrap textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-top: 6px;
    background: var(--color-bg);
}
.publish-wrap button[type="submit"] {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}
/* NUEVO (evolucion del sistema, estado ausente segun brief seccion
   32): sin ningun tratamiento visual de :disabled - activo
   automaticamente si el atributo disabled esta presente por
   cualquier motivo (validacion nativa del navegador, JS futuro),
   sin necesidad de tocar ninguna logica JS existente. */
.publish-wrap button[type="submit"]:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.btn-danger:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* NUEVO: grid de 2 columnas, usada en la eleccion de tipo de
   vendedor del flujo de publicar. */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 767px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* NUEVO (Fase 1 - producto nuevo real): panel de inmobiliaria,
   adaptado del prototipo (agency-dashboard.html/properties/agents). */
.agency-topbar {
    background: var(--color-text);
    color: #FFFFFF;
    padding: 14px 0;
}
.agency-topbar .brand-id {
    display: flex;
    align-items: center;
    gap: 12px;
}
.agency-topbar .avatar {
    width: 36px;
    height: 36px;
    background: var(--color-brand);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
}
.agency-topbar .name {
    font-weight: 600;
    font-size: 14px;
}
.agency-topbar .role {
    font-size: 12px;
    color: #B8B4AE;
}
.agency-panel-tabs {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.agency-panel-tabs .container {
    display: flex;
    gap: 4px;
}
.agency-panel-tabs a {
    padding: 16px 18px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}
.agency-panel-tabs a.active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}
.dash-head {
    padding: 32px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-head h1 {
    font-size: 24px;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px 0 32px;
}
.stat-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 20px;
}
.stat-card .num {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 30px;
}
.stat-card .label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.mgmt-row {
    display: flex;
    gap: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 16px;
    margin-bottom: 12px;
    align-items: center;
}
.mgmt-row .thumb {
    width: 100px;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #DCE8EF, #C9D9E3);
    flex-shrink: 0;
}
.mgmt-row .info {
    flex: 1;
}
.mgmt-row h3 {
    font-size: 15px;
    margin-bottom: 4px;
}
.mgmt-row .meta {
    font-size: 13px;
    color: var(--color-text-muted);
}
.mgmt-row .agent {
    font-size: 12px;
    color: var(--color-brand);
    margin-top: 2px;
}
.status-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.status-pill.active {
    background: #E8F5E9;
    color: #2E7D32;
}
.status-pill.disabled {
    background: #F0EDE9;
    color: var(--color-text-muted);
}
.mgmt-actions {
    display: flex;
    gap: 8px;
}
.mgmt-actions a {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
}
.mgmt-actions a.danger {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.agent-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 16px 20px;
    margin-bottom: 10px;
}
.agent-row .avatar {
    width: 40px;
    height: 40px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.agent-row .info {
    flex: 1;
}
.agent-row .name {
    font-weight: 600;
    font-size: 14px;
}
.agent-row .meta {
    font-size: 12px;
    color: var(--color-text-muted);
}
.agent-row .props-count {
    font-size: 13px;
    color: var(--color-brand);
    font-weight: 600;
}

/* NUEVO (hallazgo real, segunda captura del cliente confirmando que
   el intento anterior de corregir ".opt" NO funciono de verdad):
   se anula por completo la regla original fragil
   (".admin .table-bordered .inmob .opt", position:absolute;bottom:0)
   en vez de seguir compitiendo con contextos de posicionamiento -
   flujo de documento normal, sin superposicion posible por diseño. */
.admin .table-bordered .inmob .opt {
    position: static !important;
    width: auto !important;
    bottom: auto !important;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    margin-top: 8px;
    display: block;
    clear: both;
}

/* CORREGIDO (skill disenowebinmo, auto-correccion): la ficha YA
   tenia la estructura de dos columnas real (Bootstrap span8/span4,
   confirmado en el HTML) - lo que faltaba de verdad era solo el
   comportamiento sticky del panel lateral en escritorio, la mejora
   puntual que quedo pendiente de las sesiones de prototipo.
   IMPORTANTE (auto-revision antes de entregar): se aplica a UN SOLO
   contenedor (".span4 > .submodl", el que ya envuelve precio +
   historico + alerta + contacto en el HTML real) - no a cada bloque
   por separado, que habria hecho que cada uno se pegara de forma
   independiente y se superpusieran entre si en el mismo top. */
/* CORREGIDO (hallazgo real del cliente: filtros del listado
   desmaquetados) - la regla original usaba ".span4 > .submodl", una
   combinacion generica de Bootstrap 2.x que TAMBIEN coincidia con
   los filtros de listado5.php (misma estructura HTML, contexto
   distinto) - "position:sticky" ahi alteraba el comportamiento de
   flotacion del grid, haciendo que el contenido cayera debajo en
   vez de al lado. Se escopa a una clase propia y exclusiva de la
   ficha de propiedad. */
@media (min-width: 768px) {
    .house-detail__sidebar {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

/* NUEVO (skill disenowebinmo, hallazgo real): ".field-row" se usaba
   en el perfil de usuario nuevo pero nunca existio en el CSS
   compartido real - solo en el prototipo independiente. Patron
   generico reutilizable para pares de campos en cualquier formulario
   del sistema. */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 767px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

/* NUEVO (skill disenowebinmo, paginas geograficas). */
.zone-summary {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: -8px 0 16px;
}
.zone-summary strong {
    color: var(--color-text);
}

/* NUEVO (limpieza de arquitectura CSS, eliminacion de estilos inline
   duplicados): mensajes de flash, antes repetidos identicos como
   style="" en layouts/main.php Y layouts/backoffice.php por
   separado - un solo componente real del sistema ahora. */
.flash-message {
    padding: 14px 18px;
    margin-bottom: 16px;
    margin-top: 16px;
    border: 1px solid;
}
.flash-message--success {
    background: #E8F5E9;
    border-color: var(--color-success);
    color: #1B5E20;
}
.flash-message--error {
    background: #FDF3F3;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* NUEVO: celdas de tabla de datos (estadisticas, y cualquier tabla
   futura del sistema) - antes repetido 5+3+2 veces como style="". */
.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
}
.data-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}
.data-table td.emphasis {
    font-weight: 600;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

/* NUEVO: espaciado de listas de gestion (panel de inmobiliaria, mis
   propiedades) - antes repetido identico en 3 vistas distintas. */
.mgmt-list {
    padding: 16px 0 48px;
}

/* NUEVO (evolucion del sistema, brief de estados de interaccion -
   seccion 27/32: accesibilidad y estados ausentes). Bootstrap ya
   aporta foco por defecto en botones/inputs/links, pero con sus
   colores originales de 2012, sin relacion con la identidad de marca
   actual - y los componentes NUEVOS de esta sesion (.property-card,
   .clear-filters, navegacion movil, tarjetas de gestion) no tenian
   ningun tratamiento de foco en absoluto. Se usa :focus-visible
   (soporte real en navegadores modernos) para no interferir con
   clics de raton, solo con navegacion real por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.property-card:focus-visible,
.clear-filters:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.btn-danger:focus-visible,
button[type="submit"]:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}
/* Las tarjetas en si no son interactivas (el enlace real esta
   dentro), pero el enlace principal de la tarjeta si lo es - se
   asegura foco visible ahi especificamente. */
.property-card a:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

/* CORREGIDO (hallazgo real durante la implementacion de la propuesta
   adaptada): ".grid-3" se usaba en listado5.php (2 puntos reales)
   pero NUNCA tuvo definicion CSS en ningun archivo - las tarjetas de
   resultados llevaban apiladas en bloque simple, sin ningun grid
   real aplicado, todo este tiempo. Renombrado a ".results-grid"
   (nombre honesto, sin prometer un numero de columnas que la
   matematica real de Bootstrap no permite) e implementado con las
   anchuras REALES verificadas: 2 columnas encajan exacto dentro del
   .span8 real en ambos niveles de Bootstrap (620px y 770px), sin el
   1240px libre del prototipo original que nunca fue alcanzable. */
.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (min-width: 1200px) {
    .results-grid { gap: 30px; }
}
@media (max-width: 767px) {
    .results-grid { grid-template-columns: 1fr; }
}

/* CORREGIDO (mismo patron de bug real encontrado en .grid-3): ".grid-4"
   se usaba en home.php (destacadas de portada, la seccion mas
   importante de todo el sitio) y en inmobiliarias-listado.php, sin
   NINGUNA definicion CSS en ningun archivo, todo este tiempo.
   A diferencia de ".results-grid" (constreñido a los 620/770px del
   .span8 real), estas viven en el .container completo (940px/1170px
   reales, sin columna lateral) - math real: 4 columnas de ~215-270px
   con gap de 20/30px encajan comodas sin comprometer nada. */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (min-width: 1200px) {
    .grid-4 { gap: 30px; }
}
@media (max-width: 767px) {
    .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 979px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* CORREGIDO (auto-revision inmediata, error detectado antes de
   entregar): asumi que ".grid-3" en inmobiliaria.php vivia en el
   .container completo, pero SI esta dentro de .span8 real (620px/
   770px, igual que ".results-grid") - 3 columnas ahi darian solo
   ~193px cada una, demasiado estrecho para una tarjeta con foto.
   Se usa la MISMA matematica de 2 columnas ya verificada, no 3 -
   el nombre de la clase queda desalineado con su contenido real,
   pero cambiar el nombre implicaria tocar el HTML sin necesidad;
   la prioridad es que el layout real sea correcto. */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (min-width: 1200px) {
    .grid-3 { gap: 30px; }
}
@media (max-width: 767px) {
    .grid-3 { grid-template-columns: 1fr; }
}

/* CORREGIDO (auditoria sistematica de clases sin definicion CSS):
   ".house-detail__price" envuelve el precio de la propiedad - el
   dato mas importante de toda la ficha ("que es -> donde esta ->
   cuanto cuesta", jerarquia explicita del sistema) - no tenia
   NINGUN tratamiento visual, se veia como texto plano. */
.house-detail__price {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 32px;
    color: var(--color-text);
    margin: 16px 0;
}

/* CORREGIDO (hallazgo real del cliente: "el logo no se ve"): el
   icono real ".icon-casas_do" solo tenia estilo definido para 3
   contextos especificos del CSS legado (".navbar", "#landing...",
   "#home h1.brand") - pero el HTML real de la portada usa
   "<p class=\"brand\">" (cambiado de h1 a p por SEO en una correccion
   anterior), que no coincide con ninguno de los tres. El icono se
   renderizaba completamente invisible, sin ningun estilo aplicado.
   Reutiliza el mismo archivo de imagen real ya confirmado existente. */
.brand .icon-casas_do {
    display: inline-block;
    background: url("../img/casas.do.png") 0px 0px;
    height: 76px;
    width: 55px;
    vertical-align: middle;
    margin-right: 8px;
}

/* CORREGIDO (mismo patron de bug real ya encontrado varias veces:
   ".grid-3"/".grid-4" - clases usadas en HTML real sin NINGUNA
   definicion CSS): ".similar-houses"/".similar-house-card" ("Otros
   inmuebles cerca" en la ficha) nunca tuvieron estilo real - la
   unica coincidencia en el CSS era accidental (una regla de "label"
   agrupada con otros componentes, que ni siquiera aplica aqui, este
   bloque no tiene ningun <label>). Las imagenes se renderizaban a
   tamaño natural completo, sin ninguna tarjeta ni grid. */
.similar-houses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 767px) {
    .similar-houses {
        grid-template-columns: repeat(2, 1fr);
    }
}
.similar-house-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
}
.similar-house-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.similar-house-card__photo {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #DCE8EF 0%, #C9D9E3 50%, #B8CBD8 100%);
    overflow: hidden;
}
.similar-house-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.similar-house-card p {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* NUEVO (hallazgo real del cliente: "no muestras un enlace al perfil
   de la inmobiliaria"): enlace real cuando la propiedad pertenece a
   una agencia, coherente con el resto del sistema de enlaces. */
.house-detail__agency-link {
    margin: 4px 0 16px;
    font-size: 13px;
}
.house-detail__agency-link a {
    color: var(--color-brand);
    text-decoration: underline;
}

/* NUEVO (hallazgo real del cliente: filtro de provincia en
   /inmobiliarias, con enlaces rastreables reales). */
.province-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 32px;
}
.province-filter-chips a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
}
.province-filter-chips a.active {
    background: var(--color-text);
    color: #FFFFFF;
    border-color: var(--color-text);
}

/* NUEVO (ejercicio de diseno aprobado por el cliente): modal de
   contacto real, en vez de formulario largo siempre visible en la
   pagina - reduce carga cognitiva. */
.contact-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 33, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.contact-modal-overlay.show {
    display: flex;
}
.contact-modal-box {
    background: var(--color-bg);
    width: 480px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
}
.contact-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--color-text-muted);
}
/* NUEVO: mapa real (Leaflet + OpenStreetMap, sin API key). */
.house-detail__map {
    height: 320px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border);
}
.house-detail__map-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

/* NUEVO: calculadora de hipoteca real, con datos reales de bancos
   gestionados desde Admin (no una tasa fija inventada). */
.mortgage-calc {
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    padding: 20px;
    margin-top: 8px;
    margin-bottom: 24px;
}
.mortgage-calc h3 {
    font-size: 15px;
    margin-bottom: 12px;
}
.mortgage-calc select {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border: 1px solid var(--color-border);
    margin-top: 6px;
    margin-bottom: 16px;
    font-family: var(--font-body);
    /* CORREGIDO (hallazgo real del cliente: texto del banco cortado
       verticalmente dentro del select) - problema conocido de
       renderizado nativo: fuentes personalizadas (Bricolage
       Grotesque/Inter) pueden tener metricas de altura de linea
       distintas a las que el navegador asume por defecto para un
       <select>, cortando el texto dentro de la caja. */
    line-height: 1.4;
    height: auto;
    box-sizing: border-box;
}
.mortgage-result {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 26px;
    color: var(--color-brand);
    margin-bottom: 12px;
}
.mortgage-calc label {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 12px;
}
.mortgage-calc input[type="range"] {
    width: 100%;
    margin-top: 4px;
}
.mortgage-note {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 16px;
}


/* NUEVO (hallazgo real del cliente: formato horizontal para tarjetas
   de resultados de listado, referencia de otro portal real - SIN
   "avisame si baja"/"calcula tu hipoteca"/"contactar", esos quedan
   solo para la ficha). Reemplaza ".results-grid" (2 columnas
   verticales) por una lista vertical de tarjetas horizontales, mas
   apropiado para el contenido mas denso (con extracto de
   descripcion) que este formato incluye. */
.property-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.property-list-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.property-list-item:hover {
    box-shadow: var(--shadow-md);
}
.property-list-item__photo {
    position: relative;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #DCE8EF 0%, #C9D9E3 50%, #B8CBD8 100%);
}
.property-list-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.property-list-item__info {
    padding: 16px 20px 16px 0;
    display: flex;
    flex-direction: column;
}
.property-list-item__price {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-text);
}
.property-list-item__prev-price {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-left: 8px;
}
.property-list-item__info h3 {
    font-size: 16px;
    margin: 4px 0 4px;
}
.property-list-item__excerpt {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 8px;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .property-list-item {
        grid-template-columns: 1fr;
    }
    .property-list-item__info {
        padding: 12px 16px 16px;
    }
}


/* NUEVO (hallazgo real del cliente: "se ve antiguo") - ".toolbox"
   (contenedor real del formulario de filtros) seguia con el CSS
   legado original (fuente "Museo", azul #2899D5 sin relacion con los
   tokens de marca reales) - nunca recibio el sistema de diseño
   nuevo en toda esta sesion. Confirmado exclusivo de los filtros de
   busqueda (".submodl" en cambio si se reutiliza en la ficha, no se
   toca aqui). */
.toolbox {
    border-left: none;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 24px;
}
.toolbox h3 {
    font-family: var(--font-brand);
    color: var(--color-text);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-text);
}
.toolbox label {
    font-family: var(--font-body);
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): footer rediseñado con pestañas Venta/Alquiler y conteo
   real por operacion. */
.site-footer-redesign {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 40px 24px 24px;
    margin-top: 40px;
}
.site-footer-redesign__inner {
    max-width: 1240px;
    margin: 0 auto;
}
.site-footer-redesign__top {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 28px;
    margin-bottom: 20px;
}
.site-footer-redesign__tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}
.site-footer-redesign__tabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    padding: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}
.site-footer-redesign__tabs button.active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}
.site-footer-redesign__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 20px;
}
.site-footer-redesign__grid a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
}
.site-footer-redesign__count {
    color: var(--color-text-muted);
}
.site-footer-redesign__grid a:hover {
    color: var(--color-brand);
}
.site-footer-redesign__bottom {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): estetica del modal de login/recuperar contrasena,
   MISMA estructura funcional real (id="loginform", form.js-login-
   form, boton externo form="login-form") - solo se toca el estilo
   visual, no la logica ya probada. */
#loginform.modal, #passwd_recovery.modal {
    border: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(28,35,33,0.2);
}
#loginform .modal-header, #passwd_recovery .modal-header {
    border-bottom: none;
    padding: 24px 24px 0;
}
#loginform .modal-header h3, #passwd_recovery .modal-header h3 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-text);
}
#loginform .modal-body, #passwd_recovery .modal-body {
    padding: 12px 24px 24px;
}
#loginform .modal-body label, #passwd_recovery .modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}
#loginform .modal-body input, #passwd_recovery .modal-body input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 14px;
    margin-top: 6px;
    box-sizing: border-box;
}
#loginform .modal-footer {
    border-top: none;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#loginform .modal-footer .btn {
    width: 100%;
    margin: 0;
    padding: 14px;
    font-weight: 600;
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): "Inmobiliarias destacadas" en la home - seccion nueva. */
.featured-agency-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 24px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    display: block;
}
.featured-agency-card:hover {
    box-shadow: var(--shadow-md);
}
.featured-agency-card__avatar {
    width: 56px;
    height: 56px;
    background: var(--color-brand);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-brand);
    font-size: 18px;
    margin: 0 auto 12px;
}
.featured-agency-card h4 {
    font-size: 15px;
    margin: 0 0 4px;
}
.featured-agency-card__meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): tabla de planes de inmobiliaria, contenido estatico. */
.agency-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.agency-plan-card {
    border: 1px solid var(--color-border);
    padding: 28px 24px;
    background: var(--color-bg);
    position: relative;
}
.agency-plan-card--featured {
    border: 2px solid var(--color-text);
}
.agency-plan-card__tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    text-transform: uppercase;
}
.agency-plan-card h3 {
    font-family: var(--font-brand);
    font-size: 18px;
    margin: 0 0 6px;
}
.agency-plan-card__limit {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}
.agency-plan-card__feature {
    font-size: 14px;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}
.agency-plan-card__feature:first-of-type {
    border-top: none;
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): pagina "Sobre Nosotros" completa, con estadisticas
   reales de la BD (Page::sobreNosotros()). */
.about-hero {
    background: linear-gradient(180deg, var(--color-bg) 0%, #F0EBE3 100%);
    padding: 64px 24px;
    text-align: center;
}
.about-hero h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 40px;
    max-width: 640px;
    margin: 0 auto 16px;
    letter-spacing: -0.02em;
}
.about-hero p {
    color: var(--color-text-muted);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
}
.about-stats {
    display: flex;
    justify-content: center;
    gap: 56px;
    padding: 36px 24px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    flex-wrap: wrap;
}
.about-stats__item {
    text-align: center;
}
.about-stats__num {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 30px;
    color: var(--color-brand);
}
.about-stats__label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.about-mission {
    max-width: 800px;
    margin: 0 auto;
    padding: 64px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}
.about-mission h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 8px;
}
.about-mission p {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.about-contact {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px 64px;
}
.about-contact h2 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 24px;
    margin: 0 0 8px;
}
.about-contact p {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 24px;
}
.about-contact__box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 28px;
}
.about-contact__box input,
.about-contact__box textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 12px;
    background: var(--color-bg-alt);
    box-sizing: border-box;
}
.about-contact__box button {
    width: 100%;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
}

/* NUEVO (integracion real desde Claude Design, aprobado por el
   cliente): boton disparador del modal de alerta de precio, y
   subtitulo de modal reutilizable. */
.price-alert-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    font-family: var(--font-body);
}
.price-alert-trigger strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.price-alert-trigger span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.modal-sub {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

/* NUEVO (reconstruccion LITERAL del header, hallazgo real del
   cliente: "veo una mezcla entre lo viejo y lo nuevo, aplica de
   forma literal") - header unico consolidado, MISMA estructura en
   las 13 pantallas del diseño real, sin excepcion para Home
   (elimina la duplicacion header-viejo + header-home que existia). */
.site-header-redesign {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header-redesign__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.site-header-redesign__brand {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 24px;
    color: var(--color-text);
    text-decoration: none;
}
.site-header-redesign__brand span {
    color: var(--color-brand);
}
.site-header-redesign__nav {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}
.site-header-redesign__nav a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}
.site-header-redesign__nav a.active {
    color: var(--color-brand);
    font-weight: 600;
}
.site-header-redesign__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.site-header-redesign__actions > a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.site-header-redesign__cta {
    background: var(--color-accent);
    color: #FFFFFF;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 14px;
}
.site-header-redesign__lang {
    position: relative;
}
.site-header-redesign #mobile-nav-check {
    display: none;
}
.mobile-nav-toggle {
    display: none;
    font-size: 22px;
    color: var(--color-text);
    cursor: pointer;
}
@media (max-width: 860px) {
    .mobile-nav-toggle {
        display: block;
        order: 2;
    }
    .site-header-redesign__nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        order: 4;
    }
    .site-header-redesign__nav a {
        padding: 12px 0;
        border-top: 1px solid var(--color-border);
        width: 100%;
    }
    .site-header-redesign #mobile-nav-check:checked ~ .site-header-redesign__nav {
        display: flex;
    }
    .site-header-redesign__actions {
        order: 3;
    }
}

/* RECONSTRUIDO LITERAL (instruccion explicita del cliente: "el
   diseño anterior = descartado") - barra de filtros de Search,
   valores EXACTOS del archivo .dc.html real (padding 9px 14px,
   font-size 13px, colores #E8E3DC/#FAF8F5/#1C2321, sticky top 87px). */
.search-filters-bar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: 14px 24px;
    position: sticky;
    top: var(--real-header-height, 87px);
    z-index: 90;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto;
}
.search-filters-bar select {
    flex-shrink: 0;
}
.search-filters-bar select {
    border: 1px solid var(--color-border) !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: var(--font-body) !important;
    color: #1C2321 !important;
    background: #FAF8F5 !important;
    min-width: 130px;
    max-width: 170px;
    height: auto !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}
.search-filters-bar__order {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-filters-bar__order select {
    background: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    font-weight: 600;
    font-size: 13px !important;
    padding: 9px 14px !important;
    height: auto !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    border: 1px solid var(--color-border) !important;
    min-width: 190px !important;
    max-width: none !important;
}

/* RECONSTRUIDO LITERAL (instruccion explicita del cliente) - barra de
   busqueda de Home, valores EXACTOS del archivo .dc.html real. */
.home-search-bar {
    background: #FFFFFF;
    box-shadow: 0 12px 40px rgba(28, 35, 33, 0.12);
    padding: 8px;
    display: flex;
    gap: 2px;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.home-search-bar button {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    padding: 14px 32px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* RECONSTRUIDO LITERAL (instruccion explicita del cliente) -
   formulario de contacto SIEMPRE VISIBLE en el panel lateral (no
   modal), valores EXACTOS del archivo .dc.html real. */
.house-detail__sidebar h3 {
    font-size: 15px;
    margin: 0 0 4px;
}
.house-detail__sidebar form {
    margin-top: 16px;
}
.house-detail__sidebar form input,
.house-detail__sidebar form textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 10px;
    background: var(--color-bg-alt);
    box-sizing: border-box;
}
.house-detail__sidebar form button {
    width: 100%;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
}

/* RECONSTRUIDO LITERAL (instruccion explicita del cliente) - pantalla
   selector "Publicar", valores EXACTOS del archivo .dc.html real. */
.publish-hero {
    padding: 48px 24px 28px;
    text-align: center;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}
.publish-hero h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 32px;
    margin: 0 0 8px;
}
.publish-hero p {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0;
}
.publish-steps {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 24px;
    flex-wrap: wrap;
}
.publish-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.publish-steps__item--active {
    color: var(--color-text);
    font-weight: 600;
}
.publish-steps__num {
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}
.publish-steps__item--active .publish-steps__num {
    background: var(--color-text);
    color: #FFFFFF;
    border-color: var(--color-text);
}
.publish-seller-cards {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.publish-seller-card {
    border: 1px solid var(--color-border);
    padding: 28px;
    text-decoration: none;
    color: var(--color-text);
    background: #FFFFFF;
    display: block;
}
.publish-seller-card:hover {
    border-color: var(--color-text);
}
.publish-seller-card__icon {
    font-size: 32px;
    margin-bottom: 14px;
}
.publish-seller-card h3 {
    font-family: var(--font-brand);
    font-size: 18px;
    margin: 0 0 8px;
}
.publish-seller-card p {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 12px;
}
.publish-seller-card__cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brand);
}

/* ADAPTADO (decision explicita del cliente: "adapta esa pantalla al
   sistema") - zona de subida de fotos, estetica del diseño real
   aplicada al mecanismo real de plupload (sin tocar su logica). */
.publish-upload-zone {
    border: 1px dashed var(--color-border);
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

/* NUEVO (Plan y publicar, particular - decision explicita del
   cliente: solo maqueta por ahora, datos de contacto y precios
   pendientes de confirmacion real). */
.publish-plans-hero {
    background: linear-gradient(180deg, var(--color-bg) 0%, #F0EBE3 100%);
    padding: 48px 24px;
    text-align: center;
}
.publish-plans-hero h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 32px;
    margin: 0 auto 12px;
    max-width: 600px;
}
.publish-plans-hero p {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0 auto;
    max-width: 520px;
}
.publish-plans-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 24px 24px;
}
.notice-box {
    background: #FFF9E6;
    border: 1px solid #E8D48A;
    padding: 16px 20px;
    font-size: 14px;
}
.publish-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.publish-plan-card {
    border: 1px solid var(--color-border);
    padding: 26px 22px;
    background: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
}
.publish-plan-card--featured {
    border: 2px solid var(--color-text);
}
.publish-plan-card__tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.publish-plan-card h3 {
    font-family: var(--font-brand);
    font-size: 17px;
    margin: 0 0 4px;
}
.publish-plan-card__duration {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
.publish-plan-card__price {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 26px;
    margin-bottom: 4px;
}
.publish-plan-card__note {
    font-size: 12px;
    color: var(--color-brand);
    font-weight: 600;
    margin-bottom: 16px;
    min-height: 16px;
}
.publish-plan-card__features {
    flex: 1;
    margin-bottom: 20px;
}
.publish-plan-card__feature {
    font-size: 13px;
    color: var(--color-text);
    padding: 7px 0;
    border-top: 1px solid var(--color-border);
}
.publish-plan-card__feature:first-child {
    border-top: none;
}
.publish-plan-card__btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-text);
    background: #FFFFFF;
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.publish-plan-card--featured .publish-plan-card__btn {
    background: var(--color-text);
    color: #FFFFFF;
}
.publish-plans-currency-note {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 24px;
}

/* RECONSTRUIDO LITERAL (instruccion explicita del cliente) -
   pantalla "Publicar como inmobiliaria", valores EXACTOS del
   archivo .dc.html real. */
.agency-plans-hero {
    padding: 40px 24px;
    text-align: center;
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}
.agency-plans-hero h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 28px;
    margin: 0 0 8px;
}
.agency-plans-hero p {
    color: var(--color-text-muted);
    font-size: 15px;
    max-width: 560px;
    margin: 0 auto;
}
.agency-lead-form-wrap {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 40px 24px 0;
    border-top: 1px solid var(--color-border);
}
.agency-lead-form-wrap h2 {
    font-family: var(--font-brand);
    font-size: 22px;
    margin: 0 0 8px;
    text-align: center;
}
.agency-lead-form-wrap > p {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 28px;
}
.agency-lead-form-wrap__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* CORREGIDO (auditoria literal Inmobiliarias) - subtitulo real con
   conteo, valores exactos del diseño. */
.agencies-subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 24px;
}

/* NUEVO (auditoria literal, perfil de inmobiliaria) - placeholder
   visual de mapa, honesto sobre no ser interactivo todavia (ver nota
   de infraestructura faltante en inmobiliaria.php: Agency no tiene
   lat/lng reales). */
.agency-contact-card__map-placeholder {
    margin-top: 20px;
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(135deg, #DCE8EF 0px, #DCE8EF 10px, #C9D9E3 10px, #C9D9E3 20px);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: monospace;
    font-size: 11px;
    color: #5F7684;
}

/* ===================== HOME LITERAL ===================== */
.home-hero {
    background: var(--color-bg);
    padding: 64px 24px 40px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}
.home-hero h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 auto 16px;
    max-width: 720px;
}
.home-hero p {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0 auto 32px;
    max-width: 500px;
}
/* Barra de búsqueda */
.home-search-bar {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    display: flex;
    max-width: 900px;
    margin: 0 auto 24px;
    flex-wrap: wrap;
}
.home-search-bar select,
.home-search-bar input[type="text"] {
    flex: 1;
    min-width: 120px;
    border: none;
    border-right: 1px solid var(--color-border);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #1C2321 !important;
    background: #FFFFFF !important;
}
.home-search-bar__btn {
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
/* Provincias populares */
.home-province-pills {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.home-province-pill {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    padding: 7px 16px;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
}
.home-province-pill:hover {
    border-color: var(--color-text);
}
/* Estadísticas */
.home-stats {
    display: flex;
    justify-content: center;
    gap: 64px;
    padding: 40px 24px;
    flex-wrap: wrap;
}
.home-stats__num {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 32px;
    color: var(--color-brand);
}
.home-stats__label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
/* Secciones */
.home-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 24px;
    border-top: 1px solid var(--color-border);
}
.home-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}
.home-section h2 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 24px;
}
.home-section__header h2 { margin: 0; }
.home-section__link {
    font-size: 14px;
    color: var(--color-brand);
    text-decoration: none;
}
/* Grid de propiedades en home — 3 columnas desktop */
.home-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Grid de inmobiliarias en home — 4 desktop, 1 mobile */
.home-agencies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* Responsive home */
@media (max-width: 767px) {
    .home-hero h1 { font-size: 28px; }
    .home-search-bar { flex-direction: column; }
    .home-search-bar select,
    .home-search-bar input[type="text"] { border-right: none; border-bottom: 1px solid var(--color-border); }
    .home-stats { gap: 28px; }
    .home-properties-grid { grid-template-columns: 1fr; }
    .home-agencies-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .home-properties-grid { grid-template-columns: repeat(2, 1fr); }
    .home-agencies-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== SEARCH LITERAL ===================== */
.search-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 24px 64px;
}
.search-page__breadcrumb {
    margin-bottom: 16px;
}
.search-page__header {
    margin-bottom: 20px;
}
.search-page__header h1 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 28px;
    margin: 0 0 4px;
}
.search-page__count {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 0;
}
.search-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 28px 0 16px;
}
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .search-results-grid { grid-template-columns: 1fr; }
    .search-page { padding: 16px 16px 48px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .search-results-grid { grid-template-columns: repeat(2, 1fr); }
}

/* CORREGIDO (bug real: display:grid sobreescribe el atributo HTML
   [hidden] cuyo display:none viene del user-agent stylesheet, que
   siempre pierde ante el CSS del autor) */
.site-footer-redesign__grid[hidden] {
    display: none !important;
}

/* Breadcrumb de Search con dropdown de municipio */
.search-breadcrumb__mun-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.search-breadcrumb__mun-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1C2321;
    cursor: pointer;
    font-family: var(--font-body);
}
.search-breadcrumb__mun-caret {
    font-size: 10px;
    color: #8B8378;
}
.search-breadcrumb__mun-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(28, 35, 33, 0.12);
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 120;
}
.search-breadcrumb__mun-wrap:hover .search-breadcrumb__mun-menu,
.search-breadcrumb__mun-wrap:focus-within .search-breadcrumb__mun-menu {
    display: block;
}
.search-breadcrumb__mun-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #1C2321;
    text-decoration: none;
    white-space: nowrap;
}
.search-breadcrumb__mun-menu a:hover {
    background: var(--color-bg-alt);
}
.search-breadcrumb__mun-menu a.active {
    font-weight: 600;
    color: var(--color-brand);
}

/* ===================== FICHA LITERAL ===================== */
.ficha-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 40px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 64px;
    align-items: start;
}
/* CORREGIDO (hallazgo real del cliente: "todo se ha salido de la
   caja contenedora") - CSS Grid, por defecto, NO encoge una columna
   por debajo del ancho intrinseco de su contenido (min-width:auto
   implicito). Cualquier hijo con ancho intrinseco grande (una
   imagen sin escalar, una palabra sin espacios, la rejilla de
   propiedades similares) podia forzar a toda la columna - y por
   tanto a toda la rejilla .ficha-layout - a desbordarse mas alla de
   los 1240px reales. min-width:0 es la correccion estandar y
   conocida para este comportamiento de CSS Grid. */
.ficha-layout__main,
.ficha-layout__sidebar {
    min-width: 0;
}
.ficha-info-block {
    padding: 20px 0 8px;
}
.house-detail__price {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 32px;
    color: var(--color-text);
    margin: 8px 0 4px;
}
.ficha-title-ref {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 4px;
}
.ficha-location {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 2px;
}
.ficha-address {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
/* Alerta de precio — banner horizontal */
.ficha-price-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 14px 18px;
    margin: 16px 0 24px;
    flex-wrap: wrap;
}
.ficha-price-alert-banner strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.ficha-price-alert-banner span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.ficha-price-alert-banner button {
    background: none;
    border: 1px solid var(--color-text);
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body);
}
/* Specs: 4 números grandes */
.ficha-specs {
    display: flex;
    gap: 32px;
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.ficha-spec__num {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 28px;
    color: var(--color-text);
}
.ficha-spec__label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
    line-height: 1.3;
}
/* Descripción */
.ficha-desc {
    margin-bottom: 32px;
    color: #1C2321;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
}
.ficha-desc h2 {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 20px;
    margin: 0 0 14px;
}
/* Panel de contacto lateral (desktop) */
.ficha-layout__sidebar {
    align-self: stretch;
}
.ficha-contact-card {
    border: 1px solid var(--color-border);
    background: #FFFFFF;
    padding: 20px;
    position: sticky;
    top: 90px;
}
.ficha-contact-agency {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.ficha-contact-agency strong {
    display: block;
    font-size: 14px;
}
.ficha-contact-card form input,
.ficha-contact-card form textarea,
.ficha-contact-mobile form input,
.ficha-contact-mobile form textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 10px;
    background: var(--color-bg-alt);
    box-sizing: border-box;
}
.ficha-contact-card form button,
.ficha-contact-mobile form button {
    width: 100%;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
}
/* Botón sticky mobile */
.ficha-sticky-cta {
    display: none;
}
/* Mobile: columna única */
@media (max-width: 860px) {
    .ficha-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 16px 48px;
    }
    .ficha-layout__sidebar {
        display: none;
    }
    .ficha-contact-mobile {
        display: block;
        border: 1px solid var(--color-border);
        padding: 20px;
        margin-top: 32px;
    }
    .ficha-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
    }
    .ficha-sticky-cta a {
        display: block;
        background: var(--color-accent);
        color: #FFFFFF;
        text-align: center;
        padding: 16px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
    }
    .ficha-specs { gap: 16px; }
    .ficha-spec__num { font-size: 22px; }
}
@media (min-width: 861px) {
    .ficha-contact-mobile {
        display: none;
    }
}

/* ============================================================
   FIXES REALES PARA SELECTS — máxima especificidad para ganar
   a Bootstrap y casas.do.css que fuerzan color:#555, width:220px
   ============================================================ */

/* Home: selects visibles, sin ancho fijo de Bootstrap */
#home-search-form select,
#home-search-form input[type="text"] {
    width: auto !important;
    color: #1C2321 !important;
    background-color: #FFFFFF !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: "Inter", Arial, sans-serif !important;
    border: none !important;
    border-right: 1px solid #E8E3DC !important;
    margin-bottom: 0 !important;
    height: auto !important;
    line-height: normal !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 !important;
    min-width: 120px !important;
}
#home-search-form select option {
    color: #1C2321;
    background: #FFFFFF;
}

/* Filtros de búsqueda: texto no cortado */
.search-filters-bar form select {
    width: auto !important;
    min-width: 130px !important;
    max-width: 170px !important;
    color: #1C2321 !important;
    background-color: #FAF8F5 !important;
    border: 1px solid #E8E3DC !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Footer: asegurar que [hidden] funcione sobre display:grid */
.site-footer-redesign__grid[hidden] {
    display: none !important;
}

/* H1 del listado de búsqueda: anular text-transform que lo pone en minúsculas */
.search-page__header h1 {
    text-transform: none !important;
    font-family: "Bricolage Grotesque", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 28px !important;
}

/* Breadcrumb del listado: estilo propio, sin herencia de Bootstrap */
.search-breadcrumb {
    font-size: 13px;
    color: #8B8378;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* CORREGIDO (hallazgo real del cliente: "la miga de pan... es mas
   ancha de lo que se ve en el diseño original") - en el listado esta
   miga de pan vive ANIDADA dentro de .search-page (que ya limita el
   ancho a 1240px), pero en la ficha es un elemento suelto, sin
   ningun padre que la limite - se extendia a todo el ancho real del
   navegador mientras .ficha-layout debajo si estaba correctamente
   limitado, dando la sensacion de un ancho inconsistente. Modificador
   propio SOLO para el uso independiente (ficha), sin tocar el
   comportamiento ya correcto del listado (que no debe llevar padding
   propio, o duplicaria el de su padre .search-page). */
.search-breadcrumb--standalone {
    max-width: 1240px;
    margin: 0 auto 12px;
    padding: 0 24px;
    box-sizing: border-box;
}
.search-breadcrumb a {
    color: #8B8378;
    text-decoration: none;
}
.search-breadcrumb a:hover {
    color: #1C2321;
}
.search-breadcrumb strong {
    color: #1C2321;
    font-weight: 500;
}

/* NUEVO (hallazgo real del cliente: "no funciona correctamente") -
   precio manual cuando no hay precio real o es menor de RD$500,000,
   boton real de "Solicitar esta hipoteca". */
.mortgage-calc input[type="number"] {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.mortgage-calc__cta {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    font-weight: 600;
}

/* NUEVO (hallazgo real del cliente: "el formulario de editar las
   imagenes") - galeria editable dentro del formulario de edicion de
   propiedad, con boton real de eliminar por foto. */
.edit-photos {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}
.edit-photos h2 {
    font-size: 18px;
    margin: 0 0 16px;
}
.edit-photos__empty {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
.edit-photos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
    gap: 12px;
    margin-bottom: 20px;
}
.edit-photos__item {
    position: relative;
    aspect-ratio: 4/3;
}
.edit-photos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.edit-photos__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(28, 35, 33, 0.75);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.edit-photos__remove:hover {
    background: var(--color-accent);
}

/* NUEVO (funcionalidad real: cupo de destacados por usuario) */
.featured-quota-indicator {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 10px 16px;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block;
}
.featured-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

/* CORREGIDO (hallazgo real del cliente: contador de destacados por
   encima del cupo, sin confirmacion visual de guardado). */
.featured-quota-indicator--over {
    background: #FFF3E0;
    border-color: #F0C36D;
    color: #8A5A00;
}
.featured-toggle__saved {
    color: #2E7D32;
    font-weight: 600;
    font-size: 12px;
    margin-left: 6px;
}