/* ═══════════════════════════════════════════════════════════════════════
   css/base.css — tokens, cabecera, pie y botones del diseño nuevo
   (maquetas `landing_v5.html`, `buscador_v1.html`, `visor_v2.html`).

   Lo comparten las vistas ya rediseñadas vía `views/_chrome.php`. Si dos
   pantallas dibujan la misma cabecera distinto, es un bug: por eso esto vive
   una sola vez acá, no copiado en cada hoja.
   Fuentes self-hosted en `css/fonts.css` (la CSP es `default-src 'self'`).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rojo:    #A61B2B;
  --rojo-2:  #8C1423;
  --rojo-3:  #C33A48;
  --tinta:   #121316;
  --tinta-2: #4E5054;
  --tinta-3: #86888C;
  --blanco:  #FFFFFF;
  --gris:    #F1F1EF;
  --gris-2:  #E1E1DE;
  --gris-3:  #C9C9C5;
  --negro:   #141416;
  --sobre-negro:   #F2F2EF;
  --sobre-negro-2: #A7A8A4;
  --resalte: #FFE76A;

  --f-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:  'Newsreader', 'Times New Roman', Georgia, serif;

  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --cab: 64px;
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 17px/1.5 var(--f-titulo); font-feature-settings: 'kern', 'liga'; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: .5rem; background: var(--blanco); color: var(--tinta); padding: .4rem .7rem; z-index: 50; }
.salto:focus { left: .5rem; }

.titulo   { font-family: var(--f-titulo); font-weight: 800; font-variation-settings: 'wdth' 84; letter-spacing: -.02em; line-height: .95; text-transform: uppercase; overflow-wrap: break-word; }
.etiqueta { font-family: var(--f-titulo); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.prosa    { font-family: var(--f-texto); font-size: 1.2rem; line-height: 1.5; font-variation-settings: 'opsz' 18; }
h3        { font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.5rem; background: var(--tinta); color: var(--blanco);
  font: 600 .95rem/1 var(--f-titulo); letter-spacing: .04em; text-transform: uppercase;
  border: 0; border-radius: var(--r); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.boton:hover { background: var(--rojo); }
.boton-rojo { background: var(--rojo); }
.boton-rojo:hover { background: var(--rojo-2); }
.boton-blanco { background: var(--blanco); color: var(--tinta); }
.boton-blanco:hover { background: var(--tinta); color: var(--blanco); }
.boton-linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton-linea:hover { background: var(--tinta); color: var(--blanco); }
.boton-chico { padding: .6rem .9rem; font-size: .78rem; }
.boton[disabled] { opacity: .35; pointer-events: none; }
/* Envío en curso (js/form_envio.js): no es «deshabilitado» —el pedido está
   saliendo—, así que no se atenúa: una raya corre por el borde de abajo, la
   misma que la de la pantalla de carga. */
.boton.enviando { position: relative; overflow: hidden; cursor: progress; }
.boton.enviando::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px; background: currentColor; opacity: .7; animation: boton-enviando 1s ease-in-out infinite; }
@keyframes boton-enviando { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .boton.enviando::after { animation: none; width: 100%; } }

/* ── Barras de scroll (2026-09-16; al rojo del sitio 2026-09-18) ──────
   Finas y en el rojo del héroe (pedido de Tomás). Chromium/Safari usan los
   pseudo-elementos; Firefox, las propiedades estándar (si Chromium las ve,
   ignora los pseudo-elementos: por eso van sólo donde éstos no existen).

   Por qué el riel (track) es gris claro y no transparente: la barra de la página
   recorre secciones blancas, rojas (el héroe, la `.banda` de /buscar) y negras
   (`.control`, `.pie`), y un pulgar rojo sobre fondo rojo desaparece. El riel
   claro la deja legible en las tres y se lee como parte del marco de la ventana,
   no de la sección. Medido el 2026-09-18: Chrome saca la barra de la PÁGINA del
   selector universal — `html::-webkit-scrollbar` no le llega (el ancho siguió en
   los 11 px de la regla universal) —, así que todo se define universalmente y las
   excepciones van por contenedor.
   Dentro de una caja oscura con scroll propio el rojo pleno tampoco se ve contra
   el negro: ahí el pulgar sube a `--rojo-3` y el riel es un blanco translúcido. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gris); }
::-webkit-scrollbar-thumb { background: var(--rojo); background-clip: content-box; border: 3px solid transparent; border-radius: 11px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--rojo-2); }
::-webkit-scrollbar-corner { background: var(--gris); }
/* Cajas oscuras con scroll propio (la consola de la landing hoy; se agregan acá
   las que aparezcan, no en cada hoja). */
.consola::-webkit-scrollbar-track, .control::-webkit-scrollbar-track, .pie::-webkit-scrollbar-track { background: rgba(255,255,255,.10); }
.consola::-webkit-scrollbar-thumb, .control::-webkit-scrollbar-thumb, .pie::-webkit-scrollbar-thumb { background-color: var(--rojo-3); }
.consola::-webkit-scrollbar-thumb:hover, .control::-webkit-scrollbar-thumb:hover, .pie::-webkit-scrollbar-thumb:hover { background-color: #D95561; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--rojo) var(--gris); }
  .consola, .control, .pie { scrollbar-color: var(--rojo-3) rgba(255,255,255,.12); }
}

/* ── Franja de mantenimiento (`views/_chrome.php`) ────────────────────
   Sólo la ven las cuentas con `ver_en_mantenimiento` mientras el sitio está
   cortado para el resto. Arriba de la cabecera, en el amarillo de resalte. */
.franja-mant { background: var(--resalte); color: var(--tinta); border-bottom: 1px solid rgba(0,0,0,.15); padding: .45rem var(--margen); font: 500 .88rem/1.35 var(--f-titulo); text-align: center; }
.franja-mant b { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }

/* ── Cabecera (idéntica en las tres pantallas) ────────────────────────── */
.cab { position: sticky; top: 0; z-index: 20; height: var(--cab); background: var(--rojo); color: var(--blanco); border-bottom: 1px solid rgba(255,255,255,.18); }
.cab-fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 var(--margen); }
.marca { font-family: var(--f-titulo); font-weight: 800; font-variation-settings: 'wdth' 84; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.25rem; }
/* `.menu` es el <details> que envuelve al nav: sólo actúa como panel en móvil
   (ver el bloque de ≤640). Acá es un contenedor transparente. */
.menu { display: flex; align-items: center; height: 100%; min-width: 0; }
.menu-boton { display: none; }
/* Red de seguridad: arriba de 640 px el nav se ve aunque el <details> quedara
   cerrado (p. ej. el instante entre agrandar la ventana y el evento de
   `matchMedia`). El navegador que no conoce `::details-content` lo ignora. */
@media (min-width: 641px) { .menu::details-content { content-visibility: visible; } }
.nav { display: flex; align-items: center; gap: 1.75rem; font-weight: 500; font-size: .95rem; height: 100%; }
.nav > a { padding-block: .25rem; border-bottom: 1.5px solid transparent; }
.nav > a:hover, .nav > a[aria-current="page"] { border-bottom-color: currentColor; }
.sesion { display: flex; align-items: center; gap: .7rem; margin-left: .5rem; padding-left: 1.75rem; border-left: 1px solid rgba(255,255,255,.35); min-width: 0; }
.sesion .inicial { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 50%; background: var(--blanco); color: var(--rojo); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
/* Un login largo recorta con «…» en vez de empujar la fila (caso borde 2026-09-18). */
.sesion .nombre { font-weight: 600; min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion .salir { opacity: .8; font-size: .9rem; }
.sesion .salir:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }

/* ── Línea de ubicación: migas (+ páginas en el visor) ────────────────
   Compartida por la ficha del periódico, la de la edición y el visor.
   Queda fija bajo la cabecera al scrollear (pedido de Tomás 2026-09-16). */
.ubicacion { position: sticky; top: var(--cab); z-index: 15; background: var(--blanco); border-bottom: 1px solid var(--gris-2); }
.ubicacion-fila { display: flex; align-items: center; min-height: 3.1rem; padding: .45rem var(--margen); }
.migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; font-size: .92rem; color: var(--tinta-2); min-width: 0; }
.migas a:hover { color: var(--rojo); }
.migas span[aria-hidden] { color: var(--gris-3); }
.migas .actual { color: var(--tinta); font-weight: 600; }
/* Nombres de periódico larguísimos: se recortan con «…» (el completo va en `title`). */
.migas .per { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.migas .actual.per { max-width: 40ch; }
html { scroll-padding-top: calc(var(--cab) + 3.6rem); }

/* ── Pie (idéntico en las tres pantallas) ─────────────────────────────── */
.pie { background: var(--negro); color: var(--sobre-negro-2); font-size: .92rem; }
.pie-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 3rem var(--margen); }
.pie h4 { margin: 0 0 .8rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--sobre-negro); }
.pie .placeholder { font-family: var(--f-texto); font-style: italic; max-width: 56ch; line-height: 1.45; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a:hover { color: var(--sobre-negro); }
.pie-base { border-top: 1px solid rgba(255,255,255,.15); padding: 1.25rem var(--margen); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.pie-base .marca { color: var(--sobre-negro); font-size: 1rem; }

@media (max-width: 860px) {
  .cab-fila { gap: 1rem; }
  /* F2 — la marca en 3 líneas en móvil: tamaño reducido y sin quiebres. */
  .marca { font-size: 1.05rem; white-space: nowrap; }
  .nav { gap: 1rem; font-size: .85rem; }
  .sesion { padding-left: 1rem; margin-left: 0; }
  .sesion .nombre { display: none; }
  .pie-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* reCAPTCHA invisible (lib_fe_recaptcha.php; login, registro y el paso de
   verificación de /buscar): el badge flotante se oculta; a cambio la leyenda
   que exige Google va chica debajo del botón. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-nota { font-family: var(--f-texto); font-size: .85rem; line-height: 1.4; color: var(--tinta-3); }
.recaptcha-nota a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ── js/ui_modals.js — toasts y modales (clases fe-*) ──────────────────
   Estaban en `css/sitio.css`, que el chrome nuevo no carga: hasta el
   2026-09-16 el popup de divergencias del visor y el toast de «Cita copiada»
   salían sin estilo, al pie de la página. */
.fe-toast-container { position: fixed; top: calc(var(--cab) + 1rem); right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.fe-toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; max-width: 24rem; padding: .7rem 1rem; font: 500 .95rem/1.35 var(--f-texto); background: var(--blanco); border: 1px solid var(--gris-2); border-left: 3px solid var(--tinta); color: var(--tinta); box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); opacity: 0; transform: translateY(-.75rem); transition: opacity .3s ease, transform .3s ease; }
.fe-toast-visible { opacity: 1; transform: translateY(0); }
.fe-toast button { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--tinta-3); font-size: 1.05rem; line-height: 1; padding: 0 .15rem; }
.fe-toast button:hover { color: var(--tinta); }
.fe-toast-ok    { border-left-color: #2e6b45; }
.fe-toast-error { border-color: var(--rojo); border-left-color: var(--rojo); }
.fe-toast-info  { border-left-color: #3d6b8f; }

.fe-modal-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(18,19,22,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fe-modal { width: 100%; max-height: 90vh; overflow-y: auto; background: var(--blanco); border-top: 3px solid var(--tinta); padding: 1.25rem 1.4rem; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); }
.fe-modal-sm { max-width: 384px; }
.fe-modal-md { max-width: 512px; }
.fe-modal-lg { max-width: 672px; }
.fe-modal-xl { max-width: 896px; }
.fe-modal h3 { font: 700 1.1rem/1.25 var(--f-titulo); margin: 0 0 .7rem; }
.fe-modal-body { font: 400 1.02rem/1.45 var(--f-texto); color: var(--tinta-2); margin-bottom: 1.1rem; max-height: 65vh; overflow-y: auto; }
.fe-modal-botones { display: flex; justify-content: flex-end; gap: .5rem; }
.fe-modal-botones-arriba { margin-top: 1.1rem; }
.fe-boton-neutro, .fe-boton-primary, .fe-boton-danger { font: 600 .78rem/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; padding: .6rem 1rem; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; }
.fe-boton-neutro { background: var(--blanco); color: var(--tinta); border-color: var(--tinta); }
.fe-boton-neutro:hover { background: var(--gris); }
.fe-boton-primary { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.fe-boton-primary:hover { background: #000; }
.fe-boton-danger { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.fe-boton-danger:hover { background: var(--rojo-2); }
.fe-modal-label { display: block; font: 600 .8rem var(--f-titulo); color: var(--tinta-2); margin: .2rem 0 .3rem; }
.fe-modal-input { width: 100%; font: inherit; padding: .5rem .65rem; border: 1px solid var(--gris-3); background: var(--blanco); color: var(--tinta); }
.fe-modal-input:focus { outline: 2px solid var(--tinta-2); outline-offset: 0; }
.fe-modal-error { font-size: .85rem; color: var(--rojo); margin-top: .35rem; }
.fe-oculto { display: none; }
/* Contexto citado por el popup de divergencias (js/visor_popup.js). */
.dgc-contexto { font-size: .9rem; font-style: italic; color: var(--tinta-3); margin-top: .5rem; }

/* ── Cabecera en teléfono (2026-09-18, pedido 7) ──────────────────────
   Antes (F2) la fila hacía `flex-wrap` y la cabecera pasaba a DOS líneas con
   `height: auto`. Dos problemas: se veía apretada, y `--cab` dejaba de valer la
   altura real, con lo que el `calc(100vh - var(--cab))` del héroe mentía.

   Ahora: una sola línea (marca + botón de menú) con altura FIJA de 56 px, y los
   ítems del nav en un panel que baja del borde inferior de la cabecera. Se eligió
   panel y no «compactar los ítems» porque en 360 px los cuatro destinos
   (Catálogo · Buscar · Ayuda · sesión) sólo entran encogiendo la tipografía y las
   áreas táctiles por debajo de lo usable; y no se eligió iconos porque «Ayuda» y
   «Catálogo» no tienen icono evidente y quedarían adivinanzas.

   El panel es un <details>/<summary> nativo: funciona SIN JavaScript (se abre y
   cierra con el click o con Enter/Espacio sobre el botón, y el foco es el nativo
   del summary). El JS inline de `_chrome.php` sólo agrega el estado inicial
   cerrado, Esc y el click afuera; sin JS el panel arranca abierto —usable— en vez
   de arrancar inaccesible.

   Como la cabecera volvió a tener altura conocida, la línea de ubicación vuelve a
   quedar fija bajo ella (pedido de Tomás del 2026-09-16), un poco más baja para
   no comerse la pantalla del teléfono. */
@media (max-width: 640px) {
  :root { --cab: 56px; }
  .cab-fila { gap: .5rem; }
  .ubicacion-fila { min-height: 2.6rem; }
  html { scroll-padding-top: calc(var(--cab) + 2.7rem); }
  .migas .per { max-width: 18ch; }

  .menu { position: static; }
  .menu-boton {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -.55rem;
    list-style: none; cursor: pointer; border-radius: var(--r);
  }
  .menu-boton::-webkit-details-marker { display: none; }
  .menu-boton .rayas, .menu-boton .rayas::before, .menu-boton .rayas::after {
    display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease;
  }
  .menu-boton .rayas { position: relative; }
  .menu-boton .rayas::before, .menu-boton .rayas::after { content: ''; position: absolute; left: 0; }
  .menu-boton .rayas::before { top: -6px; }
  .menu-boton .rayas::after  { top: 6px; }
  .menu[open] .menu-boton { background: rgba(255,255,255,.16); }
  .menu[open] .rayas { background: transparent; }
  .menu[open] .rayas::before { transform: translateY(6px) rotate(45deg); }
  .menu[open] .rayas::after  { transform: translateY(-6px) rotate(-45deg); }

  /* El panel cuelga de `.cab` (que es sticky, o sea bloque contenedor): así no
     suma alto a la cabecera y `--cab` sigue siendo la altura real. */
  .menu > .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; height: auto; gap: 0;
    padding: .25rem var(--margen) .8rem;
    background: var(--rojo-2); border-bottom: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 20px 34px -24px rgba(0,0,0,.85);
    font-size: 1rem;
  }
  .menu > .nav > a {
    display: flex; align-items: center; min-height: 48px; padding-block: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .menu > .nav > a:hover { border-bottom-color: rgba(255,255,255,.14); }
  .menu > .nav > a[aria-current="page"] { font-weight: 700; border-bottom-color: rgba(255,255,255,.14); }
  .menu > .nav > a[aria-current="page"]::before { content: ''; width: 3px; height: 1.1rem; margin-right: .6rem; background: var(--blanco); }
  .menu .sesion { margin: 0; padding: .55rem 0 0; border-left: 0; min-height: 48px; }
  .menu .sesion .nombre { display: block; max-width: none; flex: 1 1 auto; }
  .menu .sesion .salir { margin-left: auto; display: flex; align-items: center; min-height: 44px; padding-inline: .6rem; margin-right: -.6rem; opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
  /* Cabecera de mantenimiento: un solo link, no necesita panel (ni la barrita
     separadora, que sin nav al lado no separa nada). */
  .nav-simple { gap: 1rem; }
  .nav-simple .sesion { border-left: 0; padding-left: 0; }
  /* 2026-09-28 (T3) — «Salir» de la página de mantenimiento medía 21 px de
     alto: es el único enlace de la pantalla (cambiar de cuenta). */
  .nav-simple .salir { display: flex; align-items: center; min-height: 44px; padding-inline: .5rem; margin-right: -.5rem; }
  @media (prefers-reduced-motion: reduce) {
    .menu-boton .rayas, .menu-boton .rayas::before, .menu-boton .rayas::after { transition: none; }
  }
}