/* =====================================================================
   RED DE RESIDUOS DE LA EMERGENCIA · Reciclamores
   Estilos compartidos por index.html, directorio.html, datos.html
   y moderar.html.

   No hay compilación: es CSS a mano, servido tal cual.
   ===================================================================== */

/* =====================================================================
   PALETA · una sola, de día

   No hay modo oscuro, y es a propósito. Esto se usa de día, en la calle,
   con el teléfono a pleno sol y a menudo por gente que no eligió el modo
   oscuro sino que se lo puso el sistema. Respetarlo hacía que la
   herramienta pareciera otra cosa. Una sola paleta clara también quita de
   en medio toda una clase de fallos: la anterior tenía el modo oscuro roto
   porque un bloque olvidaba dos tokens, y el texto quedaba casi invisible.

   Blanco, azul y pasteles. Todo el texto llega al mínimo de la norma de
   accesibilidad —4,5:1, y 3:1 en titulares grandes— y se comprueba solo
   en pruebas/navegador.mjs, midiendo sobre la página ya pintada.

   Si algún día hace falta modo oscuro, hay que definir TODOS estos tokens
   en el bloque nuevo. Hay una prueba que lo exige.
   ===================================================================== */
:root{
  color-scheme: light;

  /* fondos: papel con un punto de azul, para que no sea un blanco de oficina */
  --paper:#F4F8FC; --surface:#FFFFFF; --surface-2:#E9F1F9;
  /* texto */
  --ink:#16283C; --ink-2:#39536F; --ink-3:#516B87;
  /* líneas: `--line` separa por dentro, `--line-strong` dibuja el borde de
     una pieza (tarjeta, ficha, campo) */
  --line:#CBDDEC; --line-strong:#6E8DAA;
  /* azul de marca */
  --deep:#0F5E9C; --deep-ink:#0B4676;
  --sobre-deep:#FFFFFF;
  /* acento pastel: relleno claro, texto oscuro encima */
  --hivis:#BFE3F5; --hivis-ink:#0A3E63;
  /* estados, en pastel */
  --danger:#9C2118; --danger-bg:#FDEDEB;
  --warn:#7A4C0A;   --warn-bg:#FCF3E2;
  --ok:#0F6647;     --ok-bg:#E5F4ED;
  --focus:#0F5E9C;

  /* UN COLOR POR TIPO. El mismo en el formulario, en el directorio y en la
     moderación. `--t-*-ink` es el texto que va sobre `--t-*-bg`. */
  --t-rep:#B25A00; --t-rep-bg:#FDF0E0; --t-rep-ink:#7A3D00;
  --t-vol:#7048B0; --t-vol-bg:#F2EBFC; --t-vol-ink:#4E2E80;
  --t-pun:#0F5E9C; --t-pun-bg:#E4F0FA; --t-pun-ink:#0B4676;

  --r:10px; --maxw:44rem;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1rem 4rem}

/* ---------- header ----------
   Antes era una franja azul muy oscura. Era lo primero que se veía y lo
   que más pesaba en la impresión de conjunto. Ahora es papel, con el
   acento pastel sujetándola por abajo. */
.top{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:3px solid var(--hivis);
  box-shadow:0 1px 0 var(--line);
}
.top-in{
  max-width:var(--maxw); margin:0 auto; padding:.7rem 1rem;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.mark{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1rem;
  letter-spacing:.02em; color:var(--deep-ink); line-height:1.2;
}
.mark span{display:block; font-size:.66rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.proto{
  margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--hivis); color:var(--hivis-ink);
  padding:.25rem .5rem; border-radius:3px; font-weight:500;
}

/* ---------- type ---------- */
h1,h2,h3{font-family:Archivo,system-ui,sans-serif; text-wrap:balance; margin:0}
h1{font-size:1.5rem; font-weight:700; line-height:1.2; letter-spacing:-.01em}
h2{font-size:1.15rem; font-weight:700; line-height:1.25}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.lede{color:var(--ink-2); font-size:.95rem}
.fine{font-size:.82rem; color:var(--ink-3)}

/* ---------- home ---------- */
.intro{padding:1.6rem 0 1.1rem; display:flex; flex-direction:column; gap:.6rem}
.cards{display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem}
.card{
  display:flex; gap:.9rem; align-items:flex-start; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line-strong); border-left:4px solid var(--deep);
  border-radius:var(--r); padding:1rem; cursor:pointer; color:inherit;
  font:inherit; transition:border-color .12s, transform .12s;
}
.card:hover{border-color:var(--line-strong); border-left-color:var(--hivis)}
.card:active{transform:translateY(1px)}
.card-n{
  font-family:"IBM Plex Mono",monospace; font-size:.8rem; font-weight:500;
  color:var(--deep); flex:none; padding-top:.1rem;
}
.card h2{margin-bottom:.15rem}
.card p{margin:0; font-size:.87rem; color:var(--ink-2)}

/* ---------- notices ---------- */
.note{
  border-radius:var(--r); padding:.85rem 1rem; font-size:.87rem;
  border:1px solid; display:flex; flex-direction:column; gap:.4rem;
}
.note h3{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-family:"IBM Plex Mono",monospace; font-weight:500}
.note ul{margin:.1rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem}
.note-warn{background:var(--warn-bg); border-color:var(--warn); color:var(--warn)}
.note-danger{background:var(--danger-bg); border-color:var(--danger); color:var(--danger)}
.note-ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.note-plain{background:var(--surface-2); border-color:var(--line-strong); color:var(--ink-2)}
.note strong{color:inherit}

/* ---------- forms ---------- */
.view{display:none}
.view.on{display:block}
.back{
  background:none; border:none; color:var(--deep); font:inherit; font-size:.85rem;
  padding:.9rem 0 .3rem; cursor:pointer; display:flex; align-items:center; gap:.35rem;
}
form{display:flex; flex-direction:column; gap:1.05rem; margin-top:1.1rem}
.field{display:flex; flex-direction:column; gap:.35rem}
label{font-weight:600; font-size:.88rem; line-height:1.35}
.hint{font-size:.78rem; color:var(--ink-3)}
.req{color:var(--danger); font-weight:400}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%; padding:.7rem .75rem; font:inherit; font-size:1rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:8px;
}
textarea{min-height:5rem; resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
}
.check{
  display:flex; gap:.6rem; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:.8rem;
}
.check input{margin-top:.25rem; width:1.15rem; height:1.15rem; flex:none; accent-color:var(--deep)}
.check label{font-weight:400; font-size:.85rem}

/* GPS */
.gps{display:flex; flex-direction:column; gap:.5rem}
.gps-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--hivis); color:var(--hivis-ink); border:none; border-radius:8px;
  padding:.95rem; font-family:Archivo,sans-serif; font-weight:700; font-size:.95rem;
  cursor:pointer; letter-spacing:.01em;
}
.gps-out{
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; font-variant-numeric:tabular-nums;
  background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:8px;
  padding:.7rem; color:var(--ink-2); word-break:break-all;
}
.gps-out.set{border-style:solid; border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}

.submit{
  background:var(--deep); color:var(--sobre-deep); border:none; border-radius:8px; padding:1rem;
  font-family:Archivo,sans-serif; font-weight:700; font-size:1rem; cursor:pointer;
}
.submit:active{transform:translateY(1px)}

/* result */
.rowout{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  overflow-x:auto; margin-top:.9rem;
}
table{border-collapse:collapse; font-size:.8rem; width:100%}
th,td{text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.68rem; letter-spacing:.06em;
   text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
td{color:var(--ink)}
tr:last-child th,tr:last-child td{border-bottom:none}

.hidden{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =====================================================================
   A PARTIR DE AQUÍ: pantallas añadidas después del prototipo
   (directorio público, aviso de datos, moderación)
   ===================================================================== */

/* ---------- pie y navegación entre páginas ---------- */
.pie{
  margin-top:2.5rem; padding-top:1.1rem; border-top:1px solid var(--line-strong);
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:baseline;
}
.pie a{color:var(--deep); font-size:.85rem}
.pie .fine{width:100%; margin:.3rem 0 0}
.volver{
  display:inline-flex; align-items:center; gap:.35rem; color:var(--deep);
  font-size:.85rem; text-decoration:none; padding:.9rem 0 .3rem;
}
.volver:hover{text-decoration:underline}

/* ---------- prosa larga (aviso de datos) ---------- */
.prosa{max-width:38rem}
.prosa h2{margin:2rem 0 .5rem}
.prosa h3{font-size:.95rem; margin:1.3rem 0 .3rem}
.prosa p,.prosa li{font-size:.92rem; color:var(--ink-2)}
.prosa ul,.prosa ol{padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem}
.prosa a{color:var(--deep)}
.prosa dl{margin:.6rem 0; display:flex; flex-direction:column; gap:.7rem}
.prosa dt{font-weight:600; font-size:.88rem; color:var(--ink)}
.prosa dd{margin:.15rem 0 0; font-size:.9rem; color:var(--ink-2)}
.indice{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:.9rem 1rem; margin:1.2rem 0;
}
.indice ol{margin:.4rem 0 0; gap:.25rem}
.indice li{font-size:.87rem}

/* ---------- pestañas ---------- */
.tabs{
  display:flex; gap:.3rem; margin:1.2rem 0 .2rem; overflow-x:auto;
  border-bottom:1px solid var(--line-strong); padding-bottom:0;
}
.tab{
  background:none; border:none; border-bottom:3px solid transparent;
  font:inherit; font-size:.87rem; font-weight:600; color:var(--ink-3);
  padding:.6rem .7rem; cursor:pointer; white-space:nowrap;
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--hivis)}
.tab .n{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500;
  background:var(--surface-2); color:var(--ink-2);
  padding:.05rem .35rem; border-radius:99px; margin-left:.3rem;
}

/* ---------- filtros ---------- */
.filtros{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0;
}
.filtros .field{flex:1 1 11rem; gap:.25rem}
.filtros label{font-size:.75rem; font-family:"IBM Plex Mono",monospace;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.filtros select,.filtros input{padding:.55rem .6rem; font-size:.92rem}

/* ---------- fichas de resultado ---------- */
.lista{display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; min-width:0}
.ficha{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  border-left:4px solid var(--line-strong); padding:.95rem 1rem;
  min-width:0; overflow-wrap:break-word;
}
.ficha.pendiente{border-left-color:var(--warn)}
.ficha.publicada{border-left-color:var(--ok)}
.ficha.peligro{border-left-color:var(--danger)}
.ficha h3{font-size:1rem; margin-bottom:.15rem}
.ficha-meta{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.05em;
  color:var(--ink-3); text-transform:uppercase; margin-bottom:.45rem;
}
.ficha dl{
  /* `minmax(0,1fr)` y no `1fr`: sin esto, una palabra larga sin espacios
     (un enlace pegado, un texto escrito de corrido) ensancha la rejilla
     y empuja la página entera a lo ancho en un teléfono. */
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem .8rem;
  margin:.5rem 0 0; font-size:.85rem;
}
.ficha dt{color:var(--ink-3); white-space:nowrap}
.ficha dd{margin:0; color:var(--ink); overflow-wrap:anywhere; min-width:0}
.ficha .acciones{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem;
  padding-top:.75rem; border-top:1px solid var(--line);
}
.ficha img{
  max-width:100%; border-radius:8px; margin-top:.6rem; border:1px solid var(--line);
}

/* ---------- etiquetas ---------- */
.pill{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  padding:.18rem .45rem; border-radius:3px; border:1px solid;
  background:var(--surface-2); border-color:var(--line); color:var(--ink-2);
}
.pill-ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.pill-warn{background:var(--warn-bg); border-color:var(--warn); color:var(--warn)}
.pill-danger{background:var(--danger-bg); border-color:var(--danger); color:var(--danger)}

/* ---------- botones secundarios ---------- */
.btn{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  border-radius:8px; padding:.55rem .85rem; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
}
.btn:hover{border-color:var(--deep)}
.btn:disabled{opacity:.5; cursor:default}
.btn-ok{background:var(--deep); border-color:var(--deep); color:var(--sobre-deep)}
.btn-danger{border-color:var(--danger); color:var(--danger)}

/* ---------- estados vacíos y de carga ---------- */
.vacio{
  text-align:center; padding:2.5rem 1rem; color:var(--ink-3); font-size:.9rem;
  border:1px dashed var(--line-strong); border-radius:var(--r); margin-top:1rem;
}
.cargando{color:var(--ink-3); font-size:.88rem; padding:1.4rem 0}

/* ---------- caja de acceso ---------- */
.acceso{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:1.3rem; margin-top:1.4rem; display:flex; flex-direction:column; gap:.9rem;
}
.sesion{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-size:.82rem; color:var(--ink-3); margin-top:.9rem;
}
.sesion .quien{font-family:"IBM Plex Mono",monospace; color:var(--ink-2)}
.sesion button{margin-left:auto}


/* =====================================================================
   TIPOS DE SEÑALIZACIÓN
   Una clase pone el color del tipo en tres variables locales, y de ahí lo
   leen la tarjeta, la ficha y la pestaña. Así el color vive en un sitio y
   no hay que acordarse de cambiarlo en tres archivos.
   ===================================================================== */
.t-reportes    { --t:var(--t-rep); --t-bg:var(--t-rep-bg); --t-ink:var(--t-rep-ink); }
.t-voluntarios { --t:var(--t-vol); --t-bg:var(--t-vol-bg); --t-ink:var(--t-vol-ink); }
.t-puntos      { --t:var(--t-pun); --t-bg:var(--t-pun-bg); --t-ink:var(--t-pun-ink); }

/* El color del tipo tiñe la pieza entera, no sólo el borde. Con la franja
   sola de tres milímetros había que buscarla; con el fondo se distingue de
   un vistazo y desde lejos, que es como se mira un teléfono en la calle. */
.card{
  background:var(--t-bg, var(--surface));
  border-color:var(--t, var(--line-strong));
  border-left-color:var(--t, var(--deep));
}
.card:hover{border-color:var(--t, var(--deep))}
.card h2, .card p{color:var(--t-ink, var(--ink))}
.card-n{
  color:var(--t-ink, var(--deep)); background:var(--surface);
  border:1px solid var(--t, var(--line-strong));
  border-radius:6px; padding:.15rem .4rem; align-self:flex-start;
}

/* Cabecera de cada formulario y de cada pantalla del directorio. */
.cinta{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--t-bg, var(--surface-2)); color:var(--t-ink, var(--ink-2));
  border:1px solid var(--t, var(--line-strong));
  border-radius:99px; padding:.25rem .7rem; margin-bottom:.6rem;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}

/* Ficha: el fondo entero dice de qué tipo es. */
.ficha{
  background:var(--t-bg, var(--surface));
  border-color:var(--t, var(--line-strong));
  border-left-color:var(--t, var(--line-strong));
}
/* Sobre el fondo teñido, el texto secundario necesita su propio tono: el
   gris de siempre se pierde contra el pastel. */
.ficha dt, .ficha .ficha-meta{color:var(--t-ink, var(--ink-3)); opacity:.85}
.ficha dd, .ficha h3{color:var(--t-ink, var(--ink))}
/* Lo que va dentro (avisos, foto, campos del formulario) se levanta sobre
   el fondo del papel para que no se confunda con la ficha. */
.ficha input, .ficha select, .ficha textarea{background:var(--surface)}
.ficha .acciones{border-top-color:var(--t, var(--line))}

/* Pestaña activa: subrayada en el color de su tipo. */
.tab[aria-selected="true"]{border-bottom-color:var(--t, var(--hivis))}
.tab[aria-selected="true"] .n{background:var(--t-bg, var(--surface-2)); color:var(--t-ink, var(--ink-2))}

/* Etiqueta del tipo: en negativo sobre la ficha teñida, para que se lea.
   Si usara `--t-bg` como fondo desaparecería dentro de su propia ficha. */
.pill-tipo{background:var(--surface); border-color:var(--t); color:var(--t-ink)}

/* =====================================================================
   ENLACES A CADA PANTALLA DEL DIRECTORIO
   Uno por tipo, con el color del tipo. Son enlaces de verdad a páginas
   distintas, no pestañas: así se pueden compartir por separado y se
   puede volver atrás.
   ===================================================================== */
.enlaces{display:flex; flex-direction:column; gap:.7rem; margin:1.2rem 0}
.enlaces-t{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin:0 0 .2rem;
}
.enlace-tipo{
  display:flex; flex-direction:column; gap:.15rem;
  background:var(--t-bg, var(--surface));
  border:1px solid var(--t, var(--line-strong));
  border-left-width:5px;
  border-radius:var(--r); padding:.85rem 1rem; text-decoration:none;
}
.enlace-tipo:hover{border-color:var(--t, var(--deep)); text-decoration:none}
.enlace-tipo-t{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:1rem;
  color:var(--t-ink, var(--ink)); line-height:1.25;
}
.enlace-tipo-d{font-size:.85rem; color:var(--t-ink, var(--ink-2)); opacity:.9}

/* Cuántos resultados hay. Nunca se queda en blanco: si la consulta falla
   lo dice, en vez de dejar un número viejo al lado de una lista vacía. */
.cuenta{
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.06em;
  color:var(--ink-3); margin:.2rem 0 0;
}

/* =====================================================================
   FICHAS PLEGADAS
   Cada una ocupa una línea hasta que se abre. Con <details> lo hace el
   navegador: sin JavaScript, con teclado y con lector de pantalla.
   ===================================================================== */
details.ficha{padding:0}
details.ficha > summary{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding:.75rem 1rem; cursor:pointer; list-style:none;
}
details.ficha > summary::-webkit-details-marker{display:none}
details.ficha > summary::before{
  content:'▸'; flex:none; color:var(--t-ink, var(--ink-3));
  font-size:.8rem; line-height:1.6; transition:transform .12s;
}
details.ficha[open] > summary::before{transform:rotate(90deg)}
details.ficha > summary:hover{background:rgba(0,0,0,.02)}
details.ficha > summary:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.sum-t{
  font-family:Archivo,system-ui,sans-serif; font-weight:700; font-size:.95rem;
  color:var(--t-ink, var(--ink)); flex:1 1 10rem; min-width:0;
}
.sum-p{display:flex; gap:.3rem; flex-wrap:wrap}
.ficha-cuerpo{padding:0 1rem 1rem; border-top:1px solid var(--t, var(--line))}
.ficha-cuerpo dl{margin-top:.7rem}

/* ---------- casillas de estado ---------- */
.estados{
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:.7rem .9rem .85rem; margin:1.1rem 0 .2rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.5rem;
}
.estados legend{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:0 .35rem;
}
.estados label{
  display:flex; align-items:center; gap:.5rem;
  font-weight:400; font-size:.87rem; cursor:pointer;
}
.estados input{width:1.15rem; height:1.15rem; flex:none; accent-color:var(--deep)}

/* =====================================================================
   PREGUNTAR DENTRO DE LA PÁGINA
   No se usa confirm(): el navegador ofrece silenciarlo para siempre y
   entonces los botones de borrar dejan de funcionar sin avisar.
   ===================================================================== */
.dialogo-fondo{
  position:fixed; inset:0; z-index:100; background:rgba(14,32,50,.45);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.dialogo{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:1.2rem; max-width:26rem; width:100%;
  box-shadow:0 12px 32px rgba(14,32,50,.2);
}
.dialogo h2{font-size:1.05rem; margin-bottom:.5rem; color:var(--ink)}
.dialogo p{margin:0; font-size:.9rem; color:var(--ink-2)}
.dialogo-btns{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.1rem; flex-wrap:wrap}
.dialogo-btns .btn{padding:.6rem 1rem}

/* =====================================================================
   MENÚ DE SECCIONES
   Cuatro enlaces bajo la cabecera, cada uno con el color de su tipo. El
   de la página en la que se está va relleno; el resto, en línea. En una
   pantalla estrecha la barra rueda a lo ancho por dentro, y por eso lleva
   `overflow-x` propio: el resto de la página nunca se desplaza.
   ===================================================================== */
.menu{
  position:sticky; top:0; z-index:19;
  background:var(--surface); border-bottom:1px solid var(--line-strong);
  display:flex; gap:.3rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:.4rem .6rem; scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu-i{
  flex:none; text-decoration:none; white-space:nowrap;
  font-family:Archivo,system-ui,sans-serif; font-weight:600; font-size:.82rem;
  color:var(--t-ink, var(--ink-2));
  background:transparent; border:1px solid transparent;
  border-radius:99px; padding:.4rem .8rem;
}
.menu-i:hover{background:var(--t-bg, var(--surface-2)); text-decoration:none}
.menu-i[aria-current="page"]{
  background:var(--t-bg, var(--surface-2));
  border-color:var(--t, var(--line-strong));
  color:var(--t-ink, var(--ink));
}
.menu-i:focus-visible{outline:3px solid var(--focus); outline-offset:-2px}

/* La cabecera y el menú se pegan arriba uno debajo del otro. */
.top{box-shadow:none}