/* ============================================================================ 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:var(--lg-ink); 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:var(--lg-ink); 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; } }