/* ============================================================================ BETOWA · LIQUID GLASS (Aplicativo de Gestión Académica · v1 · 2026-08-25) Capa visual común de la Suite de Dashboards · SENA CRNR La Salada ---------------------------------------------------------------------------- Inspirada en el material translúcido de las últimas versiones de macOS / iOS: superficies de vidrio con refracción, brillo especular en el borde superior, sombras suaves en capas y esquinas continuas. REGLAS DE LA CAPA · Solo apariencia: no cambia IDs, estructura, cálculos ni datos. · El contraste manda sobre el efecto: el texto se mantiene oscuro sobre vidrio claro (>= 7:1) y claro sobre vidrio oscuro. · Si el navegador no soporta backdrop-filter, o el sistema pide menos transparencia, las superficies se vuelven sólidas automáticamente. ============================================================================ */ :root{ /* --- Tinta (texto) --------------------------------------------------- */ --lg-ink:#0B1B33; /* títulos y cifras contraste 16:1 */ --lg-ink-2:#26364F; /* texto corriente contraste 11:1 */ --lg-ink-3:#4A5B75; /* texto secundario contraste 7:1 */ --lg-on-dark:#F2F7FF; --lg-on-dark-2:#C6D9EE; /* --- Identidad institucional ----------------------------------------- */ --lg-navy:#163C74; --lg-navy-deep:#0E2951; --lg-navy-ink:#0A1D3B; --lg-teal:#0091A0; --lg-teal-deep:#076E79; --lg-teal-soft:#2EB4C2; --lg-sena:#39A900; /* --- Semáforo (se conserva el significado de la suite) ---------------- */ --lg-ok:#0E8F5B; --lg-warn:#B4720A; --lg-risk:#C2410C; --lg-crit:#BE123C; --lg-info:#1D4ED8; /* --- Vidrio ----------------------------------------------------------- */ --lg-glass:rgba(255,255,255,.62); --lg-glass-2:rgba(255,255,255,.46); --lg-glass-3:rgba(255,255,255,.34); --lg-glass-solid:#F7FAFF; --lg-tint:rgba(22,60,116,.05); --lg-hair:rgba(11,27,51,.12); --lg-hair-soft:rgba(11,27,51,.07); --lg-spec:rgba(255,255,255,.92); /* brillo especular del borde superior */ --lg-blur:blur(22px) saturate(180%); --lg-blur-strong:blur(34px) saturate(190%); /* --- Radios continuos -------------------------------------------------- */ --lg-r-xl:26px; --lg-r-lg:20px; --lg-r-md:14px; --lg-r-sm:10px; /* --- Sombras en capas --------------------------------------------------- */ --lg-shadow: 0 1px 1px rgba(9,25,55,.05), 0 6px 18px rgba(9,25,55,.09), 0 20px 48px rgba(9,25,55,.09); --lg-shadow-hi: 0 1px 1px rgba(9,25,55,.06), 0 12px 28px rgba(9,25,55,.14), 0 34px 70px rgba(9,25,55,.14); --lg-edge: inset 0 1.5px 0 var(--lg-spec), inset 0 -1px 0 rgba(255,255,255,.34), inset 1.5px 0 0 rgba(255,255,255,.46), inset -1.5px 0 0 rgba(255,255,255,.46); --lg-ease:cubic-bezier(.22,1,.36,1); } /* ============================================================================ 1 · LIENZO ========================================================================== */ html{ background:#E9EFF8; } body{ background: radial-gradient(1200px 640px at 8% -10%, rgba(46,180,194,.20), transparent 62%), radial-gradient(1000px 560px at 104% 2%, rgba(22,60,116,.20), transparent 60%), radial-gradient(900px 620px at 46% 118%, rgba(57,169,0,.12), transparent 62%), linear-gradient(168deg,#F4F8FD 0%,#E9F0F9 46%,#E6F2F6 100%) !important; background-attachment:fixed !important; color:var(--lg-ink-2); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"tnum" 1,"lnum" 1,"case" 1; } /* Tipografía del sistema, como en macOS / iOS */ body,button,input,select,textarea,table{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; } /* Cifras siempre alineadas */ .value,.val,.num,.v,.n,.kpi b,.gauge-value,.gPct,td,th,.mini-pct,.pill{ font-variant-numeric:tabular-nums; } /* ============================================================================ 2 · SUPERFICIES DE VIDRIO ========================================================================== */ .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard,.miniCard,.heroCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.info-box,.notice,.modal, .filtros,.cargaPanel,.meta-card,.day{ border-radius:var(--lg-r-lg); transition:transform .34s var(--lg-ease), box-shadow .34s var(--lg-ease), border-color .34s var(--lg-ease); } .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.modal,.filtros,.cargaPanel{ position:relative; background: linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.56)) , var(--lg-tint) !important; border:1px solid var(--lg-hair) !important; box-shadow:var(--lg-shadow),var(--lg-edge) !important; border-radius:var(--lg-r-xl); } /* El desenfoque real se reserva para las superficies grandes: es lo que da la sensación de vidrio sin cargar la GPU con decenas de capas desenfocadas. */ .panel,.modal,.filtros,.cargaPanel{ -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); } /* Superficies oscuras (portada, encabezados de sección): se respeta su fondo original y solo se les añade el acabado de vidrio. */ .heroCard,.hero{ border-radius:var(--lg-r-xl) !important; box-shadow:0 18px 44px rgba(9,25,55,.26),inset 0 1px 0 rgba(255,255,255,.22) !important; border:1px solid rgba(255,255,255,.16) !important; } /* El brillo especular se hace con el borde interior luminoso (--lg-edge) y no con una lámina encima: así ningún texto pierde contraste. */ /* Tarjetas: elevación al pasar el cursor (sutil, sin “salto”) */ .card:hover,.kpi:hover,.statCard:hover,.gauge-card:hover,.gaugeCard:hover,.miniCard:hover{ transform:translateY(-3px); box-shadow:var(--lg-shadow-hi),var(--lg-edge) !important; border-color:rgba(0,145,160,.38) !important; } /* Superficies menores dentro de un panel: vidrio más liviano, sin blur (evita el costo de GPU cuando hay muchas en pantalla) */ .miniCard,.meta-card,.item,.info-box,.notice,.vchip,.sw,.it,.mini{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.50)) !important; border:1px solid var(--lg-hair-soft) !important; border-radius:var(--lg-r-md) !important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 10px rgba(9,25,55,.06) !important; } /* ============================================================================ 3 · ENCABEZADOS ========================================================================== */ header,.topbar,.top,.headerIn{ -webkit-backdrop-filter:var(--lg-blur-strong); backdrop-filter:var(--lg-blur-strong); } .topbar,header.topbar,.top{ background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%), linear-gradient(118deg,rgba(10,29,59,.94) 0%,rgba(14,41,81,.94) 48%,rgba(22,60,116,.92) 100%) !important; border-bottom:1px solid rgba(255,255,255,.16) !important; box-shadow:0 10px 34px rgba(9,25,55,.26) !important; } /* Sello superior de color institucional */ .topbar::before,header.topbar::before{ content:""; position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--lg-teal-soft),var(--lg-teal),var(--lg-navy),var(--lg-sena)); opacity:.95; } .topbar,header.topbar{position:sticky;top:0;z-index:900;overflow:hidden;} .title-main,.headerTitleMain{ color:#FFFFFF !important; letter-spacing:.2px; } .title-center,.headerTitleCenter{ color:#FFE9A3 !important; } .title-regional,.headerTitleSub{ color:#FFF4CE !important; } .title-elab{ color:rgba(255,244,206,.86) !important; } .sena-logo-title,.headerLogo,.headerLogoLeft{ background:#fff;border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.6) !important; } .header-img-right,.headerImageRight,.headerImg{ border-radius:18px !important; border:1.5px solid rgba(255,255,255,.75) !important; box-shadow:0 12px 30px rgba(0,0,0,.28) !important; } /* Bandas de título de panel (PE-04 / Juicios) */ .p04band,.panel>h3.p04band,.sectionTitle{ border-radius:0; background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 70%), linear-gradient(100deg,var(--lg-navy-deep),var(--lg-navy) 54%,var(--lg-teal)) !important; color:#fff !important; text-shadow:0 1px 2px rgba(9,25,55,.45); box-shadow:inset 0 -1px 0 rgba(255,255,255,.22),0 4px 14px rgba(9,25,55,.18) !important; } /* ============================================================================ 4 · CONTROLES ========================================================================== */ select,input[type=text],input[type=search],input[type=number],input[type=date], input:not([type]),textarea,.control select,.control input{ border:1px solid rgba(11,27,51,.18) !important; border-radius:var(--lg-r-md) !important; background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)) !important; color:var(--lg-ink) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(9,25,55,.06) !important; transition:border-color .2s var(--lg-ease),box-shadow .2s var(--lg-ease); } select:hover,input:hover,textarea:hover{ border-color:rgba(0,145,160,.42) !important; } select:focus,input:focus,textarea:focus{ outline:none; border-color:var(--lg-teal) !important; box-shadow:0 0 0 4px rgba(0,145,160,.18),inset 0 1px 0 rgba(255,255,255,.9) !important; } ::placeholder{ color:#7488A3; opacity:1; } /* Forma y respuesta táctil comunes. No se toca el color de los botones que ya traen su propia identidad (.btn, .ctaBtn, .btn.teal, .btn.danger…). */ button,.btn,.clear-btn,.ctaBtn,.toolbar button,.tools button,.upload-btn{ border-radius:var(--lg-r-md); transition:transform .18s var(--lg-ease),box-shadow .18s var(--lg-ease), background .18s var(--lg-ease),border-color .18s var(--lg-ease), filter .18s var(--lg-ease); } button:hover,.btn:hover,.clear-btn:hover,.ctaBtn:hover,.upload-btn:hover{ transform:translateY(-1px); } button:active,.btn:active,.clear-btn:active,.ctaBtn:active,.upload-btn:active{ transform:translateY(0) scale(.985); } /* Botones sin identidad propia: acabado de vidrio claro y texto oscuro */ button:not([class]),.clear-btn,.toolbar button,.tools button{ border:1px solid rgba(11,27,51,.16) !important; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,245,252,.85)) !important; color:var(--lg-navy-deep) !important; font-weight:650; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 6px rgba(9,25,55,.08) !important; } button:not([class]):hover,.clear-btn:hover,.toolbar button:hover,.tools button:hover{ border-color:rgba(0,145,160,.45) !important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(226,244,246,.92)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px rgba(9,25,55,.14) !important; } /* Acción principal: relleno institucional */ .upload-btn{ background:linear-gradient(135deg,var(--lg-navy-deep) 0%,var(--lg-navy) 46%,var(--lg-teal) 100%) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:0 10px 24px rgba(14,41,81,.30),inset 0 1px 0 rgba(255,255,255,.35) !important; } .upload-btn:hover{ filter:brightness(1.06); box-shadow:0 14px 32px rgba(14,41,81,.38),inset 0 1px 0 rgba(255,255,255,.35) !important; } .clear-btn.danger{ background:linear-gradient(180deg,rgba(255,241,242,.96),rgba(254,226,230,.9)) !important; border-color:rgba(190,18,60,.32) !important; color:#9F1239 !important; } /* Foco accesible en toda la suite */ a:focus-visible,button:focus-visible,select:focus-visible, input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2.5px solid var(--lg-teal) !important; outline-offset:2px; border-radius:var(--lg-r-sm); } /* ============================================================================ 5 · ETIQUETAS, CHIPS Y PÍLDORAS ========================================================================== */ .chip,.badge,.pill,.vchip,.sello{ border-radius:999px !important; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.60)) !important; border:1px solid var(--lg-hair-soft) !important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 8px rgba(9,25,55,.07) !important; color:var(--lg-ink-2) !important; } .chip b,.badge b,.pill b{ color:var(--lg-ink) !important; } /* Píldoras semánticas: fondo tenue + texto oscuro = contraste alto */ .pill.aprobado,.p-ok{ background:rgba(214,245,229,.92) !important; color:#065F46 !important; border-color:rgba(14,143,91,.30) !important; } .pill.pendiente { background:rgba(255,241,214,.92) !important; color:#8A5300 !important; border-color:rgba(180,114,10,.30) !important; } .pill.cancelado,.p-bad{ background:rgba(255,232,236,.92) !important; color:#9F1239 !important; border-color:rgba(190,18,60,.28) !important; } .pill.estado { background:rgba(224,236,255,.92) !important; color:#1E40AF !important; border-color:rgba(29,78,216,.26) !important; } /* ============================================================================ 6 · TABLAS ========================================================================== */ /* Las tablas largas se desplazan dentro de su panel en vez de estirar la página varios miles de píxeles: el encabezado queda siempre a la vista. */ .table-wrap,.tablaWrap,.tw,.lect-wrap{ overflow:auto; max-height:72vh; overscroll-behavior:contain; } table{ border-collapse:separate; border-spacing:0; } /* Una tabla ancha no se comprime para caber: conserva el ancho que pide su contenido y es el marco el que se desplaza a los lados. Se usa !important porque dos tableros cargan esta hoja antes que sus estilos propios y allí "width:100%" y "table-layout:fixed" ganarían el empate. (V7 · tablas) */ .table-wrap>table,.tablaWrap>table,.tw>table,.lect-wrap>table{ width:max-content !important; min-width:100% !important; table-layout:auto !important; } /* Los encabezados nunca parten palabras ni letras: definen el ancho de su columna en una sola línea. */ thead th,th{ white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important; } /* Las celdas parten entre palabras; solo un código sin espacios se corta. */ td{ min-width:8ch; overflow-wrap:break-word; word-break:normal; } thead th,th{ position:sticky; top:0; z-index:2; background:linear-gradient(180deg,rgba(243,247,253,.97),rgba(232,240,250,.94)) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--lg-navy-deep) !important; font-weight:750; letter-spacing:.035em; border-bottom:1px solid rgba(11,27,51,.16) !important; } td{ border-bottom:1px solid var(--lg-hair-soft) !important; color:var(--lg-ink-2); } tbody tr{ transition:background .16s ease; } tbody tr:nth-child(even) td{ background:rgba(255,255,255,.34); } tbody tr:hover td{ background:rgba(46,180,194,.12) !important; } /* ============================================================================ 7 · BARRAS DE PROGRESO Y MEDIDORES ========================================================================== */ .progress,.bar-track,.track,.bar{ border-radius:999px !important; background:rgba(11,27,51,.09) !important; box-shadow:inset 0 1px 2px rgba(9,25,55,.10); overflow:hidden; } .progress>div,.bar-fill,.track>div,.bar>span{ border-radius:999px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); transition:width .6s var(--lg-ease); } .progress div.green,.bar-fill{ background:linear-gradient(90deg,#0E8F5B,#39A900) !important; } .progress div.yellow,.bar-fill.pend{ background:linear-gradient(90deg,#E9A93C,#B4720A) !important; } .progress div.red{ background:linear-gradient(90deg,#E11D48,#BE123C) !important; } .gauge::after{ background:rgba(255,255,255,.96) !important; } .gauge-value,.gPct{ color:var(--lg-navy-deep) !important; font-weight:800; } /* ============================================================================ 8 · BARRA FLOTANTE DE NAVEGACIÓN (dock estilo iOS) ========================================================================== */ #betowaNav{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.54)) !important; -webkit-backdrop-filter:var(--lg-blur-strong) !important; backdrop-filter:var(--lg-blur-strong) !important; border:1px solid rgba(255,255,255,.75) !important; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(9,25,55,.18), 0 30px 60px rgba(9,25,55,.16) !important; padding:7px 9px !important; } #betowaNav a{ color:var(--lg-navy-deep) !important; background:rgba(255,255,255,.42) !important; border:1px solid rgba(11,27,51,.08) !important; font-weight:700 !important; transition:transform .2s var(--lg-ease),background .2s var(--lg-ease), color .2s var(--lg-ease),box-shadow .2s var(--lg-ease); } #betowaNav a:hover{ background:rgba(255,255,255,.82) !important; color:var(--lg-teal-deep) !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(9,25,55,.14) !important; } #betowaNav a.bnav-active{ background:linear-gradient(135deg,var(--lg-navy) 0%,var(--lg-teal) 100%) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; box-shadow:0 8px 20px rgba(14,41,81,.34),inset 0 1px 0 rgba(255,255,255,.35) !important; } /* Sello de versión de la entrega */ #betowaVersion{ position:fixed; left:14px; bottom:78px; z-index:9989; font:700 10.5px/1 -apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--lg-navy-deep); background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border:1px solid rgba(255,255,255,.75); border-radius:999px; padding:7px 11px; box-shadow:0 6px 18px rgba(9,25,55,.14); opacity:.82; } #betowaVersion:hover{ opacity:1; } @media(max-width:640px){ #betowaVersion{ bottom:118px; left:8px; } } /* Indicador de datos publicados (lo crea betowa-autoload.js) */ #betowaDataInfo{ background:rgba(255,255,255,.62) !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:16px !important; box-shadow:0 10px 26px rgba(9,25,55,.16) !important; } /* ============================================================================ 9 · PORTADA ========================================================================== */ .statCard .n,.statCard .value{ color:var(--lg-navy-deep) !important; } .card .cTop,.card .cIcon{ border-radius:var(--lg-r-md); } /* ============================================================================ 10 · MODALES ========================================================================== */ .modalBack,.modal-back{ background:rgba(9,25,55,.34) !important; -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); } .modal{ border-radius:var(--lg-r-xl) !important; box-shadow:0 40px 90px rgba(9,25,55,.34),var(--lg-edge) !important; } /* ============================================================================ 11 · BARRAS DE DESPLAZAMIENTO ========================================================================== */ *{ scrollbar-color:rgba(22,60,116,.34) transparent; scrollbar-width:thin; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(22,60,116,.38),rgba(14,41,81,.30)); border-radius:999px; border:3px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(0,145,160,.62),rgba(7,110,121,.52)); background-clip:padding-box; } /* ============================================================================ 12 · RESPALDOS DE COMPATIBILIDAD Y ACCESIBILIDAD ========================================================================== */ /* Navegador sin soporte de vidrio: superficies sólidas, mismo contraste */ @supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.modal,.filtros,.cargaPanel,#betowaNav{ background:var(--lg-glass-solid) !important; } .topbar,header.topbar,.top{ background:linear-gradient(118deg,#0A1D3B,#163C74) !important; } } /* El sistema pide menos transparencia (Accesibilidad de macOS / iOS) */ @media (prefers-reduced-transparency:reduce){ .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.modal,.filtros,.cargaPanel,#betowaNav{ background:#FBFDFF !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } } /* El sistema pide menos movimiento */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .card:hover,.kpi:hover,.statCard:hover,.gauge-card:hover{ transform:none; } } /* Alto contraste forzado */ @media (prefers-contrast:more){ :root{ --lg-glass:rgba(255,255,255,.90); --lg-hair:rgba(11,27,51,.34); } .panel,.card,.kpi,.statCard,.gauge-card,.table-wrap,.tablaWrap{ background:rgba(255,255,255,.94) !important; border-color:rgba(11,27,51,.34) !important; } td{ color:#0B1B33; } } /* Impresión institucional limpia */ @media print{ #betowaNav,#betowaDataInfo,#betowaVersion,.upload-btn,.clear-btn, input[type=file],.toolbar button,.btn{ display:none !important; } html,body{ background:#fff !important; } .panel,.card,.kpi,.statCard,.table-wrap,.tablaWrap{ background:#fff !important; box-shadow:none !important; border:1px solid #C7D3E4 !important; break-inside:avoid; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } header,.topbar{ position:static !important; } } /* ============================================================================ 13 · UNIFICACIÓN DE LA SUITE (V2) ---------------------------------------------------------------------------- Los siete tableros nacieron en momentos distintos y cada uno traía su propia estructura de encabezado, sus bandas de título y sus tarjetas. Aquí se les da una sola presentación —misma altura de encabezado, misma tipografía, mismas bandas, mismas tarjetas— sin tocar el HTML de cada aplicativo: solo se traducen sus clases a un mismo lenguaje visual. ========================================================================== */ :root{ --u-shell:1520px; /* ancho máximo del contenido en toda la suite */ --u-gutter:18px; /* margen lateral */ --u-head:96px; /* altura del encabezado */ } /* --------------------------------------------------------------------------- 13.1 · ENCABEZADO ÚNICO Todos los encabezados pasan a: logo · títulos · fotografía · acciones ------------------------------------------------------------------------- */ header, header.topbar, header.top{ position:sticky; top:0; z-index:900; } header, header.topbar, header.top, header.ga-header{ z-index:900; min-height:var(--u-head); display:block !important; padding:0 !important; overflow:hidden; background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 62%), linear-gradient(118deg,rgba(10,29,59,.95) 0%,rgba(14,41,81,.95) 46%,rgba(22,60,116,.93) 100%) !important; border-bottom:1px solid rgba(255,255,255,.16) !important; box-shadow:0 10px 34px rgba(9,25,55,.24) !important; -webkit-backdrop-filter:var(--lg-blur-strong); backdrop-filter:var(--lg-blur-strong); } /* Sello de color institucional en el borde superior */ header::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--lg-teal-soft),var(--lg-teal),var(--lg-navy),var(--lg-sena)); } /* Contenedor interno: misma rejilla en los siete tableros */ header > .headerIn, header > .headerBrand, header > .topin, header > .headIn, header > .ga-header-in{ max-width:var(--u-shell) !important; margin:0 auto !important; padding:13px var(--u-gutter) !important; min-height:var(--u-head); display:flex !important; flex-wrap:nowrap; align-items:center !important; justify-content:flex-start !important; gap:16px !important; background:none !important; border:0 !important; box-shadow:none !important; } /* El tablero de juicios no tiene contenedor interno: se arma sobre el header */ header.topbar{ display:flex !important; flex-wrap:nowrap; align-items:center !important; justify-content:flex-start !important; gap:16px !important; max-width:none; padding:13px max(var(--u-gutter),calc((100% - var(--u-shell))/2 + var(--u-gutter))) !important; } /* Logotipo SENA */ .headerLogo,.headerLogoLeft,.headLogo,.ga-logo,.sena-logo-title, header.top .brand .logo{ width:56px !important; height:56px !important; flex:0 0 auto !important; padding:5px !important; object-fit:contain !important; background:#fff !important; border-radius:16px !important; box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 0 0 1px rgba(14,41,81,.10) !important; } header.top .brand .logo img{ width:100%; height:100%; object-fit:contain; } /* Bloque de títulos */ .headerTitles,.headTitles,.ga-titles,.title-block, header .headerBrand > div:not([class]), header.top .brand > div:not([class]){ flex:1 1 auto !important; min-width:0; text-align:left !important; display:flex; flex-direction:column; gap:1px; } header.top .brand{ flex:1 1 auto; display:flex; align-items:center; gap:14px; min-width:0; } header.top .brand > div:not([class]){ flex:1 1 auto; } /* Cualquier otro elemento del encabezado (botones, sesión) no se estira */ header > .headerIn > *:not(.headerTitles):not(.headTitles):not(.ga-titles), header > .headIn > *:not(.headTitles), header > .ga-header-in > *:not(.ga-titles), header.topbar > *:not(.title-block){ flex:0 0 auto; } /* Jerarquía tipográfica común */ .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1{ font-size:19px !important; line-height:1.18 !important; font-weight:800 !important; letter-spacing:.4px !important; color:#FFFFFF !important; margin:0 !important; text-transform:uppercase !important; text-shadow:0 1px 2px rgba(9,25,55,.35); } .t2,.headerTitleCenter,.ga-t2,.title-center,header.top .brand .sub{ font-size:12px !important; line-height:1.3 !important; font-weight:750 !important; letter-spacing:.2px !important; color:#FFE9A3 !important; margin:0 !important; text-transform:none !important; } .t3,.ga-t3,.title-regional,header.top .brand .sub2{ font-size:11px !important; line-height:1.3 !important; font-weight:650 !important; color:rgba(255,244,206,.88) !important; margin:0 !important; text-transform:none !important; } .headerTitleSub{ font-size:11px !important; font-weight:650 !important; color:rgba(255,244,206,.88) !important; margin:0 !important; } .title-elab{ font-size:10.5px !important; color:rgba(226,238,255,.78) !important; } /* Encabezados sencillos (panel de administración): el fondo pasó a ser oscuro, así que su texto tiene que ir en claro para no perder legibilidad. */ header > h1{ color:#FFFFFF !important; font-size:19px !important; font-weight:800 !important; margin:0 !important; text-transform:uppercase !important; letter-spacing:.4px; text-shadow:0 1px 2px rgba(9,25,55,.35); } header > p{ color:#FFE9A3 !important; font-size:12px !important; font-weight:750 !important; margin:3px 0 0 !important; } header > h1,header > p{ position:relative; z-index:1; } header:not(.topbar){ display:flex; flex-direction:column; justify-content:center; } header:not(.topbar) > h1,header:not(.topbar) > p{ text-align:center; } /* La segunda línea "Coordinación Académica" de PE-04 y Viáticos traía color fijo */ header .headerTitleSub[style]{ color:rgba(226,238,255,.78) !important; font-size:10.5px !important; } /* Fotografía del centro */ .headerImg,.headerImageRight,.headImg,.ga-img,.header-img-right{ width:150px !important; height:60px !important; flex:0 0 auto !important; object-fit:cover !important; border-radius:14px !important; border:1.5px solid rgba(255,255,255,.75) !important; box-shadow:0 10px 26px rgba(0,0,0,.30) !important; } /* Acciones del encabezado (administrador, exportaciones) */ .adminTop,.goAdmin, header .btn,header button, header.top .toolbar{ align-self:center; } header.top .toolbar{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } header.top .toolbar button{ font-size:11.5px !important; padding:7px 11px !important; } .adminTop,.goAdmin{ white-space:nowrap; font-size:12px !important; font-weight:750 !important; padding:9px 14px !important; border-radius:999px !important; background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08)) !important; border:1px solid rgba(255,255,255,.45) !important; color:#FFFFFF !important; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.20) !important; } .adminTop:hover,.goAdmin:hover{ background:rgba(255,255,255,.28) !important; } @media(max-width:900px){ header > .headerIn,header > .headerBrand,header > .topin, header > .headIn,header > .ga-header-in,header.topbar{ flex-wrap:wrap !important; row-gap:10px !important; } .headerImg,.headerImageRight,.headImg,.ga-img,.header-img-right{ display:none !important; } .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1{ font-size:16px !important; } } /* --------------------------------------------------------------------------- 13.2 · ANCHO DE PÁGINA COMÚN Cada tablero traía el suyo (1.180, 1.360, 1.600, 1.640 px). Ahora todos comparten el mismo lienzo y los bloques quedan alineados de un tablero a otro. ------------------------------------------------------------------------- */ .pageWrap,.wrap,.wrapper,.page,.layout,.ga-shell,.container, .header-grid,.header-inner,.footer-note, body > .content, body > .hero,body > .stats,body > .sectionTitle,body > .cards, body > .adminCard,body > footer{ max-width:var(--u-shell) !important; margin-left:auto !important; margin-right:auto !important; } .pageWrap,.wrap,.wrapper,.page,.ga-shell,.container,body > .content{ padding-left:var(--u-gutter) !important; padding-right:var(--u-gutter) !important; } /* Gestión Académica: la barra lateral es fija, así que el ancho se limita a los bloques de contenido y no al contenedor, que debe conservar su margen. */ main.main{ max-width:none !important; } main.main > .hero,main.main > .module{ max-width:var(--u-shell) !important; margin-left:auto !important; margin-right:auto !important; } .pageWrap{ padding-top:16px !important; } /* --------------------------------------------------------------------------- 13.3 · BANDA DE TÍTULO DE PANEL, IGUAL EN TODA LA SUITE ------------------------------------------------------------------------- */ .panel > h3, .panel > .head, .panel > .title, .card > h3, .card > .title, .card-title, .p04band, .gpanel > h3, .dash > .panel-head{ display:flex !important; align-items:center !important; gap:9px; min-height:44px; margin:0 0 12px !important; padding:10px 16px !important; font-size:12.5px !important; font-weight:800 !important; letter-spacing:.7px !important; text-transform:uppercase !important; color:#fff !important; /* Tres capas: destello que recorre la banda · brillo superior · color base. Se declaran por separado (no con el atajo "background") para que la posición del destello quede libre y se pueda animar. */ background-image: linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 42%, rgba(255,255,255,.14) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%), linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 70%), linear-gradient(100deg,var(--lg-navy-deep),var(--lg-navy) 54%,var(--lg-teal)) !important; background-size:46% 100%,auto,auto !important; background-repeat:no-repeat,no-repeat,no-repeat !important; border:0 !important; border-radius:0 !important; text-shadow:0 1px 2px rgba(9,25,55,.40); box-shadow:inset 0 -1px 0 rgba(255,255,255,.22),0 4px 14px rgba(9,25,55,.16) !important; } /* Para que la banda llegue siempre justo al borde, el relleno del panel es el mismo en toda la suite y el margen negativo se calcula a partir de él. */ .panel,.card{ --u-pad:16px; padding:var(--u-pad) !important; overflow:hidden; } .cargaPanel{ padding:0 !important; } .cargaBody{ padding:16px !important; } .panel > h3,.panel > .head,.panel > .title, .card > h3,.card > .title,.p04band{ margin-left:calc(-1 * var(--u-pad,16px)) !important; margin-right:calc(-1 * var(--u-pad,16px)) !important; margin-top:calc(-1 * var(--u-pad,16px)) !important; width:auto !important; } .cargaPanel > .p04band{ margin:0 !important; } .panel > h3.rojo{ background-image: linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 42%, rgba(255,255,255,.14) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%), linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 70%), linear-gradient(100deg,#7F1D2E,#BE123C 60%,#E11D48) !important; } /* Panel de administración: el título de cada espacio ocupa toda la banda, con el contador de archivos y el enlace al tablero alineados a la derecha. */ .dash > .panel-head > .dash-title{ flex:1 1 auto; width:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .dash > .panel-head .badge-count{ font-size:10.5px; font-weight:800; letter-spacing:.04em; color:#0B1B33; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:4px 10px; } .dash > .panel-head .view-link{ font-size:11px; font-weight:750; letter-spacing:.03em; text-decoration:none; color:#DFF7FA !important; white-space:nowrap; } .dash > .panel-head .view-link:hover{ color:#fff !important; text-decoration:underline; } /* Un aviso de estado vacío no debe dejar un hueco en blanco */ .notice:empty,.info-box:empty,#status:empty{ display:none !important; } /* Subtítulo bajo la banda */ .panel > h3 + p,.panel > .head + p,.p04band + p{ margin:0 0 10px !important; font-size:12px; color:var(--lg-ink-3); } /* --------------------------------------------------------------------------- 13.4 · TARJETAS DE INDICADOR IGUALES ------------------------------------------------------------------------- */ .kpi,.card.kpi,.statCard,.gauge-card,.gaugeCard,.miniCard{ padding:15px 16px !important; } .kpi .label,.kpi .l,.card .label,.statCard .l,.gauge-card .label, .miniCard .label,.miniCard .k,.infobox .lbl{ font-size:10.5px !important; font-weight:800 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--lg-ink-3) !important; line-height:1.3 !important; } .kpi .num,.kpi .value,.kpi .v,.card .value,.statCard .n,.miniCard .v{ font-size:29px !important; font-weight:800 !important; line-height:1.12 !important; color:var(--lg-navy-deep) !important; margin-top:3px !important; font-variant-numeric:tabular-nums; } .kpi .note,.kpi .sub,.card .sub,.statCard .l,.miniCard .s,.gauge-label-mini{ font-size:11.5px !important; color:var(--lg-ink-3) !important; line-height:1.35 !important; } /* --------------------------------------------------------------------------- 13.5 · AVISO DE TABLERO SIN DATOS Una sola línea discreta. La carga de archivos vive en el panel de administración: aquí solo se explica por qué el tablero está vacío. ------------------------------------------------------------------------- */ #betowaSinDatos{ margin:0 0 14px; } #betowaSinDatos.bsSuelto{ max-width:var(--u-shell); margin:16px auto; padding:0 var(--u-gutter); } #betowaSinDatos .bsBox{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-radius:var(--lg-r-lg); background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.58)),var(--lg-tint); -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); border:1px solid var(--lg-hair); box-shadow:var(--lg-shadow),var(--lg-edge); } #betowaSinDatos .bsIcon{ font-size:18px; flex:0 0 auto; opacity:.8; } #betowaSinDatos .bsTexto{ flex:1 1 260px; min-width:0; font-size:12.5px; line-height:1.5; color:var(--lg-ink-3); } #betowaSinDatos .bsTexto b{ color:var(--lg-ink); font-weight:750; } #betowaSinDatos .bsBtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:750; text-decoration:none; white-space:nowrap; padding:8px 14px; border-radius:999px; background:linear-gradient(135deg,var(--lg-navy-deep) 0%,var(--lg-navy) 46%,var(--lg-teal) 100%); color:#fff; border:1px solid rgba(255,255,255,.28); box-shadow:0 6px 16px rgba(14,41,81,.24),inset 0 1px 0 rgba(255,255,255,.32); transition:filter .18s var(--lg-ease),transform .18s var(--lg-ease); } #betowaSinDatos .bsBtn:hover{ filter:brightness(1.08); transform:translateY(-1px); } /* --------------------------------------------------------------------------- 13.6 · GESTIÓN ACADÉMICA · misma retícula que el resto de la suite ------------------------------------------------------------------------- */ .ga-shell,.ga-main{ max-width:var(--u-shell); margin:0 auto; } /* Las tarjetas de resumen quedaban una debajo de otra ocupando todo el ancho */ .ga-kpis,.ga-stats,.ga-cards{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important; gap:14px !important; } /* Iconos en línea del catálogo Lucide: tamaño fijo para que no empujen el texto */ [data-lucide],.lucide{ width:16px !important; height:16px !important; flex:0 0 auto; } .ga-hero .lucide,.ga-hero [data-lucide]{ width:18px !important; height:18px !important; } /* ============================================================================ 14 · MOVIMIENTO (V3) ---------------------------------------------------------------------------- Cuatro gestos, todos discretos y todos compuestos por la tarjeta gráfica (solo transform, opacidad y posición de fondo): no obligan a rehacer el diseño de la página, que es lo que importa en tableros con cientos de miles de filas. 14.1 · oleaje a dos capas y destello en la banda azul de cada título 14.2 · respiración lenta del fondo de la página 14.3 · brillo que recorre el filete de color del encabezado 14.4 · entrada de los paneles al abrir el tablero Todo se detiene si el sistema pide menos movimiento y al imprimir. ========================================================================== */ /* --------------------------------------------------------------------------- 14.1 · OLEAJE Y DESTELLO EN LAS BANDAS DE TÍTULO Dos mareas cruzadas —una hacia la izquierda, otra hacia la derecha, a distinta velocidad— y una luz que recorre la banda cada ocho segundos. Las tres capas van DEBAJO del texto, así que el título no pierde nitidez. ------------------------------------------------------------------------- */ .panel > h3, .panel > .head, .panel > .title, .card > h3, .card > .title, .card-title, .p04band, .gpanel > h3, .dash > .panel-head{ position:relative; isolation:isolate; /* la banda pasa a ser su propio contexto de pintado */ overflow:hidden; animation:bwDestello 8.5s ease-in-out infinite; } .panel > h3::after,.panel > .head::after,.panel > .title::after, .card > h3::after,.card > .title::after,.card-title::after, .p04band::after,.gpanel > h3::after,.dash > .panel-head::after, .panel > h3::before,.panel > .head::before,.panel > .title::before, .card > h3::before,.card > .title::before,.card-title::before, .p04band::before,.gpanel > h3::before,.dash > .panel-head::before{ content:""; position:absolute; z-index:-1; /* encima del fondo, debajo del texto */ top:0; left:0; height:100%; pointer-events:none; background-repeat:repeat-x; will-change:transform; } /* Marea A · tres líneas, hacia la izquierda */ .panel > h3::after,.panel > .head::after,.panel > .title::after, .card > h3::after,.card > .title::after,.card-title::after, .p04band::after,.gpanel > h3::after,.dash > .panel-head::after{ width:calc(100% + 240px); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26 q30 -11 60 0 t60 0 t60 0 t60 0' fill='none' stroke='%23ffffff' stroke-opacity='0.20' stroke-width='1.6'/%3E%3Cpath d='M0 35 q30 -8 60 0 t60 0 t60 0 t60 0' fill='none' stroke='%23ffffff' stroke-opacity='0.13' stroke-width='1.2'/%3E%3Cpath d='M0 15 q30 -6 60 0 t60 0 t60 0 t60 0' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); background-size:240px 100%; animation:bwOleajeA 22s linear infinite; } /* Marea B · onda más larga y tenue, hacia la derecha */ .panel > h3::before,.panel > .head::before,.panel > .title::before, .card > h3::before,.card > .title::before,.card-title::before, .p04band::before,.gpanel > h3::before,.dash > .panel-head::before{ width:calc(100% + 340px); left:-340px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='48' viewBox='0 0 340 48' preserveAspectRatio='none'%3E%3Cpath d='M0 31 q42.5 13 85 0 t85 0 t85 0 t85 0' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.4'/%3E%3Cpath d='M0 20 q42.5 9 85 0 t85 0 t85 0 t85 0' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E"); background-size:340px 100%; animation:bwOleajeB 31s linear infinite; } @keyframes bwOleajeA{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-240px,0,0); } } @keyframes bwOleajeB{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(340px,0,0); } } /* Destello: la luz entra por la izquierda, cruza y descansa hasta el próximo giro */ @keyframes bwDestello{ 0% { background-position:-70% 0,0 0,0 0; } 62% { background-position:170% 0,0 0,0 0; } 100% { background-position:170% 0,0 0,0 0; } } /* --------------------------------------------------------------------------- 14.2 · RESPIRACIÓN DEL FONDO Dos capas fijas con manchas de color muy difusas que se desplazan despacio. Al ser fijas y estar detrás de todo, el desplazamiento no mueve el contenido. ------------------------------------------------------------------------- */ /* El degradado base se pinta en y el queda transparente: solo así las capas de color de abajo (z-index:-1) quedan por encima del lienzo y no escondidas detrás del fondo del cuerpo. */ html{ background:linear-gradient(168deg,#F4F8FD 0%,#E9F0F9 46%,#E6F2F6 100%) !important; background-attachment:fixed !important; } body{ background:transparent !important; } body::before, body::after{ content:""; position:fixed; z-index:-1; inset:-25%; pointer-events:none; will-change:transform; } body::before{ background: radial-gradient(closest-side at 26% 30%, rgba(46,180,194,.17), transparent 72%), radial-gradient(closest-side at 74% 24%, rgba(22,60,116,.15), transparent 74%); /* En pasos muy finos (uno cada ~0,35 s, menos de 1 px): el ojo lo lee como un desplazamiento continuo, pero el navegador solo tiene que recalcular el desenfoque de los paneles tres veces por segundo en vez de sesenta. */ animation:bwFondoA 52s steps(150,end) infinite alternate; } body::after{ background: radial-gradient(closest-side at 44% 86%, rgba(57,169,0,.10), transparent 72%), radial-gradient(closest-side at 88% 70%, rgba(0,145,160,.12), transparent 74%); animation:bwFondoB 74s steps(180,end) infinite alternate; } @keyframes bwFondoA{ from{ transform:translate3d(-2.5%,-1.5%,0) scale(1); } to { transform:translate3d( 3%, 2.5%,0) scale(1.10); } } @keyframes bwFondoB{ from{ transform:translate3d( 2.5%, 2%,0) scale(1.08); } to { transform:translate3d(-3%, -2%,0) scale(1); } } /* --------------------------------------------------------------------------- 14.3 · FILETE DEL ENCABEZADO El hilo de color institucional del borde superior se mece de lado a lado. ------------------------------------------------------------------------- */ /* Se declara la imagen y el tamaño por separado: el atajo "background" con !important fijaría también la posición y anularía la animación. */ header::before, .topbar::before, header.topbar::before{ background-image:linear-gradient(90deg, var(--lg-teal-soft),var(--lg-teal),var(--lg-navy),var(--lg-sena), var(--lg-teal),var(--lg-teal-soft)) !important; background-size:220% 100% !important; background-repeat:no-repeat !important; animation:bwFilete 24s ease-in-out infinite alternate; } @keyframes bwFilete{ from{ background-position:0% 50%; } to { background-position:100% 50%; } } /* --------------------------------------------------------------------------- 14.4 · ENTRADA DE LOS PANELES Al abrir un tablero, las superficies asoman con un desplazamiento mínimo. Es un gesto de una sola vez: no consume nada después del primer medio segundo. ------------------------------------------------------------------------- */ /* "backwards" y no "both": al terminar, la tarjeta vuelve a regirse por sus propias reglas. Con "both" el último fotograma (transform:none) se quedaría fijo y anularía el leve levantamiento al pasar el cursor. */ .panel,.card,.statCard,.heroCard,.gauge-card,.gaugeCard{ animation:bwEntrada .42s cubic-bezier(.22,1,.36,1) backwards; } @keyframes bwEntrada{ from{ opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:none; } } /* Escalonado breve para las primeras superficies de la página */ .pageWrap > *:nth-child(1) .panel,.page > *:nth-child(1),.wrap > *:nth-child(1){ animation-delay:0s; } .page > *:nth-child(2),.wrap > *:nth-child(2){ animation-delay:.05s; } .page > *:nth-child(3),.wrap > *:nth-child(3){ animation-delay:.10s; } .page > *:nth-child(4),.wrap > *:nth-child(4){ animation-delay:.15s; } /* --------------------------------------------------------------------------- 14.5 · LÍMITES SENSATOS ------------------------------------------------------------------------- */ /* En pantallas pequeñas se deja quieto el fondo: la GPU de un teléfono la agradece y el efecto casi no se aprecia. */ @media (max-width:820px){ body::before,body::after{ animation:none; } } /* El sistema pide menos movimiento, o se está imprimiendo */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; } } @media print{ .panel > h3::after,.panel > .head::after,.panel > .title::after, .card > h3::after,.card > .title::after,.card-title::after, .p04band::after,.gpanel > h3::after,.dash > .panel-head::after, .panel > h3::before,.panel > .head::before,.panel > .title::before, .card > h3::before,.card > .title::before,.card-title::before, .p04band::before,.gpanel > h3::before, body::before,body::after{ display:none !important; } *{ animation:none !important; } } /* ============================================================================ 15 · PORTADA CON VIDA (V3) ---------------------------------------------------------------------------- La página principal es lo primero que se ve, así que se le da un poco más de presencia: luces que se pasean por la tarjeta institucional, una marea en su borde inferior, el rótulo de sección con su propio latido y los iconos de cada tablero flotando apenas. ========================================================================== */ .heroCard{ position:relative; overflow:hidden; } /* Dos luces suaves recorriendo la tarjeta */ .heroCard::before{ content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none; background: radial-gradient(closest-side at 22% 34%, rgba(255,255,255,.16), transparent 70%), radial-gradient(closest-side at 78% 66%, rgba(46,180,194,.26), transparent 72%); animation:bwLucesHero 34s ease-in-out infinite alternate; will-change:transform; } /* Marea en el borde inferior de la tarjeta */ .heroCard::after{ content:""; position:absolute; left:0; bottom:0; width:calc(100% + 300px); height:74px; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='74' viewBox='0 0 300 74' preserveAspectRatio='none'%3E%3Cpath d='M0 46 q37.5 -16 75 0 t75 0 t75 0 t75 0 L300 74 L0 74 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M0 56 q37.5 -13 75 0 t75 0 t75 0 t75 0' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1.6'/%3E%3Cpath d='M0 64 q37.5 -9 75 0 t75 0 t75 0 t75 0' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:300px 74px; animation:bwMareaHero 26s linear infinite; will-change:transform; } /* El texto y la fotografía siempre por encima de las luces */ .heroText,.heroPhoto{ position:relative; z-index:1; } @keyframes bwLucesHero{ from{ transform:translate3d(-3%,-2%,0) scale(1); } to { transform:translate3d( 4%, 3%,0) scale(1.12); } } @keyframes bwMareaHero{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-300px,0,0); } } /* Rótulo "DASHBOARDS DISPONIBLES": su filete respira */ .sectionTitle::after{ content:""; flex:1 1 auto; height:3px; border-radius:999px; background-image:linear-gradient(90deg, var(--lg-teal-soft),var(--lg-teal),var(--lg-navy),var(--lg-teal),var(--lg-teal-soft)); background-size:220% 100%; opacity:.75; animation:bwFilete 18s ease-in-out infinite alternate; } /* Los iconos de las tarjetas flotan apenas, cada uno a su ritmo */ .cIcon{ animation:bwFlota 6s ease-in-out infinite; will-change:transform; } .card:nth-child(2) .cIcon{ animation-delay:-1.0s; } .card:nth-child(3) .cIcon{ animation-delay:-2.0s; } .card:nth-child(4) .cIcon{ animation-delay:-3.0s; } .card:nth-child(5) .cIcon{ animation-delay:-4.0s; } .card:nth-child(6) .cIcon{ animation-delay:-5.0s; } .card:hover .cIcon{ animation-play-state:paused; transform:scale(1.06); } @keyframes bwFlota{ 0%,100%{ transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-3px,0); } } /* Las cifras de la portada asoman al cargar */ .statCard{ animation:bwEntrada .5s cubic-bezier(.22,1,.36,1) backwards; } .stats > *:nth-child(2) .statCard,.stats > .statCard:nth-child(2){ animation-delay:.06s; } .stats > *:nth-child(3) .statCard,.stats > .statCard:nth-child(3){ animation-delay:.12s; } .stats > *:nth-child(4) .statCard,.stats > .statCard:nth-child(4){ animation-delay:.18s; } .stats > *:nth-child(5) .statCard,.stats > .statCard:nth-child(5){ animation-delay:.24s; } @media (max-width:820px){ .heroCard::before,.cIcon{ animation:none; } } /* ============================================================================ 16 · AJUSTES DE DISPOSICIÓN (V5) ---------------------------------------------------------------------------- Tres arreglos concretos, cada uno acotado a su tablero, y un detalle común para los títulos principales. ========================================================================== */ /* --------------------------------------------------------------------------- 16.1 · AMBIENTES · Filtros del diagrama Venían en cuatro columnas con los campos alineados por abajo: el mes caía más bajo que los demás, la búsqueda ocupaba dos columnas y quedaba un hueco a la derecha. Ahora los cinco desplegables llenan una fila y la búsqueda comparte la siguiente con el botón de limpiar, sin huecos. ------------------------------------------------------------------------- */ #filtrosDiagrama{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; align-items:start !important; gap:14px 16px !important; } #filtrosDiagrama > .fb{ min-width:0; } #filtrosDiagrama > .fb > label{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--lg-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #filtrosDiagrama > .span2{ grid-column:1 / -2 !important; } #filtrosDiagrama > .fbAccion{ grid-column:-2 / -1 !important; align-content:start; } #filtrosDiagrama > .fbAccion > label{ visibility:hidden; } #filtrosDiagrama > .fbAccion > .btn{ width:100%; justify-content:center; } #filtrosDiagrama .busca-info:empty{ display:none; } @media(max-width:1180px){ #filtrosDiagrama{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } #filtrosDiagrama > .span2{ grid-column:1 / -2 !important; } } @media(max-width:760px){ #filtrosDiagrama{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #filtrosDiagrama > .span2,#filtrosDiagrama > .fbAccion{ grid-column:1 / -1 !important; } } @media(max-width:480px){ #filtrosDiagrama{ grid-template-columns:1fr !important; } } /* --------------------------------------------------------------------------- 16.2 · HORAS · los filtros dejan de ser una columna vertical Ocupaban toda la altura de la izquierda. Ahora son una franja horizontal sobre el tablero: los seis campos en una fila y las metas en una barra compacta debajo. El contenido principal gana todo ese ancho. ------------------------------------------------------------------------- */ @media(min-width:1321px){ #gridHoras{ grid-template-columns:minmax(0,1fr) 310px !important; } } /* Solo la primera columna (metas y filtros) se convierte en franja: la de la derecha —instructores y totales— conserva su sitio. */ #gridHoras > aside:first-of-type{ grid-column:1 / -1; display:grid; gap:12px; align-items:start; } #gridHoras > aside:first-of-type > .panel{ margin-top:0 !important; } #gridHoras > aside:first-of-type .control{ margin-bottom:0 !important; } /* Filtros principales (tercer panel de la columna) pasa al frente */ #gridHoras > aside:first-of-type > .panel:nth-of-type(3){ order:1; } #gridHoras > aside:first-of-type > .panel:nth-of-type(3) > .body{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 16px; align-items:start; } /* Metas de horas: los dos campos y su nota, en línea */ #gridHoras > aside:first-of-type > .panel:nth-of-type(2){ order:2; } #gridHoras > aside:first-of-type > .panel:nth-of-type(2) > .body{ display:grid !important; grid-template-columns:minmax(150px,200px) minmax(150px,200px) minmax(280px,1fr); gap:10px 20px; align-items:center; } #gridHoras > aside:first-of-type > .panel:nth-of-type(2) .goal-grid{ display:contents !important; } #gridHoras > aside:first-of-type > .panel:nth-of-type(2) .small{ margin:0; } @media(max-width:900px){ #gridHoras > aside:first-of-type > .panel:nth-of-type(2) > .body{ grid-template-columns:1fr 1fr; } #gridHoras > aside:first-of-type > .panel:nth-of-type(2) .small{ grid-column:1 / -1; } } /* --------------------------------------------------------------------------- 16.3 · TÍTULO PRINCIPAL CON BRILLO Una luz cálida cruza el título de cada tablero cada once segundos. El texto sigue siendo blanco: la luz solo lo recorre, nunca lo apaga. ------------------------------------------------------------------------- */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .t1,.headerTitleMain,.ga-t1,.title-main, header.top .brand h1, header > h1{ /* El degradado se repite: así el texto queda cubierto en todo momento y el destello puede recorrerlo sin que ninguna letra se quede sin relleno. */ background-image:linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #FFF3C4 47%, #FFFFFF 56%, #FFFFFF 100%) !important; background-size:200% 100% !important; background-repeat:repeat-x !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; animation:bwBrilloTitulo 15s linear infinite; } } @keyframes bwBrilloTitulo{ from{ background-position:0 0; } to { background-position:-200% 0; } } /* El subtítulo amarillo recibe un latido apenas perceptible */ .t2,.headerTitleCenter,.ga-t2,.title-center,header.top .brand .sub, header > p{ animation:bwLatidoSub 9s ease-in-out infinite; } @keyframes bwLatidoSub{ 0%,100%{ opacity:.92; } 50% { opacity:1; } } @media (prefers-reduced-motion:reduce){ .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1,header > h1{ background-image:none !important; -webkit-text-fill-color:#fff !important; animation:none !important; } .t2,.headerTitleCenter,.ga-t2,.title-center,header.top .brand .sub,header > p{ animation:none !important; opacity:1; } } @media print{ .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1,header > h1{ background-image:none !important; -webkit-text-fill-color:#fff !important; } } /* ============================================================================ 17 · EL TEXTO DENTRO DE SU MARCO (V6) ---------------------------------------------------------------------------- Los tableros se llenan con nombres largos —programas de formación, insumos, competencias— y con cifras que crecen. Aquí se garantiza que nada se salga de su tarjeta: las palabras parten cuando hace falta, las cifras se ajustan al ancho disponible y ningún elemento fuerza a su contenedor a crecer. ========================================================================== */ /* 17.1 · Ningún hijo de una rejilla o caja flexible empuja hacia afuera */ .kpis > *,.cards > *,.stats > *,.summary > *,.grid > *,.filtros > *, .kpi,.card,.statCard,.gauge-card,.gaugeCard,.miniCard,.panel, .fb,.control,.avKpi,.avEtapa,.avApr{ min-width:0; } .fb > select,.fb > input,.control > select,.control > input, .filter select,.filter input,select,input[type=text],input[type=search]{ max-width:100%; } /* 17.2 · Las palabras largas parten solo cuando de verdad no caben. En los textos corridos se usa "break-word", que respeta la palabra mientras quepa; "anywhere" queda para celdas y valores, donde aparecen códigos y nombres sin espacios que sí hay que partir. */ .kpi,.card,.statCard,.gauge-card,.miniCard,.panel,.item,.chip,.badge, .desc,.note,.small,.sub,.label,.l,.k,.v,.avNota,.slot-label,.slot-note{ overflow-wrap:break-word; word-break:normal; hyphens:none; } /* (V7 · tablas) td y th salen de esta regla: "anywhere" partía los encabezados letra por letra en las tablas anchas. Su comportamiento está en §6. */ .bwOpt,.avApr .nom,.avApr .doc{ overflow-wrap:anywhere; word-break:normal; } /* 17.3 · Las cifras se acomodan al ancho de su tarjeta */ .kpi .num,.kpi .value,.kpi .v,.card .value,.statCard .n,.avKpi .v,.gauge-value{ font-size:clamp(19px,2.05vw,29px) !important; line-height:1.12 !important; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Las cifras que son texto (por ejemplo "Antioquia") sí pueden partir */ .statCard .n{ white-space:normal; overflow:visible; } /* 17.4 · Rótulos: dos líneas como máximo y sin cortar a mitad de palabra */ .kpi .label,.kpi .l,.card .label,.gauge-card .label,.avKpi .k{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card h2,.cTop h2{ overflow-wrap:break-word; } /* 17.5 · Tablas: celdas que respiran y no estiran la página */ td{ max-width:420px; } td .muted,td .small{ overflow-wrap:break-word; } /* 17.6 · Píldoras y etiquetas nunca más anchas que su celda */ .pill,.badge,.avEtq,.bsBtn,.bvExt{ max-width:100%; overflow-wrap:anywhere; } /* ============================================================================ 18 · AL FILTRAR, SOLO LO QUE TIENE ALGO QUE MOSTRAR (V6) ---------------------------------------------------------------------------- Un panel cuyo contenido quedó vacío después de aplicar un filtro solo añade ruido. betowa-glass.js le pone esta marca y desaparece con suavidad. ========================================================================== */ .betowa-sin-contenido{ display:none !important; } /* ============================================================================ 19 · VIVEZA Y MOVIMIENTO PROFESIONAL (V6) ---------------------------------------------------------------------------- La paleta betowa sube de intensidad sin perder contraste, los encabezados ganan una aurora institucional en movimiento, los paneles entran en escena al hacer scroll y los gráficos crecen al mostrarse. Todo es apariencia: ningún selector de esta sección toca datos, cálculos ni controles. ========================================================================== */ /* --- 19.0 · Tokens (V7: azul betowa profundo) ------------------------------ */ /* En la V7 el azul claro salió de la paleta: mandan el azul marino profundo y el verde azulado institucional. Los acentos vivos quedan solo en detalles finos (filete, halo), nunca como fondo. */ :root{ --lg-teal:#0091A0; --lg-teal-soft:#2EB4C2; --lg-sena:#39A900; --bw-cian-vivo:#0091A0; --bw-verde-vivo:#39A900; --bw-ambar-vivo:#FFB454; --bw-halo:0 14px 38px rgba(14,41,81,.22); } /* --- 19.1 · Encabezado: gradiente vivo + aurora ---------------------------- */ body > header, body > header.topbar, body > header.top, header.ga-header{ overflow:hidden; background: radial-gradient(120% 190% at 88% -50%, rgba(0,145,160,.30), transparent 56%), radial-gradient(90% 170% at 10% -40%, rgba(57,169,0,.12), transparent 52%), linear-gradient(118deg,#050D1F 0%,#081A38 34%,#0E2951 70%,#0B3350 100%) !important; } body > header > *, body > header.topbar > *, body > header.top > *, header.ga-header > *{ position:relative; z-index:2; } body > header::after, body > header.topbar::after, body > header.top::after, header.ga-header::after{ content:""; position:absolute; inset:-30% -6%; pointer-events:none; z-index:1; background: radial-gradient(34% 60% at 22% 30%, rgba(14,95,140,.38), transparent 70%), radial-gradient(30% 55% at 78% 70%, rgba(0,145,160,.26), transparent 70%); background-size:170% 170%, 170% 170%; background-repeat:no-repeat; filter:blur(26px); opacity:.65; animation:bwAurora 17s ease-in-out infinite alternate; } @keyframes bwAurora{ 0% {background-position:0% 0%, 100% 100%;} 50% {background-position:70% 45%, 30% 40%;} 100%{background-position:100% 100%, 0% 0%;} } /* El filete superior del encabezado, más vivo y en marcha continua. */ header::before, .topbar::before, header.topbar::before{ height:4px; background-image:linear-gradient(90deg, #076E79,var(--lg-teal),#0E2951,#163C74, var(--lg-sena),#076E79) !important; background-size:280% 100% !important; animation:bwFilete 14s linear infinite !important; opacity:.95; } /* --- 19.2 · Títulos principales: brillo más notorio ------------------------ */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1,header > h1{ background-image:linear-gradient(100deg, #FFFFFF 0%,#E8F1FA 36%,#BFE3F2 48%,#FFFFFF 60%, #EAF4EE 72%,#FFFFFF 100%) !important; background-size:240% 100% !important; animation:bwBrilloTitulo 7s linear infinite !important; } } /* --- 19.3 · Bandas de título de panel: destello más presente --------------- */ .panel > h3,.panel > .head,.panel > .title, .card > h3,.card > .title,.card-title, .p04band,.gpanel > h3,.dash > .panel-head{ animation-duration:6.5s; } /* --- 19.4 · Entrada en escena al hacer scroll ------------------------------ */ /* betowa-glass.js marca con .bw-prep SOLO lo que está bajo el pliegue y le quita la marca al entrar en pantalla. Nunca es un estado permanente: con movimiento reducido o al imprimir, estas reglas fuerzan visibilidad. */ .bw-prep{ opacity:.001; transform:translateY(18px) scale(.985); } .bw-entra{ animation:bwRevela .62s var(--lg-ease) both; } @keyframes bwRevela{ from{ opacity:.001; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } } /* --- 19.5 · Gráficos que crecen al mostrarse ------------------------------- */ /* Barras horizontales generadas por los tableros (PE-04, juicios, inventario): el keyframe parte de 0 y termina en el ancho inline que fija cada página. */ .fill,.bar-fill,.barra > i{ animation:bwCreceBarra .7s var(--lg-ease) backwards; } @keyframes bwCreceBarra{ from{ width:0; } } /* Velocímetros de juicios: --pct pasa a ser animable y el arco barre suave. */ @property --pct{ syntax:''; inherits:false; initial-value:0; } @property --gcolor{ syntax:''; inherits:false; initial-value:#d65c5c; } .gauge{ transition:--pct .9s var(--lg-ease), --gcolor .9s var(--lg-ease); } /* Tarjetas de indicadores y SVG de los tableros: aparición breve y escalonada. */ #gaugeGrid .gaugeCard,#miniGrid .miniCard{ animation:bwAparece .5s ease-out backwards; } #gaugeGrid .gaugeCard:nth-child(2),#miniGrid .miniCard:nth-child(2){ animation-delay:.06s; } #gaugeGrid .gaugeCard:nth-child(3),#miniGrid .miniCard:nth-child(3){ animation-delay:.12s; } #gaugeGrid .gaugeCard:nth-child(4),#miniGrid .miniCard:nth-child(4){ animation-delay:.18s; } #gaugeGrid .gaugeCard:nth-child(5),#miniGrid .miniCard:nth-child(5){ animation-delay:.24s; } #programas svg,#estado svg,#municipios svg,#nivel svg,#mes svg,#especial svg, #resp svg,#jornada svg,#sector svg,#rutadf51 svg,#progdf53 svg, canvas.chart,.charts canvas{ animation:bwAparece .5s ease-out backwards; } @keyframes bwAparece{ from{ opacity:0; transform:translateY(6px); } } /* --- 19.6 · Halo al pasar el cursor ---------------------------------------- */ .panel:hover{ transform:translateY(-2px); box-shadow:var(--lg-shadow-hi),var(--lg-edge),var(--bw-halo); border-color:rgba(7,110,121,.45); } .card:hover,.kpi:hover,.statCard:hover,.gauge-card:hover,.gaugeCard:hover,.miniCard:hover{ box-shadow:var(--lg-shadow-hi),var(--lg-edge),var(--bw-halo); } /* --- 19.7 · Cifras con tinta viva ------------------------------------------ */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .statCard .n,.kpi .value,.kpi .v,.card .value,.gauge-value{ background-image:linear-gradient(180deg,#081A38 0%,#0E2951 58%,#0E5F8C 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } } /* --- 19.8 · Respeto al usuario: menos movimiento, impresión, móvil --------- */ @media (prefers-reduced-motion:reduce){ .bw-prep,.bw-entra{ opacity:1 !important; transform:none !important; animation:none !important; } body > header::after, body > header.topbar::after, body > header.top::after, header.ga-header::after{ display:none !important; } header::before,.topbar::before,header.topbar::before{ animation:none !important; } .t1,.headerTitleMain,.ga-t1,.title-main,header.top .brand h1,header > h1{ animation:none !important; background-image:none !important; -webkit-text-fill-color:#fff !important; } .fill,.bar-fill,.barra > i, #gaugeGrid .gaugeCard,#miniGrid .miniCard, #programas svg,#estado svg,#municipios svg,#nivel svg,#mes svg,#especial svg, #resp svg,#jornada svg,#sector svg,#rutadf51 svg,#progdf53 svg, canvas.chart,.charts canvas{ animation:none !important; } .gauge{ transition:none !important; } } @media print{ .bw-prep,.bw-entra{ opacity:1 !important; transform:none !important; animation:none !important; } body > header::after, body > header.topbar::after, body > header.top::after, header.ga-header::after{ display:none !important; } .statCard .n,.kpi .value,.kpi .v,.card .value,.gauge-value{ background-image:none !important; -webkit-text-fill-color:currentColor !important; color:#0B2447 !important; } } @media (max-width:820px){ body > header::after, body > header.topbar::after, body > header.top::after, header.ga-header::after{ animation:none; opacity:.5; } } /* ============================================================================ 20 · LEGIBILIDAD: FILAS DE BARRAS Y TABLAS ANCHAS (V8) ---------------------------------------------------------------------------- Dos correcciones de fondo y un acabado: · La regla genérica de pistas (sección 7) alcanzaba a las FILAS completas de los gráficos de barras del PE-04 (.barwrap .bar): la píldora con overflow:hidden recortaba la primera letra de la etiqueta y apretaba la cifra derecha. Aquí la fila se libera y solo la pista conserva la píldora. · Las tablas anchas quedan blindadas contra el apilado de letras: los encabezados nunca se parten, las celdas tienen ancho mínimo y el desborde se resuelve con desplazamiento horizontal del contenedor. · Acabado: encabezado de tabla azul profundo pegajoso, primera columna fija en la tabla de detalle del PE-04 y cifras alineadas. ========================================================================== */ /* --- 20.1 · La fila de barra respira ---------------------------------------- */ .barwrap .bar{ border-radius:10px !important; background:rgba(11,27,51,.045) !important; box-shadow:none !important; overflow:visible !important; padding:5px 10px; } .barwrap .bar > div:first-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.28; font-weight:650; color:var(--lg-ink-2); } .barwrap .bar > div:last-child{ text-align:right; font-weight:800; color:#FFE9A6; font-variant-numeric:tabular-nums; } /* Las filas de barras de juicios reciben el mismo acabado. */ .bar-row{ background:rgba(11,27,51,.045); border-radius:10px; padding:5px 10px; } .bar-row > *:first-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.28; font-weight:650; color:var(--lg-ink-2); } .bar-row > *:last-child{ text-align:right; font-weight:800; color:#FFE9A6; font-variant-numeric:tabular-nums; } /* --- 20.2 · Tablas anchas: nunca más letras apiladas ------------------------ */ .tw,.table-wrap,.tablaWrap{ overflow:auto; } .tw td,.table-wrap td,.tablaWrap td{ word-break:normal !important; overflow-wrap:normal !important; white-space:normal; min-width:96px; max-width:340px; line-height:1.35; vertical-align:top; } .tw table,.table-wrap table,.tablaWrap table{ min-width:100%; } /* --- 20.3 · Encabezado de tabla azul profundo, siempre visible -------------- */ .panel table thead th,.card table thead th, .tw thead th,.table-wrap thead th,.tablaWrap thead th{ background:linear-gradient(180deg,#0E2951,#12376A) !important; color:#F2F7FF !important; border-bottom:1px solid rgba(255,255,255,.22) !important; letter-spacing:.05em; } .tw thead th,.table-wrap thead th,.tablaWrap thead th{ position:sticky; top:0; z-index:3; } /* --- 20.4 · PE-04 detalle: la ficha se queda quieta al desplazarse ---------- */ .tw th:first-child,.tw td:first-child{ position:sticky; left:0; z-index:2; background:var(--lg-glass-solid); box-shadow:2px 0 8px rgba(9,25,55,.08); font-weight:750; color:var(--lg-navy); } .tw thead th:first-child{ z-index:4; background:linear-gradient(180deg,#0E2951,#12376A) !important; color:#F2F7FF !important; } /* --- 20.5 · Al imprimir, sin fijos ni recortes ------------------------------ */ @media print{ .tw th:first-child,.tw td:first-child, .tw thead th,.table-wrap thead th,.tablaWrap thead th{ position:static !important; box-shadow:none !important; } .barwrap .bar > div:first-child,.bar-row > *:first-child{ display:block; -webkit-line-clamp:unset; overflow:visible; } } /* ============================================================================ 21 · PROGRAMA OSCURO (V11) ---------------------------------------------------------------------------- Toda la suite adopta el lenguaje del Programador Académico: negro verdoso profundo, paneles de vidrio oscuro con borde fino, tinta clara y el verde SENA como acento. Los encabezados azul marino, el oleaje y el movimiento se conservan: sobre negro lucen mejor. Al imprimir, todo vuelve a claro. `:root:root` gana a los tokens que cada página declara en su propio estilo. ========================================================================== */ /* --- 21.0 · Tokens en oscuro ------------------------------------------------ */ :root:root{ /* tinta clara — escala de contraste (título > cuerpo > apagado) */ --lg-ink:#F5F9FE; --lg-ink-2:#E2EAF6; --lg-ink-3:#B7C6DB; /* vidrio oscuro más presente: el panel se despega del lienzo */ --lg-glass:rgba(16,27,46,.92); --lg-glass-2:rgba(18,30,50,.80); --lg-glass-3:rgba(20,33,55,.66); --lg-glass-solid:#121F33; --lg-tint:rgba(95,203,42,.06); --lg-hair:rgba(226,236,248,.18); --lg-hair-soft:rgba(226,236,248,.10); --lg-spec:rgba(255,255,255,.13); /* radios contenidos, al estilo del programador */ --lg-r-xl:16px; --lg-r-lg:13px; --lg-r-md:10px; --lg-r-sm:8px; --lg-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.42),0 24px 54px rgba(0,0,0,.38); --lg-shadow-hi:0 2px 4px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.55),0 34px 74px rgba(0,0,0,.5); --lg-edge: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.04), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05); --bw-halo:0 16px 40px rgba(0,0,0,.55); /* tokens que declaran las páginas (aquí ganan los oscuros) */ --bw-fondo:#070D18; --bw-glass:rgba(16,27,46,.92); --bw-ink:#F2F7FD; --bw-mut:#B7C6DB; --bw-azul-prof:#CFE3F7; --bw-azul-txt:#E2EEFA; --bw-azul:#A9CCF0; --bw-teal:#7FDCE7; --bw-teal-osc:#63C2CF; --bw-teal-cl:#9BE7F0; --bw-line:rgba(226,236,248,.18); --bw-stroke:rgba(226,236,248,.16); --bw-shadow:0 1px 2px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.5); --bw-shadow-hover:0 2px 4px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6); /* variables genéricas que declaran las páginas (solo tinta y superficies; --azul y --sena* pintan bandas y NO se tocan) */ --ink:#F2F7FD; --mut:#B7C6DB; --borde:rgba(226,236,248,.18); --panel:rgba(16,27,46,.92); --fondo:#070D18; --sombra:0 1px 2px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.5); } /* --- 21.1 · Lienzo negro verdoso -------------------------------------------- */ html{ background:#070D18 !important; } body{ background: radial-gradient(1100px 620px at 8% -10%, rgba(0,145,160,.10), transparent 60%), radial-gradient(950px 540px at 104% 2%, rgba(22,60,116,.14), transparent 58%), radial-gradient(900px 620px at 46% 118%, rgba(57,169,0,.07), transparent 60%), linear-gradient(168deg,#060B14 0%,#070D18 46%,#0B182E 100%) !important; background-attachment:fixed !important; color:var(--lg-ink-2) !important; } /* Las manchas respirantes del fondo, más discretas sobre negro. */ body::before,body::after{ opacity:.35; } /* --- 21.2 · Superficies de vidrio oscuro ------------------------------------ */ .panel,.card,.kpi,.gauge-card,.gaugeCard,.miniCard,.statCard, .table-wrap,.tablaWrap,.tw,.meta-card,.info-box,.item{ background:var(--lg-glass) !important; border-color:var(--bw-line) !important; } .panel,.card,.kpi,.gauge-card,.gaugeCard,.miniCard,.statCard,.meta-card{ color:var(--lg-ink-2); } /* Tinta de los textos frecuentes de las páginas (grises claros de fábrica). */ .panel p,.card p,.desc,.sub,.muted,.meta, .card .label,.gauge-card .label,.card .sub,.gauge-card .sub, .statCard .l,.kpi .l,.gauge-label-mini,.slot-note, .meta-card .k,.bar-row .hh,.pie{ color:var(--lg-ink-3) !important; } .meta-card .v{ color:var(--lg-ink) !important; } /* --- 21.3 · Cifras grandes con tinta clara ---------------------------------- */ .statCard .n,.kpi .value,.kpi .v,.card .value,.gauge-value{ color:#FFEFB0 !important; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .statCard .n,.kpi .value,.kpi .v,.card .value,.gauge-value{ background-image:linear-gradient(180deg,#FFFFFF 0%,#FFF3C6 48%,#FFD873 135%) !important; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } } /* --- 21.4 · Tablas en oscuro ------------------------------------------------- */ tbody td{ color:var(--lg-ink-2); border-color:var(--bw-line) !important; } tbody tr:nth-child(even) td{ background:rgba(255,255,255,.035) !important; } tbody tr:hover td{ background:rgba(95,203,42,.10) !important; } .tw td:first-child{ color:#BFD9F2 !important; } /* --- 21.5 · Controles: filtros, campos y botones ----------------------------- */ select,input[type="text"],input[type="search"],input[type="date"], input[type="number"],textarea{ background:#16233A !important; color:var(--lg-ink) !important; border-color:var(--bw-line) !important; } select option{ background:#141B16; color:#E3EAE2; } ::placeholder{ color:#7E8B7E; opacity:1; } select:focus,input:focus,textarea:focus{ border-color:rgba(95,203,42,.55) !important; box-shadow:0 0 0 3px rgba(95,203,42,.15) !important; } label{ color:var(--lg-ink-3); } button.ghost,.btn.ghost{ background:rgba(255,255,255,.06) !important; color:var(--lg-ink) !important; border-color:var(--bw-line) !important; } /* --- 21.6 · Pistas, barras y velocímetros ------------------------------------ */ .progress,.bar-track,.track{ background:rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); } .barwrap .bar{ background:rgba(255,255,255,.06) !important; } .bar-row{ background:rgba(255,255,255,.06); } .barwrap .bar > div:first-child,.bar-row > *:first-child{ color:var(--lg-ink-2); } .barwrap .bar > div:last-child,.bar-row > *:last-child{ color:#FFE9A6; } /* Velocímetros de juicios: pista y máscara en tono panel. */ .gauge::before{ background:conic-gradient(from 270deg at 50% 100%, var(--gcolor) var(--deg,calc(var(--pct)*1.8deg)), #2C3A52 0 180deg, transparent 0) !important; } .gauge::after{ background:#132036 !important; } /* --- 21.7 · Los SVG de los tableros hablan en claro -------------------------- */ /* Regla suave para textos con fill de atributo… */ .panel svg text,.card svg text{ fill:#E2EAF5; } /* …y anulaciones precisas de las clases del PE-04 (los colores semánticos de alerta —rojo, ámbar— viven en atributos y no se tocan). */ .gMeta,.axis{ fill:#B7C6DB !important; } .gCur,.val,.ml tspan:last-child{ fill:#FFE9A6 !important; } .ml{ fill:#9BD86F !important; stroke:#070D18 !important; } .bv{ stroke:#070D18 !important; } /* Iconos monocromos (trazo currentColor): tinta clara. */ .panel svg,.card svg,.kpi svg,.statCard svg{ color:#D5E1EF; } .gaugeSvg svg{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .label{ color:var(--lg-ink-3) !important; } .value{ color:#FFEFB0 !important; } /* --- 21.8 · Piezas inyectadas: navegación, sello, avisos --------------------- */ #betowaNav{ background:rgba(13,20,34,.82) !important; border-color:var(--bw-line) !important; } #betowaNav a{ color:var(--lg-ink-2) !important; } #betowaVersion,#betowaDataInfo{ background:rgba(13,20,34,.88) !important; color:var(--lg-ink-3) !important; border-color:var(--bw-line) !important; } #betowaSinDatos{ background:rgba(15,25,42,.9) !important; color:var(--lg-ink-2) !important; } .bwPanel{ background:#141B16 !important; color:var(--lg-ink) !important; border-color:var(--bw-line) !important; } .bwPanel *{ color:inherit; } /* --- 21.9 · Mapa: atenuado para convivir con el negro ------------------------ */ .leaflet-container{ background:#141B16 !important; filter:brightness(.82) saturate(.88); } .leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:#141B16 !important; color:var(--lg-ink) !important; } /* --- 21.10 · Barras de desplazamiento ---------------------------------------- */ ::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(222,233,246,.28),rgba(222,233,246,.18)); background-clip:padding-box; } /* --- 21.12 · Afinado por tablero (fugas de claro detectadas) ------------------ */ /* Juicios: franja de ayuda, interruptor de activos y botón de limpiar. */ .ficha-ayuda{ background:rgba(0,145,160,.14) !important; color:#8FE0E9 !important; border-color:rgba(0,145,160,.35) !important; } .warn{ color:#E8C067 !important; } .clear-btn{ background:rgba(255,255,255,.08) !important; color:var(--lg-ink) !important; border:1px solid var(--bw-line) !important; } .avSwitch{ background:rgba(255,255,255,.10) !important; color:var(--lg-ink-2) !important; } /* Botones de acción del encabezado (Limpiar · Exportar · CSV): fantasma claro. */ header button,header .btn{ background:rgba(255,255,255,.12) !important; color:#F2F7FF !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important; } /* Combo buscador de fichas (inyectado por juicios-avance.js). */ .bwField{ background:#16233A !important; border-color:var(--bw-line) !important; } .bwInput{ background:transparent !important; color:var(--lg-ink) !important; } /* Tinta numérica de tablas (viáticos, inventario, horas). */ td.num,td .num,.tNum{ color:#FFE49C !important; } .tMut{ color:#C4D2E4 !important; } td.cdp,td .cdp{ color:#CFE3F7 !important; } /* PE-04: etiquetas y valores de tarjetas mini y velocímetros. */ .miniCard .label,.gaugeCard .label{ color:var(--lg-ink-3) !important; } .miniCard .value,.gaugeCard .value,.gPct{ color:#FFEFB0 !important; } /* Horas: módulo de verificación y bloques de competencias. */ .verif-nota,.check-list,.comp-bloque,#verifBox,#lecturaBox{ background:rgba(255,255,255,.05) !important; color:var(--lg-ink-2) !important; border-color:var(--bw-line) !important; } .vv,.comp-tit,.comp-tag{ color:var(--lg-ink) !important; } .vq{ background:rgba(255,255,255,.10) !important; color:var(--lg-ink) !important; } /* Ambientes: el diagrama de Gantt pasa a oscuro. */ .ganttWrap{ background:#0D1626 !important; border-color:var(--bw-line) !important; } .gWeekCell,.gDayCell{ background:#121D30 !important; border-color:rgba(222,233,246,.10) !important; color:var(--lg-ink-3) !important; } .pill-cat{ color:var(--lg-ink-2) !important; } /* Portada: insignias del héroe legibles sobre azul marino. */ .heroCard .badge{ background:rgba(255,255,255,.12) !important; color:#EAF2FF !important; border-color:rgba(255,255,255,.25) !important; } /* --- 21.11 · Al imprimir, papel claro ----------------------------------------- */ @media print{ :root:root{ --lg-ink:#0B1B33; --lg-ink-2:#26364F; --lg-ink-3:#4A5B75; --ink:#14233B; --mut:#516079; --borde:#CBD5E1; --panel:#fff; --fondo:#fff; --sombra:none; --bw-ink:#14233B; --bw-mut:#516079; --bw-azul-prof:#0E2951; --bw-azul-txt:#0A1D3B; --bw-azul:#163C74; --bw-teal:#0091A0; --bw-teal-osc:#076E79; --lg-glass:#fff; --lg-glass-solid:#fff; } html,body{ background:#fff !important; color:#0B1B33 !important; } .gMeta,.axis{ fill:#516079 !important; } .gCur,.val,.ml tspan:last-child{ fill:#14233B !important; } .ml,.bv{ stroke:#fff !important; } .label{ color:#4A5B75 !important; } .value{ color:#0B2447 !important; } .panel,.card,.kpi,.gauge-card,.gaugeCard,.miniCard,.statCard, .table-wrap,.tablaWrap,.tw,.meta-card,.info-box,.item, .barwrap .bar,.bar-row{ background:#fff !important; color:#0B1B33 !important; border-color:#CBD5E1 !important; } .statCard .n,.kpi .value,.kpi .v,.card .value,.gauge-value{ background-image:none !important; -webkit-text-fill-color:currentColor !important; color:#0B2447 !important; } .panel p,.card p,.desc,.sub,.muted,.meta,.card .label,.gauge-card .label, .statCard .l,.kpi .l,.gauge-label-mini,.meta-card .k{ color:#4A5B75 !important; } tbody td{ color:#26364F !important; } tbody tr:nth-child(even) td{ background:#F1F5F9 !important; } .panel svg text,.card svg text{ fill:#0B1B33; } select,input,textarea{ background:#fff !important; color:#0B1B33 !important; } .gauge::after{ background:#fff !important; } } /* ============================================================================ 22 · UNIFORMIDAD CON EL PROGRAMADOR (V12) ---------------------------------------------------------------------------- La misma anatomía de tarjeta en toda la suite, tomada del Programador Académico: etiqueta pequeña en mayúsculas y tono apagado, cifra grande en tinta casi blanca con números tabulares, texto de apoyo discreto, borde de 1 px y radios contenidos. El vidrio y la marca oscura se conservan. ========================================================================== */ /* --- 22.1 · Jerarquía tipográfica de tarjeta --------------------------------- */ .card .label,.gauge-card .label,.miniCard .label,.gaugeCard .label, .statCard .l,.kpi .l,.kpi .k,.meta-card .k,.slot-label{ font-size:10.5px !important; letter-spacing:.09em !important; text-transform:uppercase !important; font-weight:650 !important; color:var(--lg-ink-3) !important; line-height:1.35; } .card .value,.kpi .value,.kpi .v,.statCard .n,.gauge-value, .miniCard .value,.meta-card .v{ font-weight:800 !important; letter-spacing:-.012em; font-variant-numeric:tabular-nums; } .card .sub,.gauge-card .sub,.gauge-label-mini,.statCard .s{ font-size:11.5px; line-height:1.45; } /* --- 22.2 · Borde fino y radios uniformes ------------------------------------ */ .panel,.card,.kpi,.gauge-card,.gaugeCard,.miniCard,.statCard, .table-wrap,.tablaWrap,.tw,.meta-card{ border-width:1px !important; border-style:solid !important; } .kpi,.statCard,.miniCard,.meta-card{ border-radius:var(--lg-r-md) !important; } .card,.gauge-card,.gaugeCard{ border-radius:var(--lg-r-lg) !important; } .panel,.table-wrap,.tablaWrap{ border-radius:var(--lg-r-xl) !important; } /* --- 22.3 · Bandas de título: blanco pleno y aire ----------------------------- */ .panel > h3,.panel > .head,.panel > .title, .card > h3,.card > .title,.card-title, .p04band,.gpanel > h3,.dash > .panel-head{ color:#FFFFFF !important; letter-spacing:.08em; text-shadow:0 1px 2px rgba(0,0,0,.35); } /* --- 22.4 · Enlaces y foco dentro de paneles ---------------------------------- */ .panel a,.card a{ color:#8FD9E4; text-decoration-color:rgba(143,217,228,.5); } .panel a:hover,.card a:hover{ color:#B5EAF2; } select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{ outline:2px solid #6FD64B !important; outline-offset:2px; } /* --- 22.5 · Campos un punto más claros que el panel --------------------------- */ select,input[type="text"],input[type="search"],input[type="date"], input[type="number"],textarea{ background:#182741 !important; } /* --- 22.7 · Remates de contraste por tablero ---------------------------------- */ /* Horas: verificación, mini-porcentajes y botonera fuera del encabezado. */ .vl{ color:var(--lg-ink) !important; } .vs,.comp-sub{ color:var(--lg-ink-3) !important; } .mini-pct{ color:#D5E1EF !important; background:rgba(255,255,255,.12) !important; } .toolbar button,.toolbar .btn,.toolbar .light,.toolbar .green,.toolbar .teal{ background:rgba(255,255,255,.12) !important; color:#F2F6F1 !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important; } /* Viáticos: áreas por CDP y etiquetas de CDP. */ .cdp-area .area{ color:#7FDCE7 !important; } .cdp-tag{ color:#9BE7F0 !important; background:rgba(0,145,160,.18) !important; } /* Juicios: chips de resumen, aviso vacío, caret del combo y fecha del sello. */ .chip{ color:var(--lg-ink) !important; } .avVacio,.empty,.bwVacio{ color:var(--lg-ink-3) !important; } .bwCaret{ color:#A9B6A7 !important; } .bdi-date{ color:#7FDCE7 !important; } /* Tinta corriente de párrafos y celdas: nunca por debajo del cuerpo. */ tbody td{ color:var(--lg-ink-2) !important; } /* --- 22.8 · Impresión de los remates ------------------------------------------ */ @media print{ .vl{ color:#14233B !important; } .vs,.comp-sub,.avVacio,.empty{ color:#516079 !important; } .mini-pct{ color:#516079 !important; background:rgba(22,60,116,.1) !important; } .cdp-area .area,.cdp-tag,.bdi-date{ color:#076E79 !important; } .chip{ color:#14233B !important; } tbody td{ color:#26364F !important; } } /* --- 22.9 · Remates finales de la auditoría ----------------------------------- */ /* Etiquetas de filtro en cualquier tablero: siempre en tinta apagada clara. */ label{ color:var(--lg-ink-3) !important; } /* Notas y avisos con negrita de acento y advertencias en ámbar legible. */ .note b,.notice b{ color:#CFE3F7 !important; } .notice{ color:var(--lg-ink-2) !important; } .notice span{ color:#F2B08A !important; } /* Botoneras fuera del encabezado (viáticos usa .tools). */ .tools button,.tools .btn{ background:rgba(255,255,255,.12) !important; color:#F2F6F1 !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important; } /* Horas: la tabla de verificación pintaba celdas claras por columna. */ #verif-tab td,.verif-tab td{ background:rgba(255,255,255,.05) !important; color:var(--lg-ink-2) !important; } /* Tarjetas de apoyo con color pleno: velo sutil y título con sombra. */ .mini{ box-shadow:inset 0 0 0 999px rgba(0,0,0,.16); } .mini h4{ color:#FFFFFF !important; text-shadow:0 1px 2px rgba(0,0,0,.5); } /* Encabezados internos de tarjeta de medidor. */ .gauge-card h4,.gaugeCard h4,.card h4{ color:var(--lg-ink) !important; } .mini h4{ color:#FFFFFF !important; } /* Viáticos: filas informativas de los velocímetros y sello de datos. */ .gaugeInfo{ color:var(--lg-ink-3) !important; } .gaugeInfo b,.bdi-item b{ color:var(--lg-ink) !important; } /* Juicios: botonera del panel de avance. */ .avOpts button{ background:rgba(255,255,255,.12) !important; color:#F2F6F1 !important; border:1px solid rgba(255,255,255,.24) !important; } /* Navegación inferior: enlaces en tinta plena. */ #betowaNav a{ color:var(--lg-ink) !important; } @media print{ label{ color:#4A5B75 !important; } .note b,.notice b{ color:#0E2951 !important; } .notice{ color:#26364F !important; } .notice span{ color:#9A3412 !important; } #verif-tab td,.verif-tab td{ background:#F2F6FC !important; color:#26364F !important; } .mini{ box-shadow:none; } .gauge-card h4,.gaugeCard h4{ color:#0A1D3B !important; } } /* --- 22.6 · Al imprimir, la jerarquía vuelve a tinta oscura -------------------- */ @media print{ .card .label,.gauge-card .label,.miniCard .label,.gaugeCard .label, .statCard .l,.kpi .l,.kpi .k,.meta-card .k,.slot-label{ color:#4A5B75 !important; } .panel a,.card a{ color:#0E5F8C; } } /* --- 22.10 · Impresión de las cifras (V13: sin amarillos sobre papel) --------- */ @media print{ td.num,td .num,.tNum{ color:#14233B !important; } .miniCard .value,.gaugeCard .value,.gPct,.value{ color:#0B2447 !important; } .gCur,.val,.ml tspan:last-child{ fill:#14233B !important; } .barwrap .bar > div:last-child,.bar-row > *:last-child{ color:#14233B !important; } } /* Coherencia: también en la tabla de verificación los números van en ámbar. */ #verif-tab td.num,.verif-tab td.num{ color:#FFE49C !important; } @media print{ #verif-tab td.num,.verif-tab td.num{ color:#14233B !important; } } /* --- 22.11 · Fuera el vidrio blanco heredado (V14) ----------------------------- */ /* La caja del aviso «sin datos» y los chips de resumen traían un degradado blanco al 80 % de la era clara: sobre el azul noche se veían como franjas grises. Pasan a vidrio azul marino con borde fino. */ .bsBox,.chip{ background-image:none !important; background-color:rgba(16,27,46,.94) !important; border:1px solid rgba(226,236,248,.20) !important; } @media print{ .bsBox,.chip{ background-color:#fff !important; border-color:#CBD5E1 !important; } } /* ============================================================================ 23 · AZUL NOCHE COMPLETO Y LISTAS LEGIBLES (V15) ---------------------------------------------------------------------------- La V14 descubrió que el vidrio blanco de la era clara seguía vivo en .bsBox y .chip. Esta sección cierra el caso de raíz: las DOS reglas maestras de la sección 2 (vidrio blanco al 80 % y al 72 % con !important) se re-declaran aquí en azul noche con los MISMOS selectores, de modo que ninguna superficie heredada vuelva a verse gris. Además: listas desplegables legibles y escribibles, sello de versión fuera, y afinado del tablero de ambientes. ========================================================================== */ /* --- 23.0 · El sello de versión no se muestra más --------------------------- */ #betowaVersion{ display:none !important; } /* El sello de versión del archivo publicado (ambientes) tampoco. */ .leyenda .verSello{ display:none !important; } /* --- 23.0c · Cifras .num de tarjetas KPI: mismo ámbar que .value (V19) --------- */ .kpi .num{ color:#FFEFB0 !important; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .kpi .num{ background-image:linear-gradient(180deg,#FFFFFF 0%,#FFF3C6 48%,#FFD873 135%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } } @media print{ .kpi .num{ color:#0E2951 !important; background-image:none !important; -webkit-text-fill-color:#0E2951 !important; } } /* --- 23.0b · Portada: títulos de tarjeta en tinta clara (V18) ----------------- */ /* Los h2 de las tarjetas venían en azul profundo de la era clara: sobre el vidrio azul noche eran casi invisibles. */ .card h2,.cTop h2{ color:var(--lg-ink) !important; } @media print{ .card h2,.cTop h2{ color:#0E2951 !important; } } /* --- 23.1 · Las superficies maestras pasan a azul noche ---------------------- */ /* Misma lista que la regla grande de la sección 2. */ .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.modal,.filtros,.cargaPanel{ background: linear-gradient(180deg,rgba(18,30,50,.94),rgba(13,22,38,.88)), var(--lg-tint) !important; border:1px solid var(--lg-hair) !important; } /* Misma lista que la regla de superficies menores (sin .sw: los recuadros de color de las leyendas conservan su propio color). */ .miniCard,.meta-card,.item,.info-box,.notice,.vchip,.it,.mini{ background:linear-gradient(180deg,rgba(22,35,58,.90),rgba(16,27,46,.80)) !important; border:1px solid var(--lg-hair-soft) !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 3px 10px rgba(0,0,0,.30) !important; color:var(--lg-ink-2); } /* --- 23.2 · Tablas sin lámina clara ------------------------------------------ */ /* PE-04 pintaba la tabla entera con blanco al 82 % y la cebra de la sección 6 añadía blanco al 34 %: sobre azul noche eran franjas grises con letra clara ilegible. La tabla queda transparente (el marco ya es oscuro) y la cebra se vuelve un velo sutil. */ table,tbody,tfoot{ background:transparent !important; } tbody tr:nth-child(even) td{ background:rgba(255,255,255,.045) !important; } tbody tr:hover td{ background:rgba(127,220,231,.08) !important; } /* --- 23.3 · Botones de página en fantasma oscuro ----------------------------- */ button:not([class]),.clear-btn,.toolbar button,.tools button{ background:rgba(255,255,255,.10) !important; color:#F2F7FD !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important; } button:not([class]):hover,.clear-btn:hover,.toolbar button:hover,.tools button:hover{ background:rgba(255,255,255,.17) !important; color:#FFFFFF !important; } .clear-btn.danger{ background:rgba(190,18,60,.16) !important; color:#FF9DB0 !important; border-color:rgba(190,18,60,.42) !important; } .clear-btn.danger:hover{ background:rgba(190,18,60,.26) !important; } /* --- 23.4 · Chips, insignias y píldoras en oscuro ----------------------------- */ .badge,.pill,.vchip,.sello{ background-image:none !important; background-color:rgba(20,33,55,.92) !important; border:1px solid rgba(226,236,248,.22) !important; color:var(--lg-ink-2) !important; } .chip b,.badge b,.pill b,.vchip b{ color:var(--lg-ink) !important; } /* Semánticas: mismo matiz, versión nocturna (fondo tenue + tinta clara). */ .pill.aprobado,.p-ok{ background:rgba(34,197,94,.16) !important; color:#8FE388 !important; border-color:rgba(34,197,94,.38) !important; } .pill.pendiente { background:rgba(255,216,115,.14) !important; color:#FFD873 !important; border-color:rgba(255,216,115,.36) !important; } .pill.cancelado,.p-bad{ background:rgba(255,140,163,.14) !important; color:#FF9DB0 !important; border-color:rgba(255,140,163,.36) !important; } .pill.estado { background:rgba(127,178,255,.14) !important; color:#A9CCF0 !important; border-color:rgba(127,178,255,.34) !important; } .dash > .panel-head .badge-count{ background:rgba(20,33,55,.92) !important; color:var(--lg-ink) !important; border:1px solid rgba(226,236,248,.22) !important; } /* --- 23.5 · Navegación inferior: enlaces fantasma oscuro ---------------------- */ #betowaNav a{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(226,236,248,.16) !important; } #betowaNav a:hover{ background:rgba(255,255,255,.16) !important; color:#FFFFFF !important; } /* --- 23.6 · La lista desplegable de fichas, por fin legible -------------------- */ /* El buscador de juicios (juicios-avance.js) abría un panel que la V11 volvió oscuro… con las letras todavía azul marino de la era clara. Números en ámbar, programa en tinta clara y resaltado dorado. */ .bwPanel{ background:rgba(14,24,42,.97) !important; border:1px solid rgba(226,236,248,.20) !important; box-shadow:0 20px 50px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35) !important; } .bwOpt .bwT{ color:#FFE9A6 !important; } .bwOpt .bwS{ color:#C4D2E4 !important; } .bwOpt:hover,.bwOpt.activa{ background:rgba(127,220,231,.13) !important; } .bwOpt.sel{ background:linear-gradient(135deg,rgba(127,220,231,.16),rgba(255,216,115,.10)) !important; } .bwOpt mark{ background:rgba(255,216,115,.32) !important; color:#FFEFB0 !important; } .bwVacio,.bwCount{ color:#B7C6DB !important; } .bwCount{ border-top:1px dashed rgba(226,236,248,.18) !important; } .bwCombo .bwCaret,.bwCombo .bwClear{ color:#B7C6DB !important; } .bwCombo .bwCaret:hover{ color:#7FDCE7 !important; } .bwCombo input.bwInput{ color:var(--lg-ink) !important; } .bwCombo input.bwInput::placeholder{ color:#8FA3C0 !important; } /* --- 23.7 · Listas desplegables que se escriben (betowa-glass.js) -------------- */ /* Los desplegables largos se convierten en campo escribible con sugerencias. color-scheme:dark hace que el menú nativo del navegador salga oscuro con letra clara (adiós al azul oscuro ilegible del menú del sistema). */ select,input,textarea{ color-scheme:dark; } input.bwEscribible{ width:100%; background:#16233A !important; color:var(--lg-ink) !important; border:1px solid var(--bw-line,rgba(226,236,248,.18)) !important; border-radius:var(--lg-r-md) !important; padding:9px 30px 9px 10px !important; font-size:13px; background-image: linear-gradient(45deg,transparent 50%,#B7C6DB 50%), linear-gradient(135deg,#B7C6DB 50%,transparent 50%) !important; background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55% !important; background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important; } input.bwEscribible::placeholder{ color:#8FA3C0; } input.bwEscribible:focus{ outline:none; border-color:rgba(127,220,231,.55) !important; box-shadow:0 0 0 3px rgba(127,220,231,.16) !important; } /* La regla maestra de controles (sección 4) seguía pintando los campos de texto con vidrio blanco: aquí se re-declara la MISMA lista en azul noche. */ select,input[type=text],input[type=search],input[type=number],input[type=date], input[type=password],input:not([type]),textarea,.control select,.control input{ background:#16233A !important; color:var(--lg-ink) !important; border:1px solid rgba(226,236,248,.20) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.25) !important; } select:focus,input:focus,textarea:focus{ border-color:rgba(127,220,231,.55) !important; box-shadow:0 0 0 3px rgba(127,220,231,.16),inset 0 1px 0 rgba(255,255,255,.05) !important; } ::placeholder{ color:#8FA3C0 !important; opacity:1; } /* --- 23.8 · Ambientes: el diagrama entero habla azul noche --------------------- */ /* Columna fija de ambientes: era celeste claro (#eef3fb) con tinta azul marino. */ .gRow .gLabel{ background:#121F33 !important; } .gRow:hover .gLabel{ background:linear-gradient(90deg,#182741 0%,#16233A 78%,#121F33 100%) !important; } .gRow.esLote .gLabel{ background:linear-gradient(90deg,rgba(34,197,94,.14),#121F33 78%) !important; } .gRow.esLote:hover .gLabel{ background:linear-gradient(90deg,rgba(34,197,94,.22),#16233A 78%) !important; } .gLabel .amb{ color:#F5F9FE !important; } .gLabel .jor{ color:#7FDCE7 !important; } .gLabel .catMini{ color:#B7C6DB !important; } /* El nombre de la categoría conserva el color de su programa, aclarado para leerse sobre oscuro (color-mix); si el navegador no lo soporta, tinta clara. */ .gLabel .catNom{ color:#C4D2E4 !important; } @supports (color: color-mix(in srgb, red 50%, white)){ .gLabel .catNom{ color:color-mix(in srgb, var(--cc,#C4D2E4) 42%, #F5F9FE) !important; } } .gLabel .areaLote{ color:#8FE388 !important; } /* Días del calendario del Gantt: la base era azul marino y los especiales venían en tintas oscuras; suben todos de luz conservando su matiz. */ .gDayCell .dLetra,.gDayCell .dNum{ color:#B7C6DB !important; } .gDayCell.dom .dLetra,.gDayCell.dom .dNum{ color:#FF8CA3 !important; } .gDayCell.sab .dLetra,.gDayCell.sab .dNum{ color:#7FDCE7 !important; } .gDayCell.santa .dLetra,.gDayCell.santa .dNum{ color:#FF9DB0 !important; } .gDayCell.confraternidad .dLetra,.gDayCell.confraternidad .dNum{ color:#8FE388 !important; } .gDayCell.alistamiento .dLetra,.gDayCell.alistamiento .dNum{ color:#FFD873 !important; } /* Ayuda del Gantt, título de la leyenda y detalles que quedaron en azul marino. */ .gantt-ayuda{ color:#C4D2E4 !important; } .gantt-ayuda b{ color:#F5F9FE !important; } .leyenda{ color:#B7C6DB !important; } .leyenda .it.leyTit,.leyTit{ color:#E2EAF6 !important; } td .mini-area,.mini-area{ color:#9FB3CC !important; } td span.pill-eq,.pill-eq{ color:#7FDCE7 !important; } #btnLimpiarBusca{ color:#B7C6DB !important; } .buscador input{ background:#16233A !important; background-image:none !important; color:var(--lg-ink) !important; border:1px solid rgba(226,236,248,.20) !important; } .buscador input::placeholder{ color:#8FA3C0 !important; } /* Números destacados en negrilla dentro de tablas y tarjetas de detalle. */ td b{ color:#FFE49C !important; } #kAmbDet b,#kOcupDet b,#kPractDet b,#kFichasDet b,#kCuposDet b{ color:#FFE9A6 !important; } .hint-respaldo,.hint-amb{ color:#B7C6DB !important; } /* V18 · Rejilla de días del Gantt: una línea vertical sutil cada día (42 px, el ancho de columna del diagrama) para poder seguir la fecha de cada bloque con la vista. Va por encima de los fondos de periodo y por debajo de las cintas de programación. */ .gTrack::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:repeating-linear-gradient(90deg, rgba(226,236,248,.11) 0, rgba(226,236,248,.11) 1px, transparent 1px, transparent 42px); } .gBar{ z-index:2; } /* Nombres de ambiente: la página los fija en azul profundo con !important y más especificidad; aquí se responde con la misma artillería. */ #tablaAmb td:first-child b,#consResultado .ambTit,#edrPanel td:first-child b{ color:#F5F9FE !important; } /* Cajas de consulta rápida y EDR: sus rótulos van con estilo en línea (var(--mut) / var(--azul-prof)); dentro de estas cajas los tokens se resuelven en claro, y el recuadro blanco en línea pasa a azul noche. */ #edrPanel,#consResultado,#consRes{ --azul-prof:#CFE3F7; --mut:#B7C6DB; --teal-osc:#7FDCE7; } #edrPanel [style*="background:rgba(255,255,255"], #consResultado [style*="background:rgba(255,255,255"]{ background:rgba(20,33,55,.90) !important; border-color:rgba(226,236,248,.18) !important; } /* Semáforo de ocupación EDR: los tonos oscuros suben de luz. */ #edrPanel [style*="#15803D"]{ color:#4ADE80 !important; } #edrPanel [style*="#7f1d1d"]{ color:#F87171 !important; } /* --- 23.9 · Módulo de avance de juicios: tarjetas en oscuro -------------------- */ .avKpi{ background:linear-gradient(180deg,rgba(22,35,58,.90),rgba(16,27,46,.80)) !important; border:1px solid var(--lg-hair-soft) !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 3px 10px rgba(0,0,0,.30) !important; } .avKpi .k{ color:#B7C6DB !important; } .avKpi .v{ color:#FFEFB0 !important; } .avMeta .avTag{ background:rgba(20,33,55,.92) !important; border:1px solid rgba(226,236,248,.20) !important; color:#C4D2E4 !important; } .avMeta .avTag b{ color:var(--lg-ink) !important; } /* Indicador de datos publicados: cabecera y fechas en tinta clara. */ #betowaDataInfo .bdi-head{ color:var(--lg-ink) !important; } #betowaDataInfo .bdi-item{ border-top-color:rgba(226,236,248,.16) !important; } #betowaDataInfo .bdi-date{ color:#7FDCE7 !important; } /* --- 23.9b · Velocímetros SVG del PE-04 ---------------------------------------- */ /* La pista venía en gris claro (#e5e7eb) y un arco de avance en azul marino (#0E2951): sobre azul noche, la pista parecía una franja blanca y el avance desaparecía. Pista en azul pizarra y avance en azul luminoso. */ .gaugeSvg path[stroke="#e5e7eb"]{ stroke:#2C3A52 !important; } .gaugeSvg path[stroke="#0E2951"]{ stroke:#7FB2FF !important; } @media print{ .gaugeSvg path[stroke="#e5e7eb"]{ stroke:#e5e7eb !important; } .gaugeSvg path[stroke="#0E2951"]{ stroke:#0E2951 !important; } } /* --- 23.10 · El mapa y sus controles ------------------------------------------ */ .leaflet-bar a,.leaflet-control-zoom a{ background:#121F33 !important; color:#E2EAF6 !important; border-color:rgba(226,236,248,.20) !important; } .leaflet-control-attribution{ background:rgba(13,20,34,.75) !important; color:#8FA3C0 !important; } .leaflet-control-attribution a{ color:#7FDCE7 !important; } /* --- 23.11 · El panel de administración habla el mismo idioma ------------------ */ /* Sus tarjetas seguían en vidrio claro con la tinta ya volteada a clara: texto invisible. Tarjetas a azul noche y rótulos en tinta clara. */ .glass,.login-box{ background:rgba(16,27,46,.92) !important; border:1px solid rgba(226,236,248,.18) !important; } .login-box h2{ color:#F5F9FE !important; } .login-box p{ color:#B7C6DB !important; } .slot{ background:rgba(22,35,58,.85) !important; border-color:rgba(226,236,248,.16) !important; } .slot-label{ color:#CFE3F7 !important; } .slot-note{ color:#B7C6DB !important; } .file-row{ background:rgba(255,255,255,.06) !important; color:var(--lg-ink-2) !important; } .msg.err{ background:rgba(225,29,72,.14) !important; color:#FF9DB0 !important; } .msg.ok{ background:rgba(0,166,106,.14) !important; color:#8FE388 !important; } .alert-default{ background:rgba(242,184,75,.12) !important; color:#FFD873 !important; } /* --- 23.12 · Al imprimir, todo vuelve a papel claro ---------------------------- */ @media print{ .panel,.card,.kpi,.statCard,.gauge-card,.gaugeCard, .table-wrap,.tablaWrap,.chart,.cdp-area,.modal,.filtros,.cargaPanel, .miniCard,.meta-card,.item,.info-box,.notice,.vchip,.it,.mini, .badge,.pill,.vchip,.sello,.avKpi,.avMeta .avTag,.dash > .panel-head .badge-count{ background:#fff !important; border-color:#CBD5E1 !important; box-shadow:none !important; color:#26364F !important; } table,tbody,tfoot{ background:#fff !important; } tbody tr:nth-child(even) td{ background:#F2F6FC !important; } tbody tr:hover td{ background:#F2F6FC !important; } button:not([class]),.clear-btn,.toolbar button,.tools button{ background:#fff !important; color:#26364F !important; border-color:#CBD5E1 !important; } select,input,textarea{ color-scheme:light; } select,input[type=text],input[type=search],input[type=number],input[type=date], input:not([type]),textarea,.control select,.control input,input.bwEscribible{ background:#fff !important; color:#26364F !important; border-color:#CBD5E1 !important; background-image:none !important; box-shadow:none !important; } .gTrack::after{ content:none !important; } .gRow .gLabel,.gRow:hover .gLabel{ background:#eef3fb !important; } .gRow.esLote .gLabel,.gRow.esLote:hover .gLabel{ background:#E4F6EA !important; } .gLabel .amb{ color:#0E2951 !important; } #tablaAmb td:first-child b,#consResultado .ambTit,#edrPanel td:first-child b{ color:#0E2951 !important; } #edrPanel,#consResultado,#consRes{ --azul-prof:#0E2951; --mut:#516079; --teal-osc:#076E79; } .gLabel .jor{ color:#076E79 !important; } .gLabel .catNom{ color:var(--cc,#516079) !important; } .gDayCell .dLetra,.gDayCell .dNum{ color:#163C74 !important; } .gantt-ayuda,.gantt-ayuda b,.leyenda,.leyTit{ color:#26364F !important; } td b{ color:#14233B !important; } .avKpi .v{ color:#0E2951 !important; } .avKpi .k{ color:#4A5B75 !important; } .bwPanel{ background:#fff !important; } .bwOpt .bwT{ color:#0B1B33 !important; } .bwOpt .bwS{ color:#4A5B75 !important; } .pill.aprobado,.p-ok{ background:rgba(214,245,229,.92) !important; color:#065F46 !important; } .pill.pendiente{ background:rgba(255,241,214,.92) !important; color:#8A5300 !important; } .pill.cancelado,.p-bad{ background:rgba(255,232,236,.92) !important; color:#9F1239 !important; } .pill.estado{ background:rgba(224,236,255,.92) !important; color:#1E40AF !important; } } /* --- 23.13 · V39: rótulos de las filas del panel (sincronización y listas) ------ El vidrio oscurece .file-row (23.11) pero el del rótulo seguía en --azul-prof y desaparecía sobre el fondo nocturno. Misma artillería, al final. */ body .file-row b{ color:#E2EAF6 !important; } body .file-row .meta{ color:#A9B8CE !important; } @media print{ .file-row b{ color:#0E2951 !important; } .file-row .meta{ color:#5A6B85 !important; } }