/* Class & Villas -- estilos propios de Recomendados y Red de Distribución
   (T299, Fase 4). Reutiliza los tokens y componentes base de tokens.css/
   portada.css (.cv-grid, .cv-card, .cv-btn, .cv-field, .cv-kicker,
   .cv-section-head, .cv-empty-state, .cv-photo-placeholder) -- este
   fichero solo añade lo específico de los dos módulos nuevos. */

/* --- Buscador server-side (Recomendados y Distribución) --- */
/* T309 Recuperación 24 -- José: sin fondos crema en ninguna caja. Antes:
   background: var(--cv-sand). Ahora blanco con borde gris fino
   (--cv-list-bg, gris de separadores ya usado en el resto del sitio). */
.cv-directorio-buscador {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cv-space-3);
  margin-bottom: var(--cv-space-4);
  padding: var(--cv-space-4);
  background: var(--cv-white);
  border: 1px solid var(--cv-list-bg);
  border-radius: var(--cv-radius);
}
.cv-directorio-buscador .cv-field { flex: 1 1 200px; margin-bottom: 0; }
.cv-directorio-buscador .cv-btn { flex: 0 0 auto; }

/* T309 Recuperación 6 / 6B -- hallazgo #6 (reproducido de nuevo en la
   auditoría real tras R6: seguía sin ser 4x2 y seguía en beige). El
   contenedor `.cv-buscador-propiedades` ya no es él mismo la rejilla --
   es un bloque de fondo gris real (--cv-list-bg, nunca --cv-sand/beige)
   que aloja, en este orden: la fila compacta de texto libre
   (.cv-buscador-texto), la rejilla EXACTA de 4 columnas x 2 filas
   (.cv-buscador-grid-principal: tipo/localidad/precio desde/precio
   hasta/dormitorios/baños/m²/Buscar) y la búsqueda avanzada debajo. Los
   controles mantienen su lógica y `name` intactos (T309R5C), solo cambia
   la composición visual. */
/* T309 Recuperación 9 -- hallazgo Portal Inmobiliario: José rechazó la
   "gran caja gris redondeada" -- el legacy real (.searchform-outer-block)
   es una franja horizontal sobria SIN esquinas redondeadas, con un
   degradado ligero blanco->gris, nunca un panel con borde/radio visible.
   border-radius:0 anula aquí el heredado de .cv-directorio-buscador. */
.cv-buscador-propiedades {
  display: block; flex-wrap: unset; align-items: unset;
  background: var(--cv-list-bg);
  background: linear-gradient(180deg, var(--cv-white) 0%, var(--cv-list-bg) 100%);
  border-radius: 0; border-top: 1px solid var(--cv-list-bg); border-bottom: 1px solid var(--cv-list-bg);
}
.cv-buscador-propiedades .cv-field { flex: initial; margin-bottom: 0; }
.cv-buscador-texto { margin-bottom: var(--cv-space-3); max-width: 420px; }
.cv-buscador-grid-principal {
  display: grid; grid-template-columns: 1fr; gap: var(--cv-space-3); align-items: end;
}
@media (min-width: 1024px) {
  .cv-buscador-grid-principal { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
}
.cv-buscador-submit { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1024px) { .cv-buscador-submit { grid-column: auto; } }
.cv-buscador-propiedades .cv-buscador-avanzado { margin-top: var(--cv-space-3); }

/* T309 Recuperación 9 -- rejilla densa de Propiedades: 1 columna en 390,
   2 en 768, 4 en 1440 (legacy real: .grid-list .grid-single a 23.5% de
   ancho = 4 por fila en escritorio ancho). */
.cv-grid-propiedades { grid-template-columns: 1fr; }
@media (min-width: 600px) { .cv-grid-propiedades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .cv-grid-propiedades { grid-template-columns: repeat(4, 1fr); } }

/* Foto completa clicable (mismo href que el título, como en el legacy
   real .grid-image > a): bloque, sin subrayado, ligero zoom al pasar el
   ratón igual que .grid-image:hover en el legacy. */
.cv-propiedad-foto-link { display: block; overflow: hidden; }
.cv-propiedad-foto-link img { transition: transform .4s ease; }
.cv-propiedad-foto-link:hover img, .cv-propiedad-foto-link:focus-visible img { transform: scale(1.06); }

/* --- Galería horizontal de la ficha de propiedad (T309 Recuperación 9) ---
   Navegable con flechas reales (<button>, foco nativo) y con JS opcional
   de scroll suave; sin JS cada foto sigue siendo visible en la pista
   (overflow-x visible por defecto de <ul> en línea, degradación limpia). */
.cv-prop-galeria { position: relative; margin: 0 0 var(--cv-space-3); }
.cv-prop-galeria-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  list-style: none; margin: 0; padding: 0; gap: 0; scrollbar-width: none;
}
.cv-prop-galeria-pista::-webkit-scrollbar { display: none; }
.cv-prop-galeria-item { flex: 0 0 100%; scroll-snap-align: start; }
.cv-prop-galeria-item img { width: 100%; display: block; }
.cv-prop-galeria-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(32,32,32,.72); color: var(--cv-white);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.cv-prop-galeria-flecha:hover, .cv-prop-galeria-flecha:focus-visible { background: rgba(32,32,32,.92); }
.cv-prop-galeria-prev { left: var(--cv-space-2); }
.cv-prop-galeria-next { right: var(--cv-space-2); }
.cv-prop-galeria-contador {
  position: absolute; right: var(--cv-space-2); bottom: var(--cv-space-2); z-index: 2;
  margin: 0; padding: 2px 10px; border-radius: 999px;
  background: rgba(32,32,32,.72); color: var(--cv-white); font-size: 12px; font-weight: 700;
}

/* Ficha (propiedades y recomendados): H1 fino y elegante, no el H1 grueso
   por defecto del resto del sitio -- José: "tipografías finas, ligeras y
   elegantes", igual que la cabecera ya entregada en R8. */
.cv-prop-titulo-fino { font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); }

/* --- Navegación de categorías (Recomendados) --- */
.cv-categorias { display: flex; flex-wrap: wrap; gap: var(--cv-space-2); list-style: none; padding: 0; margin: 0 0 var(--cv-space-4); }
.cv-categorias a {
  display: inline-block; padding: var(--cv-space-1) var(--cv-space-3);
  border-radius: 999px; border: 1px solid var(--cv-terracotta);
  color: var(--cv-terracotta-text); text-decoration: none; font-weight: 700; font-size: 14px;
}
.cv-categorias a:hover, .cv-categorias a:focus-visible { background: var(--cv-terracotta-text); color: var(--cv-white); }

/* --- Geolocalización (Distribución) --- */
.cv-geo-bloque { margin-bottom: var(--cv-space-4); }
.cv-geo-bloque #cv-geo-status { margin-top: var(--cv-space-2); font-weight: 700; color: var(--cv-sea-blue); min-height: 1.2em; }
.cv-point-distance { margin: var(--cv-space-1) 0 0; font-weight: 700; color: var(--cv-sea-blue); }
.cv-geo-sin-coordenadas {
  margin: var(--cv-space-1) 0 0; font-size: 13px; font-weight: 700;
  color: var(--cv-terracotta-text);
}

/* T309 Recuperación 10 -- legacy real (".address-block"/".contact-cta" en
   la ficha de Distribución) siempre muestra dirección + teléfono con
   "Cómo llegar" (Google Maps) y "Llamar" (tel:) -- datos reales ya
   migrados (direccion/telefono_publico) que la ficha nunca renderizaba. */
.cv-punto-address-block {
  list-style: none; padding: 0; margin: 0 0 var(--cv-space-2);
}
.cv-punto-address-block li { margin: 0 0 4px; font-size: 15px; }
.cv-punto-address-block .cv-punto-telefono a { color: var(--cv-sea-blue); font-weight: 700; text-decoration: none; }
.cv-punto-address-block .cv-punto-telefono a:hover, .cv-punto-address-block .cv-punto-telefono a:focus-visible { text-decoration: underline; }
.cv-punto-contact-cta { display: flex; flex-wrap: wrap; gap: var(--cv-space-2); margin: 0 0 var(--cv-space-4); }

/* --- Aviso de fallback NL -> ES (Distribución, sección "Encuéntrala") --- */
.cv-aviso-fallback {
  display: inline-block; margin-top: var(--cv-space-2);
  padding: var(--cv-space-2) var(--cv-space-3);
  /* T309 Recuperación 24 -- José: sin fondo crema. Antes: background:
     var(--cv-sand). Ahora blanco; el acento --cv-terracotta-text del
     borde izquierdo se conserva (ya daba 4.45:1, sigue siendo >=4.45:1
     sobre blanco puro, no es un fondo crema sino un acento de aviso). */
  background: var(--cv-white); border: 1px solid var(--cv-list-bg);
  border-left: 4px solid var(--cv-terracotta-text);
  color: var(--cv-secondary); font-size: 14px; font-weight: 600;
}

/* --- Tarjetas de empresa / punto (comparten .cv-grid/.cv-card base) --- */
.cv-recomendado-card .cv-photo-placeholder,
.cv-punto-card .cv-photo-placeholder { min-height: 150px; }

/* T309 Recuperación 10 -- legacy real ".punto-thumb" envuelve TODA la
   tarjeta (foto + h3 + categoría + localidad) en un único <a>, a
   diferencia de Portal/Recomendados/Noticias (foto y título en <a>
   separados). Mismo patrón ya usado en .cv-revista-card-link. */
.cv-punto-card-link { display: block; color: inherit; text-decoration: none; }
/* T309 Recuperación 24 -- José: el nombre repetía el logo a 38px/700
   (h2 base de tokens.css, clamp(26px,4vw,38px) + line-height 1.5 heredado
   = 57px de alto en dos líneas). Se reduce a ~1/3, solo en esta tarjeta
   (no se toca el h2 global, usado por revista/noticias/recomendados). */
.cv-punto-card-link h2 {
  font-size: 13px; font-weight: 600; line-height: 1.3; margin: var(--cv-space-2) 0 2px;
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.cv-punto-card-link:hover h2, .cv-punto-card-link:focus-visible h2 { text-decoration-color: currentColor; }
/* Localidad aún más discreta que el nombre, sin tocar .cv-propiedad-location
   global (13px, usada también en tarjetas de Portal Inmobiliario). */
.cv-punto-card-link .cv-propiedad-location { font-size: 11px; margin-top: 0; }

/* --- Portada visual de familias (T309 Recuperación 6/6B, hallazgo #7) ---
   Grandes tiles de imagen real con rótulo superpuesto, 2 columnas desde
   768px / 1 columna en móvil, como la apertura real de Recomendados en
   el legacy. T309R6B: la auditoría real midió estas reglas sin efecto
   (computed display:block/inline pese al CSS estar en el fichero fuente)
   -- causa raíz: portada.css/directorio.css se servían con
   Cache-Control:public,max-age=3600 sobre una URL sin versión (mismo
   defecto ya corregido para tokens.css en T305R4, nunca replicado a
   estos ficheros); corregido aplicando cache_bust() a los <link> (ver
   plantillas). aspect-ratio:560/341 sustituye a min-height para fijar la
   proporción exacta pedida en vez de solo un mínimo. */
.cv-familias-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--cv-space-3);
  margin-bottom: var(--cv-space-5);
}
@media (min-width: 768px) { .cv-familias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cv-familia-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 560 / 341; border-radius: var(--cv-radius);
  text-decoration: none;
}
.cv-familia-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-familia-tile-rotulo {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding: var(--cv-space-4) var(--cv-space-3) var(--cv-space-3);
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  font-family: var(--cv-font-sub); font-weight: 800; font-size: 20px; color: var(--cv-white);
}

/* --- Familias editoriales de Recomendados (T309 Recuperación 4) --- */
.cv-familia-section { margin-bottom: var(--cv-space-5); }
.cv-familia-head {
  display: flex; align-items: center; gap: var(--cv-space-3);
  margin-bottom: var(--cv-space-3);
}
.cv-familia-imagen {
  width: 96px; height: 72px; flex: 0 0 auto;
  border-radius: var(--cv-radius); object-fit: cover;
}
.cv-familia-head h2 { margin: 0; }
.cv-familia-vacia {
  font-size: 14px; font-weight: 600; color: var(--cv-terracotta-text);
}
.cv-familia-empresa-card .cv-photo-placeholder { min-height: 150px; }

/* --- Buscador avanzado de Propiedades (T309 Recuperación 5C) --- */
.cv-buscador-avanzado { flex-basis: 100%; margin-top: var(--cv-space-2); }
.cv-buscador-avanzado summary {
  cursor: pointer; font-weight: 600; color: var(--cv-secondary);
  padding: var(--cv-space-2) 0;
}
.cv-buscador-avanzado-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--cv-space-2); margin-top: var(--cv-space-2);
}
.cv-checkbox { display: flex; align-items: center; gap: var(--cv-space-1); font-size: 14px; }
.cv-checkbox input { margin: 0; }

/* --- Alternancia lista/mapa (T309 Recuperación 5C) --- */
.cv-vista-toggle {
  display: flex; gap: var(--cv-space-2); margin: var(--cv-space-3) 0;
}
.cv-vista-toggle .cv-vista-activa { background: var(--cv-secondary); color: #fff; }

/* --- Mapa de propiedades (Leaflet, T309 Recuperación 5C) --- */
.cv-prop-mapa { width: 100%; height: 480px; border-radius: var(--cv-radius); z-index: 0; }
.cv-mapa-lista-sin-coordenadas { list-style: none; padding: 0; margin: var(--cv-space-2) 0; }
.cv-mapa-lista-sin-coordenadas li { padding: var(--cv-space-1) 0; border-bottom: 1px solid rgba(0,0,0,.1); }

/* --- Insignias en tarjeta de propiedad (piscina, T309 Recuperación 5C) --- */
.cv-propiedad-badges {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--cv-terracotta-text);
}

/* --- Detalles/características en ficha de propiedad (T309 Recuperación 5C) --- */
.cv-prop-detalles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--cv-space-2); margin: var(--cv-space-3) 0; }
.cv-prop-detalles dt { font-size: 13px; color: var(--cv-secondary); font-weight: 600; }
.cv-prop-detalles dd { margin: 0; }
.cv-prop-caracteristicas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--cv-space-2); padding: 0; margin: var(--cv-space-3) 0; }
/* T309 Recuperación 24 -- sin crema aunque hoy no esté enlazada por
   ninguna plantilla (evita que reaparezca si se usa en el futuro). */
.cv-prop-caracteristicas li {
  background: var(--cv-white); border: 1px solid var(--cv-list-bg); padding: var(--cv-space-1) var(--cv-space-2);
  border-radius: var(--cv-radius); font-size: 13px;
}

/* --- T309 Recuperacion 24: plano real de Distribucion ("Encuentrala") ---
   Jose: el mapa nunca se habia implementado en este rebuild, solo el
   texto de permiso denegado. Rectangular, sin radios, controles
   blancos/negros, Leaflet self-hosted (mismo patron que Portal
   Inmobiliario). Altura util 640px en escritorio, como el legacy real
   (js/distribucion-mapa.js). Nunca depende del permiso de
   geolocalizacion para existir -- solo geo-demo.js dispara
   "cv:geo-ordenado" para recentrar tras un exito real. */
.distribucion-mapa-canvas {
  width: 100%; height: 640px; border: 1px solid var(--cv-list-bg); border-radius: 0;
  background: var(--cv-list-bg); margin: var(--cv-space-3) 0;
}
.distribucion-mapa-vacio {
  padding: var(--cv-space-5) var(--cv-space-3); text-align: center; color: var(--cv-text);
  background: var(--cv-white); border: 1px solid var(--cv-list-bg); border-radius: 0;
  margin: var(--cv-space-3) 0;
}
.distribucion-mapa-tarjeta-link { display: block; color: inherit; text-decoration: none; }
/* T309 Recuperación 44 -- José: la imagen de un punto de Distribución es su
   LOGOTIPO/identidad de empresa, no una fotografía hero -- object-fit:cover
   la recortaba (caso real Posidonia, irreconocible). object-fit:scale-down
   nunca recorta y, a diferencia de contain, tampoco amplía un logo pequeño
   por encima de su tamaño intrínseco (nunca lo pixela). Fondo blanco (no la
   caja gris de mapa) para que un logo con fondo transparente se lea bien. */
.distribucion-mapa-tarjeta-link img {
  width: 100%; height: 130px; object-fit: scale-down; object-position: center;
  background: var(--cv-white); border-radius: 0;
}
.distribucion-mapa-tarjeta-info { padding: var(--cv-space-2); background: var(--cv-white); }
.distribucion-mapa-tarjeta-info h5 { margin: 0 0 4px; font-size: 14px; color: var(--cv-secondary); }
.distribucion-mapa-tarjeta-info span { font-size: 12px; color: var(--cv-text); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0; }
@media (max-width: 767px) {
  .distribucion-mapa-canvas { height: 70vh; min-height: 320px; }
}

/* T309 Recuperación 44 -- José: logos de Distribución en el listado se
   forzaban con object-fit:cover heredado de .cv-photo-real (compartida con
   Portal Inmobiliario, min-height:150px) y se recortaban -- caso real
   Posidonia, ~337x150 irreconocible. Clase dedicada (NO .cv-photo-real, para
   no arrastrar su object-fit:cover base ni su width/height:100% forzado a
   .cv-propiedad-card) con la misma altura de caja (150px, mismo alto que el
   placeholder .cv-photo-short compartido de arriba, para que la rejilla siga
   uniforme entre puntos con/sin foto) pero scale-down: logo completo,
   centrado, nunca recortado, nunca ampliado más allá de su tamaño real. */
.cv-punto-card .cv-punto-card-logo {
  display: block; width: 100%; height: 150px;
  object-fit: scale-down; object-position: center;
  background: var(--cv-white); border: 1px solid var(--cv-list-bg);
  border-radius: var(--cv-radius); box-sizing: border-box; padding: var(--cv-space-2);
}

/* T309 Recuperación 44 -- José: la ficha de un punto de Distribución forzaba
   el logo dentro del marco de fotografía panorámica .cv-photo-tall
   (1208x340, object-fit:cover) -- recorte severo, caso real Posidonia
   irreconocible. Caja de logo dedicada (no .cv-photo-real/.cv-photo-tall,
   compartidas con propiedades/noticias/revista/recomendados/agencias):
   ancho máximo moderado y centrado (nunca un banner a todo lo ancho), alto
   contenido (no un banner de foto hero), fondo blanco, sin recorte y sin
   ampliar logos pequeños (max-width/max-height + width/height:auto en vez
   de forzar 100%/100%, que es lo que ampliaba de más cualquier imagen menor
   que la caja). */
.cv-punto-ficha-logo-box {
  max-width: 560px; height: 260px; margin: 0 auto var(--cv-space-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--cv-white); border: 1px solid var(--cv-list-bg);
  border-radius: var(--cv-radius); padding: var(--cv-space-4); box-sizing: border-box;
}
.cv-punto-ficha-logo-box .cv-punto-ficha-logo {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: scale-down; display: block; margin: 0 auto;
}
@media (max-width: 767px) {
  .cv-punto-ficha-logo-box { max-width: 100%; height: 220px; padding: var(--cv-space-3); }
}