/* AITOI — tokens de diseño. Única fuente de colores, tipografía, espaciado, radios,
   sombras y transiciones. Toda hoja nueva consume estos tokens; ninguna define colores
   propios (guardia en apps/portal/tests/test_estilo.py). El catálogo vivo es /estilo/.

   Un solo acento: `--acento`. Se cambia aquí y nada más: hover, tinte y borde se derivan
   con color-mix (bloque @supports al final); los valores fijos de arriba son el respaldo
   para navegadores sin color-mix y van afinados al verde por defecto.

   Los colores de estado (peligro, aviso, info, éxito) NO son acentos decorativos: solo
   para semántica (errores, avisos, etiquetas de estado). Los colores de los días
   (`--dia-*`) siguen en aitoi.css: son del dominio, no del sistema. */
:root {
  /* Acento: verde de marca en su tono AA (4.99:1 sobre blanco), sirve de fondo de botón
     con texto blanco y de color de enlace. El logo usa un verde más claro: es marca, no UI. */
  --acento: #0B7F5E;
  --acento-hover: #0A6E51;      /* botón primario al pasar el ratón, enlaces activos */
  --acento-tinte: #E6F4EF;      /* fondos suaves: opción activa, fila elegida, anillo de foco */
  --acento-borde: #B5E0D0;      /* borde de lo que va sobre el tinte */
  --acento-texto: var(--acento);  /* texto en acento sobre blanco (AA); si el acento nuevo es claro, fijar aquí uno más oscuro */
  --acento-inverso: #FFFFFF;    /* texto sobre el acento */

  /* Neutrales cálidos: superficie blanca sobre fondo gris muy leve, bordes sutiles. */
  --fondo: #F7F7F5;             /* fondo de página */
  --superficie: #FFFFFF;        /* tarjetas, tablas, header, campos */
  --superficie-2: #F2F2F0;      /* fila al pasar el ratón, pestaña activa, pie de tarjeta */
  --superficie-3: #E9E9E6;      /* botón secundario presionado, separadores gruesos */
  --superficie-cebra: #FAFAF8;  /* renglones pares de las tablas: apenas un velo, para seguir la fila sin rejilla */
  --borde: #E4E4E1;             /* borde de tarjetas y tablas */
  --borde-fuerte: #C9C9C4;      /* borde de campos y botones secundarios */
  --linea: #EEEEEB;             /* líneas entre filas */
  --texto: #1A1A1A;             /* texto principal */
  --texto-2: #55554F;           /* texto secundario, encabezados de tabla (7.2:1) */
  --texto-3: #8A8A85;           /* placeholders, pistas, iconos en reposo (3.5:1: nunca para texto pequeño) */
  --texto-inverso: #FFFFFF;
  --velo: rgba(20, 20, 20, .38);  /* fondo tras un modal */

  /* Estado (paleta A1 «Sereno», decisión de Alberto 2026-09-25): tinte-first. El sólido es texto e icono
     y pasa AA sobre blanco y sobre su tinte (peligro 5.44/4.90, aviso 5.26/4.83, info 5.29/4.74); el tinte
     es el fondo y el borde es el sólido al 32 % sobre blanco. *-texto es alias del sólido (lo usan las
     pantallas legadas vía --rojo-texto, --ambar-texto). Sin sólidos de fondo saturados: el color nunca grita. */
  --peligro: #B4453F; --peligro-tinte: #FBF1F0; --peligro-borde: #E7C3C2; --peligro-texto: var(--peligro); --peligro-hover: #9E3833;
  --aviso: #8F6400;   --aviso-tinte: #FAF5E8;   --aviso-borde: #DBCDAD;   --aviso-texto: var(--aviso);
  --info: #3D6CB0;    --info-tinte: #EEF3FA;    --info-borde: #C1D0E6;    --info-texto: var(--info);
  --exito: var(--acento); --exito-tinte: var(--acento-tinte); --exito-borde: var(--acento-borde); --exito-texto: var(--acento-texto);

  /* Tipografía: la del sistema (sin CDN). Inter se usa si está instalada. */
  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --texto-xs: .75rem;    /* 12px: etiquetas, pies */
  --texto-sm: .875rem;   /* 14px: tablas, botones, ayuda */
  --texto-md: 1rem;      /* 16px: cuerpo */
  --texto-lg: 1.125rem;  /* 18px: títulos de tarjeta y sección */
  --texto-xl: 1.375rem;  /* 22px: título de página */
  --texto-2xl: 1.75rem;  /* 28px: cifras grandes */
  --interlineado: 1.5;
  --interlineado-corto: 1.25;
  --peso-normal: 400; --peso-medio: 500; --peso-negrita: 600; --peso-fuerte: 700;
  --espaciado-etiqueta: .04em;  /* encabezados de tabla y rótulos en mayúsculas */

  /* Espaciado en escala de 4px. */
  --espacio-1: .25rem; --espacio-2: .5rem; --espacio-3: .75rem; --espacio-4: 1rem; --espacio-5: 1.25rem;
  --espacio-6: 1.5rem; --espacio-8: 2rem; --espacio-10: 2.5rem; --espacio-12: 3rem; --espacio-16: 4rem;

  /* Radios. */
  --radio-sm: 6px;       /* botones, campos, etiquetas */
  --radio-md: 8px;       /* tarjetas, tablas, alertas */
  --radio-lg: 12px;      /* modales, paneles */
  --radio-pildora: 999px;

  /* Sombras: sutiles; la grande solo para modales y paneles flotantes. */
  --sombra-sm: 0 1px 2px rgba(20, 20, 20, .06);
  --sombra-md: 0 4px 12px rgba(20, 20, 20, .08);
  --sombra-lg: 0 12px 40px rgba(20, 20, 20, .16);
  --anillo: 0 0 0 3px var(--acento-tinte);  /* foco en campos y botones (junto con el borde en acento) */
  --anillo-error: 0 0 0 2px var(--superficie), 0 0 0 5px var(--peligro);  /* foco en un campo con error: franja blanca y anillo de 3px en peligro, visible contra el borde de error */

  /* Movimiento. */
  --transicion-rapida: 120ms ease;
  --transicion: 180ms ease;

  /* Medidas de la shell. */
  --ancho-contenido: 56rem;
  --ancho-amplio: 72rem;
  --altura-control: 2.375rem;   /* 38px: botones y campos */
  --altura-control-chica: 1.875rem;  /* 30px: botones chicos, celdas de acciones */
  --altura-header: 3.5rem;
}
@media (prefers-reduced-motion: reduce) {
  :root { --transicion-rapida: 0s; --transicion: 0s; }
}
/* Derivados del acento: con color-mix se calculan del valor de `--acento`, así cambiar el
   acento es cambiar una sola línea. Sin color-mix quedan los valores fijos de arriba. */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  :root {
    --acento-hover: color-mix(in oklab, var(--acento), black 14%);
    --acento-tinte: color-mix(in oklab, var(--acento), white 90%);
    --acento-borde: color-mix(in oklab, var(--acento), white 68%);
  }
}
/* Tema claro (UBI-127): solo la consola interna lo usa, con <html data-tema="claro">; el portal de los inquilinos no
   pone data-tema y no cambia. Son los tokens de :root tal cual, salvo el texto en acento, que baja al tono del hover
   (derivado de `--acento`): #0B7F5E sobre el tinte de la sección activa da 4.4:1 y el hover pasa AA. */
[data-tema="claro"] {
  color-scheme: light;
  --acento-texto: var(--acento-hover);
}
/* Tema oscuro (UBI-117): solo la consola interna lo usa, con <html data-tema="oscuro">. Va al final para ganarle a
   :root y al bloque de color-mix (misma especificidad, gana el último). Redefine neutrales, estados y los derivados
   del acento; `--acento` no cambia (el botón primario sigue verde con texto blanco, 4.99:1). El texto en acento
   pasa a un verde claro: el tono AA sobre blanco no llega a AA sobre fondo oscuro. Contrastes en
   apps/consola/tests/test_shell.py. */
[data-tema="oscuro"] {
  color-scheme: dark;
  --acento-tinte: #0F2E24;
  --acento-borde: #1E5A45;
  --acento-texto: #5FD1A6;
  --exito: var(--acento-texto);  /* cifra y punto de éxito: el verde claro, como el texto en acento */

  --fondo: #0F1113;
  --superficie: #171A1D;
  --superficie-2: #1F2327;
  --superficie-3: #2A2F34;
  --superficie-cebra: #1A1D20;
  --borde: #2C3136;
  --borde-fuerte: #454C53;
  --linea: #24292D;
  --texto: #ECEDEE;
  --texto-2: #B3B8BD;
  --texto-3: #8A9096;
  --texto-inverso: #0F1113;
  --velo: rgba(0, 0, 0, .6);

  --peligro: #F2918B; --peligro-tinte: #2E1716; --peligro-borde: #6B3431; --peligro-hover: #F5A8A3;
  --aviso: #E3B75A;   --aviso-tinte: #2B2210;   --aviso-borde: #66522A;
  --info: #8DB3EA;    --info-tinte: #15202F;    --info-borde: #34496A;
}