/* Class & Villas -- revista digital y noticias, Fase 3 (T298).
   Extiende tokens.css/portada.css (no las sustituye): reutiliza
   .cv-editorial-section/.cv-card/.cv-grid/.cv-photo-placeholder ya
   existentes; aquí solo lo específico de estos dos módulos. */

.cv-revista-numero { font-size: 13px; font-weight: 700; color: var(--cv-sea-blue); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--cv-space-2) 0 0; }

/* --- Estados de edición sin portada / sin páginas (nunca cajas grises silenciosas) --- */
.cv-photo-missing {
  background: repeating-linear-gradient(135deg, var(--cv-list-bg) 0 12px, var(--cv-white) 12px 24px);
  align-items: center; justify-content: center; text-align: center;
}
.cv-photo-missing-label {
  position: relative; z-index: 1; color: var(--cv-text); font-family: var(--cv-font-sub);
  font-weight: 700; font-size: 14px; padding: 0 var(--cv-space-3); margin: 0;
}

/* T309 Recuperación 8 -- hallazgo de José: en el archivo, solo el texto del
   título era clicable; ahora toda la tarjeta (portada + número + título +
   resumen) es un único enlace accesible a la ficha real (una sola etiqueta
   <a>, nunca anidada), y el título conserva su apariencia de enlace claro
   (subrayado al pasar el ratón/foco) dentro de esa área. 4 columnas desde
   1240px como en el archivo legacy real (antes 3 desde 1024px, heredado de
   .cv-grid genérico -- aquí se amplía solo para esta rejilla). */
.cv-revista-card-link { display: block; color: inherit; text-decoration: none; }
.cv-revista-card-link h2 {
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.cv-revista-card-link:hover h2, .cv-revista-card-link:focus-visible h2 { text-decoration-color: currentColor; }
@media (min-width: 1240px) { .cv-grid-revista { grid-template-columns: repeat(4, 1fr); } }

.cv-revista-cuerpo, .cv-noticia-cuerpo { max-width: 68ch; }
.cv-revista-cuerpo p, .cv-noticia-cuerpo p { font-size: 17px; line-height: 1.7; }
.cv-noticia-fecha { font-size: 13px; color: var(--cv-text); font-weight: 700; }
/* .cv-section-head p:not(.cv-kicker) (portada.css) tiene mayor especificidad
   que una sola clase; se iguala aquí para que el tamaño reducido de fecha
   realmente se aplique dentro de esa cabecera también, en vez de quedar
   como CSS muerto. */
.cv-section-head p.cv-noticia-fecha { font-size: 13px; color: var(--cv-text); font-weight: 700; }

/* T309 Recuperación 10 -- fecha real en tarjetas del listado/relacionadas
   (legacy real ".noticias-fecha"), campo ya disponible en
   NoticiaFixtureRepository pero nunca renderizado aquí hasta ahora. */
.cv-noticias-fecha { display: block; font-size: 13px; color: var(--cv-text-muted, var(--cv-text)); margin-top: 4px; }

/* --- Navegación anterior/siguiente del visor de revista --- */
.cv-revista-nav { margin-top: var(--cv-space-5); }
.cv-revista-nav ul {
  display: flex; flex-wrap: wrap; gap: var(--cv-space-2); list-style: none; padding: 0; margin: 0;
  justify-content: space-between; align-items: center;
}
.cv-revista-nav [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* --- Paginación de noticias --- */
.cv-pagination { margin-top: var(--cv-space-5); }
.cv-pagination ul { display: flex; flex-wrap: wrap; gap: var(--cv-space-1); list-style: none; padding: 0; margin: 0; justify-content: center; }
.cv-pagination-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--cv-space-2);
  border-radius: 8px; border: 1px solid var(--cv-list-bg);
  color: var(--cv-secondary); text-decoration: none; font-weight: 700; font-size: 14px;
}
.cv-pagination-current { background: var(--cv-secondary); color: var(--cv-white); border-color: var(--cv-secondary); }
.cv-pagination-disabled { opacity: 0.4; }
.cv-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; color: var(--cv-secondary); opacity: 0.6; }

/* --- Lector real de revista (T309 Recuperación 7) --- */
.cv-revista-lector { margin-top: var(--cv-space-4); }
.cv-revista-visor {
  position: relative; background: #101820; border-radius: var(--cv-radius);
  overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
  min-height: 320px; padding: var(--cv-space-2);
}
.cv-revista-visor:fullscreen { background: #000; align-items: center; padding: 0; }
.cv-revista-pagina-envoltorio { position: relative; display: inline-block; max-width: 100%; }
[data-revista-img] {
  max-width: 100%; height: auto; display: block; transform-origin: center top;
  transition: transform 0.2s ease; background: #1c2733;
}
.cv-revista-visor:fullscreen [data-revista-img] { max-height: 100vh; width: auto; }
.cv-revista-overlay { position: absolute; inset: 0; pointer-events: none; }
.cv-revista-hotspot {
  position: absolute; display: block; pointer-events: auto; border-radius: 4px;
  outline-offset: 2px; -webkit-tap-highlight-color: rgba(31, 92, 115, 0.25);
}
.cv-revista-hotspot:hover, .cv-revista-hotspot:focus-visible {
  outline: 2px solid var(--cv-sea-blue); background: rgba(31, 92, 115, 0.18);
}
.cv-revista-controles {
  display: flex; flex-wrap: wrap; gap: var(--cv-space-3); align-items: center;
  justify-content: space-between; margin-top: var(--cv-space-3);
}
.cv-revista-paginacion { display: flex; align-items: center; gap: var(--cv-space-2); }
.cv-revista-indicador { font-weight: 700; min-width: 96px; text-align: center; }
.cv-revista-acciones { display: flex; flex-wrap: wrap; gap: var(--cv-space-2); }
.cv-revista-btn-icono { min-width: 44px; min-height: 44px; padding: 0 var(--cv-space-3); }
.cv-revista-btn-icono[disabled] { opacity: 0.4; cursor: not-allowed; }
.cv-revista-btn-icono[data-copiado="true"]::after { content: ' ✓'; }
.cv-revista-fallback-pdf { margin-top: var(--cv-space-4); }

@media (min-width: 768px) {
  .cv-revista-visor { min-height: 480px; }
}

/* T309 Recuperación 12 -- archivo de revista, paridad visual exacta con el
   legacy real (css/style.css de classandvillas.com, bloques
   ".magazine-hero-*"/".magazinelist-*"/".magazine-grid"/".magazine-thumb").
   Valores extraídos literalmente del CSS legacy en vivo, no reinterpretados. */
.magazine-hero-outer-block { background: #EAF1F6; padding: 40px 0; margin: 0 0 32px; }
/* T309 Recuperación 25 (R25c) -- José: la edición vigente quedaba anclada
   a la izquierda de la sección de 1240px (.cv-container, base.html.twig)
   mientras la descripción (kicker+título+fecha+2 acciones, contenido
   corto) se estiraba con flex:1 1 auto hasta el borde derecho real,
   dejando un hueco en blanco enorme detrás del texto -- "media página
   vacía". Se centra la composición completa (portada+texto) como una
   única unidad dentro de un ancho de lectura razonable (760px, mismo
   criterio que .cv-form-compact/.cv-colab-page en formularios.css: ni la
   anchura completa de .cv-container ni una caja arbitraria), y la
   portada adopta la MISMA proporción real ya verificada y aprobada por
   José en la portada (840x1134, MediaResolver variante 'l', ver
   .cv-revista-destacada en portada.css) en vez de depender solo de
   height:auto -- mismo enfoque/clases de soporte que la portada, no un
   mecanismo paralelo. */
.magazine-hero-block { display: flex; gap: 40px; align-items: center; max-width: 760px; margin: 0 auto; padding: 0 var(--cv-space-3); }
.magazine-hero-img {
  flex: 0 0 300px; display: block; box-shadow: 0 12px 32px rgba(15, 58, 95, 0.18);
  aspect-ratio: 840 / 1134; overflow: hidden; background: var(--cv-white);
}
.magazine-hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.magazine-hero-desc { flex: 1 1 auto; max-width: 380px; }
.magazine-hero-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: #0F3A5F; margin: 0 0 8px; }
.magazine-hero-desc h2 { font-family: "Lato", sans-serif; font-size: 34px; font-weight: 700; color: #1D1D1B; margin: 0 0 8px; }
.magazine-hero-date { color: #6b6b6b; margin: 0 0 24px; font-size: 15px; }
.magazine-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.magazine-hero-actions .btn-primary { background: #0F3A5F; border-color: #0F3A5F; }
.magazine-hero-actions .btn-primary:hover { background: #2C6E9E; border-color: #2C6E9E; }
.magazine-hero-archive-link { color: #0F3A5F; text-decoration: underline; font-size: 14px; }
.magazine-hero-archive-link:hover { color: #2C6E9E; }
@media screen and (max-width: 1023px) {
  .magazine-hero-block { flex-direction: column; align-items: flex-start; max-width: 320px; }
  .magazine-hero-img { flex-basis: auto; width: 100%; max-width: 320px; }
  .magazine-hero-desc { max-width: none; }
}

.magazinelist-outer-block .magazinelist-block .year-block { margin: 0 0 22px; }
.magazinelist-outer-block .magazinelist-block .year-block h3 {
  font-family: "Lato", sans-serif; text-transform: uppercase; font-size: 1.625rem;
  color: #363636; width: 100%; border-bottom: 2px solid #EAF1F6; margin: 0 0 35px;
}
/* T309 Recuperación 25 (R25c) -- rejilla del archivo cronológico: 4
   columnas a 1440px (valor base, sin media query -- ya era así), 2 a
   768px (antes 3 entre 600-1023px, mandato explícito de este round pide
   2), 1 a 390px (ya era así). El marco de cada portada pasa de
   height:373px fijo + object-fit:cover (recortaba la portada, contrario
   a la regla sitewide "portadas de revista NUNCA recortadas", ver
   T309R6/R6B en portada.css) a la MISMA proporción real 840/1134 +
   object-fit:contain que la portada y el bloque destacado de arriba --
   con columnas de ancho uniforme, un aspect-ratio único basta para que
   todas las cajas midan lo mismo sin depender de un alto fijo ni de
   reglas de breakpoint distintas para el recorte. */
.magazinelist-outer-block .magazinelist-block .magazine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb { display: block; color: inherit; text-decoration: none; }
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb .img-block {
  width: 100%; aspect-ratio: 840 / 1134; height: auto; border: 1px solid #D8D8D8;
  overflow: hidden; background: var(--cv-white); transition: box-shadow 0.2s ease;
}
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb .img-block img { width: 100%; height: 100%; object-position: center center; object-fit: contain; }
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb:hover .img-block { box-shadow: 0 8px 20px rgba(15, 58, 95, 0.16); }
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb .desc-block { text-align: center; padding: 16px; }
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb .desc-block h4,
.magazinelist-outer-block .magazinelist-block .magazine-grid .magazine-thumb .desc-block h5 {
  font-size: 1rem; font-family: "Lato", sans-serif; font-weight: 400; color: #363636; margin: 0;
}
@media screen and (max-width: 1023px) {
  .magazinelist-outer-block .magazinelist-block .magazine-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 599px) {
  .magazinelist-outer-block .magazinelist-block .magazine-grid { grid-template-columns: 1fr; }
}

/* --- T309 Recuperacion 24: galeria completa de fotos del reportaje ---
   Jose: solo se veia una foto grande, sin forma de recorrer el resto.
   MediaResolver ya traia todas las fotos verificadas (imagen_principal_sha256
   + galeria_sha256); esta seccion muestra la principal + miniaturas (si
   hay mas de una) que abren un visor a pantalla completa propio (ver
   cv-noticia-galeria.js). Rectangular, sin radios, sin deformar. Nunca
   se confunde con las tarjetas de "otros articulos" mas abajo. */
.cv-noticia-galeria { margin: 0 0 var(--cv-space-4); }
.cv-noticia-galeria-principal {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; text-align: left;
}
.cv-noticia-galeria-miniaturas {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--cv-space-2);
  padding: 0; margin: var(--cv-space-2) 0 0;
}
.cv-noticia-galeria-miniaturas li { flex: 0 0 auto; }
.cv-noticia-galeria-mini-btn {
  display: block; width: 72px; height: 72px; padding: 0;
  border: 2px solid var(--cv-list-bg); border-radius: 0;
  background: none; cursor: pointer; overflow: hidden;
}
.cv-noticia-galeria-mini-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-noticia-galeria-mini-btn.is-active,
.cv-noticia-galeria-mini-btn:hover,
.cv-noticia-galeria-mini-btn:focus-visible { border-color: var(--cv-secondary); }

/* --- Visor a pantalla completa (lightbox), reutilizable por cualquier
   galeria [data-cv-galeria-reportaje]. Fondo oscuro de superposicion
   modal (no es un "fondo crema/sand" de caja de contenido, es el velo
   estandar de un visor a pantalla completa). Controles blancos/negros,
   sin radios, coherentes con el resto del sitio. --- */
.cv-lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
}
.cv-lightbox-overlay[hidden] { display: none; }
.cv-lightbox-figura { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* T309 Recuperación 28c -- José (revisión visual en vivo): el visor a
   pantalla completa (T309R24, cv-noticia-galeria.js) mostraba las fotos
   demasiado pequeñas -- max-height:82vh quedaba por debajo del rango
   "casi pantalla completa" pedido (92-96vw / 88-94vh), y con
   object-fit:contain dentro de .cv-lightbox-figura (100vw/100vh, ya sin
   límite del ancho del cuerpo del artículo ni de la tira de miniaturas:
   el overlay se añade directamente a document.body, ver
   cv-noticia-galeria.js:crearOverlay). Se sube max-height a 90vh
   (dentro del rango) manteniendo max-width en 94vw (idem): object-fit:
   contain sigue garantizando que la foto nunca se recorta ni se
   deforma, y funciona igual para fotos horizontales (limitadas por
   max-width) y verticales (limitadas por max-height, ver fotos reales
   840x1121/840x1259 de noticia-221 usadas para verificar este caso). */
.cv-lightbox-img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 0; }
.cv-lightbox-cerrar,
.cv-lightbox-prev,
.cv-lightbox-next {
  position: absolute; background: var(--cv-white); color: var(--cv-secondary);
  border: 1px solid var(--cv-secondary); border-radius: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; font-size: 20px; line-height: 1;
}
.cv-lightbox-cerrar { top: var(--cv-space-3); right: var(--cv-space-3); }
.cv-lightbox-prev { left: var(--cv-space-3); top: 50%; transform: translateY(-50%); }
.cv-lightbox-next { right: var(--cv-space-3); top: 50%; transform: translateY(-50%); }
.cv-lightbox-contador {
  position: absolute; bottom: var(--cv-space-3); left: 50%; transform: translateX(-50%);
  background: var(--cv-white); color: var(--cv-secondary); border: 1px solid var(--cv-secondary);
  padding: var(--cv-space-1) var(--cv-space-2); font-size: 13px; font-weight: 700;
}
@media (max-width: 599px) {
  /* T309 Recuperación 28c -- móvil tiene menos "chrome" alrededor (sin
     barra de navegación fija visible, controles ya reducidos a
     40px/18px justo debajo), así que la foto puede acercarse aún más al
     borde real del viewport que en escritorio (94vw/90vh) sin perder
     nada -- 96vw/92vh, siempre con object-fit:contain. */
  .cv-lightbox-img { max-width: 96vw; max-height: 92vh; }
  .cv-lightbox-prev, .cv-lightbox-next { min-width: 40px; min-height: 40px; font-size: 18px; }
  .cv-noticia-galeria-mini-btn { width: 56px; height: 56px; }
}

/* T309 Recuperación 25 (noticias listado/ficha) -- José: en el listado
   público y en el bloque de "otros artículos" de la ficha, el titular
   real (<h2>/<h3> sin clase) heredaba el tamaño del h1/h2 por defecto de
   tokens.css o quedaba indistinguible del resto del texto según el
   nivel, mientras que el subtítulo real (campo 'subtitulo',
   NoticiaFixtureRepository) no se mostraba en absoluto. Mismo lenguaje
   tipográfico ya aprobado por José para las tarjetas de portada
   (portada.css, .article-block .cv-news-card .cv-news-headline/
   .cv-news-subtitle/.cv-news-summary, T309 Recuperación 25): aquí se
   fijan los MISMOS valores numéricos (18px/22px titular, 15px subtítulo,
   16px/25.6px extracto) para el contexto real de estas dos páginas
   (tarjetas dentro de .cv-grid, no de .article-block) -- las reglas de
   portada.css NO se tocan (siguen probadas literalmente por
   T309R25Test) y estas son deliberadamente independientes, no una
   reescritura del selector existente. */
.cv-grid .cv-news-card .cv-news-headline {
  color: #222; font-weight: 400; font-size: 18px; line-height: 22px; margin: 0 0 4px;
}
.cv-grid .cv-news-card .cv-news-headline a { color: #222; text-decoration: none; }
.cv-grid .cv-news-card .cv-news-headline a:hover,
.cv-grid .cv-news-card .cv-news-headline a:focus-visible { color: #CB1A1A; }
.cv-grid .cv-news-card .cv-news-subtitle {
  color: #555; font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.4; margin: 0 0 8px;
}
.cv-grid .cv-news-card .cv-news-summary { color: #666; font-size: 16px; line-height: 25.6px; margin: 0; }

/* Subtítulo bajo el <h1> de la ficha individual de noticia (fuera de
   cualquier tarjeta .cv-news-card): mismo lenguaje tipográfico (cursiva,
   tono apagado) que .cv-news-subtitle, algo mayor porque acompaña a un
   titular de página completa, no a una tarjeta pequeña. Se omite del DOM
   por completo cuando la pieza no tiene subtítulo real (ver plantilla) --
   nunca se fabrica uno. */
.cv-noticia-subtitulo {
  color: #555; font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.4;
  margin: 0 0 var(--cv-space-2);
}

/* H1 fino y elegante de listado/ficha de noticias, misma convención
   "fino y elegante" que .cv-prop-titulo-fino (directorio.css,
   propiedades/recomendados) -- no se importa directorio.css aquí (no
   comparte ninguna otra regla con este módulo) para no acoplar hojas de
   estilo sin necesidad; se fija el mismo valor real en vez. El H1 por
   defecto de tokens.css es clamp(32px,5vw,63px), demasiado grande para
   la cabecera de estas dos páginas. */
.cv-prop-titulo-fino { font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); }