/*
 * CWN · base.css — el sistema de diseño, una sola vez para las dos caras.
 *
 * Lo que manda: `docs/DISENO.md` (el sistema: trece grises, cinco canales, el peso significa
 * «se pulsa») y `docs/DISENO-CWN.md` (lo que una consola necesita y el sistema no dice: la
 * variante de densidad, los tres colores de estado, la regla del principal).
 *
 * Esta hoja trae los TOKENS y las PRIMITIVAS. `cwn.css` y `estudio.css` solo colocan: si en
 * una de ellas aparece un color o un tamaño de letra, está en el sitio equivocado.
 *
 * Sin compilación: Caddy lo sirve tal cual, como todo lo demás de esta carpeta.
 */

/* ═══════════════════════════════════════════════════════════ tipografía ══ */

/*
 * Las dos familias van con el sha256 del fichero en el nombre, para poder cachearlas un año
 * sin miedo: si cambia la fuente, cambia el nombre y nadie sirve una versión vieja.
 */
@font-face {
  font-family: 'Inter';
  src: url('fuentes/InterVariable.693b77d4.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Darker Grotesque';
  src: url('fuentes/DarkerGrotesque.ec8c460d.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── la escala (DISENO.md §2). Trece escalones, nombre por valor ── */
  --gray-000: #FFFFFF;
  --gray-050: #FAFAFA;
  --gray-100: #F2F2F2;
  --gray-150: #E8E8E8;
  --gray-200: #DBDBDB;
  --gray-300: #C4C4C4;
  --gray-400: #A6A6A6;
  --gray-500: #8C8C8C;
  --gray-600: #6E6E6E;
  --gray-700: #525252;
  --gray-800: #333333;
  --gray-900: #1A1A1A;
  --gray-950: #0D0D0D;

  /* ── capa semántica (DISENO.md §2.1) ── */
  --background:       var(--gray-100);
  --surface:          var(--gray-000);
  --surface-sunken:   var(--gray-150);
  --surface-inverted: var(--gray-900);

  --foreground:            var(--gray-900);
  --foreground-muted:      var(--gray-700);   /* dos niveles, no tres: DISENO-CWN.md §2 */
  --foreground-on-dark:    var(--gray-100);
  --foreground-on-dark-muted: var(--gray-400);

  --primary: var(--gray-900);
  --primary-foreground: var(--gray-000);
  --primary-hover:  var(--gray-800);
  --primary-activo: var(--gray-950);

  /* Los bordes son tinta con alfa, no un gris opaco: se adaptan al fondo (DISENO.md §2.1). */
  --border:        rgb(26 26 26 / .12);
  --border-strong: rgb(26 26 26 / .28);
  --input:         rgb(26 26 26 / .14);
  --overlay:       rgb(26 26 26 / .55);

  /*
   * Las superficies tenues, por el mismo motivo que los bordes: tinta con alfa y no un gris
   * opaco. Estaban escritas a mano treinta veces por las tres hojas —`rgb(26 26 26 / .06)`
   * repetido— y eso las ataba al papel: sobre fondo oscuro son invisibles. Con nombre, el
   * tema las redefine de una vez (21-ago-2026).
   */
  --tinta-01: rgb(26 26 26 / .04);   /* pozos tenues: cabecera de carpeta, barra de peso */
  --tinta-02: rgb(26 26 26 / .06);   /* el hover de una fila o de un botón fantasma */
  --tinta-03: rgb(26 26 26 / .08);   /* bandas y sombras planas */
  --tinta-04: rgb(26 26 26 / .12);   /* el control elegido */

  /* Velos: el fondo con alfa de lo que flota sobre otra cosa. La cabecera pegajosa (deja
     ver el contenido pasar por debajo) y el chip sobre una foto (que necesita tapar). */
  --velo:        rgb(242 242 242 / .85);
  --velo-fuerte: rgb(26 26 26 / .82);

  /*
   * ── los tres de estado (DISENO-CWN.md §3) ──
   * La única excepción al sistema, y solo en estados. Escalonados a propósito: el rojo es el
   * más oscuro, el ámbar va en medio y el verde es el más claro, para que más tinta siga
   * significando más urgencia incluso cuando el matiz no se distingue.
   */
  /*
   * Dos juegos, y la diferencia no es estética: el sistema pide 6,98 de contraste al TEXTO por
   * debajo de 16 px, y aquí casi todo el color de estado vive en chips de 12 y cifras de 13.
   * Un icono o un filete, en cambio, son objetos gráficos y les basta con 3.
   *
   *   · `--estado-*`        → puntos, iconos, bordes y filetes. Vivos, para que se vean de reojo.
   *   · `--estado-*-texto`  → cualquier PALABRA. Más oscuros, para que se lean.
   *
   * Hacer los tres tan oscuros como el texto exige habría dejado el verde en #175636, que ya
   * no se lee como verde; usar los vivos para todo incumplía la regla que el propio sistema
   * fija. La separación es la forma de tener las dos cosas.
   */
  --estado-mal:  #A2181D;   /* 6,99 sobre papel · como gráfico, de sobra */
  --estado-ojo:  #984F06;   /* 5,43 */
  --estado-bien: #217C4E;   /* 4,62 */

  --estado-mal-texto:  #7E1316;   /* 9,42 sobre papel · 8,60 sobre el pozo */
  --estado-ojo-texto:  #6E3905;   /* 8,34 · 7,62 */
  --estado-bien-texto: #175636;   /* 7,75 · 7,08 */
  --estado-mal-alto:  #E44C51;   /* sobre banda invertida */
  --estado-ojo-alto:  #C86808;
  --estado-bien-alto: #2BA166;

  /*
   * ── LA CUARTA TINTA: colección (21-ago-2026) ──
   *
   * Los tres de arriba son ESTADOS: dicen si algo va bien, reclama o está roto. Éste no dice
   * nada de eso — dice PROCEDENCIA: «esto viene de una colección del CMS, no se edita fila a
   * fila». Meterlo en el ámbar habría sido mentir (una carpeta de colección no reclama nada)
   * y dejarlo en gris lo habría hecho invisible, que es justo el problema que venía a
   * resolver: en el árbol, `/agora-ponente` con sus 36 ponentes se veía igual que `/2025`.
   *
   * Cián apagado por petición de Pablo: es la tinta con la que se reconoce Escriptorium, y
   * mantiene la familia de herramientas del estudio hablando el mismo idioma. Apagado de
   * verdad —saturación baja— para que no compita con el rojo ni con el ámbar, que sí son
   * reclamos y tienen que ganar siempre que aparezcan al lado.
   *
   * Entra en `AUTORIZADOS` de `_verificar-diseno-sistema.mjs` y en el inventario de
   * DISENO-CWN §3.1: una tinta nueva sin fila en el inventario es exactamente lo que el
   * verificador existe para impedir.
   */
  --coleccion:        #1B6F7C;   /* 5,26 sobre papel · marcos, filetes y el rótulo */
  --coleccion-texto:  #12525C;   /* 7,63 · para la palabra, que va a 12 px */
  --coleccion-alto:   #5EC5D4;   /* sobre fondo oscuro */
  --coleccion-fondo:  #E7F2F4;   /* la tinta de la fila: papel teñido, no color plano */

  /* ── medida ── */
  --paso: .25rem;
  --radio-control: 4px;
  --radio-campo: 6px;
  --radio-superficie: 12px;

  /* Las sombras NO usan `--tinta-*`: una sombra es siempre oscura, también en tema oscuro
     (donde además se apagan, porque sobre negro no se ven). */
  --sombra-1: 0 1px 2px rgb(26 26 26 / .08);
  --sombra-2: 0 8px 24px rgb(26 26 26 / .12);
  --sombra-3: 0 24px 48px rgb(26 26 26 / .18);

  /* ── movimiento (DISENO.md §10.1) ── */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);

  /* ── tipografía ── */
  --texto: 'Inter', system-ui, 'Segoe UI', sans-serif;
  --display: 'Darker Grotesque', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  color-scheme: light;
}

/*
 * ══════════════════════════════════════════════════════════════════════════════════════
 * TEMA OSCURO (21-ago-2026, pedido por Pablo con la propuesta A)
 *
 * Se redefine la CAPA SEMÁNTICA, nunca la escala: `--gray-900` sigue siendo #1A1A1A en los
 * dos temas, y lo que cambia es a qué apunta `--surface`. Por eso el tema entero cabe en un
 * bloque: cualquier componente que use los tokens —y todos los usan desde E8— viaja gratis.
 *
 * No es una inversión mecánica. Tres cosas se decidieron mirando, no calculando:
 *
 *  · La superficie NO es negra pura. El fondo es #0D0D0D y las superficies #171717: sin esa
 *    separación las tarjetas desaparecen, porque en oscuro no hay sombra que las levante.
 *  · Los estados usan los tonos ALTOS que ya existían para las bandas invertidas. El
 *    #A2181D del rojo sobre papel es ilegible sobre negro; el #E44C51 sí se lee. Los tres
 *    ya estaban en el sistema desde E8 — no se inventa color nuevo.
 *  · El botón principal se invierte: en claro es tinta sobre papel, en oscuro papel sobre
 *    tinta. Sigue siendo el único relleno lleno de la pantalla, que es lo que lo hacía
 *    principal (DISENO-CWN.md §5.2).
 *
 * `color-scheme` hace que el navegador vista de oscuro lo suyo: barras de scroll, campos
 * nativos, el fondo del `<select>` y el calendario del `<input type=date>`. Sin esa línea
 * quedan tres rectángulos blancos en mitad de la pantalla.
 * ══════════════════════════════════════════════════════════════════════════════════════
 */
:root[data-tema="oscuro"] {
  --background:       #0D0D0D;
  --surface:          #171717;
  --surface-sunken:   #101010;
  --surface-inverted: var(--gray-100);

  --foreground:               var(--gray-100);
  --foreground-muted:         var(--gray-400);
  --foreground-on-dark:       var(--gray-900);
  --foreground-on-dark-muted: var(--gray-700);

  --primary:            var(--gray-100);
  --primary-foreground: var(--gray-900);
  /* Invertidos: en oscuro el principal aclara al pasar por encima, no oscurece. */
  --primary-hover:  var(--gray-000);
  --primary-activo: var(--gray-300);

  /* Tinta clara con alfa, y un punto más de opacidad: sobre negro, el mismo .06 no se ve. */
  --border:        rgb(255 255 255 / .14);
  --border-strong: rgb(255 255 255 / .32);
  --input:         rgb(255 255 255 / .18);
  --overlay:       rgb(0 0 0 / .66);

  --velo:        rgb(13 13 13 / .85);
  --velo-fuerte: rgb(13 13 13 / .88);

  --tinta-01: rgb(255 255 255 / .05);
  --tinta-02: rgb(255 255 255 / .08);
  --tinta-03: rgb(255 255 255 / .10);
  --tinta-04: rgb(255 255 255 / .16);

  --estado-mal:  var(--estado-mal-alto);
  --estado-ojo:  var(--estado-ojo-alto);
  --estado-bien: var(--estado-bien-alto);
  --estado-mal-texto:  var(--estado-mal-alto);
  --estado-ojo-texto:  var(--estado-ojo-alto);
  --estado-bien-texto: var(--estado-bien-alto);

  /* La tinta de colección sube a su variante clara, y su fondo deja de ser papel teñido para
     ser un velo: sobre #171717 un #E7F2F4 sería una mancha blanca. */
  --coleccion:       var(--coleccion-alto);
  --coleccion-texto: var(--coleccion-alto);
  --coleccion-fondo: rgb(94 197 212 / .13);

  /* Sobre negro una sombra no se ve: lo que separa planos es el borde, ya subido arriba. */
  --sombra-1: none;
  --sombra-2: 0 8px 24px rgb(0 0 0 / .5);
  --sombra-3: 0 24px 48px rgb(0 0 0 / .6);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  /*
   * `ss02` no es opcional: sin él Inter no distingue la I de la l, y esta consola está llena
   * de slugs, hosts, rutas e identificadores donde eso importa (DISENO-CWN.md §1.1).
   * Y los números van tabulares en todas partes: casi todos viven en una columna.
   */
  font-feature-settings: 'ss02' 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* El navegador pone 700 en `b` y `strong`, y en este sistema 700 no se usa (DISENO.md §3.1). */
b, strong { font-weight: 600; }
/* Que no invente pesos ni cursivas que no cargamos. */
* { font-synthesis: none; }

h1, h2, h3, h4 { font-weight: 400; margin: 0; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
h2, h3 { font-size: 15px; line-height: 1.4; font-weight: 600; }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); }

a {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}
a:hover { text-decoration: underline; }

/* La microcopia tiene suelo: 13 px. Por debajo, el contraste exigido aplanaría la jerarquía. */
small, .secundario-txt { font-size: 13px; color: var(--foreground-muted); }

/* ── la display, solo en los cinco sitios de DISENO.md §3.2, y a x1,30 ── */
.display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
}
.logotipo   { font-family: var(--display); font-weight: 700; font-size: 36px; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.antetitulo { font-family: var(--display); font-weight: 600; font-size: 30px; text-transform: uppercase; line-height: 1.05; }

/* ═══════════════════════════════════════════════════════════════ foco ══ */

/*
 * El problema difícil de un sistema sin color (DISENO.md §11): un anillo gris sobre fondo gris
 * no se ve. La solución es geométrica — dos anillos con separación, de modo que SIEMPRE haya
 * un salto de blanco a negro en el borde, mire donde mire.
 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--surface);
}
/* En una fila de lista pegada a otra, el anillo por fuera pisa a la vecina: va por dentro. */
:where(.fila, .paleta-fila, .pestanas button, .conmutador button):focus-visible {
  outline-offset: -2px;
  box-shadow: none;
}
.invertida :focus-visible,
.banda-aviso :focus-visible {
  outline-color: var(--foreground-on-dark);
  box-shadow: 0 0 0 4px var(--surface-inverted);
}

/* Un enlace de salto, primero en el orden de tabulación (DISENO.md §11). */
.ir-al-contenido {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--surface-inverted);
  color: var(--foreground-on-dark);
  padding: 10px 16px;
  border-radius: var(--radio-control);
}
.ir-al-contenido:focus { left: 8px; top: 8px; }

/* ════════════════════════════════════════════════════════════ botones ══ */

/*
 * El convenio se invierte respecto al CSS viejo (DISENO-CWN.md §4): antes `<button>` pelado
 * ERA el principal, así que todo botón que generaba el JS nacía principal y había que
 * despintarlo a mano. Ahora pelado = secundario, y el principal se pide con `.principal`.
 * Una sola acción principal por pantalla; es la regla más estricta del sistema.
 */
button, .boton {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  min-height: 36px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
button:hover:not(:disabled), .boton:hover { background: var(--tinta-02); border-color: rgb(26 26 26 / .4); }
button:active:not(:disabled) { background: rgb(26 26 26 / .10); }

button.principal {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* El hover mueve 1px, no escala: un `scale()` sobre texto lo deja borroso a mitad de camino. */
button.principal:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
button.principal:active:not(:disabled) { background: var(--primary-activo); transform: none; }

button.terciario {
  border-color: transparent;
  padding-inline: 8px;
}
button.terciario:hover:not(:disabled) { background: transparent; text-decoration: underline; border-color: transparent; }

/*
 * El destructivo no puede ser rojo (no hay rojo para controles: el color es solo de estado),
 * así que se distingue por FRICCIÓN: icono obligatorio y verbo explícito en el rótulo.
 */
button.peligro { border-color: var(--foreground); }
button.peligro:hover:not(:disabled) { background: var(--tinta-03); }

button:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  border-color: transparent;
  cursor: not-allowed;
}
button.terciario:disabled { background: transparent; }

/* Un botón que se encoge al ponerse a trabajar descoloca la línea entera (DISENO.md §8.3). */
button.trabajando { min-width: var(--ancho-quieto, auto); }

/* ═════════════════════════════════════════════════════════════ campos ══ */

input, select, textarea {
  font: inherit;
  font-size: 14px;
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--input);
  border-radius: var(--radio-campo);
  padding: 8px 11px;
  min-height: 36px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--border-strong); }
::placeholder { color: var(--gray-500); }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--foreground); }
input[type="color"] { padding: 2px; height: 32px; width: 40px; min-height: 0; }
input[type="file"] { border: 0; padding: 0; }
label { display: block; }

/* La caja de texto con formato es un campo más, aunque por dentro sea contentEditable. */
.rico {
  min-height: 110px;
  background: var(--surface);
  border: 1px solid var(--input);
  border-radius: var(--radio-campo);
  padding: 10px 11px;
}
.rico:focus { border-color: var(--border-strong); }

/* ══════════════════════════════════════════════════════ superficies ══ */

.bloque {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio-campo);
  padding: 16px;
}
.bloque > h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 12px;
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio-campo);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tarjeta:hover { box-shadow: var(--sombra-1); transform: translateY(-2px); }

/* Listas densas: 32 px de fila en la consola, 36 en el Estudio (DISENO-CWN.md §2). */
.lista { display: grid; gap: 1px; }
.lista .fila {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lista .fila:first-child { border-radius: var(--radio-campo) var(--radio-campo) 0 0; }
.lista .fila:last-child  { border-radius: 0 0 var(--radio-campo) var(--radio-campo); }
.lista .fila:only-child  { border-radius: var(--radio-campo); }
.lista .crece { flex: 1; min-width: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th, .tabla-cabecera {
  background: var(--surface-sunken);
  font-weight: 600;
  text-align: left;
}
td, th { padding: 8px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }

/* La banda invertida, que es el acento del sistema. Como mucho dos por página. */
.invertida {
  background: var(--surface-inverted);
  color: var(--foreground-on-dark);
}
.invertida a, .invertida button { color: var(--foreground-on-dark); }

/* ══════════════════════════════════════════════════════════ estados ══ */

/*
 * Error, éxito y aviso son el punto donde un sistema acromático se rompe si no se resuelve
 * a conciencia (DISENO.md §12). Aquí hay color —es la excepción de CWN— pero el color es la
 * TERCERA copia del mensaje: la forma del icono y la palabra van siempre, porque los tres
 * colores, vistos en gris, se separan entre sí menos de 1,5 de contraste.
 */
.punto, .estado, .etiqueta, .chip { --tono: var(--gray-600); }
.punto.rojo, .estado.fallido, .etiqueta.rojo, .chip.rojo, .banda.rojo { --tono: var(--estado-mal); --tono-texto: var(--estado-mal-texto); }
.punto.ambar, .estado.pendiente, .etiqueta.ambar, .chip.ambar, .banda.ambar { --tono: var(--estado-ojo); --tono-texto: var(--estado-ojo-texto); }
.punto.verde, .estado.hecho, .etiqueta.verde, .chip.verde { --tono: var(--estado-bien); --tono-texto: var(--estado-bien-texto); }
.punto.gris, .etiqueta.gris { --tono: var(--gray-500); }

/*
 * El punto deja de ser un círculo de color y pasa a tener forma propia. Es el cambio que más
 * pesa de todo E8: son 86 en una portada de día malo, y hoy son lo único cuyo significado
 * vive entero en el matiz.
 */
.punto {
  width: 14px;
  height: 14px;
  flex: none;
  display: inline-block;
  background: var(--tono);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.punto.rojo  { --icono: url('iconos/mal.svg'); }
.punto.ambar { --icono: url('iconos/ojo.svg'); }
.punto.verde { --icono: url('iconos/bien.svg'); }
.punto.gris  { --icono: url('iconos/sin.svg'); }

.chip, .etiqueta, .estado {
  --tono-texto: var(--gray-700);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radio-control);   /* esquina dura: el sistema no tiene píldoras */
  color: var(--tono-texto);
  white-space: nowrap;
}
:is(.chip, .etiqueta, .estado).con-icono::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  /* El icono NO hereda el color del texto: es un gráfico y usa el tono vivo, que es lo que
     hace que la marca se vea sin leerla. */
  background: var(--tono);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.etiqueta.rojo, .estado.fallido, .chip.rojo { --icono: url('iconos/mal.svg'); border-width: 2px; border-color: var(--tono); }
.etiqueta.ambar, .chip.ambar { --icono: url('iconos/ojo.svg'); border-color: var(--tono); }
.etiqueta.verde, .estado.hecho, .chip.verde { --icono: url('iconos/bien.svg'); }
.estado.en_curso { --icono: url('iconos/curso.svg'); }
/* «Encolado» no es un aviso: es esperar. Círculo punteado y gris, no triángulo ámbar. */
.estado.pendiente { --icono: url('iconos/sin.svg'); --tono: var(--gray-600); }
/* El icono se pide con `.con-icono`, que pone el JS junto a la clase de nivel. */
.etiqueta.rojo, .etiqueta.ambar, .etiqueta.verde,
.estado.hecho, .estado.fallido, .estado.en_curso, .estado.pendiente,
.chip.rojo, .chip.ambar, .chip.verde { }
/* Lo neutro no lleva borde: es información, no reclamo (DISENO-CWN.md §3.2, regla 3). */
.etiqueta.gris { border-color: transparent; background: var(--tinta-02); color: var(--foreground-muted); }

/* Los mensajes de bloque: superficie, filete de 3 px, icono y palabra. */
.banda {
  --tono: var(--gray-600);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--tono);
  border-radius: var(--radio-campo);
  background: var(--surface);
}
.banda.rojo  { border-width: 2px; border-left-width: 3px; border-color: var(--estado-mal); }
.banda.ambar { background: var(--surface-sunken); border-color: var(--border-strong); border-left-color: var(--estado-ojo); }
.banda { --icono: url('iconos/info.svg'); }
.banda::before {
  content: '';
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  background: var(--tono);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.banda.rojo::before  { --icono: url('iconos/mal.svg'); }
.banda.ambar::before { --icono: url('iconos/ojo.svg'); }

/* El vacío, la nota y el «cargando» dejan de tener la misma ropa (DISENO-CWN.md §5.4). */
.vacio { color: var(--foreground-muted); font-size: 14px; }
.nota  { color: var(--foreground-muted); font-size: 13px; }
.cargando { color: var(--foreground-muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cargando::before {
  content: '';
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url('iconos/curso.svg') center / contain no-repeat;
  mask: url('iconos/curso.svg') center / contain no-repeat;
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════ capas ══ */

.pestanas {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.pestanas button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground-muted);
  border-bottom: 2px solid transparent;
  min-height: 40px;
}
.pestanas button:hover:not(:disabled) { background: var(--tinta-02); border-color: transparent; border-bottom-color: var(--border-strong); }
.pestanas button[aria-selected="true"], .pestanas button[aria-current="true"] {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}

.conmutador {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radio-campo);
}
.conmutador button {
  border: 0;
  min-height: 28px;
  padding: 4px 10px;
  /*
   * Un escalón más oscuro que el atenuado normal, y por una razón medible: el conmutador se
   * asienta sobre el POZO, no sobre el papel, y ahí `gray-700` cae a 6,38 — por debajo del
   * 6,98 que el sistema exige a un texto de 14 px. Lo que distingue la opción activa no es
   * este color: es la pastilla blanca con su sombra.
   */
  color: var(--foreground);
  background: transparent;
}
.conmutador button[aria-current="true"], .conmutador button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--sombra-1);
}

dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radio-superficie);
  box-shadow: var(--sombra-3);
  background: var(--surface);
  color: var(--foreground);
  padding: 0;
  max-width: min(34rem, 92vw);
}
dialog::backdrop { background: var(--overlay); }

/* El acordeón: `grid-template-rows` es la única forma limpia de animar hasta altura auto. */
details.plegable > summary { cursor: pointer; list-style: none; font-weight: 500; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: url('iconos/flecha.svg') center / contain no-repeat;
  mask: url('iconos/flecha.svg') center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-in-out);
}
details.plegable[open] > summary::before { transform: rotate(90deg); }

kbd {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radio-control);
  background: var(--surface);
}

/* El aviso flotante. El de error NO se cierra solo: se cierra a mano (DISENO-CWN.md §5.2). */
.aviso {
  --tono: var(--gray-600);
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(40rem, 92vw);
  padding: 10px 14px;
  background: var(--surface);
  color: var(--foreground);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--tono);
  border-radius: var(--radio-campo);
  box-shadow: var(--sombra-2);
  font-size: 14px;
}
.aviso.bien { --tono: var(--estado-bien); }
.aviso.mal  { --tono: var(--estado-mal); border-width: 2px; border-left-width: 3px; border-color: var(--estado-mal); }
.aviso { --icono: url('iconos/info.svg'); }
.aviso::before {
  content: '';
  width: 16px; height: 16px; flex: none;
  background: var(--tono);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.aviso.bien::before { --icono: url('iconos/bien.svg'); }
.aviso.mal::before  { --icono: url('iconos/mal.svg'); }
.aviso .cerrar { margin-left: auto; min-height: 24px; padding: 2px 6px; border-color: transparent; }

/* ═══════════════════════════════════════════ movimiento reducido ══ */

/*
 * Obligatorio (DISENO.md §10.4). Y la regla que lo sostiene: el estado por defecto de todo lo
 * revelado es VISIBLE, y el script añade la animación — nunca el contenido. Si un observador
 * no dispara, lo que hay debajo tiene que estar ahí igualmente.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Área táctil mínima, aunque el control se vea de 28 (DISENO.md §11). */
@media (pointer: coarse) {
  button, .boton, a[role="button"] { min-height: 44px; }
  .conmutador button { min-height: 36px; }
}

/* Iconos sueltos dentro de un rótulo: el destructivo los lleva obligatorios (DISENO.md §8.1). */
.icono-borrar {
  width: 14px;
  height: 14px;
  flex: none;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('iconos/borrar.svg') center / contain no-repeat;
  mask: url('iconos/borrar.svg') center / contain no-repeat;
}

/* Un botón parte su rótulo en varias líneas si le falta sitio, y en una barra llena eso
   descuadra todo lo demás. El texto de un control no se parte: se recorta la barra. */
button, .boton { white-space: nowrap; }

/*
 * La fila de una ficha del CMS, que comparten las dos caras. Su primera columna es el campo
 * principal —el título de la película, el nombre del concierto— y no tenía tope: con un título
 * largo se comía la fila y empujaba el resto a una columna de tres palabras de ancho, que se
 * partía en cinco líneas. Ahora cede a partir del 38 % y recorta con puntos suspensivos, que es
 * lo que hace legible una lista de quinientas fichas: filas de una línea, todas iguales.
 */
.cms-ficha > .cuando {
  flex: 0 1 auto;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-ficha > .crece .cuando {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El botón del tema (21-ago-2026). Un glifo, sin rótulo: lo que hace se entiende por el
   icono y lo dice el `title`. Ancho fijo para que no salte al cambiar ☾ por ☀. */
.boton-tema {
  width: 32px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--foreground-muted);
}
.boton-tema:hover { color: var(--foreground); }