/* Dual UI themes: Clásica + Operaciones (sidebar shell) Activated via and localStorage panol_theme Default: Operaciones (ops) · v0.24 */ /* ---------- Shared shell (classic: sidebar hidden) ---------- */ .app-shell{min-height:100vh} .sidebar{display:none} .sidebar-backdrop{display:none} .sidebar-toggle{display:none!important} .theme-picker{ display:inline-flex;align-items:center;gap:6px; font-size:12px;color:rgba(255,255,255,.85);font-weight:600; } .theme-picker select{ width:auto;min-width:0;padding:5px 8px;font-size:12.5px; background:rgba(255,255,255,.1);color:#eef3f0; border:1px solid rgba(255,255,255,.28);border-radius:8px; } .theme-picker select option{color:#12211c;background:#fff} /* ---------- Operaciones theme ---------- */ html[data-theme="ops"] body{ background: radial-gradient(900px 420px at 0% -5%, rgba(42,155,143,.10) 0%, transparent 55%), radial-gradient(800px 380px at 100% 0%, rgba(58,124,165,.08) 0%, transparent 50%), #e6eaef; } html[data-theme="ops"] .app-shell{ display:flex;align-items:stretch;min-height:100vh; } html[data-theme="ops"] .sidebar{ display:flex;flex-direction:column; width:236px;flex:0 0 236px; background:linear-gradient(180deg,#2a303c 0%,#232833 100%); color:#d5dae3; border-right:1px solid #1a1f28; position:sticky;top:0;height:100vh;overflow:auto; z-index:30; } html[data-theme="ops"] .sidebar-brand{ display:flex;align-items:center;gap:10px; padding:14px 12px 12px;border-bottom:1px solid rgba(255,255,255,.07); } html[data-theme="ops"] .sidebar-brand .sidebar-logo{ width:34px;height:34px;object-fit:contain;flex-shrink:0; background:#0a0a0a;border-radius:8px;padding:4px; } html[data-theme="ops"] .sidebar-brand .sidebar-logo[hidden]{display:none!important} html[data-theme="ops"] .sidebar-brand-text{ display:flex;flex-direction:column;gap:2px;min-width:0; } html[data-theme="ops"] .sidebar-brand .dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0; background:#3db8a8;box-shadow:0 0 0 3px rgba(61,184,168,.22); align-self:flex-start;margin-top:6px; } html[data-theme="ops"] .sidebar-brand .dot[hidden]{display:none!important} html[data-theme="ops"] .sidebar-brand strong{ font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-size:15px;color:#f2f5f8;font-weight:700;line-height:1.15; letter-spacing:-.01em; } html[data-theme="ops"] .sidebar-brand-sub{ font-size:10px;color:#8b93a3;letter-spacing:.06em; text-transform:uppercase;line-height:1.25; } html[data-theme="ops"] .sidebar-groups{ display:flex;flex-direction:column;gap:2px;padding:10px 8px 6px; } html[data-theme="ops"] .sidebar-group{ display:flex;flex-direction:column;gap:1px; } html[data-theme="ops"] .sidebar-group > button{ display:block;width:100%;text-align:left; background:transparent;color:#aeb6c4; padding:9px 12px;border-radius:9px;border:none; font-size:13px;font-weight:650; transition:background .12s,color .12s; } html[data-theme="ops"] .sidebar-group > button:hover{ background:rgba(255,255,255,.06);color:#eef1f5; } /* Active main group: teal pill + white text */ html[data-theme="ops"] .sidebar-group > button.active{ background:#2a9b8f;color:#fff; box-shadow:0 4px 12px -4px rgba(42,155,143,.55); } /* Subtabs nested under active group */ html[data-theme="ops"] .sidebar-group .sidebar-subs{ display:flex;flex-direction:column;gap:1px; padding:2px 0 6px 0;margin:0;border:none; } html[data-theme="ops"] .sidebar-group .sidebar-subs button{ display:block;width:100%;text-align:left; background:transparent;color:#9aa3b2; padding:7px 12px 7px 20px;border-radius:8px;border:none; font-size:12px;font-weight:600; } html[data-theme="ops"] .sidebar-group .sidebar-subs button:hover{ background:rgba(255,255,255,.05);color:#e8ecf2; } /* Active sub: blue pill */ html[data-theme="ops"] .sidebar-group .sidebar-subs button.active{ background:#3a7ca5;color:#fff; } html[data-theme="ops"] .main{ flex:1;min-width:0;display:flex;flex-direction:column; background:transparent; } /* Thin light top bar: MisioTech · área */ html[data-theme="ops"] .main > header{ background:rgba(247,249,252,.92); backdrop-filter:blur(8px); border-bottom:1px solid #d5dde6; color:#2c323f; padding:7px 16px; position:sticky;top:0;z-index:20; } html[data-theme="ops"] .main > header .brand{ margin:0;align-items:center; } html[data-theme="ops"] .main > header .brand .dot{display:none} html[data-theme="ops"] .main > header .brand h1{ font-size:13.5px;color:#2c323f;font-weight:650; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; letter-spacing:0; } html[data-theme="ops"] .main > header .user-box{ color:#3d4554;font-size:13px; } html[data-theme="ops"] .main > header .rol-tag{ background:rgba(44,50,63,.08);color:#3d4554; border:1px solid rgba(44,50,63,.12); } html[data-theme="ops"] .main > header button{ color:#2c323f;border-color:#c5cdd8; } html[data-theme="ops"] .main > header button:hover{ background:rgba(44,50,63,.06); } html[data-theme="ops"] .theme-picker{ color:#5c6678; } html[data-theme="ops"] .theme-picker select{ background:#fff;color:#2c323f; border:1px solid #c5cdd8; } html[data-theme="ops"] .wrap{ max-width:none;width:100%;padding:16px 20px 40px; } /* Nav: groups/subs live in sidebar; hide horizontal shell */ html[data-theme="ops"] .nav-shell{ display:none!important; } /* White cards for filters / tables / KPIs */ html[data-theme="ops"] .filtros{ background:#fff;border:1px solid #d0d8e2; box-shadow:0 1px 2px rgba(30,36,48,.04); border-radius:12px; } html[data-theme="ops"] .tabla-box{ background:#fff;border-color:#d0d8e2; box-shadow:0 1px 2px rgba(30,36,48,.05); border-radius:12px; } html[data-theme="ops"] .kpi{ background:#fff;border-radius:12px;border-color:#d0d8e2; box-shadow:0 1px 2px rgba(30,36,48,.04); } html[data-theme="ops"] .kpi .n{color:#1a5f6c} html[data-theme="ops"] .kpi.alerta{ border-color:#e0c9a0;background:linear-gradient(180deg,#fffdf8,#fff6e8); } html[data-theme="ops"] .kpi.alerta .n{color:#b45309} html[data-theme="ops"] .kpi.critico{ border-color:#e5b8b2;background:linear-gradient(180deg,#fffafa,#fdeeed); } html[data-theme="ops"] .kpi.critico .n{color:#b23c2e} html[data-theme="ops"] .inicio-head h2{ font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:#1e2430; } html[data-theme="ops"] .b-ghost.on, html[data-theme="ops"] .chip-period button.on, html[data-theme="ops"] .chip-row button.on, html[data-theme="ops"] .tabs button.active{ background:#2a8f82;border-color:#2a8f82; } html[data-theme="ops"] thead th{ background:#f0f3f7; } /* Mobile: collapsible sidebar */ @media (max-width:900px){ html[data-theme="ops"] .sidebar-toggle{ display:inline-flex!important;align-items:center;justify-content:center; width:36px;height:34px;padding:0;font-size:18px;line-height:1; margin-right:4px;flex-shrink:0; } html[data-theme="ops"] .main > header{ display:flex;align-items:center;gap:8px; } html[data-theme="ops"] .main > header .brand{flex:1;min-width:0} html[data-theme="ops"] .sidebar{ position:fixed;left:0;top:0;bottom:0;height:100vh; transform:translateX(-105%); transition:transform .2s ease; box-shadow:8px 0 28px -12px rgba(0,0,0,.45); } html[data-theme="ops"].sidebar-open .sidebar{ transform:translateX(0); } html[data-theme="ops"].sidebar-open .sidebar-backdrop{ display:block;position:fixed;inset:0;z-index:25; background:rgba(18,22,30,.45); } html[data-theme="ops"] .theme-picker span{display:none} } @media print{ .sidebar,.sidebar-backdrop,.sidebar-toggle,.theme-picker{display:none!important} html[data-theme="ops"] .app-shell,.main{display:block!important} }