/* OT Cybersecurity Toolkit — Industrial Executive Dark Theme */ :root { /* ── Backgrounds ──────────────────────────────────────── */ --ot-bg-dark: #0d1117; --ot-bg-deepest: #060a0e; --ot-bg-panel: #161b22; --ot-bg-card: #1c2230; --ot-bg-raised: #212936; --ot-bg-overlay: rgba(13, 17, 23, 0.95); /* ── Borders ──────────────────────────────────────────── */ --ot-border: #30363d; --ot-border-light: #3d4551; /* ── Accent colors ────────────────────────────────────── */ --ot-accent: #e94560; --ot-accent2: #f7941d; --ot-accent-glow: rgba(233, 69, 96, 0.12); --ot-steel: #3a7bd5; --ot-steel-light: #58a6ff; --ot-steel-glow: rgba(58, 123, 213, 0.15); --ot-amber: #f0a500; --ot-amber-glow: rgba(240, 165, 0, 0.12); /* ── Semantic colors ──────────────────────────────────── */ --ot-text: #c9d1d9; --ot-text-muted: #8b949e; --ot-success: #3fb950; --ot-warning: #d29922; --ot-danger: #f85149; --ot-info: #58a6ff; --ot-critical: #8b1a2d; --ot-high: #dc2626; --ot-medium: #eab308; --ot-low: #22c55e; /* ── Typography ───────────────────────────────────────── */ --ot-font-mono: 'Roboto Mono', 'JetBrains Mono', monospace; --ot-font-cond: 'Roboto Condensed', 'Arial Narrow', sans-serif; } /* ═══════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ BACKGROUND — imagen de presentación con transparencia ═══════════════════════════════════════════════════════════ Se aplica al (más al fondo) con un gradiente oscuro encima para atenuarla al ~40% de intensidad. Los containers de bslib se vuelven transparentes para dejar ver la imagen. */ html { background: linear-gradient(rgba(10, 14, 24, 0.62), rgba(10, 14, 24, 0.62)), url('../img/bg_presentation.png') center center / cover no-repeat fixed, #0a0e18 !important; min-height: 100vh; } body { background: transparent !important; color: var(--ot-text); font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; } /* Contenedores fluid de bslib — dejarlos transparentes para que la imagen del html se vea. Los cards internos mantienen su fondo opaco (queda un efecto de "cards flotando sobre la imagen"). */ body > .container-fluid, body > .bslib-page-fluid, body > .bslib-page-fill, body > .bslib-page-navbar > .container-fluid, body > .bslib-page-navbar > .html-fill-container { background: transparent !important; } /* ═══════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════ */ .navbar { background: linear-gradient(90deg, #0a0e18 0%, #111827 60%, #0d1117 100%) !important; border-bottom: 1px solid var(--ot-border) !important; padding: 0 1.5rem; position: relative; } /* Top tricolor accent stripe */ .navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ot-accent) 0%, var(--ot-accent2) 50%, var(--ot-steel) 100%); pointer-events: none; } .navbar-brand { color: #fff !important; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; padding: 0.75rem 0; } .nav-link { color: var(--ot-text-muted) !important; font-size: 0.87rem; font-weight: 500; padding: 0.6rem 1rem !important; transition: color 0.2s, background-color 0.2s; border-radius: 4px 4px 0 0; } .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.04) !important; } .nav-link.active { color: #fff !important; background: var(--ot-accent-glow) !important; border-bottom: 2px solid var(--ot-accent) !important; } /* Dropdown menu */ .dropdown-menu { background-color: var(--ot-bg-panel) !important; border: 1px solid var(--ot-border) !important; border-top: 2px solid var(--ot-accent) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border-radius: 0 0 8px 8px; } .dropdown-item { color: var(--ot-text-muted) !important; font-size: 0.85rem; padding: 0.5rem 1.2rem; transition: background 0.15s, color 0.15s; } .dropdown-item:hover { background-color: rgba(233, 69, 96, 0.08) !important; color: #fff !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--ot-accent-glow) !important; color: var(--ot-accent) !important; } /* ═══════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════ */ .card, .bslib-card { background-color: var(--ot-bg-card) !important; border: 1px solid var(--ot-border) !important; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.45); } .card-header, .bslib-card-header { background-color: var(--ot-bg-panel) !important; border-bottom: 1px solid var(--ot-border) !important; color: #fff !important; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.03em; padding: 0.75rem 1rem; } /* Card accent variants */ .card-accent-red { border-left: 3px solid var(--ot-accent) !important; } .card-accent-steel { border-left: 3px solid var(--ot-steel) !important; } .card-accent-green { border-left: 3px solid var(--ot-success) !important; } .card-accent-amber { border-left: 3px solid var(--ot-amber) !important; } /* Interactive cards */ .card-interactive { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card-interactive:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important; border-color: rgba(233, 69, 96, 0.35) !important; } /* ═══════════════════════════════════════════════════════════ SECTION TITLE — encabezado industrial ═══════════════════════════════════════════════════════════ */ .section-title { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ot-border); } .section-title::before { content: ''; width: 3px; height: 1.4rem; background: var(--ot-accent); border-radius: 2px; flex-shrink: 0; } .section-title-text { font-family: var(--ot-font-cond); font-size: 1rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } .section-title-sub { font-size: 0.76rem; color: var(--ot-text-muted); margin-left: auto; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ MODULE HERO — landing pages de módulos ═══════════════════════════════════════════════════════════ */ .module-hero { text-align: center; padding: 4rem 2rem 3rem; background: linear-gradient(160deg, #1a2035 0%, var(--ot-bg-card) 60%, #0d1117 100%); border-radius: 12px; margin-bottom: 2rem; border: 1px solid var(--ot-border); position: relative; overflow: hidden; } .module-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ot-accent), var(--ot-accent2), var(--ot-steel)); } .module-hero::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: var(--ot-accent-glow); pointer-events: none; } .module-hero-icon { font-size: 3.5rem; margin-bottom: 1.2rem; position: relative; z-index: 1; } .module-hero-title { font-family: var(--ot-font-cond); font-size: 2.2rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; position: relative; z-index: 1; } .module-hero-subtitle { color: var(--ot-text-muted); font-size: 0.95rem; max-width: 560px; margin: 0 auto 1.5rem; line-height: 1.65; position: relative; z-index: 1; } .module-wip-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--ot-amber-glow); border: 1px solid var(--ot-amber); color: var(--ot-amber); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 14px; border-radius: 20px; position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════ FEATURE CARDS — cards de características en módulos ═══════════════════════════════════════════════════════════ */ .feature-card { background: var(--ot-bg-panel); border: 1px solid var(--ot-border); border-radius: 10px; padding: 1.6rem; height: 100%; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--ot-steel); } .feature-card:hover { border-color: rgba(58, 123, 213, 0.45); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.45); } .feature-card-number { font-family: var(--ot-font-mono); font-size: 0.64rem; color: var(--ot-steel); opacity: 0.55; letter-spacing: 0.12em; margin-bottom: 0.8rem; } .feature-card-icon { font-size: 1.65rem; margin-bottom: 0.9rem; color: var(--ot-steel); } .feature-card-title { font-family: var(--ot-font-cond); font-size: 0.95rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .feature-card-desc { font-size: 0.83rem; color: var(--ot-text-muted); line-height: 1.65; } .feature-card-ref { font-size: 0.68rem; font-family: var(--ot-font-mono); color: var(--ot-steel); opacity: 0.6; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--ot-border); letter-spacing: 0.03em; } /* ═══════════════════════════════════════════════════════════ MODULE STANDARDS BAR — footer de estándares ═══════════════════════════════════════════════════════════ */ .module-standards-bar { background: var(--ot-bg-panel); border: 1px solid var(--ot-border); border-radius: 8px; padding: 0.8rem 1.5rem; margin-top: 2rem; display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--ot-text-muted); } .module-standards-bar .standards-label { font-family: var(--ot-font-cond); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ot-steel); font-weight: 700; white-space: nowrap; font-size: 0.72rem; } .module-standards-bar .standards-list { font-family: var(--ot-font-mono); font-size: 0.71rem; } /* ═══════════════════════════════════════════════════════════ STATUS LED INDICATORS ═══════════════════════════════════════════════════════════ */ .status-led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-led.online { background: var(--ot-success); box-shadow: 0 0 6px var(--ot-success); } .status-led.warning { background: var(--ot-warning); box-shadow: 0 0 6px var(--ot-warning); } .status-led.offline { background: var(--ot-danger); box-shadow: 0 0 6px var(--ot-danger); animation: led-blink 1.2s ease-in-out infinite; } @keyframes led-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } } /* ═══════════════════════════════════════════════════════════ ASSESSMENT SELECTOR SIDEBAR ═══════════════════════════════════════════════════════════ */ #assessment-sidebar { background-color: var(--ot-bg-panel); border-right: 1px solid var(--ot-border); min-height: 100vh; padding: 1.2rem; } /* Sidebar label */ .sidebar h6.text-muted { letter-spacing: 0.1em; font-size: 0.68rem; font-family: var(--ot-font-cond); } .sidebar-assessment-name { font-family: var(--ot-font-cond); font-size: 1rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; } /* ═══════════════════════════════════════════════════════════ RISK & CRITICALITY BADGES ═══════════════════════════════════════════════════════════ */ .badge-critico { background-color: var(--ot-critical); color: #fff; } .badge-alto { background-color: var(--ot-high); color: #fff; } .badge-medio { background-color: var(--ot-medium); color: #1a1a1a; } .badge-bajo { background-color: var(--ot-low); color: #1a1a1a; } .risk-critico { color: var(--ot-critical); font-weight: 700; } .risk-alto { color: var(--ot-high); font-weight: 700; } .risk-medio { color: var(--ot-medium); font-weight: 600; } .risk-bajo { color: var(--ot-low); font-weight: 600; } /* ═══════════════════════════════════════════════════════════ DATATABLES ═══════════════════════════════════════════════════════════ */ .dataTables_wrapper, table.dataTable { background-color: transparent; color: var(--ot-text); } table.dataTable thead th { background-color: var(--ot-bg-panel); color: var(--ot-text); border-bottom: 2px solid var(--ot-accent) !important; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--ot-font-cond); padding: 10px 12px; } table.dataTable tbody tr { background-color: var(--ot-bg-card); border-bottom: 1px solid var(--ot-border); transition: background-color 0.12s; } table.dataTable tbody tr:hover { background-color: #1a2540 !important; } table.dataTable tbody td { color: var(--ot-text); font-size: 0.85rem; vertical-align: middle; padding: 8px 12px; } .dataTables_info, .dataTables_length label, .dataTables_filter label, .dataTables_paginate { color: var(--ot-text-muted) !important; font-size: 0.8rem; } /* ═══════════════════════════════════════════════════════════ FORMS & INPUTS ═══════════════════════════════════════════════════════════ */ .form-control, .form-select, .selectize-input { background-color: var(--ot-bg-panel) !important; border: 1px solid var(--ot-border) !important; color: var(--ot-text) !important; border-radius: 6px; font-size: 0.87rem; transition: border-color 0.15s, box-shadow 0.15s; } /* Native HTML HTML nativo (selectize = FALSE), que el navegador renderiza como popup nativo del SO — NO requieren overflow:visible. El override global anterior causaba que los markers de plotly heatmaps se salieran del card y se solaparan con otros elementos. */ /* Forzar contención de plotly + cards que contienen plotly para que NUNCA los markers/anotaciones escapen. */ .html-widget.plotly, .plotly, .js-plotly-plot, .plot-container { overflow: hidden !important; position: relative !important; } /* Cards y contenedores Bootstrap/bslib con plotly dentro */ .card:has(.plotly), .card:has(.js-plotly-plot), .bslib-card:has(.plotly), .bslib-card:has(.js-plotly-plot) { overflow: hidden !important; contain: layout paint; } /* Tooltips de plotly: que tengan z-index alto y se posicionen correctamente sin escapar al body global */ .plotly .hoverlayer { z-index: 100; } /* ═══════════════════════════════════════════════════════════ TABS (nav-tabs y bslib) ═══════════════════════════════════════════════════════════ */ .nav-tabs { border-bottom: 1px solid var(--ot-border); } .nav-tabs .nav-link { color: var(--ot-text-muted) !important; border: none !important; background: transparent !important; font-family: var(--ot-font-cond); font-size: 0.85rem; letter-spacing: 0.03em; } .nav-tabs .nav-link.active { color: #fff !important; background-color: var(--ot-bg-card) !important; border-bottom: 2px solid var(--ot-accent) !important; } /* navset_pill */ .nav-pills .nav-link { color: var(--ot-text-muted) !important; font-size: 0.84rem; transition: all 0.15s; } .nav-pills .nav-link.active { background-color: var(--ot-accent) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════ PURDUE LEVEL CHIPS ═══════════════════════════════════════════════════════════ */ .purdue-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; background-color: var(--ot-bg-panel); border: 1px solid var(--ot-info); color: var(--ot-info); font-family: var(--ot-font-mono); } /* ═══════════════════════════════════════════════════════════ AGENT STATUS ═══════════════════════════════════════════════════════════ */ .agent-status-box { border-left: 3px solid var(--ot-accent); padding: 0.8rem 1rem; background-color: var(--ot-bg-panel); border-radius: 0 6px 6px 0; margin-bottom: 1rem; } /* ═══════════════════════════════════════════════════════════ EMPTY / NO-ASSESSMENT STATE ═══════════════════════════════════════════════════════════ */ .no-assessment-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; text-align: center; min-height: 400px; } .no-assessment-screen .na-icon { font-size: 4rem; color: var(--ot-border); margin-bottom: 1.5rem; opacity: 0.6; } .no-assessment-screen h4 { font-family: var(--ot-font-cond); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ot-text-muted); font-size: 1.1rem; margin-bottom: 0.6rem; } .no-assessment-screen p { max-width: 380px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════ SHINY BUSY INDICATOR ═══════════════════════════════════════════════════════════ */ .shiny-busy::after { content: "⚙ Procesando..."; position: fixed; bottom: 1.2rem; right: 1.5rem; background: var(--ot-bg-card); border: 1px solid var(--ot-accent); color: var(--ot-accent); padding: 0.35rem 0.9rem; border-radius: 4px; font-size: 0.75rem; font-family: var(--ot-font-mono); letter-spacing: 0.04em; z-index: 9999; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } /* ═══════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--ot-bg-dark); } ::-webkit-scrollbar-thumb { background: var(--ot-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ot-text-muted); } /* ═══════════════════════════════════════════════════════════ LOGIN OVERLAY ═══════════════════════════════════════════════════════════ */ .login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; /* v0.152.11 — Login screen sin imagen de fondo. Fondo sólido opaco para (a) no confundir al usuario mostrando el contenido detrás del overlay, y (b) mantener el login limpio con solo la card centrada. */ background: #0a0e18; /* v0.38.5: arranca oculto para evitar el "flash" del login al refrescar con sesión válida. JS de auth_session_js() decide si mostrarlo según presencia de token en sessionStorage. */ display: none; align-items: center; justify-content: center; flex-direction: column; } .login-overlay.show { display: flex; } .login-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ot-accent), var(--ot-accent2), var(--ot-steel)); z-index: 10001; } .login-overlay .login-plant-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: 0.05; pointer-events: none; filter: invert(1); } .login-card { background: var(--ot-bg-card); border: 1px solid var(--ot-border); border-top: 3px solid var(--ot-accent); border-radius: 12px; padding: 2.8rem 2.2rem; width: 100%; max-width: 400px; box-shadow: 0 16px 48px rgba(0,0,0,0.7); position: relative; z-index: 1; } .login-logo { font-size: 2.5rem; color: var(--ot-accent); text-align: center; margin-bottom: 0.5rem; } .login-title { color: #fff; font-weight: 700; font-size: 1.1rem; text-align: center; letter-spacing: 0.06em; font-family: var(--ot-font-cond); text-transform: uppercase; } .login-subtitle { color: var(--ot-text-muted); font-size: 0.78rem; text-align: center; margin-bottom: 2rem; font-family: var(--ot-font-mono); } .login-error { background: rgba(248,81,73,0.12); border: 1px solid var(--ot-danger); color: var(--ot-danger); border-radius: 6px; padding: 8px 12px; font-size: 0.82rem; margin-bottom: 1rem; display: none; } /* ═══════════════════════════════════════════════════════════ HOME BACKGROUND ═══════════════════════════════════════════════════════════ */ .home-bg-wrapper { position: relative; min-height: 620px; overflow: hidden; } /* v0.152.11 — silueta industrial_plant.svg reemplazada por bg_presentation.png global en . Se oculta para no competir con la nueva imagen de fondo. */ .home-bg-img, .login-overlay .login-plant-bg { display: none !important; } /* ═══════════════════════════════════════════════════════════ ALERTS ═══════════════════════════════════════════════════════════ */ .alert-danger { background-color: rgba(248,81,73,0.1); border-color: var(--ot-danger); border-radius: 8px; } .alert-warning { background-color: rgba(210,153,34,0.1); border-color: var(--ot-warning); border-radius: 8px; } .alert-success { background-color: rgba(63,185,80,0.1); border-color: var(--ot-success); border-radius: 8px; } .alert-info { background-color: rgba(88,166,255,0.1); border-color: var(--ot-info); border-radius: 8px; } /* ═══════════════════════════════════════════════════════════ EXECUTIVE DASHBOARD ═══════════════════════════════════════════════════════════ */ /* Card headers en modo ejecutivo */ .exec-card-header { background: linear-gradient(90deg, #161b22 0%, #1c2230 100%); border-bottom: 1px solid var(--ot-border) !important; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--ot-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* Números grandes ejecutivos */ .exec-big-num { font-family: var(--ot-font-mono); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .exec-big-num.critical { color: #e94560; } .exec-big-num.high { color: #f0a500; } .exec-big-num.medium { color: #58a6ff; } .exec-big-num.low { color: #3fb950; } .exec-big-num.amber { color: var(--ot-amber); } .exec-big-num.steel { color: var(--ot-steel-light); } /* Grid de metadatos (w_info) */ .exec-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin-top: 0.75rem; } .exec-meta-item { display: flex; flex-direction: column; } .exec-meta-label { font-size: 0.65rem; color: var(--ot-text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1px; } .exec-meta-value { font-size: 0.82rem; color: var(--ot-text); font-weight: 600; } /* Barras de progreso ejecutivas */ .exec-progress-wrap { background: var(--ot-bg-panel); border-radius: 3px; height: 5px; overflow: hidden; margin-top: 3px; } .exec-progress-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; } /* Badge de criticidad grande */ .exec-crit-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .exec-crit-badge.critico { background: rgba(139,26,45,0.20); color: #d4304a; border: 1px solid #8b1a2d; } .exec-crit-badge.alto { background: rgba(220,38,38,0.18); color: #ef4444; border: 1px solid #dc2626; } .exec-crit-badge.medio { background: rgba(234,179,8,0.18); color: #eab308; border: 1px solid #ca9a00; } .exec-crit-badge.bajo { background: rgba(34,197,94,0.18); color: #22c55e; border: 1px solid #16a34a; } /* Separador ejecutivo */ .exec-divider { border: none; border-top: 1px solid var(--ot-border); margin: 0.6rem 0; } /* Fila de KPI resumen */ .exec-kpi-row { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid rgba(48,54,61,0.5); } .exec-kpi-row:last-child { border-bottom: none; } .exec-kpi-label { font-size: 0.77rem; color: var(--ot-text-muted); } .exec-kpi-val { font-family: var(--ot-font-mono); font-size: 0.88rem; font-weight: 700; color: var(--ot-text); } /* Leyenda de riesgo compacta */ .risk-legend-compact { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .risk-legend-compact .rl-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--ot-text-muted); } .risk-legend-compact .rl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ HEATMAP LEGEND ═══════════════════════════════════════════════════════════ */ .heatmap-legend-bar { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #3fb950, #58a6ff, #f0a500, #e94560); margin: 6px 0 4px; } /* ═══════════════════════════════════════════════════════════ CHART CONTAINERS ═══════════════════════════════════════════════════════════ */ .exec-chart-wrap { position: relative; overflow: hidden; } .exec-chart-title { font-family: var(--ot-font-cond); font-size: 0.72rem; color: var(--ot-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } /* ═══════════════════════════════════════════════════════════ DT DARK THEME IMPROVEMENTS ═══════════════════════════════════════════════════════════ */ .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { font-size: 0.78rem; color: var(--ot-text-muted); } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ot-text-muted) !important; font-size: 0.78rem; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ot-accent) !important; color: #fff !important; border-color: var(--ot-accent) !important; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════ BSLIB SIDEBAR (exec dashboard) ═══════════════════════════════════════════════════════════ */ .bslib-sidebar-layout > .bslib-sidebar-panel { background-color: var(--ot-bg-panel) !important; border-left: 1px solid var(--ot-border) !important; } .bslib-sidebar-layout .sidebar-title { color: #fff; font-family: var(--ot-font-cond); } /* ═══════════════════════════════════════════════════════════ EXECUTIVE REPORT HEADER ═══════════════════════════════════════════════════════════ */ .exec-report-header { padding-bottom: 0.75rem; border-bottom: 1px solid var(--ot-border); } /* ═══════════════════════════════════════════════════════════ EXECUTIVE KPI SUMMARY STRIP ═══════════════════════════════════════════════════════════ */ .exec-kpi-strip-card { background: var(--ot-bg-card); border: 1px solid var(--ot-border); border-radius: 8px; padding: 0.9rem 1.1rem; height: 100%; position: relative; overflow: hidden; } .exec-kpi-strip-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--ot-steel) 0%, transparent 100%); } .exec-kpi-strip-label { font-family: var(--ot-font-cond); font-size: 0.63rem; color: var(--ot-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.25rem; } .exec-kpi-strip-value { font-family: var(--ot-font-mono); font-size: 2.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #fff; } .exec-kpi-strip-detail { font-size: 0.73rem; color: var(--ot-text-muted); margin-top: 0.25rem; min-height: 1.1em; } /* ═══════════════════════════════════════════════════════════ EXECUTIVE CRITICAL ALERT BANNER ═══════════════════════════════════════════════════════════ */ .exec-alert-critical { background: rgba(233, 69, 96, 0.07); border: 1px solid rgba(233, 69, 96, 0.35); border-left: 4px solid #e94560; border-radius: 6px; padding: 0.65rem 1rem; color: #e94560; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; } /* ═══════════════════════════════════════════════════════════ COMMAND PALETTE (Cmd-K / Ctrl-K) ═══════════════════════════════════════════════════════════ */ .palette-modal .modal-dialog { max-width: 640px; margin-top: 9vh; } .palette-modal .modal-content { background: #0d1117; border: 1px solid #30363d; border-radius: 10px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); color: #c9d1d9; } .palette-modal .modal-header { border-bottom: 1px solid #21262d; padding: 0.5rem 1rem; } .palette-modal .modal-body { padding: 0; } .palette-modal .modal-footer { display: none; } .palette-input { width: 100%; background: transparent; border: 0; outline: 0; color: #f0f6fc; font-size: 1.05rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid #21262d; letter-spacing: 0.01em; } .palette-input::placeholder { color: #6e7681; } .palette-section { padding: 0.45rem 1.1rem 0.2rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8b949e; font-weight: 700; } .palette-list { max-height: 48vh; overflow-y: auto; padding-bottom: 0.5rem; } .palette-item { padding: 0.55rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 0.88rem; border-left: 3px solid transparent; transition: background-color 0.08s linear; } .palette-item:hover { background: #161b22; border-left-color: #58a6ff; } .palette-item .palette-icon { width: 20px; text-align: center; color: #8b949e; } .palette-item .palette-meta { margin-left: auto; color: #6e7681; font-size: 0.74rem; } .palette-empty { padding: 1rem 1.1rem; color: #6e7681; font-size: 0.84rem; text-align: center; } .palette-hint { padding: 0.35rem 1.1rem; font-size: 0.7rem; color: #6e7681; border-top: 1px solid #21262d; display: flex; gap: 0.85rem; flex-wrap: wrap; } .palette-hint kbd { background: #21262d; border: 1px solid #30363d; border-radius: 3px; padding: 0 0.32rem; font-size: 0.7rem; color: #c9d1d9; } .palette-item-active { background: #161b22; border-left-color: #58a6ff; } /* ═══════════════════════════════════════════════════════════ KILL CHAIN MITRE ICS — horizontal flow ═══════════════════════════════════════════════════════════ */ .kc-flow { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 4px; background: #0d1117; border-radius: 8px; border: 1px solid #21262d; } .kc-cell { min-width: 165px; flex-shrink: 0; background: #161b22; border-radius: 6px; border-top: 4px solid #30363d; padding: 8px 9px; position: relative; font-size: 0.74rem; color: #c9d1d9; } .kc-cell.kc-entry { border-top-color: #58a6ff; box-shadow: 0 0 0 1px #58a6ff inset; } .kc-cell.kc-blocked { border-top-color: #22c55e; } .kc-cell.kc-partial { border-top-color: #eab308; } .kc-cell.kc-weak { border-top-color: #f97316; } .kc-cell.kc-open { border-top-color: #dc2626; } .kc-cell .kc-tactic { font-weight: 700; letter-spacing: 0.02em; font-size: 0.78rem; margin-bottom: 4px; color: #f0f6fc; } .kc-cell .kc-coverage { font-size: 0.7rem; color: #8b949e; margin-bottom: 4px; } .kc-cell .kc-cov-bar { width: 100%; height: 4px; background: #21262d; border-radius: 2px; overflow: hidden; margin-bottom: 5px; } .kc-cell .kc-cov-bar-fill { height: 100%; background: #22c55e; } .kc-cell .kc-verdict { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .kc-cell .kc-verdict.kc-v-bloqueado { background: rgba(34,197,94,0.15); color: #22c55e; } .kc-cell .kc-verdict.kc-v-parcial { background: rgba(234,179,8,0.15); color: #eab308; } .kc-cell .kc-verdict.kc-v-débil { background: rgba(249,115,22,0.15); color: #f97316; } .kc-cell .kc-verdict.kc-v-abierto { background: rgba(220,38,38,0.15); color: #dc2626; } .kc-cell .kc-verdict.kc-v-sin { background: #30363d; color: #8b949e; } .kc-cell .kc-srs { margin-top: 5px; font-size: 0.66rem; color: #6e7681; line-height: 1.3; max-height: 4.5em; overflow-y: auto; } .kc-arrow { align-self: center; color: #30363d; font-size: 1.05rem; flex-shrink: 0; } .kc-entry-chip { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.6rem; background: rgba(88,166,255,0.18); color: #58a6ff; font-weight: 700; letter-spacing: 0.04em; margin-left: 4px; } /* ═══════════════════════════════════════════════════════════ PROGRESS STEPPER (10 fases del assessment, Home card) ═══════════════════════════════════════════════════════════ */ .progress-stepper-wrap { background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 14px 16px; } .progress-stepper-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .progress-stepper-title { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: #58a6ff; text-transform: uppercase; } .progress-stepper-pct { font-family: var(--ot-font-mono, monospace); font-size: 1.6rem; font-weight: 700; color: #f0f6fc; } .progress-stepper-pct small { color: #8b949e; font-size: 0.72rem; font-weight: 500; margin-left: 6px; } .progress-stepper-bar { width: 100%; height: 6px; background: #21262d; border-radius: 3px; overflow: hidden; margin-bottom: 14px; } .progress-stepper-bar-fill { height: 100%; background: linear-gradient(90deg, #58a6ff 0%, #22c55e 100%); transition: width 0.4s ease; } .progress-stepper { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; padding-bottom: 4px; } .progress-node { flex: 1 1 auto; min-width: 90px; position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 0 4px; user-select: none; } .progress-node:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #21262d; z-index: 0; } .progress-node.is-complete:not(:last-child)::after { background: #22c55e; } .progress-node-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; background: #161b22; border: 2px solid #30363d; color: #8b949e; z-index: 1; transition: all 0.15s ease; } .progress-node.is-empty .progress-node-dot { background: #161b22; border-color: #30363d; color: #6e7681; } .progress-node.is-progress .progress-node-dot { background: rgba(234, 179, 8, 0.12); border-color: #eab308; color: #eab308; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.10); } .progress-node.is-complete .progress-node-dot { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10); } .progress-node:hover .progress-node-dot { transform: scale(1.08); border-color: #58a6ff; } .progress-node-label { margin-top: 6px; font-size: 0.72rem; font-weight: 600; color: #c9d1d9; text-align: center; line-height: 1.15; } .progress-node-count { margin-top: 2px; font-size: 0.66rem; color: #6e7681; font-family: var(--ot-font-mono, monospace); } .progress-node.is-complete .progress-node-count { color: #22c55e; } .progress-node.is-progress .progress-node-count { color: #eab308; } .progress-stepper-empty { padding: 1rem; color: #6e7681; font-size: 0.84rem; text-align: center; } /* ═══════════════════════════════════════════════════════════ EXECUTIVE ROADMAP — Consolidated swimlane deliverable (v0.22.2) Tema premium con paleta por initiative, gradientes y micro-interacciones ═══════════════════════════════════════════════════════════ */ .exec-roadmap { --bg-deep: #0a0e14; --bg-card: #0d1117; --bg-lift: #161b22; --bg-row: #0f1218; --border-1: #1f2937; --border-2: #374151; --txt-1: #f8fafc; --txt-2: #e5e7eb; --txt-3: #9ca3af; --accent: #f2c200; background: linear-gradient(180deg, #0d1117 0%, #0a0e14 100%); border: 1px solid var(--border-1); border-radius: 12px; padding: 24px 28px 20px; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--txt-2); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset; position: relative; overflow: hidden; } .exec-roadmap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1 0%, #06b6d4 25%, #10b981 50%, #f59e0b 75%, #ef4444 100%); opacity: 0.65; } .exec-roadmap-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; gap: 12px; } .exec-roadmap-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; color: var(--txt-1); margin: 0; line-height: 1.1; background: linear-gradient(90deg, #f8fafc 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .exec-roadmap-subtitle { font-size: 0.88rem; color: var(--txt-3); margin-top: 4px; font-weight: 400; letter-spacing: 0.01em; } .exec-roadmap-draft { border: 1.5px solid #ef4444; color: #fca5a5; background: rgba(239,68,68,0.08); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; padding: 4px 11px; border-radius: 4px; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); animation: pulseDraft 3s ease-in-out infinite; } @keyframes pulseDraft { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.10); } } .exec-roadmap-print { background: linear-gradient(180deg, #1f2937 0%, #111827 100%); color: var(--txt-2); border: 1px solid var(--border-2); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 5px; cursor: pointer; transition: all 0.15s ease; margin-left: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .exec-roadmap-print:hover { background: linear-gradient(180deg, #374151 0%, #1f2937 100%); color: var(--txt-1); border-color: #4b5563; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.4); } .exec-roadmap-print i { margin-right: 4px; opacity: 0.85; } .exec-kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 18px 0 18px; } .exec-kpi { background: linear-gradient(180deg, var(--bg-lift) 0%, #0e131b 100%); border: 1px solid var(--border-1); border-left: 3px solid var(--accent); padding: 10px 13px 9px; border-radius: 6px; position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .exec-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .exec-kpi:nth-child(1) { border-left-color: #6366f1; } .exec-kpi:nth-child(2) { border-left-color: #06b6d4; } .exec-kpi:nth-child(3) { border-left-color: #10b981; } .exec-kpi:nth-child(4) { border-left-color: #f59e0b; } .exec-kpi:nth-child(5) { border-left-color: #ec4899; } .exec-kpi:nth-child(6) { border-left-color: #8b5cf6; } .exec-kpi label { display: block; font-size: 0.6rem; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .exec-kpi span { display: block; font-size: 1.32rem; font-weight: 700; color: var(--txt-1); letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; } .exec-roadmap-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.79rem; margin-top: 8px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-1); background: var(--bg-card); } .exec-roadmap-table thead th { background: linear-gradient(180deg, #1f2937 0%, #161b22 100%); color: var(--txt-2); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 8px; border-bottom: 2px solid var(--border-2); border-right: 1px solid var(--border-1); text-align: center; vertical-align: middle; } .exec-roadmap-table thead th.col-projects { text-align: left; padding-left: 14px; } .exec-roadmap-table thead th.year-band { background: linear-gradient(180deg, #0f172a 0%, #0a0e14 100%); color: var(--accent); border-bottom: 1px solid var(--border-2); font-size: 0.78rem; letter-spacing: 0.08em; } .exec-roadmap-table tbody tr { transition: background 0.12s ease; } .exec-roadmap-table tbody tr:hover { background: rgba(255,255,255,0.025); } .exec-roadmap-table tbody tr:hover .col-timeline { background: rgba(99,102,241,0.04); } .exec-roadmap-table tbody td { border-bottom: 1px solid var(--border-1); border-right: 1px solid var(--border-1); padding: 9px 10px; vertical-align: middle; background: var(--bg-row); color: var(--txt-2); } .exec-roadmap-table tbody tr:last-child td { border-bottom: none; } .exec-roadmap-table tbody td.col-no { text-align: center; width: 38px; padding: 9px 6px; } .no-chip { display: inline-block; font-weight: 800; font-size: 0.72rem; min-width: 24px; padding: 3px 7px; border-radius: 999px; letter-spacing: 0.02em; } .exec-roadmap-table tbody td.col-initiative { font-weight: 600; color: var(--txt-1); border-right: 2px solid var(--border-2); font-size: 0.82rem; line-height: 1.2; padding: 10px 12px; width: 18%; vertical-align: middle; } .init-cell { display: flex; align-items: center; gap: 10px; } .init-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 0.92rem; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset; } .init-text { display: flex; flex-direction: column; line-height: 1.15; } .init-name { font-weight: 700; color: var(--txt-1); font-size: 0.82rem; letter-spacing: -0.005em; } .init-meta { font-weight: 500; color: var(--txt-3); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } .exec-roadmap-table tbody td.col-cost, .exec-roadmap-table tbody td.col-effort, .exec-roadmap-table tbody td.col-unit, .exec-roadmap-table tbody td.col-lic, .exec-roadmap-table tbody td.col-exec { text-align: center; white-space: nowrap; } /* Pill badges con personalidad */ .exec-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--txt-2); line-height: 1.4; } .exec-pill-cost { color: #fbbf24; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); } .exec-pill-effort { color: #60a5fa; background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.25); font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; } .exec-pill-unit { color: #cbd5e1; background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.20); font-weight: 600; } .exec-pill-lic-E { color: #34d399; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.28); } .exec-pill-lic-A { color: #60a5fa; background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.28); } .exec-pill-lic-N { color: #fb923c; background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.28); } .exec-pill-lic-NA { color: #6b7280; background: rgba(107,114,128,0.08); border-color: rgba(107,114,128,0.18); } .exec-pill-exec { color: #d4d4d8; background: rgba(168,162,158,0.08); border-color: rgba(168,162,158,0.18); padding: 2px 8px; } .exec-pill-exec .exec-glyph { font-size: 0.92rem; line-height: 1; } .exec-pill-exec small { font-size: 0.62rem; opacity: 0.75; letter-spacing: 0.02em; font-weight: 600; } .exec-roadmap-table tbody td.col-project { font-weight: 500; color: var(--txt-2); line-height: 1.3; width: 22%; padding-left: 12px; } .project-title { display: inline-block; vertical-align: middle; margin-left: 6px; } .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; vertical-align: middle; } .status-pendiente { background: #f2c200; box-shadow: 0 0 8px rgba(242,194,0,0.55); } .status-en-progreso { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.55); } .status-completado { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.55); } .status-cancelado { background: #6b7280; } .exec-roadmap-table tbody td.col-timeline { padding: 0; background: linear-gradient(180deg, #07090d 0%, #0a0e14 100%); border-right: 1px solid var(--border-1); vertical-align: middle; transition: background 0.15s ease; } .exec-roadmap-table tbody td.col-timeline svg { display: block; width: 100%; height: 32px; } .exec-roadmap-table tbody tr.initiative-divider td { border-top: 2px solid var(--border-2); } .exec-roadmap-legend { margin-top: 16px; padding: 12px 14px; background: rgba(255,255,255,0.015); border: 1px solid var(--border-1); border-radius: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font-size: 0.72rem; color: var(--txt-3); } .exec-roadmap-legend strong { color: var(--txt-2); display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 700; } .exec-roadmap-footnotes { margin-top: 10px; color: #6b7280; font-size: 0.66rem; line-height: 1.55; font-style: italic; padding: 0 4px; } /* Print to PDF: tema claro limpio */ @media print { body { background: white !important; color: black !important; } .exec-roadmap { background: white; color: #0f172a; border: none; padding: 0; box-shadow: none; } .exec-roadmap::before { display: none; } .exec-roadmap-title { color: #0f172a; -webkit-text-fill-color: #0f172a; background: none; } .exec-roadmap-subtitle { color: #475569; } .exec-roadmap-draft { background: rgba(239,68,68,0.04); color: #b91c1c; animation: none; } .exec-kpi { background: #f8fafc; border-color: #cbd5e1; box-shadow: none; } .exec-kpi label, .exec-kpi span { color: #0f172a; } .exec-roadmap-table { background: white; border-color: #cbd5e1; } .exec-roadmap-table thead th { background: #f1f5f9; color: #0f172a; border-bottom-color: #94a3b8; border-right-color: #cbd5e1; } .exec-roadmap-table thead th.year-band { background: #fef3c7; color: #92400e; } .exec-roadmap-table tbody td { background: white; color: #0f172a; border-bottom-color: #e2e8f0; border-right-color: #e2e8f0; } .exec-roadmap-table tbody td.col-initiative { background: #f8fafc !important; } .exec-roadmap-table tbody td.col-timeline { background: #f8fafc !important; } .init-name { color: #0f172a !important; } .init-meta { color: #475569 !important; } .exec-pill { background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important; } .no-chip { background: #f1f5f9 !important; color: #0f172a !important; } .exec-roadmap-print { display: none; } .exec-roadmap-legend { background: #f8fafc; border-color: #cbd5e1; color: #475569; } .exec-roadmap-legend strong { color: #0f172a; } .exec-roadmap-footnotes { color: #64748b; } } /* ═══════════════════════════════════════════════════════════ REPORTES PREMIUM — Estilo coherente para todos los módulos (v0.23.0) Aplica las mismas mejoras visuales del Roadmap ejecutivo a Kill Chain, Topología, FAIR-OT y Heatmap sin tocar código R: selectores globales sobre patrones ya existentes (border-left, kc-cell, card-header, etc.) ═══════════════════════════════════════════════════════════ */ /* ── bslib::card mejor look (cards de mod_reports) ───────────── */ .nav-pane .card, .tab-content .card, .tab-pane .card { background: linear-gradient(180deg, #0d1117 0%, #0a0e14 100%); border-color: #1f2937; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.015) inset; transition: box-shadow 0.18s ease; overflow: hidden; } .nav-pane .card:hover, .tab-content .card:hover, .tab-pane .card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.025) inset; } .nav-pane .card-header, .tab-content .card-header, .tab-pane .card-header { background: linear-gradient(180deg, #1f2937 0%, #161b22 100%) !important; border-bottom: 1px solid #374151 !important; color: #f8fafc; font-weight: 600; letter-spacing: -0.005em; font-size: 0.92rem; padding: 10px 14px; position: relative; } .nav-pane .card-header::before, .tab-content .card-header::before, .tab-pane .card-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #f2c200 0%, rgba(242,194,0,0.3) 100%); } .nav-pane .card-header .fa, .nav-pane .card-header .fas, .tab-content .card-header .fa, .tab-content .card-header .fas, .tab-pane .card-header .fa, .tab-pane .card-header .fas { color: #f2c200; margin-right: 4px; } /* ── KPI cards inline (FAIR-OT, Topología, kc) ────────────────── */ /* Los módulos usan inline-style con "border-left:Npx solid #color". Los detectamos por el patrón común: divs con background:#0d1117 y border:1px solid #21262d. Mejor: pintar todos con gradient + hover. */ [style*="background:#0d1117"][style*="border:1px solid #21262d"] { background: linear-gradient(180deg, #161b22 0%, #0e131b 100%) !important; border-color: #1f2937 !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.18s ease, box-shadow 0.18s ease; } [style*="background:#0d1117"][style*="border:1px solid #21262d"]:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.4); } /* Texto de KPI values: mejor tipografía + tabular nums */ [style*="font-size:1.6rem; font-weight:700"], [style*="font-size:1.4rem; font-weight:700"], [style*="font-size:1.7rem; font-weight:700"] { font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: -0.02em !important; } /* ── Kill Chain cells: gradient + hover + mejor tipografía ──────── */ .kc-flow { background: linear-gradient(180deg, #0d1117 0%, #0a0e14 100%); border-radius: 10px; padding: 12px 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.32); } .kc-cell { background: linear-gradient(180deg, #1a2230 0%, #0f1622 100%); border-radius: 7px; box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.02) inset; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; border-top-width: 5px; padding: 10px 11px; } .kc-cell::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.08); } .kc-cell:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset; } .kc-cell.kc-blocked { border-top-color: #22c55e; } .kc-cell.kc-partial { border-top-color: #eab308; } .kc-cell.kc-weak { border-top-color: #f97316; } .kc-cell.kc-open { border-top-color: #ef4444; } .kc-cell.kc-entry { box-shadow: 0 0 0 2px rgba(96,165,250,0.5) inset, 0 2px 5px rgba(0,0,0,0.3); border-top-color: #60a5fa; } .kc-cell .kc-tactic { font-family: "Inter", "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; font-size: 0.82rem; color: #f8fafc; } .kc-cell .kc-coverage { color: #cbd5e1; font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .kc-cell .kc-cov-bar { background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; } .kc-cell .kc-cov-bar-fill { background: linear-gradient(90deg, currentColor 0%, color-mix(in srgb, currentColor 70%, white) 100%); border-radius: 999px; box-shadow: 0 0 6px rgba(255,255,255,0.15); } .kc-cell .kc-verdict { font-family: "Inter", "Segoe UI", system-ui, sans-serif; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; letter-spacing: 0.08em; } .kc-cell .kc-verdict.kc-v-bloqueado { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); } .kc-cell .kc-verdict.kc-v-parcial { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.3); } .kc-cell .kc-verdict.kc-v-débil, .kc-cell .kc-verdict.kc-v-debil { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); } .kc-cell .kc-verdict.kc-v-abierto { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); } .kc-arrow { color: #4b5563; align-self: center; font-size: 0.9rem; opacity: 0.6; } .kc-entry-chip { background: linear-gradient(135deg, rgba(96,165,250,0.25) 0%, rgba(96,165,250,0.1) 100%); color: #60a5fa; border: 1px solid rgba(96,165,250,0.4); padding: 1px 6px; border-radius: 4px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; margin-left: 6px; } /* ── Heatmap legend (mod_reports/mod_heatmap) ─────────────────── */ .heatmap-legend-bar { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #22c55e 0%, #22c55e 22%, #eab308 22%, #eab308 47%, #ef4444 47%, #ef4444 79%, #8b1a2d 79%, #8b1a2d 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 2px 4px rgba(0,0,0,0.3); } /* ── ROI calculator pairs (FAIR-OT) ───────────────────────────── */ [style*="background:#0d1117"][style*="border-radius:8px; border-left:3px solid"] { background: linear-gradient(180deg, #161b22 0%, #0f1218 100%) !important; position: relative; } [style*="background:#0d1117"][style*="border-radius:8px; border-left:3px solid"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%); pointer-events: none; border-radius: inherit; } /* ── bslib::card-body de Reportes ─────────────────────────────── */ .tab-content .card-body, .tab-pane .card-body { background: transparent; color: #d1d5db; } /* ── Tipografía Inter para todo el módulo Reportes ──────────── */ [id^="reports-"] { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } /* ── DT tables dentro de Reportes con border radius + sin border ── */ .tab-pane .dataTables_wrapper { border-radius: 6px; overflow: hidden; } .tab-pane table.dataTable thead th { background: linear-gradient(180deg, #1f2937 0%, #161b22 100%); color: #f1f5f9 !important; font-weight: 600 !important; font-size: 0.72rem !important; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid #374151 !important; } .tab-pane table.dataTable tbody tr { transition: background 0.12s ease; } .tab-pane table.dataTable tbody tr:hover { background: rgba(99,102,241,0.04) !important; } .tab-pane table.dataTable tbody td { color: #d1d5db !important; font-family: "Inter", "Segoe UI", system-ui, sans-serif; } /* Badges tradicionales de Bootstrap quedan más premium */ .tab-pane .badge { font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; font-size: 0.7rem; } /* Print: aplicar también a Reportes (no sólo Roadmap) */ @media print { .nav-pane .card, .tab-content .card, .tab-pane .card { background: white !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; } .nav-pane .card-header, .tab-content .card-header, .tab-pane .card-header { background: #f1f5f9 !important; color: #0f172a !important; border-bottom-color: #94a3b8 !important; } .nav-pane .card-header::before, .tab-content .card-header::before, .tab-pane .card-header::before { display: none; } .kc-flow { background: white !important; box-shadow: none !important; } .kc-cell { background: #f8fafc !important; color: #0f172a !important; box-shadow: none !important; } .kc-cell .kc-tactic { color: #0f172a !important; } .kc-cell .kc-coverage { color: #475569 !important; } } /* ═══════════════════════════════════════════════════════════ TABLETOP STORYLINE + CRONÓMETRO (v0.26.0) Timeline narrativa estilo Accenture/Peñoles: iconos circulares sobre línea base + callouts alternados + agrupación por Rondas. Más cronómetro countdown grande. ═══════════════════════════════════════════════════════════ */ .tt-storyline { background: #0a0e14; border: 1px solid #1f2937; border-radius: 10px; padding: 12px; overflow-x: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .tt-storyline svg { display: block; min-width: 800px; } .tt-storyline svg text { font-family: "Inter", "Segoe UI", system-ui, sans-serif; } .tt-storyline svg g[style*="cursor"]:hover circle { filter: brightness(1.18); } .tt-storyline-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 8px; border-bottom: 1px solid #1f2937; margin-bottom: 6px; } .tt-storyline-legend { display: flex; gap: 12px; font-size: 0.72rem; color: #9ca3af; flex-wrap: wrap; } .tt-storyline-legend > span { display: inline-flex; align-items: center; gap: 4px; } .tt-storyline-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Cronómetro */ .tt-timer { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 3.6rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; padding: 16px 8px; border-radius: 12px; transition: color .25s ease, background .25s ease; font-variant-numeric: tabular-nums; line-height: 1; } .tt-timer-idle { color: #6b7280; } .tt-timer-ok { color: #10b981; } .tt-timer-warning { color: #f59e0b; } .tt-timer-critical { color: #ef4444; } .tt-timer-overdue { color: #fff; background: #ef4444; animation: ttPulse 1s infinite; } @keyframes ttPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } }