/* ── Trinity Shell ───────────────────────────────────────────────────────────── Cascarón del dashboard (header + sidebar + main + footer) reestilizado en clave MINIMALISTA, con las MISMAS CLASES/IDs que el markup legacy de trinity.html → es un reemplazo directo (drop-in) de los bloques de shell de trinity.css. Se apoya en el lenguaje visual del componente `uikit/sidebar/sidebar.css`: superficie clara, hairlines en vez de rellenos, items redondeados, item activo con barra de acento a la izquierda, tipografía tenue y scrollbar sutil. MODOS ----- Dos ejes independientes en el elemento raíz (o en cualquier ancestro del shell): `data-theme` → la PALETA (la resuelve el core, style.css) → claro fijo → oscuro fijo → sigue a prefers-color-scheme Sin atributo → claro (no se auto-oscurece nada del portal por sorpresa). `data-shell` → la PIEL DEL CASCARÓN (la resuelve esta hoja, sección 2B) → identidad del portal original: header rojo + sidebar gris + pie negro Combinándolos salen los cuatro modos del botón `#themeToggle`: claro → data-theme="light" oscuro → data-theme="dark" trinity → data-theme="light" data-shell="trinity" trinity-dark → data-theme="dark" data-shell="trinity" Son dos atributos y no un `data-theme="trinity-dark"` porque la paleta del CONTENIDO no la pone esta hoja: los roles `--ui-*` los remapea el core bajo `[data-theme="dark"]`, y un valor propio dejaría el contenido en claro con el cascarón en oscuro. Atajo retrocompatible: `data-theme="trinity"` equivale a claro + piel trinity (es el único valor de paleta que esta hoja atiende). TOKENS ------ Todo pasa por `--upaep-trinity-*`, y cada token lee el rol semántico `--ui-*` del core con FALLBACK literal. Por eso la hoja funciona igual: · con style.css cargado → hereda la marca/tema del design system · sola (autocontenida) → usa sus fallbacks USO --- a) Sobre el monolito: DESPUÉS (se replica `!important` solo donde el monolito lo usa, p. ej. #elementosMenu) b) Sola: ver trinity-shell.html --------------------------------------------------------------------------------- */ /*? ═══════════════════════════════════════════════════════════════════════════ 1. TOKENS — tema claro ════════════════════════════════════════════════════════════════════════════ */ :root { /*? ── Geometría del shell ─────────────────────────────────────────── */ --upaep-trinity-header-height: 56px; --upaep-trinity-footer-height: 48px; --upaep-trinity-sidebar-width: 240px; --upaep-trinity-sidebar-width-collapsed: 80px; --upaep-trinity-sidebar-width-drawer: 268px; --upaep-trinity-gutter: 1.5rem; --upaep-trinity-gutter-sm: 1rem; --upaep-trinity-zindex-header: 1099; --upaep-trinity-zindex-sidebar: 1100; --upaep-trinity-transition: .28s cubic-bezier(.4, 0, .2, 1); /*? Objetivo accionable mínimo (WCAG 2.2 AA · 2.5.8 Target Size). No es un gusto de espaciado: es el suelo por debajo del cual un enlace o un botón del cascarón deja de cumplir. Vive como token para que las dos capas —cascarón y vistas— midan contra el MISMO número y no se separen. */ --upaep-trinity-target-min: 1.5rem; /*? ══════════════════════════════════════════════════════════════════════ ESCALAS VISUALES ───────────────────────────────────────────────────────────────────── Antes de esto Trinity no tenía escalas: tenía 26 valores de espaciado distintos —de 1.6 a 48 px, en pasos de menos de un píxel—, siete radios para tres intenciones y una tipografía en la que `stat-value` (25.6 px) pesaba más que el `

` de la página (20 px) y en la que `h2`, `h3` y `h4` medían los tres 15 px. Un valor por caso no es un sistema: es una colección de decisiones que nadie puede repetir. El patrón es SIEMPRE el mismo, y en este orden: escala → token → rol → componente La escala publica los peldaños. El rol dice PARA QUÉ sirve cada peldaño. El componente consume el rol, nunca el peldaño ni —jamás— un literal. Por eso aquí no hay ni un token por componente: si una pieza necesita una medida nueva, lo que falta es un rol, no un valor. Las escalas se publican legibles por máquina en `ai/tokens.json → scales`, derivadas de `src/site/data/scales.decisions.json`; un consumidor descubre los peldaños, los roles y los valores admitidos sin abrir una sola hoja de estilos. `tools/verify-tokens.mjs` comprueba que lo publicado y lo declarado aquí sigan siendo lo mismo, y que no reaparezcan literales equivalentes. ══════════════════════════════════════════════════════════════════════ */ /*? ── Espaciado ── Base 4. Siete peldaños, y ninguno entre medias: el espacio es una decisión de RITMO, y un ritmo con pasos de 0.8 px no se percibe, solo se acumula. Se nombran por peldaño y no por píxeles para poder reafinar la escala sin renombrar nada. */ --upaep-trinity-sp-1: .25rem; /* 4px */ --upaep-trinity-sp-2: .5rem; /* 8px */ --upaep-trinity-sp-3: .75rem; /* 12px */ --upaep-trinity-sp-4: 1rem; /* 16px */ --upaep-trinity-sp-5: 1.5rem; /* 24px */ --upaep-trinity-sp-6: 2rem; /* 32px */ --upaep-trinity-sp-7: 3rem; /* 48px */ /*? Roles de espaciado. Es la capa que evita el token por componente: una pieza nueva pregunta «¿qué papel juega este hueco?», no «¿cuántos px?». */ --upaep-trinity-gap-tight: var(--upaep-trinity-sp-1); /* líneas de un mismo bloque */ --upaep-trinity-gap-inline: var(--upaep-trinity-sp-2); /* controles de una misma fila */ --upaep-trinity-gap-stack: var(--upaep-trinity-sp-4); /* piezas hermanas apiladas */ --upaep-trinity-pad-bar: var(--upaep-trinity-sp-3); /* relleno vertical de una barra */ --upaep-trinity-pad-surface: var(--upaep-trinity-sp-4); /* relleno de una superficie */ --upaep-trinity-pad-cell: var(--upaep-trinity-sp-2) var(--upaep-trinity-sp-3); /*? ── Radios ── Cuatro intenciones, no siete valores. `pill` es UNA sola medida en todo Trinity: dos formas de escribir «cápsula» son dos cápsulas distintas en cuanto una de las dos se retoca. */ --upaep-trinity-radius-sm: 6px; --upaep-trinity-radius-md: 8px; --upaep-trinity-radius-lg: 12px; --upaep-trinity-radius-pill: 999px; /*? ── Tipografía ── ROLES, no tamaños sueltos. Los peldaños salen del diccionario de primitivas del core (`--upaep-fzN`), que es par: por eso aquí no aparecen `--upaep-fz11` ni `--upaep-fz13`, que Trinity venía citando aunque el core NO los declara —cada uso caía en su literal de reserva, es decir, en un valor fuera de escala escrito trece veces—. Dos invariantes que la escala existe para sostener: · h1 > stat-value — la cifra de un indicador no puede pesar más que el título de la página en la que vive; · h1 > h2 > h3 > h4, y ningún par consecutivo visualmente equivalente. Las FAMILIAS no se tocan aquí: las declara el kit y Trinity las hereda por `--upaep-trinity-font`. Ninguna pieza fija una fuente por su cuenta. */ --upaep-trinity-fz-h1: var(--upaep-fz24, 1.5rem); /* 24 */ --upaep-trinity-fz-stat: var(--upaep-fz22, 1.375rem); /* 22 */ --upaep-trinity-fz-h2: var(--upaep-fz20, 1.25rem); /* 20 */ --upaep-trinity-fz-h3: var(--upaep-fz16, 1rem); /* 16 */ --upaep-trinity-fz-h4: var(--upaep-fz14, .875rem); /* 14 */ --upaep-trinity-fz-body: var(--upaep-fz14, .875rem); /* 14 */ --upaep-trinity-fz-label: var(--upaep-fz12, .75rem); /* 12 · nunca por debajo */ --upaep-trinity-fz-meta: var(--upaep-fz12, .75rem); /* 12 */ /*? Pesos por rol. `label` y `meta` comparten tamaño y se separan por peso, que es la distinción convencional entre «esto rotula» y «esto acompaña». `dt` y `dd` también viven aquí: la etiqueta es secundaria y el valor es lo que se lee: al revés, la lista se lee como una lista de etiquetas. */ --upaep-trinity-fw-heading: var(--upaep-fw-semibold, 600); --upaep-trinity-fw-stat: var(--upaep-fw-bold, 700); --upaep-trinity-fw-label: var(--upaep-fw-semibold, 600); --upaep-trinity-fw-body: var(--upaep-fw-regular, 400); --upaep-trinity-fw-value: var(--upaep-fw-semibold, 600); /*? Alturas de línea por familia de rol: apretada para titulares, cómoda para texto corrido, exacta para lo que vive dentro de una caja de control. */ --upaep-trinity-lh-heading: 1.25; --upaep-trinity-lh-body: 1.45; --upaep-trinity-lh-control: 1.2; /*? ── Geometría de control ── El alto de un control NO es espaciado: es una medida de caja, y por eso tiene su propia familia. El relleno sí sale de la escala. */ /*? Alturas de caja de control. NO son espaciado —de ahi que tengan familia propia— pero tampoco pueden ser literales sueltos: `2.375rem` y `1.95rem` vivian escritos dentro del bloque del boton, donde nadie mas podia leerlos ni reutilizarlos. El pequeno se redondea de 1.95rem a 2rem: 0.8 px que no se ven y un numero que si se puede repetir. */ --upaep-trinity-control-h-md: 2.375rem; /* 38px */ --upaep-trinity-control-h-sm: 2rem; /* 32px */ --upaep-trinity-control-pad: var(--upaep-trinity-sp-2) var(--upaep-trinity-sp-4); --upaep-trinity-control-pad-sm: var(--upaep-trinity-sp-1) var(--upaep-trinity-sp-3); /*? Offset lateral del contenido — lo recalculan las clases de estado */ --upaep-trinity-offset: calc(var(--upaep-trinity-sidebar-width) + var(--upaep-trinity-gutter)); /*? ── Superficies y texto ─────────────────────────────────────────── */ --upaep-trinity-surface: var(--ui-surface, #ffffff); --upaep-trinity-surface-2: var(--ui-surface-2, #f4f5f6); --upaep-trinity-surface-3: var(--ui-surface-3, #eeeeee); --upaep-trinity-page-bg: var(--ui-surface-2, #f7f8f9); /*? ── Los dos colores de texto de Trinity, y por qué NO son los del core ── El core pinta `--ui-text` con el azul institucional y `--ui-text-strong` con NEGRO puro. En una vista de dashboard eso sale al revés de lo que se espera: el cuerpo tirando a azul y los títulos en negro, que es el color que menos pertenece a la marca. Se invierte: los títulos y el texto enfático van en `blue-primary` (#1D335B, 11.4:1 sobre blanco) y el cuerpo en `dark-grey` (#52565A, 7:1). Cero negro, y la jerarquía se lee por color además de por peso. Es lo mismo que ya hacía `.upaep__modal.__trinity` en el core: título azul, texto gris. Solo aplica al tema claro: el bloque `[data-theme="dark"]` de abajo devuelve la cadena `--ui-*`, donde el fuerte es blanco. */ --upaep-trinity-text: var(--upaep-color-dark-grey, #52565A); --upaep-trinity-text-strong: var(--upaep-color-blue-primary, #1D335B); --upaep-trinity-text-muted: var(--ui-text-muted, #909496); --upaep-trinity-divider: var(--ui-divider, #e4e6e8); --upaep-trinity-hover-bg: var(--ui-surface-2, #f4f5f6); --upaep-trinity-active-bg: var(--ui-surface-hover, #e6e9ee); --upaep-trinity-accent: var(--ui-primary, var(--upaep-color-primary, #e10023)); --upaep-trinity-on-accent: var(--ui-on-primary, #ffffff); /*? Item activo del menú. A propósito SIN declarar aquí: se leen con `var(--token, var(--upaep-trinity-accent))`, así que sin valor caen al acento del ámbito donde se usan (comportamiento de siempre) y quien los declare puede separar el TEXTO del activo de su BARRA — lo que necesita la variante trinity, donde la barra sigue roja y el texto va en blanco: --upaep-trinity-item-active-text --upaep-trinity-item-active-bar Mismo caso para el grafismo del logo del sidebar (que no es texto y sí debe conservar el color de marca): --upaep-trinity-brandmark */ --upaep-trinity-focus-ring: var(--ui-focus-ring, rgba(225, 0, 35, .22)); --upaep-trinity-shadow: 0 8px 24px rgba(16, 20, 28, .10); --upaep-trinity-font: var(--ui-font-base, var(--upaep-ff-fira-sans, 'Fira Sans', system-ui, sans-serif)); /*? ── Iconos heredados en base64 ────────────────────────────────────── El markup legacy trae PNG/SVG con relleno BLANCO (pensados para barras rojas/grises). Sobre superficie clara se invierten por CSS; en oscuro se dejan tal cual. Escapes: `.__no-invert` (por icono) y `.__menu-icons-color` en `.sidebar` (si tus iconos de menú ya son de color y no deben invertirse). */ --upaep-trinity-icon-invert: 1; --upaep-trinity-menu-icon-invert: 1; /*? ── Scrollbar ───────────────────────────────────────────────────── Solo propiedades ESTÁNDAR (`scrollbar-width` / `scrollbar-color`), sin pseudoelementos `::-webkit-scrollbar`. Soportado por Chrome/Edge 121+, Firefox y Safari 18.2+; por debajo se ve la barra nativa del sistema. */ --upaep-trinity-scrollbar-width: thin; /* `auto` = barra nativa de ancho completo */ --upaep-trinity-scrollbar-thumb: #98a0a8; --upaep-trinity-scrollbar-track: #e3e6e9; } /*? ═══════════════════════════════════════════════════════════════════════════ 2. TOKENS — tema oscuro Cada valor sigue leyendo el rol --ui-* (que style.css ya remapea bajo [data-theme="dark"]); el fallback cubre el uso autocontenido. ════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --upaep-trinity-surface: var(--ui-surface, #1b1b1e); --upaep-trinity-surface-2: var(--ui-surface-2, #232327); --upaep-trinity-surface-3: var(--ui-surface-3, #2c2c31); --upaep-trinity-page-bg: #141417; --upaep-trinity-text: var(--ui-text, #ececf0); --upaep-trinity-text-strong: var(--ui-text-strong, #ffffff); --upaep-trinity-text-muted: var(--ui-text-muted, #9a9aa2); --upaep-trinity-divider: var(--ui-divider, #2f2f34); --upaep-trinity-hover-bg: var(--ui-surface-2, #232327); --upaep-trinity-active-bg: var(--ui-surface-hover, #2c2c31); --upaep-trinity-focus-ring: var(--ui-focus-ring, rgba(255, 255, 255, .22)); --upaep-trinity-shadow: 0 8px 24px rgba(0, 0, 0, .55); --upaep-trinity-scrollbar-thumb: #63636f; --upaep-trinity-scrollbar-track: #2b2b31; --upaep-trinity-icon-invert: 0; --upaep-trinity-menu-icon-invert: 0; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --upaep-trinity-surface: var(--ui-surface, #1b1b1e); --upaep-trinity-surface-2: var(--ui-surface-2, #232327); --upaep-trinity-surface-3: var(--ui-surface-3, #2c2c31); --upaep-trinity-page-bg: #141417; --upaep-trinity-text: var(--ui-text, #ececf0); --upaep-trinity-text-strong: var(--ui-text-strong, #ffffff); --upaep-trinity-text-muted: var(--ui-text-muted, #9a9aa2); --upaep-trinity-divider: var(--ui-divider, #2f2f34); --upaep-trinity-hover-bg: var(--ui-surface-2, #232327); --upaep-trinity-active-bg: var(--ui-surface-hover, #2c2c31); --upaep-trinity-focus-ring: var(--ui-focus-ring, rgba(255, 255, 255, .22)); --upaep-trinity-shadow: 0 8px 24px rgba(0, 0, 0, .55); --upaep-trinity-scrollbar-thumb: #52525c; --upaep-trinity-scrollbar-track: #232327; --upaep-trinity-icon-invert: 0; --upaep-trinity-menu-icon-invert: 0; } } /*? ═══════════════════════════════════════════════════════════════════════════ 2B. TOKENS — piel «trinity» Recupera la identidad del portal original: HEADER rojo, SIDEBAR gris, FOOTER casi negro. → contenido en claro → contenido en oscuro → atajo del primero Es una PIEL, no un tema: no toca la paleta de la raíz, así que sirve igual con el contenido claro (modo «trinity») que oscuro (modo «trinity-dark»). Los tres colores de marca son los mismos en ambos; lo que cambia es el `main` y la capa de vistas, que los resuelve el core con `data-theme`. Cada región del cascarón redefine los tokens en SU PROPIO CONTENEDOR (`.container__Header` / `.container__Sidebar` / `.container__Footer`), que es el mismo patrón de la variante `.container__Header.__brand`. Los tokens se declaran en el contenedor y no en el `
`/`.sidebar`/`