/* ARCHIVO GENERADO — NO EDITAR.
*
* Copia de www/paquetes/panel-ui/estilos/paleta.css, que es donde se cambia.
* Editar aquí crea una segunda verdad que el próximo `node herramientas/sincronizar-sistema.mjs`
* borra sin avisar.
*
* Aquí viven los VALORES del sistema visual de las tres pantallas.
*
* Se regenera con: node herramientas/sincronizar-sistema.mjs
*/
/**
* @skj/panel-ui · LA PALETA. El único sitio donde un valor del sistema visual
* está escrito.
*
* Aquí viven los VALORES; en `tokens.css` viven los NOMBRES con los que
* Tailwind y el armazón los usan. La separación no es ceremonia: es lo que
* permite que las tres pantallas del producto —la portada, el área de demos y
* el panel— compartan un solo color aunque estén hechas con tecnologías
* distintas.
*
* ── Por qué este archivo es CSS del navegador y no de Tailwind ──────────────
*
* La portada (`inicio-skj/public/index.html`) es HTML a mano: no tiene build,
* ni React, ni Tailwind, y así debe seguir —es pública, la indexa Google y hoy
* pinta sin ejecutar un kilobyte de framework—. Un `@theme { }` es una
* at-rule de Tailwind: el navegador se salta el bloque entero y la portada se
* quedaría sin paleta, sin dar error. Por eso aquí no hay una sola línea que
* el navegador no entienda, y la portada lo carga con un `` corriente.
*
* Portada →
* Paneles → @import '@skj/panel-ui/estilos/tokens.css' (que importa este)
*
* ── Por qué `light-dark()` y no dos bloques ────────────────────────────────
*
* Escribir el tema oscuro en un bloque aparte obliga a repetir la lista de
* tokens, y una lista repetida se desincroniza: el fallo clásico es un color
* que solo existe en el bloque oscuro, con lo que el conmutador funciona al ir
* y no al volver. Con `light-dark()` cada token se declara UNA vez con sus dos
* caras, y cambiar de tema es cambiar `color-scheme` y nada más — ese fallo
* deja de ser posible por construcción.
*
* Lightning CSS (el que Tailwind usa al construir) lo traduce solo a la forma
* con `@media (prefers-color-scheme)` para navegadores viejos, así que el
* panel no pierde nada. En la portada llega tal cual: `light-dark()` es Chrome
* 123+, Safari 17.5+ y Firefox 120+.
*
* ── Los cuatro estados del tema ────────────────────────────────────────────
*
* (sin marcador) claro. Es el defecto del producto.
* [data-tema="sistema"] sigue al sistema operativo. Lo pide la portada.
* [data-theme="dark"] oscuro. `.dark` vale igual.
* [data-theme="light"] claro explícito, gana sobre "sistema".
*
* Los dos marcadores en inglés no son un descuido: son los que ya escriben la
* Tienda (`classList.toggle('dark')`) y los que entiende HeroUI v3, que trae
* su propio bloque `[data-theme='dark']` con variables que esta paleta no
* cubre —fondos de emergente, sombras de campo—. Un panel que se pusiera
* oscuro con otro marcador tendría nuestros colores en oscuro y los de HeroUI
* en claro. Por eso los paneles conmutan con `data-theme`, y `data-tema` queda
* para quien no usa HeroUI: la portada.
*
* ── La regla que sostiene todo esto ────────────────────────────────────────
*
* Si un color, un radio, una sombra o una medida aparece escrito fuera de este
* archivo, hay dos verdades y el día que cambie una ganará la vieja. Lo vigila
* `test/arquitectura/regla-armazon.spec.ts`.
*/
:root {
/* Claro por defecto, y es una decisión: el panel de gestión se mira ocho
horas seguidas en oficinas iluminadas. Quien quiera seguir al sistema lo
pide con `data-tema="sistema"`. */
color-scheme: light;
/* ── Superficies ──────────────────────────────────────────────────────────
Tres niveles y ni uno más: el fondo de la página (`lienzo`), la caja que
se apoya encima (`panel`) y lo hundido dentro de esa caja —cabecera de
tabla, fila de resumen— (`realce`). Los grises llevan una pizca de azul
(hue ~250) en lugar de ser neutros puros: es lo que hace que se lean
"fríos y técnicos" y no "grises de procesador de textos".
Los valores son los de Primer (GitHub) convertidos a oklch. No es gusto:
son pares medidos para contraste AA en los dos temas, y volver a medirlos
sale mucho más caro que copiar los que ya lo están. */
--skj-panel: light-dark(oklch(1 0 0), oklch(0.2198 0.0182 255.71));
--skj-lienzo: light-dark(oklch(0.9782 0.0034 247.86), oklch(0.1763 0.014 258.36));
--skj-realce: light-dark(oklch(0.9597 0.0052 247.88), oklch(0.2735 0.0179 251.92));
/* Un solo peso de borde. La portada tenía dos —uno normal y otro "vivo" para
lo pulsable— y se ha quedado en este: lo que se puede pulsar lo dice el
color, no el grosor del borde, y con dos pesos la misma tarjeta salía con
un contorno en una pantalla y con otro en la de al lado. */
--skj-borde: light-dark(oklch(0.8812 0.013 244.27), oklch(0.3837 0.0179 254.74));
/* ── Texto ────────────────────────────────────────────────────────────────
`debil` NO es para texto: mide 3.24:1 sobre el lienzo y no llega a AA. Es
para lo que ya no se puede pulsar —un enlace tachado, un icono apagado—,
donde la falta de contraste ES el mensaje. */
--skj-tinta: light-dark(oklch(0.2542 0.0111 254.04), oklch(0.9703 0.0103 247.93));
--skj-tenue: light-dark(oklch(0.4951 0.0215 250.78), oklch(0.6769 0.0155 254.64));
--skj-debil: light-dark(oklch(0.6329 0.0228 254.97), oklch(0.5287 0.0179 257.24));
/* ── Marca ────────────────────────────────────────────────────────────────
Marca lo accionable. `fuerte` es el estado pulsado o el enlace visitado;
`suave` es el fondo de la fila activa.
En oscuro los tonos se ACLARAN en vez de invertirse: un azul que funciona
sobre blanco se hunde sobre negro y el enlace deja de parecer un enlace. */
--skj-marca: light-dark(oklch(0.5399 0.1906 257.48), oklch(0.6632 0.1692 255.92));
--skj-marca-fuerte: light-dark(oklch(0.4509 0.1641 258.18), oklch(0.7581 0.1292 249.58));
--skj-marca-suave: light-dark(oklch(0.9536 0.0284 228.04), oklch(0.2302 0.0386 259.91));
/* ── Acento ───────────────────────────────────────────────────────────────
Aparece POCO —un trazo, un subrayado, el hover de un enlace del pie—
porque un acento que sale en cinco sitios deja de señalar nada. Y no vale
para texto en claro: 3.14:1. */
--skj-acento: light-dark(oklch(0.6619 0.1374 79.25), oklch(0.7904 0.1386 85.24));
--skj-acento-suave: light-dark(oklch(0.9721 0.0658 101.01), oklch(0.2508 0.023 84.27));
/* ── Estados ──────────────────────────────────────────────────────────────
Son información, no decoración: en una bandeja de comprobantes, el color
es la diferencia entre "SUNAT lo aceptó" y "lo rechazó". Cada uno con su
fondo suave emparejado, medido contra `tinta` por encima de 13:1.
`info` coincide hoy con `marca` y `espera-suave` con `acento-suave`. Se
escriben aparte a propósito: son decisiones distintas que de momento caen
en el mismo sitio, y unificarlas ataría el color de "pendiente" al de la
identidad para siempre. */
--skj-ok: light-dark(oklch(0.5244 0.1401 148.04), oklch(0.6951 0.1809 145.62));
--skj-ok-suave: light-dark(oklch(0.9574 0.0487 151.63), oklch(0.2476 0.0443 151.44));
--skj-mal: light-dark(oklch(0.5567 0.2056 24.61), oklch(0.6651 0.2046 26.96));
--skj-mal-suave: light-dark(oklch(0.9555 0.022 24.44), oklch(0.2248 0.0242 356.07));
--skj-espera: light-dark(oklch(0.5542 0.1169 75.01), oklch(0.7196 0.1401 79.91));
--skj-espera-suave: light-dark(oklch(0.9721 0.0658 101.01), oklch(0.2508 0.023 84.27));
--skj-info: light-dark(oklch(0.5399 0.1906 257.48), oklch(0.6632 0.1692 255.92));
--skj-info-suave: light-dark(oklch(0.9536 0.0284 228.04), oklch(0.2302 0.0386 259.91));
/* Verde de "esto completa y entra dinero". Se separa de `ok` porque `ok` es
un estado que se lee y `primario` es un botón que se pulsa: el segundo
necesita pasar contraste con el texto encima, el primero no. */
--skj-primario: light-dark(oklch(0.5517 0.145 148.22), oklch(0.546 0.1474 146.26));
--skj-primario-fuerte: light-dark(oklch(0.5244 0.1401 148.04), oklch(0.5761 0.1541 146.04));
/* Texto sobre un relleno de color sólido. En claro es blanco; en oscuro NO
—los tonos oscuros son más claros para despegarse del fondo, y el blanco
encima se queda en 2.54:1—. */
--skj-sobre-color: light-dark(oklch(1 0 0), oklch(0.1763 0.014 258.36));
/* El velo de detrás de un emergente. Negro con transparencia en los dos
temas —no es una superficie, es ausencia de luz—, algo más denso en oscuro
porque sobre un fondo ya oscuro un 50 % apenas se nota y el diálogo deja de
despegarse. Lo usan el `::backdrop` de la portada y, por el puente,
`--backdrop` de HeroUI: sin él, cada emergente del producto se apagaba con
un negro distinto. */
--skj-velo: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.65));
/* ── Cabecera ─────────────────────────────────────────────────────────────
Oscura en los DOS temas, como la de GitHub: separa el "dónde estoy" del
contenido sin gastar una línea de más. Por eso son los únicos colores sin
`light-dark()` — no es un olvido, es que no tienen dos caras. */
--skj-cabecera: oklch(0.2198 0.0182 255.71);
--skj-cabecera-tinta: oklch(0.9703 0.0103 247.93);
--skj-cabecera-borde: oklch(0.3837 0.0179 254.74);
--skj-cabecera-tenue: oklch(0.6769 0.0155 254.64);
/* ── Forma ────────────────────────────────────────────────────────────────
Radios en PÍXELES, no en `rem`: la raíz del producto está en 14 px, así que
un `0.5rem` daría 7 px aquí y 8 px en cualquier otro sitio. Un radio no
escala con el texto.
Los tres salen de la fórmula de radios anidados —R_exterior = R_interior +
separación—, que traía la portada y es lo mejor que tenía: una caja con
8 px de relleno dentro de un lienzo pide 8 px más por fuera. Sin eso las
esquinas salen con esa curva doble que se nota sin saber explicar por qué.
── Subieron el 2026-08-23, y por qué se puede ───────────────────────────
Eran 6 / 8 / 16. El encargo era traer el acabado de HeroUI sin pagarlo en
densidad, y el radio es justo lo que cumple las dos cosas: **no ocupa ni un
píxel más**. Una caja de 12 px cabe exactamente donde cabía la de 8.
No se copian los suyos, que son de una web de producto: su `Card` va a
32 px, y en una pantalla de ocho columnas eso recorta la esquina de la
primera celda. Estos son los de un panel: se nota que no es de 2010 y no se
nota nada más.
── RECTOS DESDE EL 2026-08-25 ────────────────────────────────────────
Los tres a cero, por decisión del titular: «bordes rectos, sin bordes
curvos». Se quedan como TOKENS y no se borran las declaraciones que los
leen, que serían ochenta y tantas: mientras el radio siga saliendo de
aquí, volver atrás es cambiar tres números. Borrarlas habría hecho el
camino de vuelta imposible.
Los tres valen lo mismo y aun así son tres. Con uno solo, el día que
alguien quiera curvar las cajas sin curvar los botones tendría que
reintroducir la distinción por todo el sistema. La jerarquía sobrevive al
valor.
Lo que NO se cuadró, y hay que defenderlo uno a uno: los puntos de estado
de 6-8 px, el anillo de carga del botón, el retrato de Google y el planeta
del 404. Un punto de 8 px con esquinas rectas deja de leerse como
indicador; un anillo cuadrado no gira, hace una L. Son formas, no cromo.
La fórmula de antes —12 + 8 = 20, la que evitaba la curva doble— deja de
aplicar: sin curva no hay curva doble. */
--skj-radio-pieza: 0;
--skj-radio-caja: 0;
--skj-radio-lienzo: 0;
/* El grosor de todo borde del producto, en un solo sitio.
Existe porque HeroUI declara el suyo —`--field-border-width: 0px`, sus
campos se sostienen con la sombra— y sin este token no había forma de
decirle que aquí sí llevan línea. Un desplegable sin borde al lado de un
campo de fecha con borde es la clase de diferencia que se ve sin saber
nombrarla. */
--skj-borde-grosor: 1px;
/* ── El botón ──────────────────────────────────────────────────────────
El alto del botón estaba escrito en TRES sitios que no se conocían: la
escala de Tailwind que hereda HeroUI, los 44/36/32 de `armazon.css` y los
mismos 44/36/32 copiados a mano en la portada. Así, «botones más pequeños»
eran tres cambios que un día se separan.
30 px y no 28: por debajo de 30 el texto de 14 px queda con 8 px de aire
arriba y abajo y el botón deja de parecer pulsable — parece una etiqueta.
Y no 36, que es lo que había: en una fila de tabla con tres acciones, 36 px
empujan la fila a 52 y la tabla deja de leerse de un vistazo.
El relleno baja a 10 px por la misma razón que el alto: un botón de «Ver»
con 14 px a cada lado es más aire que palabra. */
--skj-boton-alto: 30px;
--skj-boton-relleno: 10px;
/* ── El dedo ───────────────────────────────────────────────────────────
La otra cara del botón, y NO es un tamaño de pantalla.
Antes se preguntaba por el ancho —44 px por debajo de 768, 36 hasta 1024,
32 arriba—, y esa pregunta se equivoca en los dos sentidos: una tableta de
1 024 px se toca con el dedo y recibía 32 px; una ventana estrecha en un
escritorio con ratón recibía 44 y desperdiciaba el sitio.
`pointer: coarse` pregunta lo que importa: con qué se apunta. Los 44 px son
el mínimo que las guías de accesibilidad piden para el pulgar. */
--skj-boton-alto-tactil: 44px;
/* ── Profundidad ──────────────────────────────────────────────────────────
Suaves a propósito: en una pantalla que se mira ocho horas la sombra marca
capas, no llama la atención.
── Dejaron de ser solo de los emergentes (2026-08-23) ───────────────────
Aquí decía que «el armazón del panel no usa ninguna —cajas con borde, nada
flotando—; están para los emergentes y para las tarjetas de la portada».
Desde hoy son también las de HeroUI: `tokens.css` apunta sus
`--surface-shadow`, `--field-shadow` y `--overlay-shadow` a estas tres, y
antes de eso cada componente suyo traía la suya —una sombra distinta de las
del sistema, y encima sin cara oscura—.
Y la `Caja` del armazón pasó a llevar `suave`, que es la única de las tres
que puede: no la hace flotar, evita que el borde sea lo ÚNICO que la separa
del lienzo. Con doce cajas en una pantalla, cualquier sombra que se note
convierte el panel en una pila de naipes — por eso no es `media`. No cuesta
densidad: una sombra no ocupa sitio en el flujo, que era la condición.
Solo cambia el color, no la geometría: una sombra clara sobre fondo oscuro
es un halo, no una sombra. */
--skj-sombra-suave: 0 1px 2px
light-dark(oklch(0.2542 0.0111 254.04 / 0.06), oklch(0 0 0 / 0.4));
--skj-sombra-media: 0 2px 8px
light-dark(oklch(0.2542 0.0111 254.04 / 0.08), oklch(0 0 0 / 0.45));
--skj-sombra-alta: 0 12px 32px
light-dark(oklch(0.2542 0.0111 254.04 / 0.14), oklch(0 0 0 / 0.6));
/* ── Tipografía ───────────────────────────────────────────────────────────
La lista completa y no `system-ui` a secas: en Linux y en Android
`system-ui` cae en una fuente que ninguna otra pantalla usa. */
--skj-fuente-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Noto Sans',
Helvetica, Arial, sans-serif;
--skj-fuente-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'SF Mono', Menlo, Consolas,
monospace;
/* La serif es de la portada y hoy solo la usa ella: un lema y dos titulares
editoriales. Vive aquí y no allí porque es una decisión del producto —qué
letra tiene la voz de SKJ cuando habla en vez de informar— y el día que un
panel titule algo, tiene que ser esta y no la que le apetezca a nadie. En
el panel de gestión no aparece: ahí no se declama, se informa. */
--skj-fuente-titulo: 'Iowan Old Style', Georgia, 'Times New Roman', serif;
/* ── Densidad ─────────────────────────────────────────────────────────────
"Compacta" convertido en dos números, que es la única forma de que se
cumpla.
`raiz` es la medida del documento y hay que aplicarla —`html { font-size:
var(--skj-raiz) }`—, porque una variable no se aplica sola. Los 14 px son
la densidad de un sistema de gestión y no la de una landing; y va en la
RAÍZ y no en el `body` porque los `rem` se resuelven contra la raíz: con
la medida en `body` el texto baja pero cada relleno, cada hueco y cada
alto de botón se siguen calculando sobre 16 px, y la pantalla sale un 14 %
más grande con el mismo código.
`espacio` es el paso de la escala de separación (lo que Tailwind llama
`--spacing`). Con la raíz en 14 px, un paso son 3,5 px: `gap-2` = 7 px,
`px-4` = 14 px. En `rem` y no en px para que quien amplía el texto del
navegador vea crecer también el aire, no solo la letra. */
--skj-raiz: 14px;
--skj-espacio: 0.25rem;
/* ── Los tres tamaños ─────────────────────────────────────────────────────
Móvil por debajo de 768, tablet de 768 a 1023, escritorio desde 1024.
Son los dos cortes de Tailwind (`md` y `lg`), así que una utilidad `md:`
y un `@media` escrito a mano caen exactamente en el mismo píxel.
Una consulta de medios NO puede leer una variable —`@media (min-width:
var(--x))` no existe en CSS—, así que estos dos tokens no se usan: se
consultan. Están aquí para que el número tenga un sitio donde vivir, para
el JavaScript que necesite `matchMedia`, y para que el test de
arquitectura pueda comprobar que ninguna hoja del paquete corta por otro
ancho. */
--skj-corte-tablet: 768px;
--skj-corte-escritorio: 1024px;
/* ── Medidas del armazón ──────────────────────────────────────────────────
Las lee `armazon.css`. Se declaran aquí para que un proyecto pueda
cambiarlas sin tocar el armazón: la Tienda usa 1600 px de contenido porque
el monitor del mostrador es ancho y desperdiciar la mitad obliga a hacer
scroll en tablas que cabían enteras. Eso es una decisión suya, no una
copia mal sincronizada. */
--skj-armazon-lateral: 240px;
--skj-armazon-ancho: 1280px;
--skj-armazon-cabecera-alto: 52px;
}
/**
* Los conmutadores. No repiten un solo valor: cambian `color-scheme`, y
* `light-dark()` hace el resto.
*
* El orden importa y es este a propósito: "sistema" primero y los explícitos
* después, porque todos tienen la misma especificidad y gana el último. Así,
* un documento que arranque siguiendo al sistema y luego reciba un
* `data-theme` explícito —el conmutador de la barra— obedece al explícito.
*/
:root[data-tema='sistema'] {
color-scheme: light dark;
}
:root.dark,
:root[data-theme='dark'] {
color-scheme: dark;
}
:root[data-theme='light'] {
color-scheme: light;
}