/* ========================================================== VALION Control Center Sistema de diseño según README-STYLE.md — variables, tipografía, espaciado y componentes reutilizables. No modificar sin revisar ese documento primero (los únicos 2 valores "de marca" son --brand-primary y --brand-accent, y ya coinciden con los de valion.com.co). ========================================================== */ :root { color-scheme: light; --brand-primary: #1F2937; --brand-primary-hover: #1B2532; --brand-on-primary: #ffffff; --brand-accent: #FF9900; --brand-accent-hover: #E68600; --brand-gradient: linear-gradient(90deg, #A9ECD9, #A7D3F5, #C8D9F7); /* Alto de la barra superior. Hay cosas ancladas a el (el sub-menu lateral de Documentacion, el inset del panel del asistente en mobile), asi que vive aca y no repetido como 56px suelto. */ --topbar-h: 56px; /* La tira fina de arriba del todo (Preferencias) y la suma de las dos. Lo que se ancla al BORDE DE LA VENTANA usa --cabecera-h; lo que se ancla al topbar en si -- el menu desplegable, que es absolute dentro de el -- sigue usando --topbar-h. Confundirlos deja el desplegable flotando 34 px por debajo de donde toca. */ --barra-fina-h: 34px; --cabecera-h: calc(var(--barra-fina-h) + var(--topbar-h)); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --surface-1: #ffffff; --page: #F8FAFC; --text-primary: #232F3E; --text-secondary: #667085; --text-muted: #7B8794; --gridline: #E8EDF2; --baseline: #D6DDE6; --border: #E8EDF2; --nav-surface: rgba(255,255,255,.82); --nav-border: rgba(226,232,240,.6); --series-1: #2a78d6; --success: #006300; --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; --delta-bad: #d03b3b; --section-a-bg: color-mix(in srgb, #16A34A 7%, var(--surface-1)); --section-b-bg: color-mix(in srgb, #1F2937 6%, var(--surface-1)); --section-c-bg: color-mix(in srgb, #2F6FED 7%, var(--surface-1)); --ai-accent: #7C3AED; --ai-bg: color-mix(in srgb, #7C3AED 6%, var(--surface-1)); } /* EL TEMA OSCURO CUELGA DE UN ATRIBUTO, NO DE LA MEDIA QUERY. Antes era @media (prefers-color-scheme: dark) a secas, que no deja elegir: si el sistema esta en oscuro, la aplicacion esta en oscuro y no hay nada que hacer. Ahora el usuario puede fijar Claro u Oscuro, o dejarlo en Dispositivo. El truco para no duplicar los tokens es que "Dispositivo" NO se queda sin resolver: un script en el de index.html y login.html lee la preferencia guardada, la resuelve contra matchMedia y escribe el atributo ya concreto antes del primer pintado. Asi aqui solo hace falta un bloque, el de [data-tema="oscuro"], en vez de repetir la lista entera para la media query y otra vez para el atributo. Va en el y no en tema.js a proposito: cualquier cosa que corra despues de la hoja de estilos produce un parpadeo blanco al entrar en oscuro. */ :root[data-tema="oscuro"] { color-scheme: dark; --brand-primary: #1F2937; --brand-primary-hover: #2A3849; --brand-on-primary: #ffffff; --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.10); --nav-surface: rgba(26,26,25,.82); --nav-border: rgba(255,255,255,.10); --series-1: #3987e5; --status-critical: #d03b3b; --delta-bad: #e66767; } /* === Base === */ * { box-sizing: border-box; } html { overflow-x: hidden; overflow-y: auto; /* SIN "scrollbar-gutter: stable". Reservaba siempre los ~15px de la barra de scroll, y en las vistas cortas -que no scrollean- esa franja quedaba vacia a la derecha: la topbar terminaba antes del borde de la ventana. No se puede tapar desde la topbar, porque el gutter tambien encoge el bloque contenedor inicial y 100vw ya viene recortado. A cambio, al pasar de una vista corta a una larga el contenido se corre 15px cuando aparece la barra de scroll. */ } body { margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page); color: var(--text-primary); font-size: 14px; } [hidden] { display: none !important; } h1, h2, h3, p { margin: 0; } /* === Shell: topbar === */ /* ---------------------------------------------- barra fina superior Una tira por encima del topbar, a todo el ancho, con lo que no es navegacion: hoy solo Preferencias. Es la misma pieza que ya lleva VALION INSIGHTS, para que las dos herramientas se manejen igual. El hueco de la izquierda esta vacio a proposito: ahi va el selector de idioma cuando el Control Center se traduzca. */ .barra-fina { position: sticky; top: 0; /* Por encima del topbar (10): si no, el panel de Preferencias sale por debajo de la barra de navegacion. */ z-index: 11; display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: var(--barra-fina-h); padding: 0 16px; background: var(--nav-surface); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nav-border); font-size: 12.5px; } .barra-fina__boton { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--text-secondary); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .barra-fina__boton:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); } .barra-fina__boton[aria-expanded="true"] { color: var(--text-primary); border-color: var(--border); background: var(--surface-1); } .barra-fina__flecha { width: 11px; height: 11px; transition: transform .15s ease; } .barra-fina__boton[aria-expanded="true"] .barra-fina__flecha { transform: rotate(180deg); } /* El panel. Se ancla a la DERECHA del boton -- el bug que hubo en el portal de soporte fue justo este: boton a un lado y desplegable al otro. */ .barra-fina__menu { position: absolute; top: calc(var(--barra-fina-h) - 2px); right: 16px; min-width: 190px; padding: 10px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); } .barra-fina__menu[hidden] { display: none; } .barra-fina__titulo { display: block; padding: 0 14px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } /* Cada opcion es un