/* ═══════════════════════════════════════════════════════════════════════
   css/periodico.css — la ficha de un periódico: sus años y sus ediciones
   (SPEC §3.2; lenguaje de `landing_v5` / `buscador_v1`: título gigante en
   Archivo, prosa en Newsreader, filetes, una sola familia de controles).
   Vía `views/_chrome.php` + `css/base.css`. Acá sólo lo propio de la ficha.
   ═══════════════════════════════════════════════════════════════════════ */

/* La línea de ubicación (`.ubicacion`, `.migas`) vive en `css/base.css`. */

/* ── Cabecera de la ficha ───────────────────────────────────────────── */
.ficha { padding: clamp(2rem, 4vw, 3.5rem) var(--margen) 0; }
.ficha h1 { font-size: clamp(2.6rem, 5.5vw, 5.5rem); }
.ficha .bajada { margin-top: .8rem; font-size: 1.2rem; color: var(--tinta-2); max-width: 70ch; }
.ficha .bajada a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--gris-3); }
.ficha .bajada a:hover { color: var(--rojo); }

/* ── Selector de año: una sola familia de links ─────────────────────── */
.anios { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid var(--tinta); font-size: 1.02rem; }
.anios .rotulo { font: 600 .78rem/2 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin-right: .4rem; }
.anios a { color: var(--tinta-2); border-bottom: 1.5px solid transparent; padding-block: .1rem; font-variant-numeric: tabular-nums; }
.anios a:hover { color: var(--rojo); }
.anios a.activa { color: var(--tinta); font-weight: 700; border-bottom-color: var(--rojo); }

/* ── Tabla de ediciones ─────────────────────────────────────────────── */
.cuerpo { padding: 1.5rem var(--margen) clamp(3rem, 5vw, 5rem); }
.tabla { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tinta); }
.tabla th { font: 600 .78rem/1.4 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); text-align: left; padding: .8rem .75rem .8rem 0; border-bottom: 1px solid var(--gris-2); }
.tabla td { padding: .85rem .75rem .85rem 0; border-bottom: 1px solid var(--gris-2); font-size: 1.08rem; vertical-align: baseline; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .15s ease; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--gris) 55%, transparent); }
.tabla .td-fecha a:hover { color: var(--rojo); }
.tabla .falta { color: var(--rojo); font-weight: 600; }
.tabla .desconocido { color: var(--tinta-3); }
.tabla-scroll { overflow-x: auto; }

/* ── Tramo + paginador ──────────────────────────────────────────────── */
.tabla-tramo { margin-top: 1.25rem; font-family: var(--f-texto); font-size: 1.05rem; color: var(--tinta-2); }
.paginador { display: flex; align-items: center; gap: 1.5rem; margin-top: .75rem; font-size: .95rem; }
.paginador a { border-bottom: 1.5px solid var(--gris-3); }
.paginador a:hover { color: var(--rojo); border-bottom-color: var(--rojo); }
.paginador span { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.vacio { margin-top: 1.5rem; font-family: var(--f-texto); font-size: 1.2rem; color: var(--tinta-2); border-left: 3px solid var(--gris-3); padding-left: 1.1rem; }

/* 2026-09-28 (T3, sitio_busqueda_mobile_0928) — áreas táctiles en el teléfono.
   Medido en 320-430: los años medían ~27 px de alto, «siguiente →» 24 y la
   fecha de cada edición (el único enlace de la fila) ~20. Se agranda la zona
   que recibe el toque con un `::after` absoluto en vez de padding: el filete
   rojo del año activo y el subrayado del paginador quedan pegados al texto,
   como en ancho. */
@media (max-width: 640px) {
  .anios { row-gap: .55rem; }
  .anios a, .paginador a, .tabla .td-fecha a { position: relative; }
  .anios a::after, .paginador a::after { content: ''; position: absolute; inset: -.6rem -.45rem; }
  .tabla .td-fecha a::after { content: ''; position: absolute; inset: -.85rem -.4rem; }
}