/*
 * 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);

  /* 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);

  /*
   * ── 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;

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

  --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;
}

* { 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(--gray-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--gray-000);
}
/* 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(--gray-000);
  box-shadow: 0 0 0 4px var(--gray-900);
}

/* 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(--gray-900);
  color: var(--gray-000);
  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: rgb(26 26 26 / .06); 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(--gray-800); transform: translateY(-1px); }
button.principal:active:not(:disabled) { background: var(--gray-950); 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(--gray-900); }
button.peligro:hover:not(:disabled) { background: rgb(26 26 26 / .08); }

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(--gray-900); }
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: rgb(26 26 26 / .06); 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(--gray-150); 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: rgb(26 26 26 / .06); 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(--gray-900);
}

.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(--gray-800);
  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; }