/* ========================================================================== Kabe Suite — Paleta y capa semántica ========================================================================== E1 de `core/docs/estilos-e-idiomas.md`. POR QUÉ EXISTE ESTE FICHERO La paleta Terrain vivía dentro de `theme-terrain.css`, que además trae los overrides de AdminLTE — y **ese fichero solo lo carga el layout de AdminLTE**. El layout del launcher, que es el que usan el lanzador y todo Ajustes, no lo carga: lleva Bootstrap 4 y sus propias hojas. Es decir, en la mitad de la Suite **la paleta corporativa ni siquiera estaba disponible**, y por eso `settings.css` acabó con colores improvisados (#c04e2a, #2563eb, #64748b) que no son de Terrain. No es que nadie quisiera usarla: es que allí no llegaba. Así que la paleta se saca aquí, a un fichero que **solo declara variables** y se carga en todas partes. Un fichero de variables no puede cambiar el aspecto de nada hasta que algo las use, que es lo que hace segura esta fase. LAS DOS CAPAS, Y POR QUÉ SON DOS paleta --terracotta, --oliva, --azulgris… ← no cambia nunca ↓ semántica --kabe-fondo, --kabe-texto… ← cambia con el tema ↓ componentes .kabe-table, .kabe-btn… ← solo usan la semántica **Un componente no nombra un color, nombra un papel.** `.kabe-table-card` usa `--kabe-superficie`, no `--arena-light`. Es lo que hace que el modo oscuro (E5) sea redefinir treinta variables y no repasar mil reglas, y lo que hace que el rediseño (E7) sea cambiar la paleta en vez de reescribir la aplicación. REGLA: fuera de este fichero **no se escribe un color literal**. Lo comprueba `core/tests/run_style_tokens.php`. ========================================================================== */ /* ========================================================================== 1) Paleta Terrain — 6 familias × 3 tonos ========================================================================== */ :root { /* Terracotta */ --terracotta-light: #E78A6E; --terracotta: #D95D39; /* Cuarto tono, y **existe por una razón medible**: con el tono base, el texto blanco del botón principal se queda en 3,77 de contraste, por debajo del 4,5 que exige AA para texto normal. Este da 4,75 y es casi indistinguible a simple vista. No es un capricho de paleta: es lo que hace legible el botón que más se pulsa. */ --terracotta-medio: #C24E2E; --terracotta-dark: #9E4026; /* Oliva */ --oliva-light: #A0B268; --oliva: #7B8D42; --oliva-dark: #55662D; /* Arena */ --arena-light: #F8F2EC; --arena: #F0E4D7; --arena-dark: #CBBFB1; /* Azul grisáceo */ --azulgris-light: #6A8AA1; /* Un quinto tono, y por la misma razón que el carmín: sobre fondo oscuro el «light» de esta familia sigue siendo oscuro —3,74 sobre su propio tinte— y el aviso informativo no se lee. Este da 5,9. Solo se usa en el tema oscuro. */ --azulgris-claro: #8FAFC4; --azulgris: #496A81; --azulgris-dark: #2E4557; /* Mostaza */ --mostaza-light: #E0B933; --mostaza: #C99700; --mostaza-dark: #8F6B00; /* Carmín. **Se añadió el 03/09/2026 y no estaba en Terrain.** El acento y el peligro eran la misma familia —terracota y terracota oscura—, así que un botón principal y uno destructivo se distinguían solo por el tono, y en oscuro se parecían más todavía. Este rojo se separa en matiz (≈0° frente a los ≈14° de la terracota) pero conserva la saturación apagada del resto de la paleta, así que se distingue sin desentonar. */ /* El tono claro es el «peligro» del tema oscuro: 4,86 de contraste sobre el fondo oscuro —pasa AA— y tono 2° frente a los 14° de la terracota, así que se distingue del acento por matiz y no solo por claridad. */ --carmin-light: #E56E69; --carmin: #A8322F; --carmin-dark: #7A2320; /* Arcilla */ --arcilla-light: #A78F8A; --arcilla: #8A716A; --arcilla-dark: #604D47; /* Neutros. **No son grises puros a propósito**: llevan una pizca de la familia arena/azulgris para que convivan con la paleta en vez de parecer pegados de otro sitio. */ --neutro-000: #FFFFFF; --neutro-050: #FBF9F7; --neutro-100: #F3F0EC; --neutro-200: #E5E1DB; --neutro-300: #CFC9C1; --neutro-400: #A8A199; --neutro-500: #767068; --neutro-600: #5A554F; --neutro-700: #3E3A36; --neutro-800: #292623; --neutro-900: #1A1816; /* Los mismos colores en componentes, para los tintes. **Hacen falta de verdad**: media docena de vistas usan terracota y azulgris translúcidos —bordes, sombras, velos, aros de foco— y eso no se puede escribir con un color opaco. Con estos, un tinte es `rgba(var(--terracotta-rgb), .18)` y sigue siendo la paleta; sin ellos, cada tinte vuelve a ser un literal. Y en el tema oscuro un tinte translúcido se comporta solo: tiñe lo que haya detrás en vez de tapar. */ --terracotta-rgb: 217, 93, 57; --oliva-rgb: 123, 141, 66; --arena-rgb: 240, 228, 215; --azulgris-rgb: 73, 106, 129; --mostaza-rgb: 201, 151, 0; --arcilla-rgb: 138, 113, 106; --carmin-rgb: 168, 50, 47; --neutro-000-rgb: 255, 255, 255; --neutro-900-rgb: 26, 24, 22; } /* ========================================================================== 2) Mapeo a los nombres de AdminLTE/Bootstrap ========================================================================== Se conserva tal cual estaba: hay reglas en `theme-terrain.css` y en las hojas del launcher que lo usan. Quitarlo sería otra fase, y esta no cambia nada. primary ↔ azulgris · secondary ↔ arcilla · success ↔ oliva info ↔ azulgris-light · warning ↔ mostaza · danger ↔ terracotta-dark light ↔ arena-light · dark ↔ azulgris-dark ========================================================================== */ :root { --primary: var(--azulgris); --secondary: var(--arcilla); --success: var(--oliva); --info: var(--azulgris-light); --warning: var(--mostaza); --danger: var(--terracotta-dark); --light: var(--arena-light); --dark: var(--azulgris-dark); --primary-contrast: var(--neutro-000); --secondary-contrast: var(--neutro-000); --success-contrast: var(--neutro-000); --info-contrast: var(--neutro-000); --warning-contrast: var(--neutro-900); --danger-contrast: var(--neutro-000); --light-contrast: var(--neutro-900); --dark-contrast: var(--neutro-000); } /* ========================================================================== 3) Capa semántica — lo único que cambia con el tema ========================================================================== Cada token nombra **un papel**, no un color. Si al añadir uno no sabes ponerle nombre sin decir el color, probablemente no hace falta el token: hace falta reutilizar uno de los que ya hay. Los valores de aquí son los del **tema claro**, que es el actual. En E5 se redefine este mismo bloque para el tema oscuro y no hace falta tocar nada más. ========================================================================== */ :root { /* ── Superficies ──────────────────────────────────────────────────────── */ /* El fondo de la página. */ --kabe-fondo: var(--neutro-100); /* Lo que se apoya encima: tarjetas, tablas, formularios. */ --kabe-superficie: var(--neutro-000); /* Una superficie que tiene que distinguirse de la anterior sin ser otra cosa: cabeceras de tabla, filas alternas, barras de herramientas. */ --kabe-superficie-alt: var(--neutro-050); /* Sobre la que se pasa el ratón o que está seleccionada. */ --kabe-superficie-hover: var(--neutro-100); /* La envoltura oscura del lanzador y las cabeceras de sección. */ --kabe-superficie-honda: var(--azulgris-dark); /* ── Texto ────────────────────────────────────────────────────────────── */ --kabe-texto: var(--neutro-800); /* Secundario: pistas, ayudas, unidades. **No es "gris claro", es "menos importante"** — por eso en oscuro se aclara en vez de oscurecerse. */ --kabe-texto-suave: var(--neutro-600); /* Sobre superficie honda. */ --kabe-texto-invertido: var(--neutro-000); /* Un dato que no existe: «—», «sin asignar», «nunca». */ /* Antes era `--neutro-400` y daba 2,55 sobre blanco: «Sin asignar» y «nunca» son datos, no decoración, y tienen que leerse. */ --kabe-texto-ausente: var(--neutro-500); /* ── Bordes y separaciones ────────────────────────────────────────────── */ --kabe-borde: var(--neutro-200); /* El que hay que ver: el campo con foco, la fila activa. */ --kabe-borde-fuerte: var(--neutro-300); --kabe-sombra: 0 1px 2px rgba(26, 24, 22, .06), 0 2px 8px rgba(26, 24, 22, .04); --kabe-sombra-alta: 0 4px 12px rgba(26, 24, 22, .10); /* ── Acento: la acción principal ────────────────────────────────────────── **Es la terracota, y hubo que elegir.** En Ajustes convivían dos acentos haciendo el mismo papel de botón principal: `var(--terr, #c04e2a)` —terracota, la que de verdad se veía— y `var(--kabe-primary, #2563eb)` —un azul de Bootstrap que no resolvía porque nadie declaraba ese token, así que salía siempre el literal de repuesto—. Gana la terracota: es la primera familia de la paleta y la que ya usan el login y los títulos de sección. El azulgris se queda donde estaba, en el mapeo de AdminLTE del panel. */ --kabe-acento: var(--terracotta-medio); --kabe-acento-hover: var(--terracotta-dark); /* Un tinte del acento, translúcido a propósito: tiñe lo que haya detrás, así que sirve igual en claro y en oscuro. */ --kabe-acento-suave: rgba(217, 93, 57, .10); --kabe-acento-contraste: var(--neutro-000); /* El anillo del campo con foco: el acento a muy baja opacidad. */ --kabe-anillo-foco: rgba(217, 93, 57, .18); /* ── Estados ────────────────────────────────────────────────────────────── Cuatro y no más. Cada uno con su fondo suave (etiquetas, avisos) y su contraste (texto encima del color pleno). **Un estado no es un color de la paleta**: «peligro» seguirá siendo peligro cuando la paleta cambie. */ /* El tono oscuro y no el base: estos dos se pintan **como texto sobre su propio tinte pálido** (ver `.kabe-badge--success`), y ahí el tono base se queda en 3,66 y 2,65. */ --kabe-exito: var(--oliva-dark); --kabe-exito-suave: rgba(var(--oliva-rgb), .10); --kabe-exito-contraste: var(--neutro-000); --kabe-aviso: var(--mostaza-dark); --kabe-aviso-suave: rgba(var(--mostaza-rgb), .08); --kabe-aviso-contraste: var(--neutro-900); --kabe-peligro: var(--carmin); --kabe-peligro-suave: rgba(var(--carmin-rgb), .10); --kabe-peligro-contraste: var(--neutro-000); --kabe-info: var(--azulgris); --kabe-info-suave: rgba(var(--azulgris-rgb), .10); --kabe-info-contraste: var(--neutro-000); /* Un sombreado suave **sobre la superficie que haya**: el fondo de un campo apagado, una franja que separa. En claro oscurece, en oscuro aclara — por eso es un token y no un `rgba` fijo: un tinte de un color fijo sigue siendo un color fijo, y desaparece al cambiar de tema. */ --kabe-sombreado: rgba(var(--neutro-900-rgb), .06); /* Una superficie translúcida, para lo que se apoya sobre un degradado. */ --kabe-superficie-velada: rgba(var(--neutro-000-rgb), .55); /* **La barra de arriba.** Era `rgba(var(--arena-rgb), .75)` escrito en la hoja del lanzador: un tinte de un color **fijo**, que es la misma trampa que ya se documentó en E3 —usa `var()`, así que la regla de literales lo da por bueno, y sigue siendo arena en un tema oscuro—. En claro vale exactamente lo mismo que valía; en oscuro se va con el resto. */ --kabe-barra: rgba(var(--arena-rgb), .75); /* **El realce del ratón sobre el fondo de la página.** No es una superficie: es un velo que **oscurece en claro y aclara en oscuro**, igual que `--kabe-sombreado`, pero con la fuerza que necesita algo que se pulsa. Los iconos del lanzador usaban aquí un color de aplicación —el morado del panel de administración— para **todas** las fichas: en claro pasaba por un gris lila y en oscuro dejaba el rótulo blanco sobre casi blanco. */ --kabe-realce: rgba(var(--neutro-900-rgb), .05); --kabe-realce-fuerte: rgba(var(--neutro-900-rgb), .10); /* **Los lavados de color del lanzador**, ya compuestos. Son marca —el tono no cambia con el tema— pero **su fuerza sí**: al 20 % sobre negro el fondo se vuelve marrón y deja de ser un fondo. Van enteros y no solo el alfa para que ninguna hoja tenga que nombrar la paleta: un componente nombra un papel, y `rgba(var(--terracotta-rgb), …)` escrito en la hoja es la paleta con otra ropa. */ --kabe-lavado-calido: rgba(var(--terracotta-rgb), .20); --kabe-lavado-frio: rgba(var(--azulgris-rgb), .20); --kabe-lavado-verde: rgba(var(--oliva-rgb), .20); /* El velo de un modal: lo de detrás sigue ahí, pero no se toca. */ --kabe-velo: rgba(26, 24, 22, .45); /* Lo apagado: una acción que no se puede hacer ahora. */ --kabe-apagado: var(--neutro-300); --kabe-apagado-texto: var(--neutro-500); /* ── La tipografía, declarada una vez ───────────────────────────────────── **Había cuatro intenciones distintas y ninguna coordinada:** la portada pedía Inter, el lanzador `'DM Sans', Inter` —y DM Sans no lo cargaba nadie—, `launcher.css` declaraba `--font-heading: Poppins` que tampoco se cargaba nunca, y el login traía Source Sans Pro desde AdminLTE. Tres pantallas de la misma Suite con tres letras, y dos de ellas ni siquiera la que decían. Un token, igual que con los colores: la hoja nombra el papel —«la letra de la Suite»— y el sitio decide cuál es. Es también lo que hace falta para poder cambiarla algún día sin ir fichero por fichero. */ --kabe-fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --kabe-fuente-titulos: var(--kabe-fuente); /* ── Medidas que también son del tema ─────────────────────────────────── */ --kabe-radio: .5rem; --kabe-radio-chico: .35rem; } /* ========================================================================== 4) Compatibilidad — los nombres que ya estaban en uso ========================================================================== Al hacer E1 apareció **un intento anterior de capa de tokens**, en inglés: `settings.css` usa `--kabe-surface`, `--kabe-border`, `--kabe-muted`, `--kabe-surface-alt` y `--kabe-primary`… y **nadie los declaraba** en el layout del launcher. Cada uso lleva un literal de repuesto —`var(--kabe-primary, #2563eb)`— así que lo que se veía era siempre el repuesto: un azul de Bootstrap que no es de Terrain. Los tokens sí estaban declarados, pero dentro de bloques `