/* ══════════════════════════════════════════════════════════════════════════
   ESTILO.CSS — la piel de la web del manual.
   --------------------------------------------------------------------------
   ⚠️ NINGÚN COLOR SE ESCRIBE AQUÍ. Todos salen de `datos/paleta.css`, que
   genera `scripts/generar_web.js` desde `ui/marca.js`. Es la misma regla que
   el bot respeta en 43 archivos —«ningún literal de color fuera de marca.js»—
   y saltársela justo en la cara pública sería tener dos rosas: uno en los
   paneles y otro en la web, que es exactamente cómo se ve que son dos cosas.
   El único color que este archivo NO conoce es el acento de cada sección: lo
   trae el JSON y `manual.js` lo pone como `--acento` en el elemento, porque
   ahí el color es CONTENIDO (el verde es de Economía), no marca.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Las dos caras del club ────────────────────────────────────────────────
   Anton para rótulos y JetBrains Mono para los datos: las mismas dos que
   dibujan los paneles del bot. Se copian de `fuentes/` en el build, así que
   no hay una tercera versión de la tipografía que se pueda desincronizar.
   El texto corrido va en la fuente del sistema a propósito: Noto Sans pesa
   558 KB y el sistema ya trae algo que se le parece. `swap` para que la
   página se lea antes de que terminen de bajar. */
@font-face {
  font-family: 'Anton';
  src: url('fuentes/Anton-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fuentes/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --rotulo: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --texto-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --radio: 14px;
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* `clip` y no `hidden`: `overflow:hidden` en un ancestro convierte el
     elemento en contenedor de scroll y rompe el `position:sticky` de la
     barra de filtros, sin decir nada. */
  overflow-x: clip;
  font-family: var(--texto-base);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--marca-honda) 0%, transparent 55%),
    linear-gradient(180deg, var(--fondo-b) 0%, var(--fondo) 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.envoltorio { max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

a { color: var(--marca-suave); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marca); color: var(--fondo);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 0; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera { padding: clamp(36px, 7vw, 72px) 0 28px; }

.marca {
  font-family: var(--rotulo); letter-spacing: .22em; text-transform: uppercase;
  font-size: .8rem; color: var(--marca); margin: 0 0 10px;
}

.cabecera h1 {
  font-family: var(--rotulo); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: .98;
  margin: 0 0 14px; text-transform: uppercase;
  background: linear-gradient(100deg, var(--texto) 20%, var(--marca-suave) 65%, var(--marca) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lema { margin: 0 0 26px; max-width: 56ch; color: var(--texto-suave); font-size: 1.03rem; }

/* ── Buscador ───────────────────────────────────────────────────────────── */
.buscador {
  position: relative; display: flex; align-items: center;
  max-width: 620px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
.buscador:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent);
}

.lupa {
  width: 20px; height: 20px; flex: none; margin-left: 18px;
  fill: none; stroke: var(--texto-tenue); stroke-width: 2; stroke-linecap: round;
}
.buscador:focus-within .lupa { stroke: var(--marca); }

#q {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--texto); font: inherit; font-size: 1.05rem;
  padding: 15px 12px;
}
#q::placeholder { color: var(--texto-tenue); }
#q::-webkit-search-cancel-button { display: none; }

#limpiar {
  flex: none; margin-right: 8px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--texto-tenue);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
#limpiar:hover { background: var(--borde); color: var(--texto); }

.pista { margin: 12px 2px 0; min-height: 1.4em; font-size: .9rem; color: var(--texto-suave); }
.pista b { color: var(--texto-suave); font-weight: 600; }
.pista kbd {
  font-family: var(--mono); font-size: .78rem; padding: 1px 6px;
  border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px;
  color: var(--texto-suave);
}

/* ── Filtros ────────────────────────────────────────────────────────────── */
/* Pegada arriba: con 22 secciones, tener que subir para cambiar de filtro es
   la diferencia entre un índice y una lista larga. El pseudo-elemento sangra
   el fondo a los lados porque `.filtros` también es `.envoltorio` y su ancho
   está limitado — sin él se vería el contenido pasando por los márgenes. */
.filtros {
  position: sticky; top: 0; z-index: 20;
  padding-block: 12px;
}
.filtros-tira { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros::before {
  content: ''; position: absolute; inset: 0 -100vw; z-index: -1;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.filtro {
  --acento: var(--marca);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-suave); font: inherit; font-size: .87rem;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.filtro:hover { color: var(--texto); border-color: var(--acento); }
.filtro[aria-pressed="true"] {
  color: var(--fondo); font-weight: 600;
  background: var(--acento); border-color: var(--acento);
}
.filtro .cuenta { font-size: .78rem; opacity: .65; font-variant-numeric: tabular-nums; }

/* ── Secciones y tarjetas ───────────────────────────────────────────────── */
main { padding-bottom: 72px; }

.seccion { scroll-margin-top: 76px; padding-top: 38px; }

.seccion-cabeza { margin-bottom: 16px; }

.seccion h2 {
  font-family: var(--rotulo); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  margin: 0 0 6px; color: var(--acento);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.seccion h2 .cuantos {
  font-family: var(--texto-base); font-size: .74rem; letter-spacing: .12em;
  color: var(--texto-suave); text-transform: uppercase;
}
.seccion-lema { margin: 0; color: var(--texto-suave); max-width: 68ch; font-size: .95rem; }
.seccion-nota {
  margin: 10px 0 0; padding-left: 12px; max-width: 68ch;
  border-left: 2px solid var(--acento);
  color: var(--texto-suave); font-size: .88rem;
}

.rejilla {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.tarjeta {
  position: relative; overflow: hidden;
  padding: 14px 16px 15px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .15s;
}
.tarjeta::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acento); opacity: 0; transition: opacity .15s;
}
.tarjeta:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); }
.tarjeta:hover::before { opacity: 1; }

.cmd {
  font-family: var(--mono); font-size: 1rem; color: var(--acento);
  overflow-wrap: anywhere;
}
.arg { font-family: var(--mono); font-size: .85rem; color: var(--texto-tenue); margin-left: 6px; }

.desc { margin: 7px 0 0; color: var(--texto-suave); font-size: .92rem; }

.alias { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.alias .etiqueta { font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; }
.alias code {
  font-family: var(--mono); font-size: .78rem;
  padding: 2px 7px; border-radius: 6px;
  background: var(--borde); color: var(--texto-suave);
}

/* De qué sección viene. Solo se pinta con la lista plana de una búsqueda:
   dentro de su sección lo diría el título justo encima. */
.tarjeta .procedencia {
  margin: 10px 0 0; font-size: .75rem; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .08em;
}
.tarjeta .procedencia::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--acento); vertical-align: middle;
}

/* ── Rincones: lo que el bot hace SIN comando ───────────────────────────── */
.rincones { margin-top: 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.rincon {
  padding: 14px 16px; border-radius: var(--radio);
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  border: 1px dashed var(--borde);
}
.rincon h3 { margin: 0 0 5px; font-size: .98rem; font-weight: 600; color: var(--texto); }
.rincon p { margin: 0; font-size: .89rem; color: var(--texto-suave); }
.sincomando {
  margin: 22px 0 0; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
}

/* ⚠️ `--texto-tenue` es el 40 % de opacidad del texto: sobre el fondo del
   club da 3,5:1, por debajo del 4,5:1 que pide el texto pequeño. Aquí casi
   todo lo pequeño es INFORMACIÓN —«26 comandos», «TAMBIÉN», de qué sección
   viene una tarjeta— así que va en `--texto-suave` (8:1). El tenue se queda
   para lo que de verdad es de fondo: el marcador de posición del buscador y
   los argumentos de un comando. Se vio midiendo, no mirando: en una pantalla
   buena y a oscuras los dos se leen igual. */

/* ── Texto en línea, estados ───────────────────────────────────────────── */
code {
  font-family: var(--mono); font-size: .9em;
  background: var(--borde); padding: 1px 5px; border-radius: 5px;
}
mark {
  background: color-mix(in srgb, var(--marca) 34%, transparent);
  color: var(--texto); border-radius: 3px; padding: 0 2px;
}

.cargando, .vacio, .error { padding: 48px 0; color: var(--texto-tenue); text-align: center; }
.vacio b { color: var(--texto); }
.vacio p { margin: 8px 0 0; }
.error { color: var(--aviso); }
.error code { color: var(--texto); background: var(--borde); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--borde); padding: 30px 0 56px; }
.pie p { margin: 0 0 8px; font-size: .86rem; color: var(--texto-suave); }
.pie .tenue { color: var(--texto-tenue); max-width: 70ch; }

/* ⚠️ En un teléfono, 23 chips envueltos son NUEVE filas, y la barra está
   pegada arriba: se llevaba casi la mitad de la pantalla a todas partes, con
   el manual asomando por debajo. Aquí pasa a ser una sola línea que se
   desliza, que es lo que hace cualquier app con más pestañas de las que
   caben. La máscara del borde derecho es lo que dice que hay más — sin ella
   parece que la lista se acaba en INTERACCIONES. */
@media (max-width: 720px) {
  .filtros-tira {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .filtros-tira::-webkit-scrollbar { display: none; }
  .filtro { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .rejilla, .rincones { grid-template-columns: 1fr; }
  .filtros { padding-block: 10px; }
  .filtros-tira { gap: 6px; }
  .filtro { font-size: .82rem; padding: 6px 11px; }
  .cabecera { padding-top: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES — /terminos y /privacidad
   --------------------------------------------------------------------------
   Las genera `scripts/generar_web.js` desde los dos `.md` de `web/legal/`, y
   comparten esta hoja con el manual a propósito: si el club cambia su rosa,
   cambian con él. Aquí tampoco se escribe ni un color — todos salen de
   `datos/paleta.css`, igual que arriba.

   ⚠️ ESTO SE LEE EN EL MÓVIL. No es una suposición: un enlace a la política
   de privacidad se pulsa desde Discord, y Discord se usa en el teléfono. De
   ahí las tres decisiones que mandan en este bloque: el texto es MÁS GRANDE
   que en el manual (1.05rem contra 1rem) y con más interlínea, la medida se
   corta en 70 caracteres porque una línea larga en una pantalla estrecha se
   pierde al saltar de renglón, y las tablas se deslizan solas en vez de
   desbordar la página.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ El documento es MÁS ESTRECHO que el manual, y las tres partes a la vez.
   El manual es una rejilla de tarjetas y aprovecha 1120 px; un texto seguido
   no: pasado el renglón de ~75 caracteres el ojo pierde el salto de línea.
   Se estrecha el `.envoltorio` entero —cabecera, texto y pie— en vez de solo
   el artículo, porque estrechando solo el texto el título quedaba alineado
   con un margen y el párrafo con otro, y la columna se veía descolgada a la
   izquierda de una pantalla vacía. */
.legal .envoltorio { max-width: 780px; }

/* ── Cabecera, más baja que la del manual ──────────────────────────────── */
.cabecera-legal { padding: clamp(28px, 5vw, 52px) 0 18px; }
.cabecera-legal h1 {
  font-family: var(--rotulo); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.02;
  font-size: clamp(1.9rem, 6vw, 3rem);
  margin: 0;
  background: linear-gradient(100deg, var(--texto) 25%, var(--marca-suave) 70%, var(--marca) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* El rótulo del club es el camino de vuelta al manual. En una página legal,
   que suele abrirse desde un enlace suelto, es la única salida que hay. */
.marca a { color: inherit; text-decoration: none; }
.marca a:hover { color: var(--marca-suave); }

/* ── Prosa ─────────────────────────────────────────────────────────────── */
.prosa {
  max-width: 70ch;
  padding-bottom: 24px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--texto-suave);
}
.prosa > p { margin: 0 0 1.15em; }
.prosa strong { color: var(--texto); font-weight: 600; }

/* `scroll-margin-top` es lo que hace que un enlace del índice no deje el
   título pegado al borde de arriba, con la primera línea medio tapada. */
.prosa h2 {
  scroll-margin-top: 20px;
  margin: 2.4em 0 .6em;
  padding-top: .9em;
  border-top: 1px solid var(--borde);
  font-family: var(--rotulo); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.15;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  color: var(--marca-suave);
}
.prosa h2:first-of-type { border-top: 0; padding-top: 0; }
.prosa h3 {
  scroll-margin-top: 20px;
  margin: 1.8em 0 .5em;
  font-size: 1.02rem; font-weight: 600; color: var(--texto);
}

.prosa ul, .prosa ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prosa li { margin-bottom: .5em; }
.prosa li::marker { color: var(--marca); }

.prosa a { color: var(--marca-suave); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--marca); }

.prosa hr { border: 0; border-top: 1px solid var(--borde); margin: 2em 0; }

.prosa blockquote {
  margin: 0 0 1.15em; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--marca);
  color: var(--texto-suave);
}

/* La línea de «última actualización»: es un dato, no prosa. */
.prosa .fecha {
  margin: -.4em 0 1.6em;
  font-family: var(--mono); font-size: .82rem;
  color: var(--texto-suave);
}
.prosa .fecha em { font-style: normal; }

/* ── El índice ─────────────────────────────────────────────────────────── */
/* Va delante de la primera sección, no del todo arriba: la entradilla dice
   de qué va el documento en tres líneas y enterrarla bajo catorce enlaces no
   ayuda a nadie. Numerado porque en un documento legal el número de la
   sección es la forma en que la gente se refiere a ella. */
.indice {
  margin: 0 0 1.6em;
  padding: 16px 20px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.indice-titulo {
  margin: 0 0 10px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}
.indice ol {
  margin: 0; padding: 0 0 0 1.4em;
  columns: 2; column-gap: 32px;
  font-size: .95rem;
}
.indice li { margin: 0 0 .38em; break-inside: avoid; }
.indice a { color: var(--texto-suave); text-decoration: none; }
.indice a:hover { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }

/* ── Tablas ────────────────────────────────────────────────────────────── */
/* ⚠️ El contenedor con scroll no es decoración: la tabla de «qué dato, para
   qué, dónde vive» tiene tres columnas, y en un teléfono o se desliza sola o
   empuja la página entera hacia los lados. `min-width` es lo que la obliga a
   deslizarse en vez de aplastar las columnas hasta una palabra por línea. */
.tabla-envuelta {
  margin: 0 0 1.4em;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}
.tabla-envuelta table {
  border-collapse: collapse;
  width: 100%; min-width: 460px;
  font-size: .92rem;
}
.tabla-envuelta th, .tabla-envuelta td {
  padding: 10px 14px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--borde);
}
.tabla-envuelta th {
  background: color-mix(in srgb, var(--marca) 12%, var(--superficie));
  color: var(--texto);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.tabla-envuelta tbody tr:last-child td { border-bottom: 0; }
.tabla-envuelta tbody tr:nth-child(even) { background: color-mix(in srgb, var(--superficie) 55%, transparent); }
.tabla-envuelta code { background: none; padding: 0; color: var(--marca-suave); }

/* ── Enlaces del pie ───────────────────────────────────────────────────── */
/* Los mismos tres en las tres páginas, y los emite `pieHtml()` en un solo
   sitio: escritos en cada página, la tercera vez que cambie una línea habría
   dos versiones distintas y nadie se daría cuenta. */
.pie-enlaces {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-bottom: 14px;
  font-size: .9rem;
}
.pie-enlaces a { color: var(--texto-suave); text-decoration: none; }
.pie-enlaces a:hover { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
.pie-enlaces [aria-current="page"] { color: var(--marca); font-weight: 600; }

/* ── En el móvil ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Dos columnas de índice en una pantalla estrecha dan renglones de cuatro
     palabras partidas. Una sola columna se lee. */
  .indice ol { columns: 1; }
  .indice { padding: 14px 16px 16px; }
  .prosa { font-size: 1.02rem; line-height: 1.72; }
  /* La tabla ya no cabe: se avisa de que se desliza en vez de dejar que
     parezca cortada. */
  .tabla-envuelta { position: relative; }
}