/* ==================================================================================
   ZONA FULBO — SHELL
   ----------------------------------------------------------------------------------
   Todo lo nuevo: pantalla de acceso, barra de navegación fija, menú de perfil,
   portada e índice del foro. Los tres juegos siguen viviendo en index.html sin que
   nada de acá los toque.

   Usa las mismas variables de color que el resto (--card, --line, --accent, --clay…),
   así que cualquier cambio de paleta se propaga solo y el shell nunca se despega de
   la identidad de la página.

   Sobre la barra: rail angosto a la izquierda en escritorio y barra de pestañas abajo
   en el celular. Es la misma navegación en los dos casos, pero un rail fijo a la
   izquierda en una pantalla de 390px se comería un tercio del ancho útil, y el pedido
   era que la barra esté siempre visible, no que estorbe.
   ================================================================================== */

/* ==================================================================================
   ESCALAS
   ----------------------------------------------------------------------------------
   Una sola escala tipográfica y una sola de espaciado para todo el shell. Antes cada
   pantalla elegía su tamaño a ojo y el archivo tenía 11.4, 11.6, 11.8, 12.2, 12.4,
   13.2, 13.4, 13.6, 14.2, 14.6, 14.8… treinta y pico de tamaños distintos, casi todos
   separados por menos de lo que el ojo distingue. Eso no es jerarquía: es ruido que
   cuesta lo mismo que una jerarquía de verdad.

   Los pasos son de ~1.2 (cuarta menor), que es lo que aguanta una interfaz densa: con
   1.33 el título de sección se comía la pantalla y con 1.125 no se distinguía del
   cuerpo. Los valores quedan en px y no en rem porque el resto del archivo está en px
   y mezclar unidades no arregla nada, sólo esconde el problema en dos lugares.

   El espaciado es múltiplo de 4. No hay --sp-0: cuando algo necesita 2px, casi siempre
   necesitaba 0 o 4.
   ================================================================================== */
:root {
  --fs-xs:11.5px;    /* pies de foto, contadores, la letra chica */
  --fs-s:13px;       /* subtítulos, metadatos, texto secundario */
  --fs-m:15px;       /* cuerpo de la interfaz: botones, filas, tarjetas */
  --fs-l:17px;       /* lectura larga: los mensajes del foro */
  --fs-xl:21px;      /* título de tema, título de diálogo */
  --fs-2xl:27px;     /* título de pantalla */
  --fs-3xl:34px;     /* la tapa */

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* Una curva propia y no el `ease` de fábrica, que es blando y hace que todo parezca
     un poco tarde. Esta arranca rápido: la respuesta se ve apenas se toca. */
  --sal:cubic-bezier(.23,1,.32,1);
  --t-rapido:140ms;   /* cambios de color, hover, foco */
  --t-medio:200ms;    /* abrir y cerrar un diálogo */
}

/* ==================================================================================
   RESET DE LOS BOTONES DEL SHELL
   ----------------------------------------------------------------------------------
   index.html define, para los juegos, un `button { display:block; width:100%;
   text-align:left; margin-top:8px }`. Tiene sentido allá: los botones de los juegos son
   filas de menú a todo el ancho. Pero lo hereda TODO botón nuevo del shell, y el
   resultado no es sutil — dejó el compositor del foro con el textarea aplastado a 14px
   de ancho contra un "Responder" de 650, y el ✕ de borrar un mensaje colgando 120px
   afuera de su tarjeta.

   Se resetea acá, explícito y por componente. No se toca la regla de index.html: sirve
   para lo que hace, y cambiarla tocaría las tres pantallas de los juegos.
   ================================================================================== */
.zf-idiomas .chip,
.zf-dlg .zf-dlg-x,
.foro-msg .mh .mr,
.foro-msg .mh .mx,
.foro-a-quien .x,
.foro-compositor .zf-btn-primario,
.foro-form-acc button,
.foro-cab .foro-nuevo,
.foro-cab .foro-borrar {
  width:auto; margin:0;
}
/* los del diálogo sí van a todo el ancho, pero sin el margen de arriba que los separa
   del anterior: el espacio entre ellos lo pone el `gap` del contenedor */
.zf-dlg-acc button { margin:0; }

/* ==================================================================================
   FOCO VISIBLE
   ----------------------------------------------------------------------------------
   Lo primero que fallaba en accesibilidad: se podía recorrer la página entera con Tab
   sin ver NUNCA dónde estaba parado. Un anillo global, con `:focus-visible` y no con
   `:focus`, así el que usa el mouse no ve un anillo cada vez que hace clic — que es la
   razón por la que la gente termina escribiendo `outline:none` y rompiendo el teclado.

   Va con `outline` y no con `box-shadow` a propósito: el outline no participa del
   layout, así que no corre nada de lugar, y respeta el modo de alto contraste de
   Windows, donde un box-shadow simplemente no se dibuja.
   ================================================================================== */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}
/* Sobre la tapa verde el dorado del acento casi no se ve: ahí el anillo es de cal. */
.zf-hero :focus-visible, .portada-hero :focus-visible, .zf-nav :focus-visible {
  outline-color:var(--chalk);
}

/* ==================================================================================
   ARTE: "PROGRAMA DE CANCHA"
   ----------------------------------------------------------------------------------
   Los títulos van en condensada MAYÚSCULA y los datos en monoespaciada. No es un gusto:
   es la letra de las cosas impresas del fútbol — la lista de partidos del diario, el
   número de la camiseta, la tabla de posiciones, el marcador. La condensada además
   aprovecha mejor el ancho, que es justamente lo que hace una lista de partidos.

   El cuerpo queda en serif (--f-cuerpo, en index.html). Eso es lo que más cambia la
   sensación: la interfaz deja de tener la misma tipografía que cualquier panel de
   control y empieza a leerse como un impreso.
   ================================================================================== */
.zf-hero h1, .zf-bloque-cab .t, .zf-acceso-caja h1, .zf-cat .nm,
.zf-nav-item .lb, .zf-sel-idioma .k .et, .zf-muro .t {
  font-family:var(--f-titulo);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
}
/* Los bastones del riel son casi invisibles sobre tinta, pero sobre PAPEL el mismo 7% se
   ve como un código de barras. En claro se bajan y las filas dejan de ser cajas blancas. */
body.tema-claro .zf-nav {
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--green) 4%, transparent) 0 9px,
      transparent 9px 18px),
    var(--card2);
}
body.tema-claro .zf-nav-item:hover { background:var(--card3); }

/* números, estadísticas y cualquier dato: marcador */
.zf-hero .datos span, .zf-noticia .meta, .zf-cat .ct, .zf-idiomas .chip .cod,
.foro-tema .mt, .foro-msg .mh .fe, .foro-rail .ct {
  font-family:var(--f-datos);
  font-variant-numeric:tabular-nums;
}

/* ---------- layout general con la barra ---------- */
body.zf-shell { padding-left:calc(72px + 20px); }

/* El Despacho y Adiviná el escudo usan `body.dd-full`, que reescribe el `padding` ENTERO
   (`padding:12px 14px`) y con eso borraba el hueco que reserva el riel: el juego quedaba
   por debajo de la barra y el selector de dificultad aparecía cortado ("asy 10/10").
   Va después y con más peso de selector para ganarle. No se toca la regla de dd-full: es
   de los juegos y sirve para lo que hace, que es ocupar toda la pantalla. */
body.zf-shell.dd-full { padding-left:calc(72px + 14px); }

@media (max-width:860px) {
  /* el padding-top deja pasar al botón de perfil, que es fijo arriba a la derecha: sin
     esto se le montaba encima de la esquina de la primera tarjeta */
  body.zf-shell { padding-left:12px; padding-top:58px; padding-bottom:calc(64px + 16px); }
  /* en móvil el riel es una barra ABAJO: el hueco va abajo, no a la izquierda, y el juego
     a pantalla completa tiene que dejar de esconderse detrás de ella */
  body.zf-shell.dd-full {
    padding-left:14px; padding-top:52px; padding-bottom:calc(64px + 12px);
    height:auto; overflow:auto;
  }
}

/* ---------- barra de navegación ----------
   La idea: una camiseta. Bastones verticales tenues de fondo y la sección activa como un
   parche cosido, con doble borde. Es lo que separa esto de un panel de administración
   cualquiera, que era exactamente el problema: el riel anterior no decía "fútbol" en
   ningún lado, sólo ordenaba botones.

   Los bastones se hacen con un gradiente repetido y NO con una imagen: la página va a un
   hosting estático con CSP, y una textura de 3 KB igual sería una petición más.
   La franja tiene que quedar al borde de lo perceptible; si se ve "a rayas", molesta. */
.zf-nav {
  position:fixed; left:0; top:0; bottom:0; width:72px; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 0; border-right:1px solid var(--line); backdrop-filter:blur(10px);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--green) 7%, transparent) 0 9px,
      transparent 9px 18px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--green-dark) 26%, transparent),
      transparent 42%),
    color-mix(in srgb, var(--card) 88%, transparent);
}
/* línea de cal contra el contenido: un detalle de cancha, un pixel */
.zf-nav::after {
  content:""; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--chalk) 34%, transparent) 18%,
             color-mix(in srgb, var(--chalk) 34%, transparent) 82%, transparent);
  pointer-events:none;
}
.zf-nav .zf-marca {
  position:relative; width:42px; height:42px; border-radius:3px; margin-bottom:12px;
  display:grid; place-items:center; font-size:21px; flex:none;
  background:linear-gradient(150deg, var(--green-dark), var(--green));
  border:1px solid color-mix(in srgb, var(--chalk) 26%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--green-dark) 55%, transparent),
             inset 0 1px 0 color-mix(in srgb, var(--chalk) 30%, transparent);
}
/* el círculo central de la cancha, marcado sobre el escudo */
.zf-nav .zf-marca::after {
  content:""; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    transparent 42%, color-mix(in srgb, var(--chalk) 22%, transparent) 42% 45%, transparent 45%);
}
.zf-nav-item {
  position:relative; width:58px; padding:9px 0 7px; border:1px solid transparent;
  border-radius:3px; cursor:pointer; background:transparent; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; line-height:1;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.zf-nav-item .ico { font-size:19px; }
/* Acá el ícono saltaba 3px al pasar por encima. Se fue en el pase de diseño y no por
   gusto: la barra de navegación es lo que más se toca en toda la página, y una
   animación que se ve cien veces por día deja de ser un detalle y pasa a ser un peaje.
   El hover ya se comunica con el fondo y el borde, que cambian igual y no se mueven. */
/* 10.5px y no 9.5px, y un color propio: a ese tamaño --muted no llegaba a contraste
   legible y las etiquetas del riel se leían "apagadas" */
.zf-nav-item .lb { font-size:10.5px; letter-spacing:.2px; text-align:center; font-weight:600; }
.zf-nav-item:hover { background:var(--card3); color:var(--text); border-color:var(--line); }
/* la sección activa: parche cosido. Doble borde (uno del color, otro de cal) más un
   relleno tenue; no depende sólo del color porque además cambia el peso y el borde. */
/* La seccion activa marcada con la segunda tinta, no con el dorado: sobre verde
   botella, el dorado al 14% daba un marron sucio. El bermellon es la otra plancha del
   programa, asi que pertenece. */
.zf-nav-item.on {
  color:var(--chalk); font-weight:700;
  background:color-mix(in srgb, var(--clay) 22%, transparent);
  border-color:color-mix(in srgb, var(--clay) 55%, transparent);
}
.zf-nav-item.on::before {
  content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%);
  width:3px; height:24px; background:var(--clay);
}
.zf-nav .zf-nav-sep { flex:1; }

@media (max-width:860px) {
  .zf-nav {
    left:0; right:0; top:auto; bottom:0; width:auto; height:64px;
    flex-direction:row; justify-content:space-around; gap:0; padding:6px 4px;
    border-right:0; border-top:1px solid var(--line);
    /* en la barra inferior los bastones van horizontales, si no quedan cortados */
    background:
      repeating-linear-gradient(0deg,
        color-mix(in srgb, var(--green) 7%, transparent) 0 9px,
        transparent 9px 18px),
      color-mix(in srgb, var(--card) 92%, transparent);
  }
  .zf-nav::after { top:0; bottom:auto; left:0; right:0; width:auto; height:1px;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--chalk) 34%, transparent) 18%,
               color-mix(in srgb, var(--chalk) 34%, transparent) 82%, transparent); }
  .zf-nav .zf-marca, .zf-nav .zf-nav-sep { display:none; }
  .zf-nav-item { width:auto; flex:1; max-width:96px; }
  .zf-nav-item.on::before { left:50%; top:-1px; transform:translateX(-50%); width:24px; height:3px; border-radius:3px; }
}

/* ---------- selector de idioma del cajón (desplegable) ---------- */
.zf-sel-idioma { padding:0; }
/* La cabecera es un ítem del cajón como cualquier otro: mismo alto, mismo borde. Así
   "Idioma" no parece un título suelto sino una fila que se abre. */
.zf-sel-idioma .k {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; margin:0;
  padding:12px 13px; border-radius:3px; cursor:pointer; font:inherit; font-size:14.5px;
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.zf-sel-idioma .k:hover { background:var(--card3); border-color:var(--muted); }
.zf-sel-idioma .k .ico { font-size:17px; line-height:1; flex:none; }
.zf-sel-idioma .k .et { font-weight:600; }
/* el idioma puesto, a la derecha: se ve sin abrir */
.zf-sel-idioma .k .actual { margin-left:auto; font-size:13px; color:var(--muted); }
.zf-sel-idioma .k .flecha {
  flex:none; color:var(--muted); font-size:17px; line-height:1;
  transition:transform .18s ease;
}
.zf-sel-idioma.abierto .k .flecha { transform:rotate(90deg); }
.zf-sel-idioma.abierto .k {
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
/* las opciones cuelgan de la cabecera: sangradas y unidas por arriba */
.zf-sel-idioma .ops {
  display:grid; gap:6px; padding:8px 8px 8px 20px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top:0;
  border-radius:3px; background:color-mix(in srgb, var(--card2) 55%, transparent);
}
@media (prefers-reduced-motion:reduce) { .zf-sel-idioma .k .flecha { transition:none; } }
.zf-sel-idioma .op {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin:0;
  padding:10px 12px; border-radius:3px; cursor:pointer; font:inherit; font-size:14px;
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.zf-sel-idioma .op:hover { background:var(--card3); border-color:var(--muted); }
.zf-sel-idioma .op .cod {
  flex:none; min-width:30px; padding:3px 0; border-radius:3px; text-align:center;
  font-family:var(--f-datos); font-size:10.5px; font-weight:800; letter-spacing:.6px;
  background:var(--card3); border:1px solid var(--line); color:var(--muted);
}
.zf-sel-idioma .op.on .cod {
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent);
}
.zf-sel-idioma .op .nom { flex:1; }
.zf-sel-idioma .op .tick { color:var(--accent); font-weight:800; }
.zf-sel-idioma .op.on {
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  font-weight:600; cursor:default;
}

/* ---------- chips de idioma (pantalla de acceso) ---------- */
.zf-idiomas { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.zf-idiomas .chip {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border-radius:3px; cursor:pointer;
  font:inherit; font-size:var(--fs-s);
  background:var(--card2); border:1px solid var(--line); color:var(--text);
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.zf-idiomas .chip:hover { background:var(--card3); border-color:var(--muted); }
.zf-idiomas .chip .cod {
  flex:none; min-width:28px; padding:2px 0; border-radius:3px; text-align:center;
  font-family:var(--f-datos); font-size:10.5px; font-weight:800; letter-spacing:.6px;
  background:var(--card3); border:1px solid var(--line); color:var(--muted);
}
.zf-idiomas .chip.on {
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  font-weight:600; cursor:default;
}
.zf-idiomas .chip.on .cod {
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent);
}

/* ==================================================================================
   DIÁLOGO DE CUENTA
   ----------------------------------------------------------------------------------
   Centrado, no lateral. Un cajón que entra desde el borde invita a pasear por él; este
   diálogo pide una decisión y una de las tres es irreversible, así que va en el medio,
   con el fondo tapado y nada más adentro.

   La animación es la única del sitio que sobrevive al pase de diseño, porque comunica:
   algo apareció encima de todo. 200ms, curva propia y desde scale(.97) — nunca desde
   scale(0), que hace que la caja parezca salir de un punto que no existe. El origen se
   queda en el centro: no cuelga de ningún botón, aparece en el medio de la pantalla.
   ================================================================================== */
.zf-dlg {
  position:fixed; z-index:81; top:50%; left:50%;
  width:400px; max-width:calc(100vw - var(--sp-6)); max-height:calc(100dvh - var(--sp-6));
  overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:var(--sp-5);
  box-shadow:0 24px 60px #000000a6;
  transform:translate(-50%,-50%);
  animation:zfDlgEntra var(--t-medio) var(--sal);
}
@keyframes zfDlgEntra {
  from { opacity:0; transform:translate(-50%,-50%) scale(.97); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .zf-dlg { animation:zfDlgAparece var(--t-medio) ease; }
  @keyframes zfDlgAparece { from { opacity:0; } to { opacity:1; } }
}
.zf-dlg .cab {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.zf-dlg .cab .t {
  font-family:var(--f-titulo); text-transform:uppercase; letter-spacing:.03em;
  font-size:var(--fs-xl); font-weight:700; line-height:1.1;
}
.zf-dlg .zf-dlg-x {
  flex:none; width:auto; margin:0; padding:var(--sp-1) var(--sp-2);
  font-size:var(--fs-m); line-height:1; border-radius:3px;
  background:transparent; border:1px solid transparent; color:var(--muted); cursor:pointer;
  transition:color var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.zf-dlg .zf-dlg-x:hover { color:var(--text); border-color:var(--line); }

/* quién sos: el muñequito dibujado (el mismo del botón de perfil), el nombre y el mail */
.zf-dlg-id {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3); margin-bottom:var(--sp-3);
  background:var(--card2); border:1px solid var(--line); border-radius:3px;
}
.zf-dlg-id .av { position:relative; width:22px; height:21px; flex:none; color:var(--good); }
.zf-dlg-id .av::before {
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:currentColor;
}
.zf-dlg-id .av::after {
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:19px; height:10px; border-radius:3px; background:currentColor;
}
.zf-dlg-id .quien { min-width:0; }
.zf-dlg-id .nm { font-size:var(--fs-m); font-weight:700; }
.zf-dlg-id .em {
  font-size:var(--fs-s); color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* El apodo: el nombre con el que te ven en el foro y en la tabla del día */
.zf-apodo {
  padding:var(--sp-3); margin-bottom:var(--sp-3);
  background:var(--card2); border:1px solid var(--line); border-radius:3px;
}
.zf-apodo .l { font-size:var(--fs-s); font-weight:700; }
.zf-apodo .p { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; margin-top:3px; }
.zf-apodo .f { display:flex; gap:8px; margin-top:var(--sp-2); align-items:stretch; }
/* el input del proyecto se estira solo a todo el ancho; acá tiene que convivir con el
   botón en la misma fila, así que se le fija el crecimiento y se le saca el margen */
.zf-apodo .f input { flex:1 1 auto; min-width:0; margin:0; font-size:15px; padding:9px 11px; }
.zf-apodo .f button { flex:0 0 auto; margin:0; white-space:nowrap; }
.zf-apodo .av { font-size:var(--fs-xs); font-weight:600; margin-top:7px; }
.zf-apodo .av.bien { color:var(--good); }
.zf-apodo .av.mal  { color:var(--bad); }

/* "Tus últimas partidas": no es una acción de cuenta, es lo que hay guardado en ella */
.zf-dlg-link {
  display:block; width:100%; text-align:left; margin:0 0 var(--sp-4);
  padding:var(--sp-2) var(--sp-3); border-radius:3px; cursor:pointer;
  font:inherit; font-size:var(--fs-s); font-weight:600;
  background:transparent; border:1px solid var(--line); color:var(--accent);
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.zf-dlg-link:hover { background:var(--card2); border-color:var(--accent); }

.zf-dlg-p { font-size:var(--fs-s); color:var(--muted); line-height:1.55; margin-bottom:var(--sp-4); }

.zf-dlg-acc { display:flex; gap:var(--sp-2); }
.zf-dlg-acc.columna { flex-direction:column; }
/* centrados por defecto (index.html los alinea a la izquierda para los juegos); los
   que llevan título y subtítulo vuelven a la izquierda en la regla de abajo */
.zf-dlg-acc button { width:100%; text-align:center; }
/* Los botones de acción llevan título y subtítulo, así que no pueden centrar el texto:
   dos renglones centrados en un botón se leen como un cartel, no como una acción. */
.zf-dlg-acc button .t { display:block; font-weight:700; }
.zf-dlg-acc button .s {
  display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:500; opacity:.78;
}
.zf-dlg-acc button:has(.t) { text-align:left; }

/* el aviso del borrado: lo que se va, lo que queda y lo que no se toca */
.zf-dlg-aviso {
  padding:var(--sp-3) var(--sp-4); border-radius:3px; margin-bottom:var(--sp-4);
  background:color-mix(in srgb, var(--bad) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 34%, transparent);
}
.zf-dlg-aviso p { margin:0 0 var(--sp-2); font-size:var(--fs-s); line-height:1.55; }
.zf-dlg-aviso p:last-child { margin-bottom:0; }
.zf-dlg-aviso .menor { color:var(--muted); font-size:var(--fs-xs); }
.zf-dlg-error {
  padding:var(--sp-2) var(--sp-3); border-radius:3px; margin-bottom:var(--sp-3);
  font-size:var(--fs-s); color:var(--bad);
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
}

/* El botón que borra NO es el primario dorado: el dorado es la acción que el sitio
   quiere que tomes, y esta no lo es. Rojo, y en el menú además apagado (`.suave`),
   porque ahí todavía no es una confirmación: es la puerta a la confirmación. */
.zf-btn-destructivo {
  padding:var(--sp-3) var(--sp-4); border-radius:3px; cursor:pointer; font:inherit;
  font-size:var(--fs-m); font-weight:700;
  color:var(--chalk); background:var(--bad); border:1px solid var(--bad);
  transition:filter var(--t-rapido) ease;
}
.zf-btn-destructivo:hover { filter:brightness(1.08); }
.zf-btn-destructivo[disabled] { opacity:.55; cursor:default; }
.zf-btn-destructivo.suave {
  color:var(--bad); background:transparent;
  border-color:color-mix(in srgb, var(--bad) 45%, transparent);
  transition:background var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.zf-btn-destructivo.suave:hover {
  background:color-mix(in srgb, var(--bad) 12%, transparent); border-color:var(--bad); filter:none;
}
/* ==================================================================================
   LOS BOTONES DEL SHELL EN TEMA CLARO
   ----------------------------------------------------------------------------------
   index.html define `body.tema-claro button { background:var(--card2); color:var(--text);
   border-color:#cdd5e0 }` para los botones de los juegos. Ese selector pesa 0-1-1 y le
   gana a `.zf-btn-primario`, que pesa 0-1-0 — y como el <style> de index.html va DESPUÉS
   del <link> de este archivo, hasta un empate lo perdería.

   El daño no era teórico: en tema claro el botón dorado se quedaba sin fondo Y sin
   borde (su `border:0` le sacaba el ancho y la regla de tema claro sólo devolvía el
   color), así que "Cambiar de cuenta" y "Responder" eran texto suelto flotando sobre el
   papel. Estaba así desde antes en la pantalla de acceso; se ve ahora porque estas
   clases pasaron a usarse en el diálogo, el foro y el pie.

   Se repiten acá con `body.tema-claro` adelante (0-2-0) en vez de tocar la regla de
   index.html, que sirve para lo que hace.
   ================================================================================== */
body.tema-claro .zf-btn-primario {
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--clay)));
  /* tinta clara: en papel --accent es #9a5c12, un marrón oscuro, y el #14170f del tema
     oscuro encima daría negro sobre negro */
  color:#fdf9ee; border:0;
}
body.tema-claro .zf-btn-secundario {
  background:var(--card2); color:var(--text); border:1px solid var(--line);
}
body.tema-claro .zf-btn-secundario:hover { background:var(--card3); border-color:var(--accent); }
body.tema-claro .zf-btn-fantasma {
  background:transparent; color:var(--muted); border:1px dashed var(--line);
}
body.tema-claro .zf-btn-fantasma:hover { color:var(--text); border-color:var(--muted); }
body.tema-claro .zf-dlg-link { background:transparent; color:var(--accent); border:1px solid var(--line); }
body.tema-claro .zf-dlg-link:hover { background:var(--card2); border-color:var(--accent); }
body.tema-claro .foro-cita {
  background:var(--card2); color:var(--muted);
  border:0; border-left:2px solid var(--line);
}
body.tema-claro .foro-cita:hover { color:var(--text); border-left-color:var(--accent); }
body.tema-claro .foro-cita.abierta { border-left-color:var(--accent); }
/* En tema claro --bad es #b8301f sobre papel: la cal (--chalk) ahí es tinta oscura y el
   texto del botón lleno desaparecería. Se fija el color del texto, no se hereda. */
body.tema-claro .zf-btn-destructivo { background:var(--bad); border:1px solid var(--bad); color:#f6f2e8; }
body.tema-claro .zf-btn-destructivo.suave {
  background:transparent; color:var(--bad);
  border:1px solid color-mix(in srgb, var(--bad) 45%, transparent);
}
body.tema-claro .zf-btn-destructivo.suave:hover {
  background:color-mix(in srgb, var(--bad) 12%, transparent); border-color:var(--bad);
}

@media (max-width:600px) {
  .zf-dlg { padding:var(--sp-4); }
  /* En una pantalla angosta las dos acciones de la confirmación no entran lado a lado
     sin partir el texto. Apiladas, y la salida ARRIBA: el pulgar descansa abajo. */
  .zf-dlg-acc { flex-direction:column; }
}


/* ---------- perfil arriba a la derecha ---------- */
.zf-perfil-btn {
  position:fixed; top:14px; right:16px; z-index:61;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  /* line-height:1 y padding:0 no son de adorno: el 👤 se veía corrido hacia abajo y a la
     izquierda. `place-items:center` centra la CAJA del texto, y esa caja incluye el
     interlineado heredado del body (1.5) más el padding que el navegador le pone a un
     <button>. El glifo quedaba flotando arriba de su propio hueco. Con line-height:1 la
     caja es del tamaño del glifo y ahí sí el centrado es el que se ve. */
  line-height:1; padding:0; text-align:center;
  background:var(--card2); color:var(--text); border:1px solid var(--line);
  transition:border-color .16s ease, transform .16s ease;
}
/* el muñequito, dibujado: cabeza + hombros. Centrado real, sin depender de una fuente */
.zf-perfil-btn .av { position:relative; width:20px; height:19px; flex:none; opacity:.9; }
.zf-perfil-btn .av::before {
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:currentColor;
}
.zf-perfil-btn .av::after {
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:17px; height:9px; border-radius:3px; background:currentColor;
}
.zf-perfil-btn:hover .av { opacity:1; }
.zf-perfil-btn.con-sesion .av { color:var(--good); opacity:1; }
@media (max-width:860px) { .zf-perfil-btn .av { width:18px; height:17px; }
  .zf-perfil-btn .av::before { width:7px; height:7px; }
  .zf-perfil-btn .av::after { width:15px; height:8px; } }
.zf-perfil-btn:hover { border-color:var(--accent); }
.zf-perfil-btn.con-sesion { border-color:color-mix(in srgb, var(--good) 60%, var(--line)); }
.zf-perfil-btn .punto {
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--good); border:2px solid var(--bg);
}
@media (max-width:860px) { .zf-perfil-btn { top:10px; right:10px; width:38px; height:38px; } }

/* ---------- pantalla de acceso ---------- */
.zf-acceso {
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  position:relative; overflow:hidden;
}
.zf-acceso-caja {
  width:100%; max-width:440px; position:relative; z-index:2;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--line); border-radius:3px; padding:30px 26px;
  box-shadow:0 30px 70px #00000059;
}
.zf-acceso-marca { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.zf-acceso-marca .esc {
  width:44px; height:44px; border-radius:3px; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(150deg, var(--green-dark), var(--green)); border:1px solid #ffffff1f;
}
.zf-acceso-marca .nm { font-size:19px; font-weight:800; letter-spacing:-.3px; }
.zf-acceso h1 { margin:0 0 7px; font-size:25px; font-weight:800; letter-spacing:-.5px; }
.zf-acceso .sub { color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:20px; }
.zf-acceso-bene { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.zf-acceso-bene li { display:flex; align-items:center; gap:9px; font-size:13.4px; color:var(--text); }
.zf-acceso-bene li::before {
  content:"✓"; flex:none; width:19px; height:19px; border-radius:50%; font-size:11px;
  display:grid; place-items:center; color:var(--bg); background:var(--good); font-weight:800;
}
.zf-acceso-acciones { display:flex; flex-direction:column; gap:9px; }
.zf-acceso-acciones button { width:100%; justify-content:center; text-align:center; }
.zf-btn-primario {
  padding:13px 16px; border-radius:3px; border:0; cursor:pointer; font:inherit;
  font-size:14.6px; font-weight:700; color:#14170f;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--clay)));
}
.zf-btn-primario:hover { filter:brightness(1.06); }
.zf-btn-secundario {
  padding:13px 16px; border-radius:3px; cursor:pointer; font:inherit; font-size:14.2px;
  font-weight:600; color:var(--text); background:var(--card2); border:1px solid var(--line);
}
.zf-btn-secundario:hover { border-color:var(--accent); background:var(--card3); }
.zf-btn-fantasma {
  padding:11px 16px; border-radius:3px; cursor:pointer; font:inherit; font-size:13.4px;
  color:var(--muted); background:transparent; border:1px dashed var(--line);
}
.zf-btn-fantasma:hover { color:var(--text); border-color:var(--muted); }
.zf-acceso .sin-cuenta-s { font-size:11.8px; color:var(--muted); text-align:center; margin-top:-3px; }
.zf-acceso .pie { margin-top:18px; font-size:11.4px; color:var(--muted); text-align:center; line-height:1.5; }
/* En el acceso los chips van centrados y más apagados: es la primera pantalla y el
   idioma no es la decisión principal, es la salida para el que cayó en el equivocado. */
.zf-acceso .zf-idiomas { justify-content:center; margin-top:var(--sp-4); }
.zf-acceso .zf-idiomas .chip { background:transparent; color:var(--muted); font-size:12.5px; }
.zf-acceso .zf-idiomas .chip.on { color:var(--accent); border-color:var(--accent); background:transparent; }
/* resplandor de fondo: la misma idea que el body, un poco más fuerte */
.zf-acceso::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--green) 26%, transparent), transparent 55%),
    radial-gradient(ellipse at 82% 85%, color-mix(in srgb, var(--clay) 22%, transparent), transparent 55%);
}

/* ---------- portada (Inicio) ---------- */
.zf-inicio { max-width:1080px; margin:0 auto; }
.zf-hero {
  position:relative; overflow:hidden; border-radius:3px; padding:30px 26px; margin-bottom:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--green) 34%, transparent), transparent 58%),
    radial-gradient(ellipse at 88% 100%, color-mix(in srgb, var(--clay) 26%, transparent), transparent 58%),
    var(--card);
}
/* ---------- EL ELEMENTO FIRMA: la tapa del programa ----------
   El hero deja de ser una tarjeta con degradado y pasa a ser una TAPA IMPRESA: una
   plancha plena de verde botella, el título sobreimpreso en condensada, y arriba una
   franja de tinta bermellón con el rayado del papel.

   Es lo único llamativo de la página, a propósito. Todo lo demás queda callado: rayas
   de un pixel, esquinas rectas, nada de sombras flotando. */
.zf-hero {
  background:
    /* trama de puntos: el medio tono de una impresión barata, apenas perceptible */
    radial-gradient(color-mix(in srgb, var(--chalk) 9%, transparent) 1px, transparent 1px)
      0 0 / 5px 5px,
    linear-gradient(160deg, var(--green) 0%, var(--green-dark) 78%);
  border:1px solid color-mix(in srgb, var(--chalk) 20%, transparent);
  color:var(--chalk);
}
/* la franja de la segunda tinta, arriba, cortada al ras */
/* UNA sola tinta arriba, al ras. Partida en dos colores se leia como una barra de
   progreso a medio llenar, que es exactamente lo que no es. */
.zf-hero::before {
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--clay);
}
/* el rayado del pliegue: dos líneas finas abajo, como el borde de una hoja doblada */
.zf-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0 2px,
      color-mix(in srgb, var(--chalk) 18%, transparent) 2px 3px,
      transparent 3px 5px,
      color-mix(in srgb, var(--chalk) 12%, transparent) 5px 6px);
}
/* La tapa es una plancha de verde botella en LOS DOS temas, así que su texto no puede
   salir de --chalk: en el tema claro --chalk es tinta oscura y el título quedaba verde
   oscuro sobre verde oscuro, ilegible. Se usa un color propio de la tapa, fijo. */
.zf-hero { --tapa-tinta:#f4efe2; }
.zf-hero h1 { color:var(--tapa-tinta); }
.zf-hero .claim { color:color-mix(in srgb, var(--tapa-tinta) 80%, transparent); }
.zf-hero .datos span {
  background:color-mix(in srgb, var(--tapa-tinta) 13%, transparent);
  border-color:color-mix(in srgb, var(--tapa-tinta) 30%, transparent);
  color:var(--tapa-tinta);
}
.zf-hero::before { background:var(--clay); }
.zf-hero::after {
  background:
    linear-gradient(180deg, transparent 0 2px,
      color-mix(in srgb, var(--tapa-tinta) 20%, transparent) 2px 3px,
      transparent 3px 5px,
      color-mix(in srgb, var(--tapa-tinta) 13%, transparent) 5px 6px);
}
.zf-hero > * { position:relative; z-index:1; }
.zf-hero h1 { margin:0; font-size:33px; font-weight:800; letter-spacing:-.8px; }
.zf-hero .claim { margin-top:6px; color:var(--muted); font-size:15px; }
.zf-hero .datos { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.zf-hero .datos span {
  font-size:11.6px; padding:5px 10px; border-radius:3px;
  background:color-mix(in srgb, var(--card3) 80%, transparent); border:1px solid var(--line); color:var(--text);
}
@media (max-width:600px) { .zf-hero { padding:22px 18px; } .zf-hero h1 { font-size:26px; } }

.zf-bloque { margin-bottom:18px; }
.zf-bloque-cab { display:flex; align-items:baseline; gap:10px; margin:0 0 11px; }
/* El título de sección como el encabezado de una PLANILLA: condensada en mayúsculas y una
   raya de tinta que corre hasta el borde, no un subrayadito decorativo de 26px. La raya
   sirve para algo: separa la sección de la anterior sin agregar otra caja. */
.zf-bloque-cab {
  display:flex; align-items:baseline; gap:10px; margin:0 0 12px;
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.zf-bloque-cab .t {
  position:relative; font-size:19px; line-height:1.05;
  padding-bottom:0; padding-left:11px;
}
/* la marca de tinta al principio del renglón, como el cuadradito de una planilla */
.zf-bloque-cab .t::before {
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
  background:var(--clay);
}
.zf-bloque-cab .s { font-size:12.2px; color:var(--muted); }

/* tarjetas de noticias
   Son lo que cambia todos los días y lo único que justifica volver a la portada, así que
   pesan más que antes: foto más grande, texto más grande y más aire. Con 96px de foto y
   14px de texto competían de igual a igual con el pie de una tarjeta cualquiera. */
.zf-noticias { display:grid; gap:12px; }
.zf-noticia {
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:stretch;
  min-height:112px;
  background:var(--card); border:1px solid var(--line); border-radius:3px; overflow:hidden;
  text-decoration:none; color:inherit; transition:border-color var(--t-rapido) ease;
}
/* al pasar por encima aparece un canto de color del lado izquierdo, como el filo de una
   tarjeta de fichero. Es más barato que una sombra y se nota más — y a diferencia del
   salto de 2px que había acá, no mueve la tarjeta de lugar mientras se la lee. */
.zf-noticia::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--clay));
  opacity:0; transition:opacity .16s ease;
}
.zf-noticia { position:relative; }
.zf-noticia:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.zf-noticia:hover::before { opacity:1; }
.zf-noticia .foto { background:var(--card3); position:relative; }
.zf-noticia .foto img { width:100%; height:100%; object-fit:cover; display:block; }
.zf-noticia .cuerpo { padding:15px 17px 15px 0; min-width:0; display:flex; flex-direction:column; gap:9px; justify-content:center; }
.zf-noticia .tx { font-size:15.6px; line-height:1.5; }
.zf-noticia .meta { font-size:12.2px; color:var(--muted); display:flex; gap:9px; align-items:center; }
.zf-noticia.sin-foto { grid-template-columns:minmax(0,1fr); min-height:0; }
.zf-noticia.sin-foto .cuerpo { padding:16px 18px; }
@media (max-width:640px) {
  /* la foto pasa arriba: a 640px una columna de 150px se come el ancho del texto */
  .zf-noticia { grid-template-columns:minmax(0,1fr); gap:0; }
  .zf-noticia .foto { height:150px; }
  .zf-noticia .cuerpo { padding:14px 16px; }
  .zf-noticia .tx { font-size:15px; }
}

/* Estado vacío: el título dice qué pasa y la línea de abajo qué hacer. Más aire que
   antes (22px daba una cajita apretada que parecía un error y no un estado). */
.zf-vacio {
  padding:var(--sp-6) var(--sp-5); text-align:center;
  border:1px dashed var(--line); border-radius:3px;
  color:var(--muted); font-size:var(--fs-s);
}
.zf-vacio .vt { font-size:var(--fs-m); color:var(--text); font-weight:600; }
.zf-vacio .vs { margin-top:var(--sp-2); font-size:var(--fs-s); line-height:1.55; }

.zf-atajos { display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }

/* ---------- foro ---------- */
.zf-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:11px; }
.zf-cat {
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--clay);
  border-radius:3px; padding:var(--sp-4); transition:border-color var(--t-rapido) ease;
}
.zf-cat:hover { border-color:var(--accent); border-left-color:var(--accent); }
.zf-cat .nm { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.zf-cat .ds { font-size:12.2px; color:var(--muted); margin-top:5px; line-height:1.45; }
.zf-cat .ct { font-size:11.4px; color:var(--muted); margin-top:9px; }
.zf-cat .ct b { color:var(--accent); }

/* ---------- foro: temas y mensajes ---------- */
.foro-cab {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.foro-cab-tit { flex:1 1 220px; min-width:0; }
.foro-cab-tit .t { font-size:19px; font-weight:800; letter-spacing:-.3px; }
.foro-cab-tit .s { font-size:12.4px; color:var(--muted); margin-top:3px; }
/* `width:auto` explícito y `margin-left:auto`: el botón es una acción secundaria y va
   compacto a la derecha. Sin el width:auto se estiraba a todo el ancho al pasar a la
   fila de abajo, y quedaba con más peso visual que el título del tema. */
.foro-cab .foro-nuevo, .foro-cab .foro-borrar {
  flex:0 0 auto; width:auto; margin-left:auto; white-space:nowrap;
  padding:9px 14px; font-size:13.2px;
}

.foro-error {
  padding:11px 14px; border-radius:3px; margin-bottom:12px; font-size:13.2px;
  color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
}

.foro-temas { display:flex; flex-direction:column; gap:8px; }
.foro-tema {
  text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--clay);
  border-radius:3px; padding:var(--sp-3) var(--sp-4);
  transition:border-color var(--t-rapido) ease;
}
.foro-tema:hover { border-color:var(--accent); border-left-color:var(--accent); }
.foro-tema .tt { font-size:var(--fs-m); font-weight:700; line-height:1.35; }
.foro-tema .mt {
  margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--muted);
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
}
.foro-tema .mt .sep { opacity:.5; }
/* cuántos temas tienen algo sin leer se decide desde la lista, que es donde se elige
   en cuál entrar. Con la tinta de la segunda plancha, no con el dorado del acento. */
.foro-tema .mt .nuevo {
  padding:1px var(--sp-2); border-radius:3px; font-weight:700; letter-spacing:.4px;
  color:var(--clay); background:color-mix(in srgb, var(--clay) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--clay) 40%, transparent);
}

/* ==================================================================================
   EL HILO
   ----------------------------------------------------------------------------------
   ANCHO DE LECTURA. Es la mitad de toda la mejora del foro y la más barata: el texto se
   corta a 68 caracteres. Un renglón de 1000px obliga al ojo a saltar del final de una
   línea al principio de la siguiente cruzando media pantalla, y en ese salto se pierde
   el renglón una de cada tres veces. Con 65-70 el ojo cae solo donde tiene que caer.

   Va con `ch`, que es el ancho del cero de la fuente que rige ACÁ, así que la medida
   sigue siendo la correcta si algún día cambia el cuerpo. Y 17px, no 14: esto es texto
   para leer seguido, no una etiqueta de interfaz.
   ================================================================================== */
.foro-hilo {
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-bottom:var(--sp-4);
  font-size:var(--fs-l);
  max-width:68ch;
}
.foro-msg {
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:var(--sp-3) var(--sp-4);
}
/* los mensajes propios llevan el borde del acento, para ubicarse rápido en un hilo largo */
.foro-msg.propio { border-left:3px solid var(--accent); }
/* width:100% en la fila y nowrap en la fecha: si no, con el botón de borrar presente la
   fila se encogía al contenido y "hace 2 h" se partía en dos líneas. */
.foro-msg .mh {
  display:flex; align-items:center; gap:var(--sp-2);
  margin-bottom:var(--sp-2); width:100%;
}
.foro-msg .mh .au { font-size:var(--fs-s); font-weight:700; flex:0 0 auto; }
/* La fecha crece y empuja los botones hasta el borde derecho. Se hace con flex y no con
   margin-left:auto porque el nowrap ya evita que se parta en dos líneas, y así la
   posición de los botones no depende de márgenes automáticos. */
.foro-msg .mh .fe { font-size:var(--fs-xs); color:var(--muted); flex:1 1 auto; white-space:nowrap; }
.foro-msg .mh .mr, .foro-msg .mh .mx {
  border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-size:var(--fs-xs); padding:3px var(--sp-2); border-radius:3px;
  line-height:1.3; flex:0 0 auto; white-space:nowrap;
  transition:color var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.foro-msg .mh .mr:hover { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.foro-msg .mh .mx:hover { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); }
/* pre-wrap para que los saltos de línea que escribió la gente se vean como los escribió */
.foro-msg .mc {
  font-size:var(--fs-l); line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ---------- la cita colapsable ----------
   Un renglón, cortado con puntos suspensivos, que se abre en el lugar. Va ARRIBA de la
   cabecera del mensaje y sangrado, que es el orden en que se lee: primero a quién le
   contesta, después quién habla, después qué dice. */
.foro-cita {
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  margin:0 0 var(--sp-2); padding:var(--sp-2) var(--sp-3);
  background:var(--card2); border:0; border-left:2px solid var(--line);
  border-radius:0 3px 3px 0; color:var(--muted);
  transition:border-color var(--t-rapido) ease, color var(--t-rapido) ease;
}
.foro-cita:hover { border-left-color:var(--accent); color:var(--text); }
.foro-cita .corta {
  display:flex; align-items:baseline; gap:var(--sp-2);
  font-size:var(--fs-s); min-width:0;
}
.foro-cita .flecha { flex:none; opacity:.7; }
.foro-cita .au { flex:none; font-weight:700; }
.foro-cita .rs { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.foro-cita .full {
  display:none; font-size:var(--fs-s); line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.foro-cita.abierta .corta { display:none; }
.foro-cita.abierta .full { display:block; }
.foro-cita.abierta { border-left-color:var(--accent); }

/* ---------- la marca de "nuevos desde tu última visita" ----------
   Una raya de tinta que cruza la columna con el número en el medio. No es una tarjeta ni
   un cartel: es una marca de dónde te quedaste, y tiene que poder ignorarse. */
.foro-nuevos {
  display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-3) 0 var(--sp-1);
  font-family:var(--f-datos); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--clay);
}
.foro-nuevos::before, .foro-nuevos::after {
  content:""; height:1px; background:color-mix(in srgb, var(--clay) 45%, transparent);
}
.foro-nuevos::before { width:var(--sp-5); flex:none; }
.foro-nuevos::after { flex:1; }

/* ==================================================================================
   EL RIEL DEL HILO
   ----------------------------------------------------------------------------------
   Reemplaza al paginado. Dice en qué mensaje estás sobre cuántos hay, y se arrastra
   para saltar. Va pegado al costado y fijo: un hilo largo se lee scrolleando, y un
   indicador de posición que se va con el scroll no indica nada.

   Ancho de 12px en la pista pero el área que recibe el dedo es de 44px (ver el bloque
   táctil más abajo): la pista es la marca, no el objetivo.
   ================================================================================== */
.foro-rail {
  position:fixed; right:var(--sp-3); top:96px; bottom:132px; z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  pointer-events:none;   /* el hueco entre el número y la pista deja pasar los clics */
}
.foro-rail .ct {
  flex:none; padding:var(--sp-1) var(--sp-2); border-radius:3px;
  font-size:var(--fs-xs); line-height:1.2; text-align:center;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--line); color:var(--muted);
  backdrop-filter:blur(6px);
}
.foro-rail .ct b { display:block; color:var(--text); font-size:var(--fs-s); }
.foro-rail .ct .de { opacity:.75; }
.foro-rail .pista {
  position:relative; flex:1; width:12px; border-radius:3px; cursor:grab;
  pointer-events:auto; touch-action:none;   /* si no, el navegador se queda el arrastre */
  background:color-mix(in srgb, var(--line) 70%, transparent);
  border:1px solid var(--line);
}
.foro-rail .pista:active { cursor:grabbing; }
.foro-rail .pulgar {
  position:absolute; left:-2px; right:-2px; top:0; height:34px;
  transform:translateY(-50%); border-radius:3px;
  background:var(--clay); border:1px solid color-mix(in srgb, var(--chalk) 26%, transparent);
  pointer-events:none;
}
/* El pulgar se posiciona con `top` en % y no con transform porque el porcentaje tiene
   que ser del alto de la PISTA, que cambia con la ventana; un translateY en % sería del
   alto del pulgar. Es un solo elemento moviéndose en un arrastre, no una animación en
   bucle: el costo de layout acá no se nota y la alternativa se rompe al redimensionar. */

/* ==================================================================================
   EL COMPOSITOR, ACOPLADO ABAJO
   ----------------------------------------------------------------------------------
   Pegado al pie de la ventana mientras el hilo scrollea arriba: se responde LEYENDO lo
   que se responde. El fondo es opaco a propósito — con transparencia el texto del hilo
   pasa por debajo de lo que estás escribiendo y no se lee ninguno de los dos.
   ================================================================================== */
.foro-compositor {
  position:sticky; bottom:0; z-index:5;
  /* `ch` se mide con la fuente del PROPIO elemento, así que 68ch acá y 68ch en el hilo
     daban dos anchos distintos —el hilo está en 17px y el compositor heredaba el cuerpo
     del body— y el fondo opaco del compositor quedaba 40px más angosto que los mensajes:
     el texto del hilo se veía pasar por el costado mientras se escribía. Se iguala el
     contexto de medida; los tamaños de adentro los fija cada uno por su cuenta. */
  font-size:var(--fs-l);
  max-width:68ch;
  margin-top:var(--sp-3);
  padding:var(--sp-3) 0 var(--sp-4);
  background:var(--bg);
  border-top:1px solid var(--line);
}
.foro-compositor-fila { display:flex; gap:var(--sp-2); align-items:flex-end; }
.foro-compositor textarea {
  flex:1; min-width:0; width:100%; font:inherit; font-size:var(--fs-m); color:var(--text);
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:var(--sp-3); resize:vertical; min-height:46px;
}
.foro-compositor .zf-btn-primario { flex:none; padding:var(--sp-3) var(--sp-4); }
.foro-compositor .zf-btn-primario[disabled] { opacity:.55; cursor:default; }

/* a quién le está contestando */
.foro-a-quien {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2);
  background:var(--card2); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:0 3px 3px 0;
  font-size:var(--fs-s); color:var(--muted);
}
.foro-a-quien .tx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.foro-a-quien .x {
  flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-size:var(--fs-s); line-height:1; padding:var(--sp-1) var(--sp-2); border-radius:3px;
}
.foro-a-quien .x:hover { color:var(--text); }

.foro-nota {
  margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--muted); line-height:1.5;
}

/* ---------- formulario de tema nuevo ---------- */
.foro-form {
  background:var(--card2); border:1px solid var(--line); border-radius:3px;
  padding:var(--sp-4); margin-bottom:var(--sp-4);
}
.foro-form .k {
  font-family:var(--f-datos); font-size:var(--fs-xs); letter-spacing:1.1px;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-3);
}
.foro-form input, .foro-form textarea {
  width:100%; font:inherit; font-size:var(--fs-m); color:var(--text);
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:var(--sp-3); margin-bottom:var(--sp-2); resize:vertical;
}
/* El borde de acento marca el campo activo para todos; el anillo de foco global sigue
   apareciendo con el teclado. Antes esto era `outline:none` a secas y borraba el
   anillo también para el que navega con Tab, que es justamente quien lo necesita. */
.foro-form input:focus, .foro-form textarea:focus,
.foro-compositor textarea:focus { border-color:var(--accent); }
.foro-form-acc { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.foro-form-acc button { flex:none; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-s); }
.foro-form-acc button[disabled] { opacity:.55; cursor:default; }

@media (max-width:860px) {
  /* En el celular la barra de navegación es una franja fija de 64px abajo: el
     compositor tiene que apoyarse ARRIBA de ella o queda tapado justo cuando se escribe. */
  .foro-compositor { bottom:64px; }

  /* ---------- el carril del riel ----------
     En 390px de ancho el riel fijo se montaba ENCIMA de los mensajes: la última palabra
     de cada renglón quedaba debajo de la pista, y su área táctil de 44px se comía el
     borde derecho del botón "Responder". Un riel que se traga los toques del contenido
     que ordena es peor que no tener riel.

     La solución no es achicar el riel —44px es el mínimo para el pulgar— sino darle
     una calle: la columna de lectura se corre 44px y el riel vive ahí, sin pisar nada.
     En escritorio no hace falta porque sobra ancho a la derecha del texto. */
  .foro-hilo, .foro-compositor { max-width:calc(100% - 44px); }
  .foro-rail { top:60px; bottom:150px; right:var(--sp-1); }
  .foro-rail .ct { padding:2px var(--sp-1); font-size:10px; min-width:32px; }
  .foro-rail .ct b { font-size:var(--fs-xs); }
}

.zf-muro {
  max-width:520px; margin:40px auto; text-align:center; padding:30px 24px;
  background:var(--card); border:1px solid var(--line); border-radius:3px;
}
.zf-muro .ico { font-size:34px; margin-bottom:var(--sp-3); }
.zf-muro .t { font-size:var(--fs-xl); font-weight:800; margin-bottom:var(--sp-2); letter-spacing:-.3px; }
.zf-muro .p { font-size:var(--fs-s); color:var(--muted); line-height:1.55; margin-bottom:var(--sp-5); }
.zf-muro .acciones { display:flex; flex-direction:column; gap:var(--sp-2); }

/* ==================================================================================
   OBJETIVOS TÁCTILES
   ----------------------------------------------------------------------------------
   44px de lado mínimo en el celular. No es una recomendación abstracta: es el ancho del
   pulgar de un adulto, y por debajo de eso la gente falla el toque y vuelve a intentar.
   Los peores de esta página eran el ✕ de borrar un mensaje (18px de alto) y los chips.

   Se agranda el ÁREA, no el dibujo: el ✕ sigue siendo del mismo tamaño, lo que crece es
   la superficie que lo escucha. Con `min-height` sobre un flex el contenido se centra
   solo, así que no hace falta tocar el padding de cada uno.

   Va con (pointer:coarse) además del ancho: una ventana angosta en una notebook se
   sigue tocando con el mouse, y ahí 44px de alto en cada fila estira todo sin motivo.
   ================================================================================== */
@media (max-width:860px), (pointer:coarse) {
  .zf-nav-item,
  .zf-idiomas .chip,
  .zf-sel-idioma .k,
  .zf-sel-idioma .op,
  .panel-item,
  .panel .cab button,
  .zf-dlg-acc button,
  .zf-dlg .zf-dlg-x,
  .zf-dlg-link,
  .foro-form-acc button,
  .foro-compositor .zf-btn-primario,
  .foro-cab .foro-nuevo,
  .foro-cab .foro-borrar {
    min-height:44px;
  }
  /* los botoncitos de la cabecera de un mensaje: el área crece, el glifo no */
  .foro-msg .mh .mr, .foro-msg .mh .mx, .foro-a-quien .x {
    min-height:44px; min-width:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* la pista del riel mide 12px de ancho pero escucha 44: la raya es la marca, no el
     objetivo. El pseudo-elemento no se ve y no desplaza nada. */
  .foro-rail .pista::before {
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:44px; transform:translateX(-50%);
  }
}

/* ==================================================================================
   MENOS MOVIMIENTO
   ----------------------------------------------------------------------------------
   Quien lo pidió en su sistema no quiere cero transiciones —el cambio de color de un
   hover ayuda a entender qué está pasando— quiere que nada se desplace ni escale. Se
   apagan las transformaciones y se dejan las de color, que es la distinción que la
   regla general (`* { animation:none }`) no hace.
   ================================================================================== */
@media (prefers-reduced-motion:reduce) {
  .zf-dlg, .fade-in { animation-duration:1ms; }
  .zf-noticia, .zf-cat, .foro-tema, .zf-perfil-btn { transition-property:border-color, background, color; }
}

/* ==================================================================================
   SECCIÓN DE DATOS
   ----------------------------------------------------------------------------------
   Partidos que vienen, ficha de equipo y ficha de árbitro. Usa las variables del resto
   del shell (--card, --line, --clay, --accent) para que no parezca pegado de otro lado.

   El aviso de "sin cuotas" NO es un pie de página en gris: es un bloque con borde de
   color arriba de todo, en las tres pantallas. Si hay que decirlo, se dice donde se lee.
   ================================================================================== */
.zf-datos { max-width:980px; margin:0 auto; padding:var(--sp-5) var(--sp-4) 64px; display:flex;
            flex-direction:column; gap:var(--sp-4); }
.zf-datos-cab h1 { font-size:30px; letter-spacing:-.8px; margin:0; }
.zf-datos-cab .sub { color:var(--muted); font-size:14px; margin-top:6px; line-height:1.5; }

.zf-datos-aviso { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
                  border-radius:3px; padding:var(--sp-4); }
.zf-datos-aviso .k { font-size:11.6px; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); font-weight:700; }
.zf-datos-aviso .p { font-size:13.2px; color:var(--muted); margin-top:6px; line-height:1.55; }

.zf-datos-tabs { display:flex; gap:8px; }
.zf-datos-tabs .tab { font:inherit; cursor:pointer; padding:8px 16px; border-radius:3px;
                      background:transparent; color:var(--muted); border:1px solid var(--line); }
.zf-datos-tabs .tab.on { color:var(--fg); border-color:var(--accent); background:var(--card); font-weight:700; }

.zf-datos-filtro .tit { font-size:11.6px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.zf-datos-filtro .chips { display:flex; flex-wrap:wrap; gap:7px; }
.zf-datos-filtro .chip { font:inherit; font-size:12.6px; cursor:pointer; padding:6px 12px; border-radius:999px;
                         background:transparent; color:var(--muted); border:1px solid var(--line); }
.zf-datos-filtro .chip:hover { border-color:var(--accent); }
.zf-datos-filtro .chip.on { background:var(--accent); border-color:var(--accent); color:#0f1410; font-weight:700; }

.zf-datos-lista { display:flex; flex-direction:column; gap:6px; }
.zf-datos-dia { font-size:11.8px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);
                margin-top:var(--sp-4); }
.zf-datos-partido { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; align-items:center;
                    background:var(--card); border:1px solid var(--line); border-radius:3px; padding:10px 14px; }
.zf-datos-partido .hora { font-size:13px; font-weight:700; color:var(--muted); }
.zf-datos-partido .equipos { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* width:auto y flex:0 0 auto porque el estilo general de <button> del proyecto los
   estira a todo el ancho: sin esto los dos equipos y el "vs" caen uno debajo del otro
   y cada partido ocupa tres renglones. */
.zf-datos-partido .eq { font:inherit; font-size:14px; font-weight:600; cursor:pointer; background:none;
                        border:none; color:inherit; padding:2px 0; width:auto; flex:0 0 auto;
                        border-bottom:1px dotted var(--line); }
.zf-datos-partido .eq:hover { color:var(--accent); border-bottom-color:var(--accent); }
.zf-datos-partido .vs { font-size:11.5px; color:var(--muted); }
.zf-datos-partido .liga { font-size:11.6px; color:var(--muted); text-align:right; }

/* El dato del partido. `grid-column:1/-1` porque la tarjeta es una grilla de tres
   columnas y sin eso el dato entraría como una cuarta celda, apretado contra la liga.
   Va como renglón propio, debajo de una línea de puntos, para que se lea como nota al
   pie del partido y no como parte del encabezado. */
.zf-datos-dest { grid-column:1/-1; margin-top:9px; padding-top:9px;
                 border-top:1px dotted var(--line);
                 display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
.zf-datos-dest .k { font-size:10.5px; letter-spacing:.5px; text-transform:uppercase;
                    color:var(--muted); }
.zf-datos-dest .q { font-size:13px; font-weight:700; }
.zf-datos-dest .r { font-size:12.5px; }
/* width:100% lo baja a su propio renglón: el contexto (promedio, liga, últimos 7) es
   letra chica de apoyo, y compitiendo en la misma línea le robaba peso al hecho. */
.zf-datos-dest .p { width:100%; font-size:11.4px; color:var(--muted); }

.zf-datos-arb { display:grid; grid-template-columns:minmax(0,1fr) 70px 90px 90px; gap:10px; align-items:center;
                width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
                background:var(--card); border:1px solid var(--line); border-radius:3px; padding:10px 14px; }
.zf-datos-arb:hover { border-color:var(--accent); }
.zf-datos-arb.cab { background:none; border-color:transparent; cursor:default; padding-bottom:0;
                    font-size:11.4px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.zf-datos-arb .nm .t { font-size:14px; font-weight:700; }
.zf-datos-arb .nm .s { font-size:11.6px; color:var(--muted); margin-top:2px; }
.zf-datos-arb .n { font-size:14px; font-weight:700; text-align:center; }
.zf-datos-arb.cab .n { font-weight:400; }

.zf-datos-ficha .nm { font-size:26px; font-weight:800; letter-spacing:-.6px; }
.zf-datos-ficha .s { font-size:13px; color:var(--muted); margin-top:4px; }
.zf-datos-sub { font-size:11.8px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.zf-datos-cajas { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
/* la ficha de árbitro muestra tres promedios, no cinco: con la grilla de cinco quedaban
   tres cajas apretadas contra la izquierda y dos huecos al costado */
.zf-datos-cajas.tres { grid-template-columns:repeat(3,minmax(0,1fr)); }
.zf-datos-cajas .caja { background:var(--card); border:1px solid var(--line); border-radius:3px;
                        padding:12px 8px; text-align:center; }
.zf-datos-cajas .caja .n { font-size:22px; font-weight:800; }
.zf-datos-cajas .caja .l { font-size:11.2px; color:var(--muted); margin-top:3px; }

.zf-datos-partido-det { background:var(--card); border:1px solid var(--line); border-radius:3px; padding:var(--sp-4); }
.zf-datos-partido-det .enc { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.zf-datos-partido-det .res { font-size:22px; font-weight:800; }
.zf-datos-partido-det .q .r { font-size:14px; font-weight:600; }
.zf-datos-partido-det .q .f { font-size:11.6px; color:var(--muted); margin-top:2px; }
/* width:auto por lo mismo que .eq: el <button> del proyecto se estira solo */
.zf-datos-partido-det .arb { margin-left:auto; font:inherit; font-size:12.4px; cursor:pointer; color:var(--muted);
                             background:none; border:1px solid var(--line); border-radius:999px;
                             padding:5px 12px; width:auto; flex:0 0 auto; }
.zf-datos-partido-det .arb:hover { color:var(--accent); border-color:var(--accent); }
.zf-datos-partido-det .stats-cab { font-size:11.4px; letter-spacing:.5px; text-transform:uppercase;
                                   color:var(--muted); margin:14px 0 6px; }
.zf-datos-partido-det .stats { display:flex; flex-direction:column; gap:4px; max-width:430px; }
.zf-datos-partido-det .st { display:grid; grid-template-columns:minmax(0,1fr) 60px 60px; gap:8px;
                            font-size:13.4px; padding:5px 0; border-top:1px solid var(--line); }
.zf-datos-partido-det .st .l { color:var(--muted); }
.zf-datos-partido-det .st .a { font-weight:700; text-align:center; }
.zf-datos-partido-det .st .b { text-align:center; color:var(--muted); }

.zf-datos-acts { display:flex; }
.zf-datos-vacio { background:var(--card); border:1px solid var(--line); border-radius:3px;
                  padding:var(--sp-5); text-align:center; color:var(--muted); font-size:13.6px; }
.zf-datos-vacio .t { font-size:16px; font-weight:700; color:var(--fg); margin-bottom:6px; }
.zf-datos-pie { font-size:11.8px; color:var(--muted); text-align:center; }

@media (max-width:700px) {
  /* Los chips en varias filas empujaban el primer partido fuera de la pantalla: con las
     15 ligas eran SIETE renglones antes de ver un solo partido. En angosto van en una
     fila que se desliza, y el corte al borde derecho es lo que avisa que hay más. */
  .zf-datos-filtro .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px;
                            scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .zf-datos-filtro .chip { flex:0 0 auto; }
  .zf-datos-partido { grid-template-columns:52px minmax(0,1fr); }
  .zf-datos-partido .liga { grid-column:1 / 3; text-align:left; }
  .zf-datos-arb { grid-template-columns:minmax(0,1fr) 52px 62px 62px; gap:6px; }
  .zf-datos-cajas { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ==================================================================================
   ESCALONADO DE LISTAS
   ----------------------------------------------------------------------------------
   Cuando ENTRÁS a una sección, las filas aparecen una detrás de otra en vez de todas
   de golpe. Es decorativo y por eso está atado a la entrada: `body.sin-entrada` lo
   apaga, así no se repite en cada clic dentro de la misma pantalla — verlo cien veces
   por día sería insoportable y haría sentir lenta la página.

   Retardos cortos (45 ms) y sólo las primeras seis filas: de ahí para abajo ya estás
   scrolleando y el escalonado se convertiría en una espera.
   ================================================================================== */
@keyframes zfEntraFila { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

body:not(.sin-entrada) .zf-noticias > *,
body:not(.sin-entrada) .zf-datos-lista > * {
  animation:zfEntraFila .34s var(--sal) both;
}
body:not(.sin-entrada) .zf-noticias > :nth-child(1),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(1) { animation-delay:0ms; }
body:not(.sin-entrada) .zf-noticias > :nth-child(2),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(2) { animation-delay:45ms; }
body:not(.sin-entrada) .zf-noticias > :nth-child(3),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(3) { animation-delay:90ms; }
body:not(.sin-entrada) .zf-noticias > :nth-child(4),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(4) { animation-delay:135ms; }
body:not(.sin-entrada) .zf-noticias > :nth-child(5),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(5) { animation-delay:180ms; }
body:not(.sin-entrada) .zf-noticias > :nth-child(n+6),
body:not(.sin-entrada) .zf-datos-lista > :nth-child(n+6) { animation-delay:215ms; }

/* Quien pidió menos movimiento igual ve el cambio, pero sin desplazamiento ni espera:
   se queda el fundido y se van el traslado y el escalonado. Menos movimiento no es
   cero animación, es animación que no te mueve nada de lugar. */
@media (prefers-reduced-motion:reduce) {
  @keyframes zfEntraFila { from { opacity:0; } to { opacity:1; } }
  body:not(.sin-entrada) .zf-noticias > *,
  body:not(.sin-entrada) .zf-datos-lista > * { animation-delay:0ms !important; animation-duration:.2s; }
}

/* ---------- las semanas del escudo, dentro de la ventana de historial ---------- */
.esc-sem { display:flex; flex-direction:column; gap:5px; margin-bottom:var(--sp-4); }
.esc-sem-fila { display:grid; grid-template-columns:minmax(0,1fr) 62px 62px 74px; gap:8px;
                align-items:center; padding:9px 12px; border-radius:3px;
                background:#ffffff08; border:1px solid #ffffff12; font-size:13.4px; }
body.tema-claro .esc-sem-fila { background:#00000005; border-color:#00000012; }
.esc-sem-fila.on { border-color:#4fa3ff66; background:#4fa3ff12; }
body.tema-claro .esc-sem-fila.on { border-color:#4fa3ff77; background:#4fa3ff1a; }
.esc-sem-fila .s { font-weight:700; }
.esc-sem-fila .n { font-weight:800; text-align:center; }
.esc-sem-fila .p, .esc-sem-fila .d { color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:560px) {
  .esc-sem-fila { grid-template-columns:minmax(0,1fr) 54px 54px; }
  .esc-sem-fila .d { display:none; }
}

/* ==================================================================================
   COSAS ABURRIDAS — privacidad y términos
   ----------------------------------------------------------------------------------
   Es la única pantalla de la página que es puro texto largo, así que es la única que
   necesita una medida de lectura: el cuerpo se corta en 66 caracteres y no acompaña el
   ancho de 1080px del resto. Una línea de 1080px de política de privacidad no la lee
   nadie, y el problema no sería el texto sino el renglón.
   ================================================================================== */
.zf-legal { max-width:1080px; margin:0 auto; }

.zf-legal-atras {
  background:none; border:0; padding:0; margin:0 0 var(--sp-4);
  font:inherit; font-size:13px; color:var(--muted); cursor:pointer;
}
.zf-legal-atras:hover { color:var(--accent); }

.zf-legal-fecha {
  font-size:var(--fs-xs); color:var(--muted); letter-spacing:.02em;
  margin:-4px 0 var(--sp-5);
}

.zf-legal-cuerpo { max-width:66ch; }

/* El número de sección lo pone el JS, no un contador de CSS: los documentos se leen
   salteados y en un enlace que alguien pasa por WhatsApp hace falta poder decir "el 8". */
.zf-legal-cuerpo h2 {
  font-size:15.5px; font-weight:700; color:var(--text);
  margin:var(--sp-6) 0 var(--sp-2); letter-spacing:-.2px;
}
.zf-legal-cuerpo h2:first-child { margin-top:0; }

.zf-legal-cuerpo p {
  font-size:var(--fs-m); line-height:1.7; color:var(--muted);
  margin:0 0 var(--sp-3);
}

.zf-legal-cuerpo .lista {
  margin:0 0 var(--sp-3); padding:0; list-style:none;
  border-left:2px solid var(--line);
}
.zf-legal-cuerpo .lista li {
  font-size:var(--fs-m); line-height:1.65; color:var(--muted);
  padding:0 0 0 var(--sp-4); margin:0 0 var(--sp-2);
}
.zf-legal-cuerpo .lista li:last-child { margin-bottom:0; }

.zf-legal-pie {
  max-width:66ch; margin:var(--sp-6) 0 0; padding:var(--sp-4);
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--clay);
  border-radius:3px; font-size:var(--fs-s); line-height:1.6; color:var(--muted);
}
.zf-legal-pie a { color:var(--accent); }

/* Ancho automático y a la izquierda: es una salida, no la acción de la pantalla. Sin el
   width:auto el botón se estiraba a los 1080px y pesaba más que el documento. */
.zf-legal-volver {
  display:block; width:auto; margin:var(--sp-6) 0 0;
}