/* ============================================================================ DIGIPRO — SISTEMA DE DISEÑO COMPARTIDO ============================================================================ Una sola fuente de verdad para las 5 páginas del portal: index.html · secops.html · 403.html · auth-callback.html · auth-callback-pkce.html POR QUÉ EXISTE ESTE ARCHIVO Antes cada módulo llevaba su propio bloque de estilos embebido. Eran tres copias que derivaban entre sí, con tres mecanismos de tema distintos (body.dark-mode en el portal, html.dark en SecOps, prefers-color-scheme en las páginas sueltas) y ~40 colores claros escritos a mano SIN variante oscura. En modo claro se veía bien; en oscuro aparecían islas claras con texto claro encima y títulos oscuros sobre fondo oscuro. REGLA DE ORO Ningún componente debe escribir un color literal. Si hace falta un color que no está aquí, se agrega como token —con su par claro y oscuro— y se usa la variable. Un literal sin par oscuro es exactamente el defecto que este archivo vino a eliminar. MECANISMO DE TEMA — uno solo `data-theme` en . Vale "light" o "dark". · El portal lo fija desde localStorage y lo propaga al iframe de SecOps. · Las páginas sueltas (403, callbacks) no tienen interruptor, así que siguen la preferencia del sistema mientras nadie fije data-theme. El selector :not([data-theme='light']) es lo que permite que un usuario con el sistema en oscuro pero el portal en claro vea el portal en claro. ============================================================================ */ :root{ /* ---- Superficies y texto ---- */ --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f4f6f9; --border:#dde3ea; --border-strong:#c3ccd6; --text:#10192b; --text-secondary:#5b6675; --text-muted:#6b7684; /* ---- Marca. El teal es el ÚNICO color accionable (botones, links, foco). El verde queda reservado para éxito/positivo. ---- */ --primary:#007091; --primary-hover:#005f7b; --primary-bg:#e6f8fe; --primary-border:#b6e6f5; --gradiente-marca:linear-gradient(90deg,#4db848,#00baf2); /* ---- Tonos semánticos. Cada uno lleva texto, fondo suave y borde, para que las insignias nunca se armen con literales. Antes .fp-real, .pill.*, .effort-* y compañía repetían estos hex a mano, sólo en versión clara. */ --tone-critical:#b3261e; --tone-critical-bg:#fdecea; --tone-critical-border:#f3c9c5; --tone-high:#c2410c; --tone-high-bg:#ffedd5; --tone-high-border:#f8cfa8; --tone-medium:#a15c00; --tone-medium-bg:#fdf1de; --tone-medium-border:#f0d9ac; --tone-low:#007091; --tone-low-bg:#e6f8fe; --tone-low-border:#b6e6f5; --tone-ok:#2e6e2b; --tone-ok-bg:#edf8ed; --tone-ok-border:#c3e5c1; /* Alias de compatibilidad: el código existente ya los usa por estos nombres */ --danger:var(--tone-critical); --danger-bg:var(--tone-critical-bg); --success:var(--tone-ok); --success-bg:var(--tone-ok-bg); --warning:var(--tone-medium); --warning-bg:var(--tone-medium-bg); /* ---- Navegación: marino fijo en AMBOS temas, para que se lea como "navegación" de un vistazo y no como una sección de contenido. ---- */ --nav-bg:#0b2233; --nav-text:#dfe5eb; --nav-muted:#96a3b0; --nav-hover:rgba(255,255,255,.07); --nav-active-bg:rgba(0,186,242,.16); --nav-active-text:#6fd8ff; --nav-active-border:#00baf2; /* ---- Forma, sombra, tipografía, movimiento ---- */ --radius-sm:6px; --radius-md:10px; --shadow-sm:0 1px 2px rgba(16,25,43,.06); --shadow-md:0 2px 8px rgba(16,25,43,.08); --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-mono:'JetBrains Mono',Consolas,'Cascadia Mono','Courier New',monospace; --dur-rapida:150ms; --dur-media:220ms; --easing:cubic-bezier(.16,1,.3,1); color-scheme:light; } /* ---- Modo oscuro: variantes aclaradas/desaturadas, NO una inversión. Cada token del bloque de arriba tiene aquí su par; si se agrega uno nuevo arriba y no aquí, reaparece el defecto que este archivo vino a cerrar. --- */ @media (prefers-color-scheme:dark){ :root:not([data-theme='light']){ --bg:#0d1117; --surface:#161b22; --surface-2:#0d1117; --border:#30363d; --border-strong:#484f58; --text:#e6edf3; --text-secondary:#9198a1; --text-muted:#838d9c; --primary:#3ec6f0; --primary-hover:#6ad4f5; --primary-bg:rgba(62,198,240,.15); --primary-border:rgba(62,198,240,.35); --tone-critical:#f2726b; --tone-critical-bg:rgba(242,114,107,.15); --tone-critical-border:rgba(242,114,107,.35); --tone-high:#f0913e; --tone-high-bg:rgba(240,145,62,.15); --tone-high-border:rgba(240,145,62,.35); --tone-medium:#e0a83e; --tone-medium-bg:rgba(224,168,62,.15); --tone-medium-border:rgba(224,168,62,.35); --tone-low:#3ec6f0; --tone-low-bg:rgba(62,198,240,.15); --tone-low-border:rgba(62,198,240,.35); --tone-ok:#5fd35a; --tone-ok-bg:rgba(95,211,90,.15); --tone-ok-border:rgba(95,211,90,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 8px rgba(0,0,0,.5); color-scheme:dark; } } :root[data-theme='dark']{ --bg:#0d1117; --surface:#161b22; --surface-2:#0d1117; --border:#30363d; --border-strong:#484f58; --text:#e6edf3; --text-secondary:#9198a1; --text-muted:#838d9c; --primary:#3ec6f0; --primary-hover:#6ad4f5; --primary-bg:rgba(62,198,240,.15); --primary-border:rgba(62,198,240,.35); --tone-critical:#f2726b; --tone-critical-bg:rgba(242,114,107,.15); --tone-critical-border:rgba(242,114,107,.35); --tone-high:#f0913e; --tone-high-bg:rgba(240,145,62,.15); --tone-high-border:rgba(240,145,62,.35); --tone-medium:#e0a83e; --tone-medium-bg:rgba(224,168,62,.15); --tone-medium-border:rgba(224,168,62,.35); --tone-low:#3ec6f0; --tone-low-bg:rgba(62,198,240,.15); --tone-low-border:rgba(62,198,240,.35); --tone-ok:#5fd35a; --tone-ok-bg:rgba(95,211,90,.15); --tone-ok-border:rgba(95,211,90,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 8px rgba(0,0,0,.5); color-scheme:dark; } /* ============================================================================ COMPONENTES COMPARTIDOS Sólo lo que de verdad se repite entre módulos. Lo específico de cada pantalla vive en su archivo, pero SIEMPRE consumiendo los tokens de arriba. ============================================================================ */ /* ---- Franja de marca verde→teal. Es el único lugar donde aparece el gradiente: bajo el header y en el borde del sidebar. Nunca como fondo. ---- */ .dp-brand-stripe{position:relative} .dp-brand-stripe::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px; background:var(--gradiente-marca); } /* ---- Insignias por tono ---- */ .dp-tone-critical{color:var(--tone-critical);background:var(--tone-critical-bg);border:1px solid var(--tone-critical-border)} .dp-tone-high {color:var(--tone-high); background:var(--tone-high-bg); border:1px solid var(--tone-high-border)} .dp-tone-medium {color:var(--tone-medium); background:var(--tone-medium-bg); border:1px solid var(--tone-medium-border)} .dp-tone-low {color:var(--tone-low); background:var(--tone-low-bg); border:1px solid var(--tone-low-border)} .dp-tone-ok {color:var(--tone-ok); background:var(--tone-ok-bg); border:1px solid var(--tone-ok-border)} /* ---- Superficie de tarjeta ---- */ .dp-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); } /* ---- Foco de teclado: siempre visible, nunca se elimina ---- */ .dp-focus:focus-visible, a:focus-visible,button:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* ---- Se respeta la preferencia de movimiento reducido del sistema ---- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }