/* ══════════════════════════════════════════════════════════════
       PHASE 2 — Icon Rail + Flyout Panel Navigation
    ══════════════════════════════════════════════════════════════ */

    /* ── Force flex layout ── */
    #app-wrapper {
      display: flex !important;
      flex-direction: row !important;
      height: 100vh !important;
    }

    /* ── Hide old sidebar completely ── */
    #sidebar {
      display: none !important;
    }

    /* ── Main content fills remaining space ── */
    #main-content {
      margin-left: 0 !important;
      flex: 1 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }

    /* ── Icon Rail ── */
    #app-icon-rail {
      width: 64px !important;
      min-width: 64px !important;
      background: var(--bg-subtle) !important;
      border-right: 1px solid var(--line) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      padding: 0 !important;
      z-index: 100 !important;
      flex-shrink: 0 !important;
      height: 100vh !important;
      position: relative !important;
      overflow: visible !important;
    }

    #rail-logo {
      width: 64px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }

    /* Rail items */
    .rail-item {
      width: 48px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--muted);
      gap: 3px;
      margin: 1px 0;
      font-family:var(--font-body);
      position: relative;
      transition: background .15s ease, color .15s ease, transform .15s ease;
    }
    .rail-item:hover {
      background: var(--line);
      color: var(--ink);
      transform: scale(1.08);
    }
    .rail-item.rail-active {
      background: var(--primary-soft);
      color: var(--primary);
      transform: scale(1.0);
    }
    /* Active indicator bar */
    .rail-item.rail-active::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 22px;
      background: var(--primary);
      border-radius: 0 3px 3px 0;
    }
    .rail-item i { font-size: 16px; line-height: 1; }
    .rail-item .rail-label {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .02em;
      line-height: 1;
      text-align: center;
      max-width: 52px;
      white-space: nowrap;
      color: inherit;
    }

    /* Rail bottom */
    #rail-bottom {
      margin-top: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0 12px;
      gap: 2px;
      border-top: 1px solid var(--line);
    }

    /* ── Flyout Panel ── */
    #rail-flyout {
      position: fixed;
      top: 0;
      left: 64px;
      width: 220px;
      height: 100vh;
      background: var(--bg-page);
      border-right: 1px solid var(--line);
      z-index: 99;
      display: flex;
      flex-direction: column;
      transform: translateX(-100%);
      opacity: 0;
      transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .18s ease;
      pointer-events: none;
      box-shadow: 4px 0 24px rgba(0,0,0,.35);
    }
    #rail-flyout.flyout-open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: all;
    }

    /* Flyout header */
    #flyout-header {
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }
    #flyout-module-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-size: 14px;
    }
    #flyout-module-name {
      font-family:var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
    }
    #flyout-module-desc {
      font-family:var(--font-body);
      font-size: 10px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Flyout items */
    #flyout-items {
      flex: 1;
      overflow-y: auto;
      padding: 8px 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }
    .flyout-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      font-family:var(--font-body);
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      transition: background .12s ease, color .12s ease, transform .1s ease;
    }
    .flyout-item:hover {
      background: var(--primary-soft);
      color: var(--ink);
      transform: translateX(3px);
    }
    .flyout-item.flyout-item-active {
      background: var(--primary-soft);
      color: var(--primary);
    }
    .flyout-item i {
      font-size: 13px;
      width: 16px;
      text-align: center;
      flex-shrink: 0;
    }

    /* App drawer panel hidden — navigation via rail only */
    #app-drawer-panel { display: none !important; }

    .drawer-app-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      cursor: pointer;
      border-radius: 7px;
      transition: background .12s;
      font-family:var(--font-body);
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
    }
    .drawer-app-item:hover { background: var(--bg-page); }
    .drawer-app-item.drawer-item-active { background: var(--primary-soft); }
    .drawer-app-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
    }
    .drawer-app-name { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.2; }
    .drawer-app-desc { font-size: 10px; color: var(--muted); margin-top: 1px; }

    /* ── Topbar ── */
    #main-topbar {
      height: 56px;
      background: var(--surface);
      border-bottom: 1px solid var(--bg-subtle);
      display: flex;
      align-items: center;
      padding: 0;
      gap: 0;
      flex-shrink: 0;
      z-index: 10;
    }
    #rail-app-drawer-btn { display: none !important; }

    /* ── Overlay to close flyout when clicking content ── */
    #flyout-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 98;
    }
    #flyout-overlay.active { display: block; }

    /* Hide old mobile/hamburger elements */
    button[onclick="toggleMobileMenu()"],
    button[onclick="toggleSidebarCollapse()"],
    #sidebar-overlay { display: none !important; }

    /* hamburger-btn points to old #sidebar (hidden in Phase 2) — suppress at all breakpoints */
    #hamburger-btn { display: none !important; }

    /* Smooth content area */
    #main-scroll { background: var(--bg-page); }

    @media (max-width: 768px) {
      #app-icon-rail { width: 52px !important; min-width: 52px !important; }
      #rail-flyout { left: 52px; }
      #app-drawer-panel { left: 52px; }
      #rail-app-drawer-btn { width: 52px; }
    }

*{box-sizing:border-box}

        :root{--c-brand:var(--ink);--c-accent:var(--primary);--c-border:var(--line);--c-surface:var(--bg-page);--c-card:var(--surface);--c-text-primary:var(--ink);--c-text-secondary:var(--body)}

        body{font-family:var(--font-body);background:var(--c-surface);color:var(--ink);-webkit-font-smoothing:antialiased}

        ::-webkit-scrollbar{width:7px;height:7px}

        ::-webkit-scrollbar-track{background:var(--bg-subtle);border-radius:10px}

        /* Login screen placeholder visibility */
        /* login input styles moved inline */

        ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px}

        ::-webkit-scrollbar-thumb:hover{background:var(--faint)}

        .scrollbar-hide::-webkit-scrollbar{display:none}

        .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}

        /* SIDEBAR */

        #sidebar{width:256px;background:#0D1117;border-right:1px solid rgba(255,255,255,0.07);transition:transform .3s}

        /* nav-group-label: scoped to #sidebar (hidden in Phase 2 nav — no global leak) */
        #sidebar .nav-group-label{
          font-family:var(--font-body);font-size:10px;font-weight:700;
          letter-spacing:.04em;color:var(--body);text-transform:uppercase;
          padding:0 4px;margin-bottom:4px;
          display:flex;align-items:center;justify-content:space-between;
          cursor:pointer;user-select:none;border-radius:6px;
          transition:color .12s;
        }
        #sidebar .nav-group-label:hover{color:var(--muted);}
        #sidebar .nav-group-label .nav-chevron{
          font-size:9px;color:var(--muted);
          transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;
        }
        #sidebar .nav-group-label.collapsed .nav-chevron{transform:rotate(-90deg);}
        .nav-section-body{
          overflow:hidden;
          transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s;
          max-height:800px;opacity:1;
        }
        .nav-section-body.collapsed{max-height:0 !important;opacity:0;}

        .nav-btn{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--line-strong);cursor:pointer;transition:all .15s;width:100%;text-align:left;background:transparent;border:none;font-family:var(--font-body)}

        .nav-btn:hover{background:rgba(255,255,255,.06);color:var(--line)}

        .nav-btn.active-nav-btn{background:rgba(59,130,246,.15);color:var(--primary);border-left:2px solid var(--primary)}

        .nav-badge{margin-left:auto;background:var(--danger);color:var(--surface);font-size:9px;font-weight:700;padding:1px 6px;border-radius:20px;font-family:var(--font-body)}

        .nav-badge-blue{background:rgba(59,130,246,.2);color:var(--primary)}

        /* Sidebar collapse */
        #sidebar.sidebar-collapsed{width:56px !important;min-width:56px !important;}
        /* Hide all text labels, group headers, switcher, badges when collapsed */
        #sidebar.sidebar-collapsed .nav-label,
        #sidebar.sidebar-collapsed .nav-badge,
        #sidebar.sidebar-collapsed .nav-group-label span:first-child,
        #sidebar.sidebar-collapsed .nav-group-label .nav-chevron,
        #sidebar.sidebar-collapsed .nav-section-label,
        #sidebar.sidebar-collapsed #client-switcher-wrapper,
        #sidebar.sidebar-collapsed #sidebar-brand-name,
        #sidebar.sidebar-collapsed #sidebar-empresa-logo,
        #sidebar.sidebar-collapsed #sidebar-logibrand-logo,
        #sidebar.sidebar-collapsed .sidebar-text-hide{display:none !important;}
        /* Icon-only nav buttons */
        #sidebar.sidebar-collapsed .nav-btn{padding:10px 0;justify-content:center;gap:0;width:100%;}
        #sidebar.sidebar-collapsed .nav-btn span.nav-icon{width:auto;margin:0;}
        #sidebar.sidebar-collapsed .sidebar-header-logo-area{display:none;}
        /* Reduce group label to just a divider line */
        #sidebar.sidebar-collapsed .nav-group-label{padding:6px 0;pointer-events:none;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px;}
        /* Keep nav section bodies visible but compact */
        #sidebar.sidebar-collapsed .nav-section-body{gap:2px !important;}
        /* Scrollbar delgado en sidebar nav */
        #sidebar nav::-webkit-scrollbar{width:4px;}
        #sidebar nav::-webkit-scrollbar-track{background:transparent;}
        #sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px;}
        #sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}
        /* Tooltip on hover for collapsed mode */
        #sidebar.sidebar-collapsed .nav-btn{position:relative;}
        /* Native tooltip via title - browser handles it */
        #sidebar.sidebar-collapsed .nav-btn:hover{background:rgba(255,255,255,.1);border-radius:8px;}

        /* VIEWS */

        .view-section{display:none;flex-direction:column;gap:16px;width:100%;margin-top:0}

        .view-section.active{display:flex;flex-direction:column;gap:16px;width:100%;margin-top:0;animation:fadeUp .25s ease-out;min-height:0;overflow:visible;}

        /* Kanban + Calendar grid responsive */
        .kanban-cal-grid{display:flex;gap:16px;align-items:flex-start;}
        .kanban-cal-grid .kanban-scroll-col{flex:none;width:100%;overflow-x:auto;overflow-y:visible;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--bg-subtle);}
        .kanban-cal-grid .kanban-scroll-col::-webkit-scrollbar{height:7px;}
        .kanban-cal-grid .kanban-scroll-col::-webkit-scrollbar-track{background:var(--bg-subtle);border-radius:99px;}
        .kanban-cal-grid .kanban-scroll-col::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;}
        .kanban-cal-grid .kanban-scroll-col::-webkit-scrollbar-thumb:hover{background:var(--muted);}
        .kanban-cal-grid .cal-side-panel{width:240px;min-width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
        @media(max-width:900px){.kanban-cal-grid{flex-direction:column;} .kanban-cal-grid .cal-side-panel{width:100%;min-width:0;}}

        @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

        @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

        .animate-slide-up{animation:slideUp .3s ease-out}

        @keyframes pulse-glow{0%,100%{opacity:1}50%{opacity:.4}}
        @keyframes floatBg{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

        .loading-data{animation:pulse-glow .8s infinite;pointer-events:none}

        /* KPI CARDS */

        .kpi-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:default}

        .kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}

        .kpi-label{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

        .kpi-value{font-family:var(--font-ui);font-size:21px;font-weight:700;letter-spacing:-.03em;margin-top:4px;color:var(--c-text-primary)}

        .kpi-delta{font-size:11px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:4px;color:var(--muted)}

        .kpi-delta.up{color:var(--success)}

        .kpi-delta.down{color:var(--danger)}

        .kpi-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:28px;opacity:.07}

        /* PRINT — solo el modal-generic-body */
        @media print {
          body > *:not(#modal-generic) { display:none !important; }
          #modal-generic { position:static !important; background:none !important; padding:0 !important; display:block !important; }
          #modal-generic .modal-box { box-shadow:none !important; max-width:100% !important; border-radius:0 !important; }
          #modal-generic .modal-header { background:var(--ink) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
          .no-print, button { display:none !important; }
          @page { margin:12mm; size:A4; }
        }

        /* NÓMINA TABS */
        .nomina-tab-btn{background:transparent;border:none;border-bottom:2px solid transparent;padding:9px 14px;font-size:12px;font-weight:600;color:var(--body);cursor:pointer;font-family:var(--font-body);display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap;margin-bottom:-2px;}
        .nomina-tab-btn:hover{color:var(--info);background:rgba(20,184,166,.06);border-radius:8px 8px 0 0;}
        .active-nomina-tab{color:var(--info)!important;border-bottom:2px solid var(--info)!important;font-weight:700!important;}
        .nomina-tab-content{animation:fadeUp .2s ease-out;}
        .settings-contab-grid{grid-template-columns:1fr 1fr;}
        @media(max-width:640px){.settings-contab-grid{grid-template-columns:1fr;}}

        /* INSIGHT PANELS */

        .insight-panel{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:22px 24px}

        .insight-panel h2{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;color:var(--ink);border-bottom:1px solid var(--c-border);padding-bottom:14px;margin-bottom:18px}

        .insight-col{border-radius:10px;padding:16px}

        .insight-col h4{font-size:12px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}

        .insight-col p{font-size:12.5px;line-height:1.65;color:var(--ink)}

        .insight-col.success{background:var(--bg-page);border:1px solid var(--line-strong);border-left:3px solid var(--success)}

        .insight-col.danger{background:var(--bg-page);border:1px solid var(--line-strong);border-left:3px solid var(--danger)}

        .insight-col.warning{background:var(--bg-page);border:1px solid var(--line-strong);border-left:3px solid var(--warning)}

        .insight-col.action{background:var(--bg-page);border:1px solid var(--line-strong);border-left:3px solid var(--primary)}

        /* CHART CARDS */

        .chart-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:22px}
        #bi-ba-section .chart-card,#bi-ejecutivo-section .chart-card{background:#ffffff;border-color:#e2e8f0;} #bi-ba-section .kpi-value,#bi-ejecutivo-section .kpi-value{color:#1e293b!important;}
        #bi-ba-section .enterprise-table th{background:#f8fafc;color:#64748b;}
        #bi-ba-section .enterprise-table td{border-color:#e2e8f0;color:#334155;}
        #bi-ba-section .enterprise-table tr:hover td{background:#f8fafc;}
        #bi-ba-section .kpi-card{background:#ffffff;border-color:#e2e8f0;}
        #bi-ba-section .kpi-label{color:#64748b;}
        #bi-ba-section .kpi-icon{color:#2563eb;}
        #bi-ba-section input[type="number"],.bi-ba-section input[type="text"]{background:#ffffff;color:#1e293b;border-color:#e2e8f0;}
        #bi-ba-section .form-input{background:#ffffff!important;color:#1e293b!important;border-color:#e2e8f0!important;}
        #bi-ba-section select{background:#ffffff;color:#1e293b;border-color:#e2e8f0;}
        #bi-ba-section .kpi-value{color:#1e293b!important;}
        #bi-ba-section .kpi-delta{color:#64748b;}
        #bi-ba-section .chart-card h2{color:#1e293b;}
        #bi-ba-section .chart-card h3{color:#1e293b;}
        #bi-ba-section h4{color:#1e293b;}
        #bi-ba-section p{color:#64748b;}
        #bi-ba-section label{color:#475569;}
        #bi-ba-section .form-label{color:#64748b;}
        #bi-ba-section table th{color:#64748b!important;background:#f8fafc!important;}
        #bi-ba-section table td{color:#334155!important;border-color:#e2e8f0!important;}
        #bi-ba-section select.form-input,#bi-ba-section input.form-input{background:#ffffff;color:#1e293b;border-color:#e2e8f0;}

        /* ── Analytics BI superior — tema claro ─────────────────── */
        #view-dashboard-bi{color:#334155;}
        #view-dashboard-bi h2,#view-dashboard-bi h3,#view-dashboard-bi h4{color:#1e293b;}
        #view-dashboard-bi p{color:#64748b;}
        #view-dashboard-bi .kpi-card{background:#ffffff!important;border-color:#e2e8f0!important;}
        #view-dashboard-bi .kpi-label{color:#64748b!important;}
        #view-dashboard-bi .kpi-value{color:#1e293b!important;}
        /* KPIs BI: tamaño responsivo para que montos grandes ($116M+) no se corten */
        #view-dashboard-bi .kpi-value,#bi-ba-section .kpi-value,#bi-ejecutivo-section .kpi-value{
          font-size:clamp(15px,1.55vw,19px)!important;line-height:1.2;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        #view-dashboard-bi .kpi-delta{color:#64748b!important;}
        #view-dashboard-bi .kpi-icon{color:#2563eb!important;}
        #view-dashboard-bi .chart-card{background:#ffffff!important;border-color:#e2e8f0!important;}
        #view-dashboard-bi .chart-card h2,#view-dashboard-bi .chart-card h3,#view-dashboard-bi .chart-card h4{color:#1e293b!important;}
        #view-dashboard-bi .enterprise-table th{background:#f8fafc!important;color:#64748b!important;}
        /* Restaurar módulo Agentes IA — fondo oscuro */
        #view-agent .kpi-label{color:#64748b!important;}
        #view-agent .kpi-delta{color:var(--muted)!important;}
        #view-agent .enterprise-table th{color:#64748b!important;}
        /* Restaurar chart-cards oscuras en Costeo */
        .chart-card .kpi-label{color:var(--faint)!important;}
        /* Tabular nums para valores financieros */
        .kpi-value,.enterprise-table td{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
        /* Toast warning e info */
        .toast.warn{background:var(--warning-text);color:var(--surface);border-left:4px solid var(--warning);}
        .toast.info{background:#1E3A5F;color:var(--surface);border-left:4px solid var(--primary);}
        /* Status pills semánticos */
        .fc-risk-alto{background:var(--danger-soft);color:var(--danger);}
        .fc-risk-medio{background:var(--warning-border);color:var(--warning);}
        .fc-risk-bajo{background:var(--success-soft);color:var(--success-text);}
        /* Costeo dropdown z-index */
        #costeo-tabs{position:relative;z-index:50;overflow:visible;}
        #costeo-tabs .costeo-menu-group .costeo-drop{z-index:200!important;}
        /* Nómina scroll tabs */
        #view-nomina .tabs-scroll{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;}
        /* Responsive tablas */
        @media(max-width:768px){.enterprise-table{min-width:600px;}} @media(max-width:480px){.enterprise-table{min-width:unset;font-size:12px;} .enterprise-table th,.enterprise-table td{padding:8px 6px !important;}}
        #view-dashboard-bi .enterprise-table td{color:#334155!important;border-color:#e2e8f0!important;}
        #view-dashboard-bi .enterprise-table tr:hover td{background:#f8fafc!important;}
        #view-dashboard-bi select{background:#ffffff;color:#1e293b;border-color:#e2e8f0;}
        #view-dashboard-bi input[type="date"],#view-dashboard-bi input[type="text"]{background:#ffffff;color:#1e293b;border-color:#e2e8f0;}
        #view-dashboard-bi label{color:#475569;}
        #view-dashboard-bi span:not([style*="color"]){color:#334155;}
        /* Textos con color heredado — mantener legibles en claro */
        #view-dashboard-bi [style*="color:var(--ink)"]{color:var(--ink)!important;}
        #view-dashboard-bi [style*="color:var(--body)"]{color:var(--body)!important;}
        #view-dashboard-bi [style*="color:var(--muted)"]{color:var(--muted)!important;}

        .chart-card h2{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

        .chart-wrapper{position:relative;width:100%;height:240px}

        @media(min-width:768px){.chart-wrapper{height:280px}}

        /* TABLES */

        .enterprise-table{width:100%;border-collapse:collapse}

        .enterprise-table th{font-family:var(--font-body);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--body);font-weight:700;padding:11px 16px;text-align:left;background:var(--bg-page);border-bottom:2px solid var(--line)}

        .enterprise-table td{padding:13px 16px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--bg-subtle)}

        .enterprise-table tbody tr:hover{background:var(--bg-page)}

        .status-pill{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:20px;text-transform:uppercase}

        .status-active{background:var(--success-border);color:var(--success-text)}

        .status-paused{background:var(--warning-border);color:var(--warning)}

        .status-closed{background:var(--bg-subtle);color:var(--muted)}


        /* Kanban quick-nav bars */
        .kn-nav{display:none;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
        .kn-nav.kn-active{display:flex;}
        .kn-arrow{background:var(--bg-subtle);border:1px solid var(--line);border-radius:7px;width:28px;height:28px;cursor:pointer;font-size:16px;color:var(--muted);font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;}
        .kn-arrow:hover{background:var(--line);color:var(--ink);}
        .kn-jump{font-size:10px;border:none;border-radius:6px;padding:3px 9px;cursor:pointer;font-weight:700;font-family:var(--font-body);transition:opacity .15s;white-space:nowrap;}
        .kn-jump:hover{opacity:.7;}

        /* KANBAN */

        .kanban-col{background:var(--bg-page);border:1px solid var(--c-border);border-radius:14px;width:255px;min-width:255px;flex-shrink:0}

        .kanban-col-header{padding:14px 16px;border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center}

        .kanban-col-body{padding:12px;min-height:400px;display:flex;flex-direction:column;gap:10px}

        .kanban-drag-over{background:var(--primary-soft)!important;border:2px dashed var(--primary)!important}

        .lead-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:14px;cursor:grab;transition:all .15s;position:relative}

        .lead-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-1px)}

        .lead-card:active{cursor:grabbing}

        .lead-card.dragging{opacity:.4}

        .lead-card .edit-btn{opacity:0;transition:opacity .15s}

        .lead-card:hover .edit-btn{opacity:1}

        @media(max-width:768px){.lead-card .edit-btn{opacity:1}}

        .col-count{font-family:var(--font-body);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--line);color:var(--muted)}

        /* INBOX */

        .inbox-filter-btn { padding:5px 12px; font-size:11px; border-radius:20px; background:var(--bg-subtle); color:var(--body); font-weight:600; border:1px solid transparent; cursor:pointer; transition:all .15s; font-family:var(--font-body); white-space:nowrap; display:flex; align-items:center; gap:5px; }
        .inbox-filter-btn:hover { background:var(--line); color:var(--body); }
        .inbox-filter-btn.active-filter { background:var(--ink); color:var(--surface); border-color:var(--ink); }

        .inbox-item{padding:14px 16px;border-bottom:1px solid var(--bg-subtle);cursor:pointer;transition:background .12s;display:flex;gap:12px;align-items:center}

        .inbox-item:hover{background:var(--bg-page)}

        .inbox-item.active{background:var(--primary-soft);border-left:3px solid var(--primary)}

        .chat-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;max-width:80%;word-break:break-word}

        .chat-bubble.incoming{background:var(--surface);border:1px solid var(--c-border);border-radius:14px 14px 14px 4px}

        .chat-bubble.outgoing{background:var(--success-border);border:1px solid var(--success-border);border-radius:14px 14px 4px 14px}

        /* MODAL */

        .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}

        .modal-overlay.active{display:flex}

        .modal-box{background:var(--surface);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.18);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;overflow-x:hidden;animation:slideUp .25s ease-out}

        .modal-header{background:var(--primary);color:var(--surface);padding:16px 20px;display:flex;justify-content:space-between;align-items:center}

        .modal-header h3{font-family:var(--font-ui);font-size:14px;font-weight:700}

        .modal-body{padding:24px}

        .form-label{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}

        .form-input{width:100%;border:1.5px solid var(--c-border);border-radius:9px;padding:9px 12px;font-size:13px;outline:none;transition:border-color .15s;font-family:var(--font-body)}

        .form-input:focus{border-color:var(--primary)}

        .form-select{width:100%;border:1.5px solid var(--c-border);border-radius:9px;padding:9px 12px;font-size:13px;outline:none;background:var(--surface);font-family:var(--font-body)}

        /* TOASTS */

        #toast-container{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none}

        .toast{padding:12px 16px;border-radius:10px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);animation:slideUp .25s ease-out}

        .toast.success{background:var(--success-text);color:var(--surface);border-left:4px solid var(--success)}

        .toast.error{background:var(--danger);color:var(--surface);border-left:4px solid var(--danger)}

        /* PROGRESS */

        .progress-bar{height:6px;border-radius:99px;background:var(--bg-subtle);overflow:hidden}

        .progress-fill{height:100%;border-radius:99px;transition:width .6s ease}

        /* QUICK ACTIONS */

        .quick-action{background:var(--surface);border:1.5px solid var(--c-border);border-radius:10px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--body);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;font-family:var(--font-body)}

        .quick-action:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

        /* SOURCE TAGS */

        .source-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-body);letter-spacing:.05em}

        /* SECTION DIVIDER */

        .section-divider{display:flex;align-items:center;gap:16px}

        .section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--c-border)}

        .section-divider span{font-family:var(--font-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

        /* ATTR BAR */

        .attr-bar{display:flex;height:28px;border-radius:8px;overflow:hidden;gap:2px}

        .attr-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--surface);transition:flex .5s ease}

        /* ACTIVITY */

        .activity-item{padding:12px 16px;border-bottom:1px solid var(--bg-page);display:flex;gap:12px;align-items:flex-start}

        .activity-item:hover{background:var(--bg-page)}

        /* RESPONSIVE SIDEBAR */

        @media(max-width:767px){

            #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:50;transform:translateX(-100%)}

            #sidebar.sidebar-open{transform:translateX(0)}

            #sidebar-overlay{display:block}

        }

        #sidebar-overlay{display:none}

        .compare-vs{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--muted)}

        /* ── Costeo dropdown menus ──────────────────────────────────── */
        .costeo-menu-group{position:relative;}
        .costeo-drop-item{
          display:block;width:100%;text-align:left;
          padding:8px 12px;font-size:12.5px;font-weight:500;
          color:var(--body);background:none;border:none;
          border-radius:7px;cursor:pointer;
          font-family:var(--font-body);
          transition:background .1s,color .1s;
          white-space:nowrap;
        }
        .costeo-drop-item:hover{background:var(--primary-soft);color:var(--primary);}
        .costeo-drop-item.costeo-drop-active{
          background:var(--primary-soft);color:var(--primary);font-weight:700;
        }

        /* ── Responsive — mobile adjustments ───────────────────────── */
        @media(max-width:640px){
          .costeo-menu-group .costeo-drop{min-width:180px;}
          #costeo-tabs{flex-wrap:wrap;gap:6px;}
          .kpi-card .kpi-value{font-size:18px;}
          .enterprise-table th,.enterprise-table td{padding:8px 10px;font-size:12px;}
          .chart-card{padding:14px;}
          .insight-panel{padding:14px 16px;}
          .modal-box{max-width:100% !important;border-radius:12px;}
          /* Agente: panel lateral debajo en mobile */
          #agent-panel-rrhh > div[style*="grid-template-columns:1fr 300px"],
          #agent-panel-contable > div[style*="grid-template-columns:1fr 300px"]{
            grid-template-columns:1fr !important;
          }
          /* Costeo charts: 1 columna */
          #costeo-charts-container{grid-template-columns:1fr !important;}
        }
        @media(max-width:768px){
          .view-section{gap:14px;}
          #costeo-tabs{gap:6px;}
        }

        /* ── Tesorería ── */
        @media (max-width:900px){ #tes-main-grid{grid-template-columns:1fr !important;} }
        @media (max-width:600px){ #tes-kpis-grid{grid-template-columns:repeat(2,1fr) !important;} #tes-flujo-canvas-wrap{height:180px !important;} }
        .tes-kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;}
        .tes-kpi-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
        .tes-kpi-card:active{transform:translateY(0);}
        /* ── Importaciones ── */
        .imp-filtro-btn{padding:5px 12px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap;}
        .imp-filtro-btn.active,.imp-filtro-btn:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);}
        .imp-tab-btn{padding:9px 14px;font-size:12px;font-weight:700;border:none;background:none;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;font-family:var(--font-body);white-space:nowrap;}
        .active-imp-tab{color:var(--primary) !important;border-bottom:2px solid var(--primary) !important;}
        .imp-timeline-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;border:2px solid;}
        .imp-timeline-dot.done{background:var(--success);border-color:var(--success);color:var(--surface);}
        .imp-timeline-dot.current{background:var(--primary);border-color:var(--primary);color:var(--surface);box-shadow:0 0 0 4px rgba(59,130,246,.2);}
        .imp-timeline-dot.pending{background:var(--bg-subtle);border-color:var(--faint);color:var(--muted);}
        .imp-timeline-line{width:28px;height:2px;flex-shrink:0;}
        .imp-timeline-line.done{background:var(--success);}
        .imp-timeline-line.pending{background:var(--line);}
        .imp-field-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bg-subtle);font-family:var(--font-body);}
        .imp-field-label{font-size:11px;color:var(--muted);font-weight:600;}
        .imp-field-val{font-size:12px;color:var(--body);font-weight:600;text-align:right;max-width:55%;}
        .imp-actor-card,.imp-cont-card{border:1px solid var(--line);border-radius:9px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;}
        .imp-doc-card{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:12px;margin-bottom:6px;transition:border-color .15s;}
        .imp-doc-card:hover{border-color:var(--primary);}
        .ia-badge-ok{background:var(--success-border);color:var(--success-text);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;}
        .ia-badge-warn{background:var(--warning-border);color:var(--warning);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;}
        .est-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;font-family:var(--font-body);}
        .est-en_origen{background:var(--bg-subtle);color:var(--muted);}
        .est-en_transito{background:var(--primary-soft);color:var(--primary);}
        .est-en_puerto{background:var(--warning-soft);color:var(--danger);}
        .est-en_nacionalizacion{background:var(--primary-soft);color:var(--primary);}
        .est-nacionalizada{background:var(--success-soft);color:var(--success-text);}
        .est-transito_interno{background:var(--warning-soft);color:var(--warning);}
        .est-recibida_bodega{background:var(--success-soft);color:var(--success-text);}
        .est-liquidada{background:var(--bg-page);color:var(--body);}

        /* ── Forecast & BI ── */
        .fc-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;}
        .fc-kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-bottom:6px;font-family:var(--font-body);}
        .fc-kpi-val{font-family:var(--font-ui);font-size:24px;font-weight:800;line-height:1;}
        .fc-kpi-sub{font-size:11px;color:var(--muted);font-weight:500;margin-top:4px;font-family:var(--font-body);}
        .fc-kpi-bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 12px 12px;}
        .fc-stage-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bg-subtle);}
        .fc-stage-row:last-child{border-bottom:none;}
        .fc-stage-name{font-size:12px;font-weight:700;color:var(--ink);width:110px;flex-shrink:0;}
        .fc-stage-bar-wrap{flex:1;height:8px;background:var(--bg-subtle);border-radius:4px;overflow:hidden;}
        .fc-stage-bar-fill{height:100%;border-radius:4px;transition:width .6s ease;}
        .fc-stage-pct{font-size:11px;font-weight:700;color:var(--body);width:36px;text-align:right;flex-shrink:0;}
        .fc-stage-val{font-size:11px;color:var(--body);width:90px;text-align:right;flex-shrink:0;font-family:var(--font-body);}
        .fc-risk-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;}
        .fc-risk-alto{background:var(--danger-soft);color:var(--danger);}
        .fc-risk-medio{background:var(--warning-border);color:var(--warning);}
        .fc-risk-bajo{background:var(--success-soft);color:var(--success-text);}
        .fc-mes-card{background:var(--bg-page);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;}
        .fc-mes-card.fc-mes-main{background:linear-gradient(135deg,var(--primary-soft),var(--primary-soft));border-color:rgba(139,92,246,.3);}
        .fc-mes-label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
        .fc-mes-val{font-family:var(--font-ui);font-size:18px;font-weight:800;color:var(--primary);}
        .fc-mes-range{font-size:10px;margin-top:5px;}
        .fc-insight{background:linear-gradient(135deg,var(--primary-soft),var(--primary-soft));border:1px solid rgba(99,102,241,.2);border-radius:10px;padding:14px 16px;margin-bottom:8px;}
        .fc-insight-icon{font-size:18px;margin-right:8px;}
        .fc-insight-title{font-size:12px;font-weight:700;color:var(--primary);}
        .fc-insight-text{font-size:12px;color:var(--body);margin-top:3px;line-height:1.5;}
        .fc-ai-panel{background:linear-gradient(135deg,var(--ink),var(--ink));border-radius:14px;padding:20px;margin-top:4px;}
        .fc-table-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;}

        /* ── Perfil empresa tags ── */
        .pe-tag{padding:5px 10px;font-size:11px;font-weight:600;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .15s;}
        .pe-tag.active{background:rgba(139,92,246,.2);border-color:var(--primary);color:var(--primary-border);}
        .pe-tag:hover{background:rgba(255,255,255,.1);}

        /* ── PWA Responsive ───────────────────────────────────── */
        @media(max-width:767px){
          #hamburger-btn{display:none !important;} /* Phase 2: sidebar oculto, botón desactivado */
          #bottom-nav{display:flex !important;}
          #main-content{padding-bottom:64px !important;}
        }
        @media(min-width:768px){
          #pwa-install-banner{bottom:20px !important;left:auto !important;right:20px !important;width:360px !important;}
        }
        .bottom-nav-item.active,.bottom-nav-item:hover{color:var(--primary) !important;}

        /* ══ CORRECCIONES UX WCAG AA ══════════════════════════════
           Resolución de contraste en módulos específicos — todos los módulos
        ═══════════════════════════════════════════════════════════ */
        /* #05 — Nómina: labels inline */
        #view-nomina label[style*="color:var(--muted)"],#view-nomina label[style*="color: var(--muted)"]{color:var(--body)!important;}
        #view-nomina label[style*="color:var(--faint)"],#view-nomina label[style*="color: var(--faint)"]{color:var(--muted)!important;}
        /* #14 — Empty states en tablas */
        .enterprise-table td[style*="color:var(--faint)"]{color:var(--muted)!important;}
        /* #15+#11 — Tesorería: h1 y párrafo consistentes con tema claro */
        #view-tesoreria h1{color:var(--ink)!important;} #view-tesoreria h3:not(#fiscal-dark-panel h3){color:var(--ink);}
        #view-tesoreria p:not(#fiscal-dark-panel p){color:var(--muted)!important;}
        /* #16 — Agentes IA: fondo oscuro unificado */
        #view-agent{background:#f8fafc;border-radius:16px;}
        #view-agent .kpi-card{background:#ffffff!important;border-color:#e2e8f0!important;}
        #view-agent .kpi-label{color:#64748b!important;} #view-agent .kpi-delta{color:#64748b!important;}
        /* #21 — Exógena labels */
        #view-exogena label[style*="color:var(--muted)"]{color:var(--body)!important;}
        /* #25 — Vendedores kpi-delta */
        #view-ventas .kpi-delta,#vendedores-section .kpi-delta{color:var(--muted)!important;}
        /* #26 — Nómina tabs scroll visible */
        #view-nomina [style*="scrollbar-width:none"]{scrollbar-width:thin!important;scrollbar-color:var(--line-strong) transparent!important;}
        /* #27 — Inbox burbujas */
        .chat-bubble-user{background:var(--primary);color:var(--surface)!important;} .chat-bubble-bot{background:var(--bg-subtle);color:var(--ink)!important;}
        /* #32 — Badge NEW */
        .badge-new{font-size:10px!important;padding:2px 8px!important;font-weight:800!important;}
        /* #34 — NIIF scroll */
        #view-costeo [id*="niif"],#view-costeo [id*="balance"]{overflow-x:auto!important;}
        /* kpi-delta global en cards claras */
        .kpi-card .kpi-delta{color:var(--muted);}
        /* #view-dashboard-bi y BI: mantener oscuro */
        #view-dashboard-bi .kpi-card .kpi-delta,#bi-ba-section .kpi-card .kpi-delta{color:#64748b!important;}
        /* Tesorería KPI hint */
        .tes-kpi-hint{font-size:10px!important;color:var(--muted)!important;opacity:1!important;}
        /* costeo inline kpi-label para sub-secciones oscuras */
        .chart-card .kpi-label{color:var(--faint)!important;}

    
@media(max-width:480px) {
  /* Columna de acciones: solo mostrar iconos, sin texto */
  .enterprise-table td button i { margin-right: 0 !important; }
  .enterprise-table td button span { display: none; }
  /* Reducir padding de celda de acciones */
  .enterprise-table td:last-child { padding: 4px 4px !important; }
  .enterprise-table td:last-child button { padding: 4px 5px !important; margin: 1px !important; }
}

/* ── RESPONSIVE BASE ── */
    *,*::before,*::after { box-sizing:border-box; }
    html { -webkit-text-size-adjust:100%; }

    /* ── SIDEBAR RESPONSIVE ── */
    #sidebar {
      position: fixed; left: 0; top: 0; bottom: 0;
      width: 220px; z-index: 1000;
      transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    }
    #main-content {
      margin-left: 220px;
      min-height: 100vh;
      transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
    }
    #sidebar-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.55); z-index: 999;
      backdrop-filter: blur(2px);
    }

    /* ── MOBILE: pantallas < 768px ── */
    @media (max-width: 768px) {
      #sidebar {
        transform: translateX(-100%);
        width: 260px !important;
      }
      #sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 40px rgba(0,0,0,.5);
      }
      #sidebar-overlay.open { display: block; }
      #main-content {
        margin-left: 0 !important;
        padding-bottom: 80px; /* espacio para bottom nav */
      }
      /* Bottom navigation mobile */
      #bottom-nav {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--ink); border-top: 1px solid rgba(255,255,255,.1);
        z-index: 998; padding: 8px 0;
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      /* Hamburger button — Phase 2: sidebar oculto, botón desactivado */
      #hamburger-btn { display: none !important; }
      /* Tables responsive */
      .enterprise-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      /* Cards stack */
      .chart-card { margin-bottom: 12px; }
      /* Modals full screen on mobile */
      .modal-box {
        width: 100% !important; max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important; bottom: 0 !important;
        max-height: 92vh !important; overflow-y: auto !important;
      }
      .modal-overlay { align-items: flex-end !important; }
      /* Form inputs larger touch targets */
      .form-input { min-height: 44px; font-size: 16px !important; }
      select { min-height: 44px; font-size: 16px !important; }
      button { min-height: 40px; }
      /* Hide non-essential columns on mobile */
      .hide-mobile { display: none !important; }
      /* Full width grids */
      [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      /* Header padding */
      .view-section { padding: 12px !important; }
    }

    /* ── TABLET: 768px - 1024px ── */
    @media (min-width: 768px) and (max-width: 1024px) {
      #sidebar { width: 180px; }
      #main-content { margin-left: 180px; }
      #bottom-nav { display: none; }
      #hamburger-btn { display: none; }
    }

    /* ── DESKTOP ── */
    @media (min-width: 1025px) {
      #bottom-nav { display: none !important; }
      #hamburger-btn { display: none !important; }
      #sidebar { transform: translateX(0) !important; }
    }

    /* ── BOTTOM NAV (mobile only) ── */
    #bottom-nav {
      display: none;
    }
    .bottom-nav-item {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 3px; padding: 6px 4px;
      color: var(--muted); cursor: pointer; border: none;
      background: none; font-size: 10px; font-weight: 600;
      font-family:var(--font-body);
      transition: color .2s;
    }
    .bottom-nav-item.active, .bottom-nav-item:active { color: var(--primary); }
    .bottom-nav-item i { font-size: 20px; }

    /* ── HAMBURGER ── */
    #hamburger-btn {
      display: none;
      position: fixed; top: 12px; left: 12px;
      z-index: 1001; background: var(--ink);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px; width: 40px; height: 40px;
      align-items: center; justify-content: center;
      cursor: pointer; color: var(--surface); font-size: 16px;
    }

    /* ── PWA INSTALL BANNER ── */
    #pwa-install-banner {
      display: none;
      position: fixed; bottom: 70px; left: 12px; right: 12px;
      background: linear-gradient(135deg, var(--ink), var(--ink));
      border: 1px solid rgba(99,102,241,.4);
      border-radius: 14px; padding: 14px 16px;
      z-index: 997; box-shadow: 0 8px 32px rgba(0,0,0,.4);
    }
    @media (min-width: 769px) {
      #pwa-install-banner {
        bottom: 20px; right: 20px; left: auto; width: 320px;
      }
    }

    /* ── SAFE AREA (iPhone notch) ── */
    #main-content { padding-top: env(safe-area-inset-top, 0); }

/* ══════════════════════════════════════════════════════════════

    /* ── SIDEBAR HEADER: Hide old elements, show clean nav ── */
    #sidebar > div:first-child { display: none !important; }
    #client-switcher-wrapper { display: none !important; }
    #sidebar > nav { padding-top: 8px !important; }
    #sidebar .nav-label { display: inline !important; opacity: 1 !important; }
    #sidebar .nav-badge { display: inline-flex !important; }
    #sidebar .nav-group-label span:first-child { display: block !important; }
    #sidebar .nav-group-label .nav-chevron { display: block !important; }
    #sidebar .nav-btn { color: var(--faint) !important; font-size: 12px !important; }
    #sidebar .nav-btn:hover { background: rgba(255,255,255,.08) !important; color: var(--line) !important; }
    #sidebar .nav-btn.active-nav-btn { background: rgba(59,130,246,.18) !important; color: var(--primary) !important; border-left: 2px solid var(--primary) !important; }
    #sidebar .nav-group-label { color: var(--body) !important; font-size: 9px !important; }

    /* ══ OVERRIDE: Force flex layout, neutralize old fixed-sidebar system ══ */

    /* Hide old sidebar header elements — replaced by icon rail */
    #sidebar > div:first-child {
      display: none !important;
    }
    #client-switcher-wrapper {
      display: none !important;
    }

    /* Sidebar nav — clean top padding since header is hidden */
    #sidebar > nav {
      padding-top: 8px !important;
    }

    /* Sidebar bottom user section — keep but compact */
    #sidebar > div:last-child {
      padding: 10px 12px !important;
    }

    /* Sidebar nav group labels — more visible in new design */
    #sidebar .nav-group-label {
      color: var(--body) !important;
      font-size: 9px !important;
      padding: 4px 8px !important;
      margin-top: 6px !important;
    }
    #sidebar .nav-group-label:first-child {
      margin-top: 0 !important;
    }
    #sidebar .nav-btn {
      padding: 8px 12px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
      color: var(--faint) !important;
    }
    #sidebar .nav-btn:hover {
      background: rgba(255,255,255,.07) !important;
      color: var(--line) !important;
    }
    #sidebar .nav-btn.active-nav-btn {
      background: rgba(59,130,246,.18) !important;
      color: var(--primary) !important;
      border-left: 2px solid var(--primary) !important;
    }
    /* Nav labels always visible (never collapsed in Phase 2) */
    #sidebar .nav-label {
      display: inline !important;
    }
    #sidebar .nav-badge {
      display: inline-flex !important;
    }
    #sidebar .nav-group-label span:first-child {
      display: block !important;
    }
    #sidebar .nav-group-label .nav-chevron {
      display: block !important;
    }

    /* ══ OVERRIDE: Force flex layout */
    #app-wrapper {
      display: flex !important;
      flex-direction: row !important;
    }
    #app-icon-rail {
      position: relative !important;
      flex-shrink: 0 !important;
    }
    #sidebar {
      position: relative !important;
      transform: none !important;
      flex-shrink: 0 !important;
      height: 100% !important;
      top: auto !important;
      left: auto !important;
      bottom: auto !important;
    }
    #sidebar.ctx-open {
      width: 240px !important;
      min-width: 240px !important;
      transform: none !important;
      opacity: 1 !important;
      pointer-events: all !important;
    }
    #sidebar.ctx-closed {
      width: 0 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: none !important;
    }
    #main-content {
      margin-left: 0 !important;
      flex: 1 !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
    /* Hide the old collapse button (we use rail now) */
    button[onclick="toggleSidebarCollapse()"] { display: none !important; }
    button[onclick="toggleMobileMenu()"] { display: none !important; }
    #sidebar-overlay { display: none !important; }

           PHASE 2 — App Shell: Icon Rail + Contextual Sidebar
    ══════════════════════════════════════════════════════════════ */

    /* Icon rail */
    #app-icon-rail {
      width: 60px;
      min-width: 60px;
      background: #080F1E;
      border-right: 1px solid rgba(255,255,255,.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      z-index: 60;
      flex-shrink: 0;
      height: 100%;
      overflow: hidden;
    }

    /* Rail logo area */
    #rail-logo {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
    }

    /* Rail icon buttons */
    .rail-item {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s, color .15s, transform .12s cubic-bezier(.4,0,.2,1);
      position: relative;
      border: none;
      background: transparent;
      color: var(--muted);
      gap: 3px;
      margin: 2px 0;
      font-family:var(--font-body);
    }
    .rail-item:hover {
      background: rgba(255,255,255,.09);
      color: var(--line-strong);
      transform: scale(1.08);
    }
    .rail-item:active {
      transform: scale(0.95);
    }
    .rail-item.rail-active {
      background: rgba(59,130,246,.18);
      color: var(--primary);
    }
    .rail-item.rail-active::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 24px;
      background: var(--primary);
      border-radius: 0 3px 3px 0;
    }
    .rail-item i { font-size: 15px; line-height: 1; }
    .rail-item .rail-label {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .03em;
      line-height: 1;
      text-align: center;
      max-width: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Rail tooltip */
    .rail-item::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--ink);
      color: var(--bg-subtle);
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 7px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      z-index: 999;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .rail-item:hover::after { opacity: 1; }

    /* Rail notification dot */
    .rail-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 7px;
      height: 7px;
      background: var(--danger);
      border-radius: 50%;
      border: 1.5px solid #080F1E;
    }

    /* Rail bottom section */
    #rail-bottom {
      margin-top: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 0 12px;
      gap: 2px;
      border-top: 1px solid rgba(255,255,255,.05);
      padding-top: 10px;
    }

    /* Contextual sidebar */
    #sidebar {
      transition: width .22s cubic-bezier(.4,0,.2,1),
                  min-width .22s cubic-bezier(.4,0,.2,1),
                  opacity .18s ease,
                  transform .22s cubic-bezier(.4,0,.2,1) !important;
    }
    #sidebar.ctx-closed {
      width: 0 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      opacity: 0;
      pointer-events: none;
    }
    #sidebar.ctx-open {
      width: 256px !important;
      min-width: 256px !important;
      opacity: 1;
      pointer-events: all;
    }

    /* Topbar modernized */
    #main-topbar {
      height: 54px;
      background: var(--surface);
      border-bottom: 1px solid var(--bg-subtle);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 12px;
      flex-shrink: 0;
      z-index: 10;
      box-shadow: 0 1px 0 var(--bg-subtle);
    }

    /* Breadcrumb module title */
    #topbar-module-tag {
      font-size: 10px;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-family:var(--font-body);
    }

    /* App drawer button */
    #rail-app-drawer-btn {
      width: 60px;
      height: 54px;
      background: #080F1E;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      border: none;
      border-right: 1px solid rgba(255,255,255,.05);
      border-bottom: 1px solid rgba(255,255,255,.06);
      transition: background .15s;
      color: var(--muted);
    }
    #rail-app-drawer-btn:hover { background: #0d1829; color: var(--line-strong); }
    #rail-app-drawer-btn.drawer-open { color: var(--primary); background: rgba(59,130,246,.1); }

    /* App drawer overlay panel */
    #app-drawer-panel {
      position: fixed;
      top: 54px;
      left: 60px;
      width: 320px;
      max-height: calc(100vh - 54px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-top: none;
      box-shadow: 0 16px 48px rgba(0,0,0,.12);
      z-index: 500;
      overflow-y: auto;
      display: none;
      border-radius: 0 0 14px 0;
    }
    #app-drawer-panel.drawer-visible { display: block; }

    .drawer-app-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      cursor: pointer;
      border-radius: 8px;
      transition: background .12s;
      font-family:var(--font-body);
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
    }
    .drawer-app-item:hover { background: var(--bg-page); }
    .drawer-app-item.drawer-item-active { background: var(--primary-soft); }
    .drawer-app-icon {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 15px;
    }
    .drawer-app-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.2;
    }
    .drawer-app-desc {
      font-size: 10px;
      color: var(--muted);
      margin-top: 1px;
      line-height: 1.3;
    }

    /* Hide old collapse button — not needed with new rail */
    #sidebar .sidebar-collapse-btn-old { display: none !important; }

    /* Sidebar header in new mode — smaller */
    #sidebar .sidebar-header-logo-area img { height: 22px; }

    /* Active module highlight in topbar */
    .topbar-module-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      background: var(--bg-page);
      border: 1px solid var(--line);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      font-family:var(--font-body);
    }

    /* Smooth content area */
    #main-scroll { background: var(--bg-page); }

    @media (max-width: 768px) {
      #app-icon-rail { display: none; }
      #sidebar.ctx-closed { width: 0 !important; }
    }

.pqrs-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.pqrs-kc{background:var(--surface);border-radius:12px;padding:16px;border:1px solid var(--line);border-top:3px solid var(--kc,var(--primary))}
.pqrs-kc .kv{font-size:24px;font-weight:800;color:var(--ink);font-family:var(--font-body)}
.pqrs-kc .kl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.pqrs-kcol{background:var(--bg-page);border-radius:12px;padding:10px;min-height:200px}
.pqrs-kcol-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:4px 4px 8px;border-bottom:2px solid var(--line)}
.pqrs-kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;transition:all .15s;margin-bottom:6px}
.pqrs-kcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-1px)}
.pqrs-tag{display:inline-flex;align-items:center;border-radius:5px;padding:1px 7px;font-size:10px;font-weight:700}
.pqrs-tq{background:var(--warning-soft);color:var(--danger)}.pqrs-tr{background:var(--danger-soft);color:var(--danger)}.pqrs-tp{background:var(--primary-soft);color:var(--primary)}
.pqrs-ts{background:var(--success-soft);color:var(--success-text)}.pqrs-tg{background:var(--primary-soft);color:var(--primary)}
.pqrs-tn{background:var(--primary-soft);color:var(--primary)}.pqrs-trev{background:var(--warning-border);color:var(--warning)}.pqrs-tesp{background:var(--danger-soft);color:var(--danger)}
.pqrs-tap{background:var(--success-border);color:var(--success-text)}.pqrs-tres{background:var(--success-soft);color:var(--success-text)}.pqrs-tc{background:var(--bg-subtle);color:var(--muted)}
.pqrs-tcrit{background:var(--danger-soft);color:var(--danger)}.pqrs-talt{background:var(--warning-soft);color:var(--warning)}.pqrs-tmed{background:var(--primary-soft);color:var(--primary)}.pqrs-tbaj{background:var(--bg-subtle);color:var(--muted)}
.pqrs-sla-r{color:var(--danger);animation:pqrsBlink 1.2s infinite}.pqrs-sla-w{color:var(--warning)}.pqrs-sla-ok{color:var(--success)}
@keyframes pqrsBlink{0%,100%{opacity:1}50%{opacity:.4}}
.pqrs-sel-bar{background:var(--ink);color:var(--surface);padding:8px 14px;border-radius:10px;display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;font-weight:600}
.pqrs-tbl{width:100%;border-collapse:collapse;font-size:12px}
.pqrs-tbl th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 12px;background:var(--bg-page);border-bottom:1px solid var(--line)}
.pqrs-tbl td{padding:10px 12px;border-bottom:1px solid var(--bg-subtle);vertical-align:middle;color:var(--body)}
.pqrs-tbl tr:hover td{background:var(--bg-page);cursor:pointer}
.pqrs-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);z-index:1000;display:flex;align-items:center;justify-content:center}
.pqrs-modal{background:var(--surface);border-radius:18px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.2)}
.pqrs-mhdr{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:1}
.pqrs-mbody{padding:20px 22px}
.pqrs-mftr{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.pqrs-inp{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;outline:none;font-family:inherit}
.pqrs-inp:focus{border-color:var(--primary)}
.pqrs-lbl{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.pqrs-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;border:none;font-family:inherit;transition:all .15s}
.pqrs-btn-p{background:var(--primary);color:var(--surface)}.pqrs-btn-p:hover{background:var(--primary)}
.pqrs-btn-s{background:var(--bg-subtle);border:1px solid var(--line);color:var(--muted)}.pqrs-btn-s:hover{background:var(--line)}
.pqrs-msg-agent{background:var(--primary-soft);border:1px solid var(--primary-border);border-radius:10px;padding:10px;margin-bottom:6px}
.pqrs-msg-client{background:var(--primary-soft);border:1px solid var(--primary-border);border-radius:10px;padding:10px;margin-bottom:6px}
.pqrs-msg-internal{background:var(--warning-border);border:1px solid var(--warning);border-radius:10px;padding:10px;margin-bottom:6px}