/* Base de la torre de control: fuentes, tokens de color en claro y oscuro, controles y diálogos.
   La comparten el panel (index.html) y la página de entrada (entrar.html).

   Marca de Morada (white-label): paleta «Eléctrica» v2, Funnel Display en los titulares, Nunito Sans en el texto y
   JetBrains Mono en las cifras grandes y el código. Sin degradados, orbes ni cristal. El violeta eléctrico (#a072ef) es
   color de datos y, en oscuro, el del botón principal: nunca texto sobre claro (3.1:1). El solar (#ff7a00) es de la
   conversión de las landings: el panel no lo usa.

   Claro por defecto (tema.js): la página es lavanda muy clara (--fondo) y cada sección, una hoja blanca (--papel) con
   radio amplio y filete suave. En oscuro, fondo casi negro y hojas un paso más claras.

   Contraste (comun.js → contraste):
     claro  — texto 20.6:1 · titulares 13.3:1 · meta 7.6:1 · enlaces 7.3:1 sobre la hoja · borde de control 3.4:1
     oscuro — texto 16.7:1 · enlaces 9.5:1 · meta 7.6:1 sobre la hoja · borde de control 3.9:1
   El verde de la paleta (#1f8a5b) da 4.3:1 sobre blanco: va en las marcas de estado, y la palabra «Sano» usa un paso
   más oscuro (#187650, 5.6:1). Los estados llevan siempre palabra y forma (sano, vigilar, revisar): el color es el
   segundo canal, nunca el único. */

/* Fuentes de la marca (SIL OFL 1.1), servidas por la propia torre (CSP 'self'): un archivo variable por familia. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fuentes/nunito-sans.woff2) format("woff2");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fuentes/funnel-display.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fuentes/jetbrains-mono.woff2) format("woff2");
}

:root {
  color-scheme: light dark;

  /* Pares claro / oscuro en bruto: light-dark() los elige y el bloque @supports de abajo los reutiliza. */
  --fondo-c: #f4f1f8;      --fondo-o: #03020a;
  --papel-c: #ffffff;      --papel-o: #14101f;
  --niebla-c: #ece9f2;     --niebla-o: #1d1830;
  --niebla2-c: #e4dfec;    --niebla2-o: #241e33;
  --filete-c: #e4dfec;     --filete-o: #241e33;
  /* Borde de los controles (botones, campos): ≥ 3:1 sobre la hoja y el fondo (WCAG 1.4.11). El borde de la paleta
     (--borde-suave) separa lo que no es un control. */
  --borde-c: #8e87a0;      --borde-o: #756e8c;
  --borde-suave-c: #d6cfe3; --borde-suave-o: #2e2745;
  /* Titulares, cifras y negritas (--tinta); texto de lectura (--texto); lo secundario (--meta). */
  --tinta-c: #36255c;      --tinta-o: #f4f1f8;
  --texto-c: #03020a;      --texto-o: #f4f1f8;
  --meta-c: #565261;       --meta-o: #a8a2b8;
  --enlace-c: #643abe;     --enlace-o: #c9abf7;
  /* La voz de la marca: la raya de lo elegido (sección, pieza, pestaña). */
  --voz-c: #643abe;        --voz-o: #d2c3f6;
  --primario-c: #36255c;   --primario-o: #a072ef;
  --sobre-primario-c: #f4f1f8; --sobre-primario-o: #03020a;
  --bien-c: #187650;       --bien-o: #34c98e;
  --aviso-c: #8a5a00;      --aviso-o: #f0b429;
  --mal-c: #c2413a;        --mal-o: #ff8a80;
  --m-sano-c: #1f8a5b;     --m-sano-o: #34c98e;
  --m-revisar-c: #c2413a;  --m-revisar-o: #ff8a80;
  --vacio-c: #a39db0;      --vacio-o: #6e6785;
  /* Marcas de estado sin palabra al lado (la luz en el móvil, las marcas de las secciones): ≥ 3:1 (WCAG 1.4.11). El
     anillo de «sin datos» es el tenue de la paleta (4.4:1) y el triángulo ámbar de «vigilar» (1.9:1 sobre el papel)
     lleva en claro un filete ámbar oscuro (5.9:1); en oscuro, el ámbar ya da 10:1 y el filete es el propio ámbar. */
  --m-vacio-c: #7a7686;    --m-vacio-o: #7f7992;
  --m-vigilar-borde-c: #8a5a00; --m-vigilar-borde-o: #f0b429;
  /* Superficie de los diálogos: en claro, el papel; en oscuro, un paso sobre la hoja. */
  --superficie-c: #ffffff; --superficie-o: #1d1830;
  --velo-c: rgb(3 2 10 / .5); --velo-o: rgb(0 0 0 / .65);
  /* Colores de datos de la paleta: el eléctrico es la serie; el segundo, tinta en claro y lavanda en oscuro. */
  --dato-c: #a072ef;       --dato-o: #a072ef;
  --dato2-c: #36255c;      --dato2-o: #d2c3f6;
  /* Divergente del tono de las respuestas de las IAs (violeta ↔ rojo, con gris neutro y signo «+»/«−» al lado). */
  --pos-c: #a072ef;        --pos-o: #a072ef;
  --neg-c: #c2413a;        --neg-o: #ff8a80;
  --bien-suave-c: #e3f2ea; --bien-suave-o: #0f2a1f;
  --aviso-suave-c: #fbf0d9; --aviso-suave-o: #2b2210;
  --mal-suave-c: #f9e6e4;  --mal-suave-o: #351816;

  --fondo: light-dark(var(--fondo-c), var(--fondo-o));
  --papel: light-dark(var(--papel-c), var(--papel-o));
  --niebla: light-dark(var(--niebla-c), var(--niebla-o));
  --niebla-2: light-dark(var(--niebla2-c), var(--niebla2-o));
  --filete: light-dark(var(--filete-c), var(--filete-o));
  --borde: light-dark(var(--borde-c), var(--borde-o));
  --borde-suave: light-dark(var(--borde-suave-c), var(--borde-suave-o));
  --tinta: light-dark(var(--tinta-c), var(--tinta-o));
  --texto: light-dark(var(--texto-c), var(--texto-o));
  --meta: light-dark(var(--meta-c), var(--meta-o));
  --enlace: light-dark(var(--enlace-c), var(--enlace-o));
  --voz: light-dark(var(--voz-c), var(--voz-o));
  --primario: light-dark(var(--primario-c), var(--primario-o));
  --sobre-primario: light-dark(var(--sobre-primario-c), var(--sobre-primario-o));
  --bien: light-dark(var(--bien-c), var(--bien-o));
  --aviso: light-dark(var(--aviso-c), var(--aviso-o));
  --mal: light-dark(var(--mal-c), var(--mal-o));
  --m-sano: light-dark(var(--m-sano-c), var(--m-sano-o));
  --m-revisar: light-dark(var(--m-revisar-c), var(--m-revisar-o));
  --vacio: light-dark(var(--vacio-c), var(--vacio-o));
  --m-vacio: light-dark(var(--m-vacio-c), var(--m-vacio-o));
  --m-vigilar-borde: light-dark(var(--m-vigilar-borde-c), var(--m-vigilar-borde-o));
  --dato: light-dark(var(--dato-c), var(--dato-o));
  --dato-2: light-dark(var(--dato2-c), var(--dato2-o));
  --pos: light-dark(var(--pos-c), var(--pos-o));
  --neg: light-dark(var(--neg-c), var(--neg-o));
  --superficie: light-dark(var(--superficie-c), var(--superficie-o));
  --velo: light-dark(var(--velo-c), var(--velo-o));
  /* Fondos suaves de estado (la pieza por aprobar, un aviso): el color con presencia sin gritar. El texto encima es
     siempre tinta o texto. */
  --bien-suave: light-dark(var(--bien-suave-c), var(--bien-suave-o));
  --aviso-suave: light-dark(var(--aviso-suave-c), var(--aviso-suave-o));
  --mal-suave: light-dark(var(--mal-suave-c), var(--mal-suave-o));
  /* Sombra de las hojas: un filo apenas visible, no un adorno. */
  --sombra: 0 1px 2px rgb(54 37 92 / .05), 0 1px 1px rgb(54 37 92 / .03);
  /* Fondos del mapa de calor de las IAs: tintes del divergente sobre la hoja; en oscuro, más cargados para que
     positivo, neutro y negativo se distingan también sobre el negro. El texto encima es siempre tinta. */
  --geo-pos: light-dark(color-mix(in oklab, var(--pos-c) 30%, #ffffff), color-mix(in oklab, var(--pos-o) 45%, #14101f));
  --geo-neu: light-dark(color-mix(in oklab, var(--meta-c) 20%, #ffffff), color-mix(in oklab, var(--meta-o) 28%, #14101f));
  --geo-neg: light-dark(color-mix(in oklab, var(--neg-c) 30%, #ffffff), color-mix(in oklab, var(--neg-o) 40%, #14101f));
  /* Ámbar de «vigilar»: igual en los dos modos (en claro, con su filete oscuro). */
  --m-vigilar: #f0b429;

  /* Sobre un fondo de tinta (avisos, la punta de los gráficos), el texto es papel (y al revés en oscuro). */
  --sobre-tinta: var(--papel);
  /* Color de los datos: el eléctrico de la paleta. */
  --serie: var(--dato);

  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titular: "Funnel Display", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --radio: 4px;
  --radio-control: 8px;
  /* Hojas (secciones del panel): radio amplio y amable. */
  --radio-hoja: 14px;
  --toque: 2.75rem;
  /* Movimiento: frenar y encajar, cortos. */
  --frenar: cubic-bezier(.2, .8, .2, 1);
  --encajar: cubic-bezier(.3, .9, .3, 1);

  font-family: var(--sans);
  accent-color: var(--primario);
  scrollbar-color: light-dark(#c9c2d6, #3a3150) transparent;
}

/* Navegadores sin light-dark() (Safari < 17.5): claro por defecto; oscuro por el sistema o por el ajuste de tema. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --fondo: var(--fondo-c); --papel: var(--papel-c); --niebla: var(--niebla-c); --niebla-2: var(--niebla2-c); --filete: var(--filete-c);
    --borde: var(--borde-c); --borde-suave: var(--borde-suave-c); --tinta: var(--tinta-c); --texto: var(--texto-c); --meta: var(--meta-c);
    --enlace: var(--enlace-c); --voz: var(--voz-c); --primario: var(--primario-c); --sobre-primario: var(--sobre-primario-c);
    --bien: var(--bien-c); --aviso: var(--aviso-c); --mal: var(--mal-c); --m-sano: var(--m-sano-c); --m-revisar: var(--m-revisar-c);
    --vacio: var(--vacio-c); --m-vacio: var(--m-vacio-c); --m-vigilar-borde: var(--m-vigilar-borde-c);
    --dato: var(--dato-c); --dato-2: var(--dato2-c); --pos: var(--pos-c); --neg: var(--neg-c);
    --superficie: var(--superficie-c); --velo: var(--velo-c);
    --bien-suave: var(--bien-suave-c); --aviso-suave: var(--aviso-suave-c); --mal-suave: var(--mal-suave-c);
    --geo-pos: color-mix(in oklab, var(--pos-c) 30%, #ffffff); --geo-neu: color-mix(in oklab, var(--meta-c) 20%, #ffffff);
    --geo-neg: color-mix(in oklab, var(--neg-c) 30%, #ffffff);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
      --fondo: var(--fondo-o); --papel: var(--papel-o); --niebla: var(--niebla-o); --niebla-2: var(--niebla2-o); --filete: var(--filete-o);
      --borde: var(--borde-o); --borde-suave: var(--borde-suave-o); --tinta: var(--tinta-o); --texto: var(--texto-o); --meta: var(--meta-o);
      --enlace: var(--enlace-o); --voz: var(--voz-o); --primario: var(--primario-o); --sobre-primario: var(--sobre-primario-o);
      --bien: var(--bien-o); --aviso: var(--aviso-o); --mal: var(--mal-o); --m-sano: var(--m-sano-o); --m-revisar: var(--m-revisar-o);
      --vacio: var(--vacio-o); --m-vacio: var(--m-vacio-o); --m-vigilar-borde: var(--m-vigilar-borde-o);
      --dato: var(--dato-o); --dato-2: var(--dato2-o); --pos: var(--pos-o); --neg: var(--neg-o);
      --superficie: var(--superficie-o); --velo: var(--velo-o);
      --bien-suave: var(--bien-suave-o); --aviso-suave: var(--aviso-suave-o); --mal-suave: var(--mal-suave-o);
      --geo-pos: color-mix(in oklab, var(--pos-o) 45%, #14101f); --geo-neu: color-mix(in oklab, var(--meta-o) 28%, #14101f);
      --geo-neg: color-mix(in oklab, var(--neg-o) 40%, #14101f);
    }
  }
  :root[data-tema="dark"] {
    --fondo: var(--fondo-o); --papel: var(--papel-o); --niebla: var(--niebla-o); --niebla-2: var(--niebla2-o); --filete: var(--filete-o);
    --borde: var(--borde-o); --borde-suave: var(--borde-suave-o); --tinta: var(--tinta-o); --texto: var(--texto-o); --meta: var(--meta-o);
    --enlace: var(--enlace-o); --voz: var(--voz-o); --primario: var(--primario-o); --sobre-primario: var(--sobre-primario-o);
    --bien: var(--bien-o); --aviso: var(--aviso-o); --mal: var(--mal-o); --m-sano: var(--m-sano-o); --m-revisar: var(--m-revisar-o);
    --vacio: var(--vacio-o); --m-vacio: var(--m-vacio-o); --m-vigilar-borde: var(--m-vigilar-borde-o);
    --dato: var(--dato-o); --dato-2: var(--dato2-o); --pos: var(--pos-o); --neg: var(--neg-o);
    --superficie: var(--superficie-o); --velo: var(--velo-o);
    --bien-suave: var(--bien-suave-o); --aviso-suave: var(--aviso-suave-o); --mal-suave: var(--mal-suave-o);
    --geo-pos: color-mix(in oklab, var(--pos-o) 45%, #14101f); --geo-neu: color-mix(in oklab, var(--meta-o) 28%, #14101f);
    --geo-neg: color-mix(in oklab, var(--neg-o) 40%, #14101f);
  }
}

/* El tema (claro por defecto; oscuro o «como el sistema» desde Ajustes) lo fija tema.js antes de pintar. */
:root[data-tema="light"] { color-scheme: light; }
:root[data-tema="dark"] { color-scheme: dark; }

/* Isotipo oficial de la marca (PNG; nunca redibujado): la «m» tinta en claro y la clara en oscuro. Van los dos en la
   página y el CSS enseña el del tema efectivo, que puede venir del sistema o fijarse en Ajustes (data-tema). */
.isotipo { block-size: 1.375rem; inline-size: auto; flex: none; }
.isotipo.en-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .isotipo.en-claro { display: none; }
  :root:not([data-tema="light"]) .isotipo.en-oscuro { display: block; }
}
:root[data-tema="dark"] .isotipo.en-claro { display: none; }
:root[data-tema="dark"] .isotipo.en-oscuro { display: block; }

/* Tamaño de letra elegido en Ajustes (tema.js lo aplica antes de pintar). Porcentajes: respetan el tamaño base que
   la persona tenga en su navegador. Todo el panel mide en rem, así que crece entero. */
:root[data-letra="pequena"] { font-size: 93.75%; }
:root[data-letra="grande"] { font-size: 112.5%; }
:root[data-letra="muy-grande"] { font-size: 125%; }

@media (prefers-contrast: more) {
  :root { --meta-c: #45414f; --meta-o: #cbc6d8; --filete-c: #b9b1c8; --filete-o: #4a4163; }
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 7rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-family: var(--titular); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
strong, b { color: var(--tinta); font-weight: 600; }
a { color: var(--enlace); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-inline-size: 100%; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
code { font: 400 .875em/1.4 var(--mono); overflow-wrap: anywhere; }
kbd {
  display: inline-block; min-inline-size: 1.6em; padding: .05em .4em; text-align: center;
  font: 500 .8125em/1.5 var(--mono); color: var(--tinta);
  border: 1px solid var(--filete); border-block-end-width: 2px; border-radius: 4px; background: var(--niebla);
}
::selection { background: color-mix(in srgb, var(--dato) 30%, transparent); }

/* Foco visible siempre (teclado): anillo de tinta con aire. En oscuro, la tinta es casi blanca. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.visualmente-oculto:where(:not(:focus-within, :active)) {
  position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.saltar {
  position: fixed; inset-inline-start: 1rem; inset-block-start: .75rem; z-index: 100;
  padding: .6rem .9rem; background: var(--tinta); color: var(--sobre-tinta); border-radius: var(--radio); text-decoration: none;
}

/* Iconos de trazo del sprite (dom.js → icono()). Heredan el color del texto. */
.ic { inline-size: 1.125rem; block-size: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.relleno { fill: currentColor; stroke: none; }

/* Cifras: proporcionales en sueltas, tabulares solo donde se alinean en columna. */
.num { font-variant-numeric: tabular-nums; }

/* ── controles ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: var(--toque); padding: .45rem 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--papel); color: var(--tinta);
  font-weight: 500; font-size: .9375rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.boton:active { transform: translateY(1px); }
.boton.primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.boton.fantasma { border-color: transparent; background: transparent; }
.boton.peligro { color: var(--mal); }
.boton.pequeno { min-block-size: 2.25rem; padding: .25rem .75rem; font-size: .875rem; }
.boton.icono { inline-size: var(--toque); padding: 0; border-color: transparent; background: transparent; color: var(--texto); }
/* El fondo al pasar el ratón, solo con ratón: en el iPhone, el :hover de un toque se queda pegado al botón (el de
   Ajustes seguía gris al cerrar el diálogo) hasta tocar otra cosa. */
@media (hover: hover) {
  .boton:hover { background: var(--niebla); }
  .boton.primario:hover { background: color-mix(in oklab, var(--primario) 86%, var(--papel)); }
  .boton.fantasma:hover { background: var(--niebla); }
  .boton.icono:hover { background: var(--niebla); color: var(--tinta); }
}
.boton[aria-busy="true"] { cursor: progress; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.boton[aria-busy="true"] .ic-giro { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }

label { display: block; font-weight: 500; color: var(--tinta); font-size: .9375rem; }
.campo { display: grid; gap: .35rem; }
.pista { font-size: .875rem; color: var(--meta); }
input:where(:not([type=checkbox], [type=radio])), select, textarea {
  inline-size: 100%; min-block-size: var(--toque); padding: .55rem .75rem;
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--papel); color: var(--texto); font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
input:where(:not([type=checkbox], [type=radio])):focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 1px;
}
:is(input, select, textarea):user-invalid { border-color: var(--mal); }
select { appearance: auto; }
textarea { resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; flex: none; }
/* iPhone: al tocar un campo con letra de menos de 16 px, Safari amplía la página y no la devuelve a su tamaño (pasaba
   con la letra «Pequeña» y en los campos de 15 px). En pantallas táctiles, ningún campo baja de 16 px. */
@media (pointer: coarse) {
  input:where(:not([type=checkbox], [type=radio])), select, textarea { font-size: max(1rem, 16px); }
}

/* ── diálogos (nativos, modales) ── */
dialog {
  inline-size: min(34rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 24px 48px -16px rgb(3 2 10 / .3);
}
dialog.ancho { inline-size: min(48rem, calc(100vw - 2rem)); }
/* Con respaldo: hasta Safari 17.4, ::backdrop no hereda las variables de :root y el velo salía transparente. */
dialog::backdrop { background: var(--velo, rgb(3 2 10 / .5)); }
/* Dentro del diálogo, lo que usa el papel como fondo (botones, campos, anillo de las marcas) usa su superficie. */
dialog { --papel: var(--superficie); }
dialog h2 { font-size: 1.25rem; margin-block-end: .5rem; }
/* Un título que recibe el foco al abrir (diálogo largo) no es un control: sin anillo, como el h1 de cada vista. */
dialog h2[tabindex="-1"] { outline: none; }
.botonera { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-block-start: 1.25rem; }

/* Entrada y salida de los diálogos: aparece desde abajo, sin rebote. Donde no hay transición de `display`, aparece
   sin más (Firefox); dom.js cierra con `data-cerrando` para que también allí se anime la salida. */
@media (prefers-reduced-motion: no-preference) {
  dialog {
    opacity: 0; translate: 0 .75rem;
    transition: opacity .2s var(--frenar), translate .24s var(--frenar), display .24s allow-discrete, overlay .24s allow-discrete;
  }
  dialog:is([open]):where(:not([data-cerrando])) {
    opacity: 1; translate: 0 0;
    @starting-style { opacity: 0; translate: 0 .75rem; }
  }
  dialog::backdrop { opacity: 0; transition: opacity .2s, display .24s allow-discrete, overlay .24s allow-discrete; }
  dialog:is([open]):where(:not([data-cerrando]))::backdrop {
    opacity: 1;
    @starting-style { opacity: 0; }
  }
}

/* ── aviso flotante (dom.js → avisar) ── */
/* Centrado con márgenes automáticos y ancho de su contenido: con left: 50% y translate, el navegador solo le dejaba la
   mitad derecha de la pantalla y en el móvil un aviso de una frase salía en cuatro líneas estrechas. */
.aviso-flotante {
  position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline: 0; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  margin-inline: auto; inline-size: max-content; max-inline-size: min(32rem, calc(100vw - 2rem));
  padding: .7rem 1rem;
  background: var(--tinta); color: var(--sobre-tinta); border-radius: 10px;
  font-size: .9375rem; font-weight: 500;
  translate: 0 1rem; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--frenar), translate .25s var(--frenar);
}
.aviso-flotante.visible { opacity: 1; translate: 0 0; }
.aviso-flotante[data-tipo="error"] .ic { color: light-dark(#ff8a80, #c2413a); }
.aviso-flotante[data-tipo="bien"] .ic { color: light-dark(#34c98e, #187650); }

/* ── movimiento: nada si la persona pide menos ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (forced-colors: active) {
  .boton { border: 1px solid ButtonText; }
  .ic { stroke: CanvasText; }
  .ic.relleno { fill: CanvasText; }
}