/* SplitOS — styles.css consolidado (Fase 5.5): camadas de override fundidas.
   Gerado a partir do original preservando a declaração vencedora por propriedade. */
/* SplitOS — estilos (extraído do index.html na Fase 5) */
:root{
    /* ══════════════════════════════════════════════
       SplitOS 2026 — Design Token System
       Inspired by: Apple, Linear, Stripe, Arc, Ramp
       ══════════════════════════════════════════════ */

    /* Brand */
    --brand:#00C389;
    --brand-hover:#00D99A;
    --brand-dim:rgba(0,195,137,.13);
    --brand-glow:rgba(0,195,137,.22);

    /* Accent (blue) */
    --primary:#1565D8;
    --primary-hover:#2176FF;
    --primary-dim:rgba(21,101,216,.13);

    /* OS Surface Layers — dark depth hierarchy */
    --os-base:#040D1A;
    --os-s0:#07192e;   /* sidebar / deepest UI chrome */
    --os-s1:#081a30;   /* main canvas */
    --os-s2:#0D2444;   /* card surface */
    --os-s3:#112756;   /* elevated cards, hover */
    --os-s4:#162e66;   /* tooltips, popovers */

    /* Glass layers — liquid glass material */
    --glass-1:rgba(255,255,255,.03);
    --glass-2:rgba(255,255,255,.055);
    --glass-3:rgba(255,255,255,.09);
    --glass-4:rgba(255,255,255,.14);

    /* Borders — luminous hairlines */
    --border-1:rgba(255,255,255,.06);
    --border-2:rgba(255,255,255,.10);
    --border-3:rgba(255,255,255,.18);

    /* Text — dark-mode scale */
    --text-1:#F1F5F9;
    --text-2:#CBD5E1;
    --text-3:#94A3B8;
    --text-4:#64748B;
    --text-5:#475569;

    /* Semantic — success */
    --success:#22C55E;
    --success-dim:rgba(34,197,94,.13);
    --success-border:rgba(34,197,94,.28);
    --success-text:#4ADE80;

    /* Semantic — warning */
    --warning:#F59E0B;
    --warning-dim:rgba(245,158,11,.13);
    --warning-border:rgba(245,158,11,.28);
    --warning-text:#FCD34D;

    /* Semantic — danger */
    --danger:#EF4444;
    --danger-dim:rgba(239,68,68,.13);
    --danger-border:rgba(239,68,68,.28);
    --danger-text:#FCA5A5;

    /* Semantic — info */
    --info:#38BDF8;
    --info-dim:rgba(56,189,248,.13);
    --info-border:rgba(56,189,248,.28);
    --info-text:#7DD3FC;

    /* Shadows — layered depth */
    --shadow-sm:0 2px 8px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.20);
    --shadow-md:0 8px 24px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.22);
    --shadow-lg:0 16px 48px rgba(0,0,0,.46),0 4px 16px rgba(0,0,0,.26);
    --shadow-brand:0 4px 20px rgba(0,195,137,.28),0 0 40px rgba(0,195,137,.10);
    --shadow-accent:0 4px 20px rgba(21,101,216,.28);
    --shadow-glass:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.32);
    --shadow-card:0 4px 16px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);

    /* Radius scale */
    --r-xs:4px; --r-sm:6px; --r-md:8px;
    --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;

    /* Motion — physics-based easing */
    --dur-fast:80ms; --dur-base:140ms;
    --dur-slow:220ms; --dur-xslow:320ms;
    --ease-out:cubic-bezier(0,.6,.4,1);
    --ease-spring:cubic-bezier(.22,.68,0,1.2);
    --ease-inout:cubic-bezier(.4,0,.2,1);

    /* ── Backward-compat aliases (preserve all JS & CSS references) ── */
    --bg:var(--os-s0);
    --accent:#0F4C81;
    --accent2:var(--brand);
    --text:var(--text-1);
    --text-light:var(--text-4);
    --border:var(--border-2);
    --bg-soft:var(--os-s2);
  }
body{margin:0; background:var(--os-s1); color:var(--text-1); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.brand-row{display:flex; align-items:center; gap:14px;}
.brand-logo{flex-shrink:0;}
header h1 .os{color:#00E5A0; font-weight:500;}
header h1, .login-brand-name, .sidebar-brand-text{font-family:"Space Grotesk","Inter",sans-serif; letter-spacing:-0.01em;}
.brand-tagline{margin:2px 0 0; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; font-weight:600;}
header p{margin:10px 0 0; color:#94a3b8; font-size:13px; max-width:840px; line-height:1.5;}
.tabs{display:flex; gap:4px; padding:0 24px; background:var(--bg); border-top:1px solid #1e293b; flex-wrap:wrap;}
.tab-btn{background:transparent; border:none; color:#94a3b8; padding:12px 18px; font-size:13px; font-weight:700; cursor:pointer; border-bottom:3px solid transparent;}
.tab-btn.active{color:#fff; border-bottom-color:var(--accent2);}
.tab-btn:hover{color:#fff;}
.grid2{display:grid; grid-template-columns: 380px 1fr; gap:20px; align-items:start;}
@media (max-width:900px){.grid2{grid-template-columns:1fr;}}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0;}
.field-row label{font-size:13px; color:var(--text);}
.radio-row, .check-row{display:flex; align-items:center; gap:8px; font-size:13px; margin:6px 0; cursor:pointer;}
.radio-row input, .check-row input{cursor:pointer;}
.assessor-header{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
th, td{padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--text);}
th.sortable .sort-arrow{margin-left:4px; font-size:10px; opacity:.6;}
th.sortable.sort-active .sort-arrow{opacity:1; color:var(--accent2);}
td.num input{text-align:right;}
.liquido{color:var(--accent2); font-weight:700;}
.resumo-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;}
@media (max-width:700px){.resumo-cards{grid-template-columns:repeat(2,1fr);}}
.resumo-card strong{font-size:16px;}
/* ── Seções accordion no Cadastro ──────────────────────────────────── */
details.card-accordion[open] .arrow-acc{transform:rotate(90deg);}
.card-accordion-head::-webkit-details-marker{display:none;}
.arrow-acc{font-size:10px; transition:transform .15s; flex-shrink:0;}
.card-accordion-body{padding:0 16px 14px;}
/* ── Filtro de período no Painel ───────────────────────────────────── */
.periodo-chips{display:flex; flex-wrap:wrap; gap:6px; flex:1;}
/* ── Repositório / banco de dados ────────────────────────────────── */
.repo-mes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px;}
@media (max-width:900px){.repo-mes-grid{grid-template-columns:repeat(2,1fr);}}
.repo-mes-card .repo-btns{display:flex; gap:8px; margin-top:8px;}
.repo-mes-card .repo-btns button{flex:1; padding:6px 0; border-radius:6px; font-size:12px; cursor:pointer; border:none; font-weight:600;}
.repo-comparativo{margin-bottom:24px;}
.col-remove{width:36px;}
.upload-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.table-compact th, .table-compact td{padding:6px 7px; font-size:12px;}
.repasse-cell{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.repasse-cell .status-select{font-size:10px; padding:2px 8px;}
.repasse-cell .status-date{font-size:10.5px; padding:2px 5px;}
.accordion-body{padding:0 16px 16px; display:none;}
.accordion.open .accordion-body{display:block;}
.arrow{transition:transform .15s;}
.accordion.open .arrow{transform:rotate(90deg);}
.checklist{display:flex; flex-wrap:wrap; gap:6px 14px;}
.checklist label{font-size:12.5px; display:flex; align-items:center; gap:5px; cursor:pointer;}
.charts-row{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px;}
@media (max-width:900px){.charts-row{grid-template-columns:1fr;}}
.bar-list{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:grid; grid-template-columns:140px 1fr 90px; align-items:center; gap:10px; font-size:12.5px;}
.donut-wrap{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.donut-legend .legend-item{display:flex; align-items:center; gap:8px;}
.legend-dot{width:11px; height:11px; border-radius:3px; flex-shrink:0;}
.repasse-list{display:flex; flex-direction:column; gap:2px;}
.repasse-row:last-child{border-bottom:none;}
.repasse-row .repasse-nome{font-weight:600; flex:1;}
.status-pill{display:inline-block; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;}
.status-date{border:1px solid var(--border); border-radius:6px; padding:3px 6px; font-size:11.5px;}
@media (max-width:900px){.dashboard-row{grid-template-columns:1fr;}}
/* ===================== LAYOUT COM MENU LATERAL ===================== */
.app-layout{display:flex; min-height:100vh;}
.sidebar-brand{display:flex; align-items:center; gap:10px; overflow:hidden; min-width:0;}
.sidebar-section{padding:2px 8px;}
.sidebar-section-title .st-ico{width:15px; height:15px; opacity:.6; display:flex; align-items:center;}
.sidebar-section-title .st-ico svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.sidebar-section-title .arrow-sb{transition:transform .15s; opacity:.4; margin-left:auto;}
.sidebar-section-title .arrow-sb svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.sidebar-section.open .arrow-sb{transform:rotate(90deg);}
.sidebar-section-body{display:none; padding:4px 10px 12px;}
.sidebar-section.open .sidebar-section-body{display:block;}
.sidebar-field{margin-bottom:8px;}
.sidebar-field select option{ background:#0d2137; color:#e2e8f0; }
.sidebar-field input::placeholder{color:#475569;}
.sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .sidebar-nav-btn .label,
  .sidebar.collapsed .sidebar-section, .sidebar.collapsed .sidebar-divider,
  .sidebar.collapsed .sidebar-nav-label{display:none;}
.sidebar-profile{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.sidebar-avatar img{width:100%; height:100%; object-fit:cover;}
/* ===================== TELA DE LOGIN ===================== */
.login-screen::before{
    content:""; position:absolute; width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,195,137,.12) 0%, transparent 70%);
    top:-100px; left:-100px; pointer-events:none;
  }
.login-screen::after{
    content:""; position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, rgba(21,101,216,.1) 0%, transparent 70%);
    bottom:-80px; right:-80px; pointer-events:none;
  }
.login-logo-row{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:10px;}
.login-brand-name{
    font-size:24px; font-weight:700; letter-spacing:-.01em; color:#f1f5f9; margin:0;
    display:flex; align-items:baseline; gap:1px;
  }
.login-brand-name .pay{color:var(--accent2);}
.login-brand-name .os{color:#00E5A0; font-weight:500;}
.login-tagline{
    font-size:11px; color:#475569; text-transform:uppercase; letter-spacing:.1em;
    font-weight:600; margin:0 0 28px; text-align:center;
  }
.login-tabs{display:flex; border:1px solid rgba(255,255,255,.08); border-radius:8px; overflow:hidden; margin-bottom:20px; background:rgba(255,255,255,.03);}
.login-field{margin-bottom:14px;}
.login-field input, .login-field select{
    width:100%; border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:10px 12px;
    font-size:13.5px; background:rgba(255,255,255,.05); color:#f1f5f9;
    transition:border-color .15s;
  }
.login-field input:focus, .login-field select:focus{outline:none; border-color:rgba(0,195,137,.4);}
.login-field input::placeholder{color:#334155;}
.login-error{background:rgba(185,28,28,.15); border:1px solid rgba(239,68,68,.3); color:#fca5a5; border-radius:8px; padding:8px 10px; font-size:12.5px; margin-bottom:12px;}
/* ===================== TELA INICIAL (HOME) ===================== */
.home-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
@media (max-width:1100px){.home-cards{grid-template-columns:repeat(2,1fr);}}
.home-card strong{font-size:22px; display:block;}
/* ===================== VISÃO DO ASSESSOR ===================== */
.assessor-hero-left{}
.assessor-hero-value{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;line-height:1;}
.assessor-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.assessor-4cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media (max-width:900px){.assessor-4cards{grid-template-columns:repeat(2,1fr);}}
.assessor-sm-card strong{font-size:18px;display:block;}
.assessor-2col{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px;}
@media (max-width:900px){.assessor-2col{grid-template-columns:1fr;}}
.assessor-hist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:800px){.assessor-hist-grid{grid-template-columns:repeat(2,1fr);}}
.perfil-row:last-child{border-bottom:none;}
.perfil-row .perfil-val{font-weight:600;}
/* Change Password Overlay */
.cp-field  { margin-bottom: 14px; }
.cp-reqs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 18px; }
.cp-actions { display: flex; gap: 10px; justify-content: flex-end; }
/* ===================== COMPROVANTES DE PAGAMENTO ===================== */
.comp-box-wide { max-width: 560px; }
.comp-box-xwide { max-width: 760px; }
.comp-dropzone .icon { font-size: 28px; margin-bottom: 6px; display:block; }
.comp-filelist { margin-top: 12px; max-height: 180px; overflow-y: auto; }
.comp-fileitem .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 8px; }
.comp-fileitem button { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; }
.comp-field { margin-bottom: 14px; }
.comp-field label { display: block; font-size: 12px; color: #64748b; margin-bottom: 5px; font-weight: 600; }
.comp-report-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width:640px){.comp-report-cards{ grid-template-columns: repeat(2,1fr); }}
.comp-report-card strong { font-size: 19px; }
.comp-report-card.ok strong { color: #16a34a; }
.comp-report-card.fail strong { color: #dc2626; }
.comp-status-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.comp-btn-link { background:none; border:none; color:#1565D8; cursor:pointer; font-size:12px; font-weight:600; padding:0; text-decoration:underline; }
/* ===================== PAINEL DE GESTÃO (Tela 4 — estratégico) ===================== */
.painel-secao { margin: 22px 0 10px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width:900px){.kpi-grid{ grid-template-columns: repeat(2,1fr); }}
.kpi-card .kpi-delta{ font-size:11.5px; font-weight:700; margin-top:4px; display:inline-block; }
.alerta-card .ico{ font-size:16px; }
.meta-input-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.meta-input-row .mi-field{ display:flex; flex-direction:column; gap:4px; }
.ranking-table-mini td, .ranking-table-mini th{ font-size:12.5px; }
.treemap-wrap{ display:flex; flex-wrap:wrap; gap:3px; width:100%; height:220px; }
.treemap-cell small{ display:block; font-weight:600; font-size:10px; opacity:.9; text-shadow:none; }
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Dark Theme Component Overrides
     All rules placed LAST to guarantee cascade priority.
     Zero hardcoded hex values — 100% token-driven.
     ══════════════════════════════════════════════════════════ */
/* ── Layout ────────────────────────────────────────────── */
.tab-content{padding:18px; background:var(--os-s1);}
/* ── Cards & glass surfaces ─────────────────────────────── */
.card{border-radius:12px; padding:14px 16px; margin-bottom:14px; background:var(--glass-1); border:1px solid var(--border-2); box-shadow:var(--shadow-card); transition:border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.card:hover{ border-color:var(--border-3); box-shadow:var(--shadow-md); }
.card h2{margin:0 0 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--text-4);}
.home-card{border-radius:12px; padding:16px 18px; background:var(--glass-1); border:1px solid var(--border-2); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out),
               border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.home-card:hover{
    transform:translateY(-2px);
    border-color:var(--border-3);
    box-shadow:var(--shadow-md);
  }
.home-card span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; font-weight:700; color:var(--text-4);}
.home-card .delta{font-size:12px; font-weight:700; margin-top:4px; display:inline-block; color:var(--brand);}
.home-card .delta.neg{color:var(--danger);}
.kpi-card:hover{ border-color:var(--border-3); box-shadow:var(--shadow-md); }
.kpi-card span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; font-weight:700; color:var(--text-4);}
.kpi-card strong{font-size:18px; display:block; color:var(--text-1);}
.kpi-card .kpi-delta.up{color:var(--success-text);}
.kpi-card .kpi-delta.down{color:var(--danger-text);}
.assessor-card{border-radius:10px; padding:12px 14px; margin-bottom:12px; background:var(--glass-1); border:1px solid var(--border-2); transition:border-color var(--dur-base) var(--ease-out);}
.assessor-card:hover{ border-color:var(--border-3); }
.assessor-sm-card{border-radius:10px; padding:12px 14px; background:var(--glass-1); border:1px solid var(--border-2); box-shadow:var(--shadow-sm);}
.assessor-sm-card span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; font-weight:700; color:var(--text-4);}
.hist-mes-card{border-radius:10px; padding:14px 16px; border:2px solid transparent; background:var(--glass-2); border-color:transparent;}
.hist-mes-card.atual{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand-dim);}
.hist-mes-card .mes-nome{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; color:var(--text-4);}
.hist-mes-card .mes-liq{font-size:20px; font-weight:800; line-height:1; margin-bottom:6px; color:var(--text-1);}
.hist-mes-card .mes-detalhe{font-size:11.5px; color:var(--text-4);}
.repo-mes-card{border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; background:var(--glass-1); border:1px solid var(--border-2); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out),
               border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.repo-mes-card:hover{ transform:translateY(-1px); border-color:var(--border-3); box-shadow:var(--shadow-md); }
.repo-mes-card h3{font-size:15px; font-weight:700; margin:0; color:var(--text-1);}
.repo-mes-card .repo-meta{font-size:11px; margin-bottom:4px; color:var(--text-4);}
.repo-mes-card .repo-stat{display:flex; justify-content:space-between; font-size:12.5px; padding:2px 0; color:var(--text-4);}
.repo-mes-card .repo-stat strong{font-weight:600; color:var(--text-2);}
.repo-mes-card.ativo{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary-dim);}
.resumo-card{border-radius:10px; padding:10px 12px; background:var(--glass-2); border:1px solid var(--border-1); box-shadow:var(--shadow-glass);}
.resumo-card span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; color:var(--text-4);}
.fieldset-box{border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-top:8px; background:var(--glass-1); border-color:var(--border-2);}
/* ── Painel sections ────────────────────────────────────── */
.painel-secao h3{text-transform:uppercase; margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--border); display:flex; align-items:center; gap:8px; color:var(--text-3); border-bottom-color:var(--border-1); font-weight:600; font-size:11px; letter-spacing:.08em;}
/* ── Form controls ──────────────────────────────────────── */
.field-row input[type=number], .field-row input[type=text], .field-row select{border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:13px; width:160px; background:var(--os-s3); color:var(--text-1); border-color:var(--border-2); transition:border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.field-row input[type=number]:focus,
  .field-row input[type=text]:focus,
  .field-row select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-dim);
  }
.field-row input::placeholder{ color:var(--text-5); }
.nome-input{flex:1; border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:13.5px; font-weight:600; background:var(--os-s3); color:var(--text-1); border-color:var(--border-2);}
.nivel-select{border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:12.5px; font-weight:600; width:64px; flex-shrink:0; background:var(--os-s3); color:var(--text-1); border-color:var(--border-2);}
.salvar-repo-box{padding:12px 14px; margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--glass-1); border:1px solid var(--border-1); border-radius:var(--r-lg);}
.salvar-repo-box label{font-size:13px; white-space:nowrap; color:var(--text-2);}
.salvar-repo-box input[type=text]{flex:1; min-width:120px; padding:6px 10px; border-radius:6px; border:1px solid var(--border); font-size:13px; background:var(--os-s3); border-color:var(--border-2); color:var(--text-1);}
.salvar-repo-box input::placeholder{ color:var(--text-5); }
/* ── Accordions ─────────────────────────────────────────── */
.accordion{border:1px solid var(--border); border-radius:10px; margin-bottom:12px; overflow:hidden; border-color:var(--border-1);}
.accordion-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; font-weight:700; font-size:13.5px; background:var(--glass-1); color:var(--text-1); transition:background var(--dur-base) var(--ease-out);}
.accordion-head:hover{background:var(--glass-2);}
.accordion-head .right{display:flex; align-items:center; gap:14px; font-weight:400; font-size:12.5px; color:var(--text-3);}
details.card-accordion{border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow:hidden; background:var(--glass-1); border-color:var(--border-2);}
.card-accordion-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; user-select:none; list-style:none; color:var(--text-4);}
.card-accordion-head:hover{background:var(--glass-2);}
/* ── Period filter ──────────────────────────────────────── */
.periodo-filtro{border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin-bottom:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--glass-1); border-color:var(--border-1);}
.periodo-filtro label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; color:var(--text-4);}
.periodo-mes-chip{display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px; border:1px solid var(--border); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; background:var(--glass-2); border-color:var(--border-2); color:var(--text-3); transition:all var(--dur-base) var(--ease-out);}
.periodo-mes-chip:hover{border-color:var(--primary); color:var(--primary);}
.periodo-mes-chip.sel{background:var(--primary); color:#fff; border-color:var(--primary);}
.periodo-mes-chip.atual{border-style:dashed; border-color:var(--brand); color:var(--brand);}
.periodo-mes-chip.atual.sel{background:var(--brand); color:#051a11; border-color:var(--brand);}
/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:6px; background:var(--glass-2); color:var(--text-3);}
.badge.Sr{background:var(--info-dim); color:var(--info-text);}
.badge.Pl{background:var(--success-dim); color:var(--success-text);}
.badge.Jr{background:var(--warning-dim); color:var(--warning-text);}
.badge.Escritório{background:rgba(139,92,246,.15); color:#c4b5fd;}
.tag{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:6px; background:var(--primary-dim); color:var(--info-text);}
/* ── Status pills & selects ─────────────────────────────── */
.status-pill.pago{background:var(--success-dim); color:var(--success-text); border:1px solid var(--success-border);}
.status-pill.pendente{background:var(--warning-dim); color:var(--warning-text); border:1px solid var(--warning-border);}
.status-select{border:1px solid var(--border); border-radius:999px; padding:3px 10px; font-size:10.5px; font-weight:700; cursor:pointer; background:var(--glass-2); color:var(--text-3); border-color:var(--border-2);}
.status-select.status-pago{background:var(--success-dim); color:var(--success-text); border-color:var(--success-border);}
.status-select.status-pendente{background:var(--warning-dim); color:var(--warning-text); border-color:var(--warning-border);}
.status-select.status-programado{background:var(--info-dim); color:var(--info-text); border-color:var(--info-border);}
/* ── Buttons ────────────────────────────────────────────── */
.run-btn{border:none; padding:10px 18px; border-radius:8px; font-size:13.5px; cursor:pointer; background:var(--brand); color:#051a11; font-weight:700; letter-spacing:.01em; transition:background var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out),
               transform var(--dur-fast) var(--ease-out);}
.run-btn:hover{background:var(--brand-hover); box-shadow:var(--shadow-brand); transform:translateY(-1px);}
.run-btn:active{ transform:translateY(0); }
.secondary-btn{padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; margin-left:8px; background:var(--glass-2); border:1px solid var(--border-2); color:var(--text-3); transition:all var(--dur-base) var(--ease-out);}
.secondary-btn:hover{background:var(--glass-3); color:var(--text-1); border-color:var(--border-3);}
.add-btn{border:1px dashed var(--accent); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; width:100%; margin-top:4px; background:var(--primary-dim); border-color:var(--primary); color:var(--primary); transition:all var(--dur-base) var(--ease-out);}
.add-btn:hover{background:rgba(21,101,216,.2);}
.remove-btn{border:none; width:26px; height:26px; border-radius:6px; font-size:16px; line-height:1; cursor:pointer; flex-shrink:0; background:var(--danger-dim); color:var(--danger-text); transition:background var(--dur-base) var(--ease-out);}
.remove-btn:hover{background:rgba(239,68,68,.22);}
.salvar-repo-box button{border:none; border-radius:6px; padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; background:var(--primary); color:#fff; transition:background var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.salvar-repo-box button:hover{
    background:var(--primary-hover);
    box-shadow:var(--shadow-accent);
  }
.repo-btn-ver{background:var(--primary); color:#fff; transition:background var(--dur-base) var(--ease-out);}
.repo-btn-ver:hover{ background:var(--primary-hover); }
.repo-btn-del{background:var(--danger-dim); color:var(--danger-text); transition:background var(--dur-base) var(--ease-out);}
.repo-btn-del:hover{ background:rgba(239,68,68,.22); }
.meta-input-row button{border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; background:var(--primary); color:#fff; transition:background var(--dur-base) var(--ease-out);}
.meta-input-row button:hover{ background:var(--primary-hover); }
.meta-input-row .mi-field label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-4);}
.meta-input-row .mi-field input{border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:13px; width:160px; background:var(--os-s3); border-color:var(--border-2); color:var(--text-1);}
/* ── Callouts & notifications ───────────────────────────── */
.note{border:1px solid #fde68a; border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:14px; background:var(--warning-dim); border-color:var(--warning-border); color:var(--warning-text);}
.alerta-card .txt{font-size:12.5px; color:var(--danger-text);}
.alerta-card .txt b{color:var(--danger-text);}
.alerta-ok{display:flex; align-items:center; gap:8px; border:1px solid #bbf7d0; border-radius:10px; padding:11px 14px; font-size:13px; background:var(--success-dim); border-color:var(--success-border); color:var(--success-text);}
.mes-banner{border:1px solid #bae6fd; border-radius:8px; padding:10px 14px; font-size:13px; display:flex; align-items:center; gap:10px; margin-bottom:14px; background:var(--info-dim); border-color:var(--info-border); color:var(--info-text);}
.mes-banner button{margin-left:auto; border:none; border-radius:6px; padding:5px 12px; font-size:12px; cursor:pointer; font-weight:600; background:var(--primary); color:#fff;}
/* ── Tables ─────────────────────────────────────────────── */
td input, td select{border:1px solid var(--border); border-radius:6px; padding:5px 6px; font-size:13px; width:100%; background:var(--os-s3); border-color:var(--border-2); color:var(--text-1);}
tfoot td{font-weight:700; border-top:2px solid var(--text); border-bottom:none; border-top-color:var(--border-2); color:var(--text-1);}
.repasse-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; border-bottom-color:var(--border-1);}
.repasse-row .repasse-valor{font-weight:600; white-space:nowrap; color:var(--text-3);}
.perfil-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; border-bottom-color:var(--border-1);}
.perfil-row .perfil-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-4);}
/* ── Sidebar (already dark — tune accents) ──────────────── */
/* ── Charts ─────────────────────────────────────────────── */
.bar-track{border-radius:6px; height:14px; overflow:hidden; background:var(--glass-3);}
.bar-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--primary), var(--brand));}
.bar-value{text-align:right; font-weight:600; white-space:nowrap; color:var(--text-4);}
.bar-row .bar-label{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2);}
.line-chart-labels{display:flex; justify-content:space-between; font-size:11px; margin-top:4px; color:var(--text-4);}
.line-chart-tooltip{font-size:11.5px; margin-bottom:6px; color:var(--text-3);}
.line-chart-tooltip strong{color:var(--text-1); font-size:15px;}
.donut-legend{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-3);}
/* ── Misc ───────────────────────────────────────────────── */
.subtitle{font-size:11.5px; margin:14px 0 6px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--text-4);}
.upload-status{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--text-4);}
/* Assessor hero */
.assessor-hero{border-radius:16px; padding:24px 28px; color:#fff; margin-bottom:14px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; background:linear-gradient(135deg, var(--os-s0) 0%, var(--os-s3) 100%); border:1px solid var(--border-2); box-shadow:var(--shadow-md);}
.assessor-hero-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; margin-bottom:4px; color:var(--text-4);}
/* Comprovantes */
.comp-dropzone{border:2px dashed #cbd5e1; border-radius:10px; padding:22px; text-align:center; cursor:pointer; background:var(--glass-1); border-color:var(--border-2); transition:border-color var(--dur-base) var(--ease-out),
               background var(--dur-base) var(--ease-out);}
.comp-dropzone:hover, .comp-dropzone.dragover{border-color:var(--primary); background:var(--primary-dim);}
.comp-dropzone .hint{font-size:12px; margin-top:4px; color:var(--text-4);}
.comp-fileitem{display:flex; align-items:center; justify-content:space-between; border-radius:8px; padding:7px 10px; font-size:12.5px; margin-bottom:6px; background:var(--glass-2); border:1px solid var(--border-1); color:var(--text-2);}
.comp-report-card{border-radius:10px; padding:10px 12px; text-align:center; background:var(--glass-1); border:1px solid var(--border-1);}
.comp-report-card span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; font-weight:700; color:var(--text-4);}
.comp-resumo{border:1px solid #bbf7d0; border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:14px; background:var(--success-dim); border-color:var(--success-border);}
.comp-resumo b{color:var(--text-1);}
.comp-status-pill.ok{background:var(--success-dim); color:var(--success-text);}
.comp-status-pill.fail{background:var(--danger-dim); color:var(--danger-text);}
.comp-status-pill.info{background:var(--info-dim); color:var(--info-text);}
.comp-badge{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap; background:var(--info-dim); color:var(--info-text);}
.comp-badge.empty{background:var(--glass-2); color:var(--text-4);}
.comp-report-table-wrap{max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; border-color:var(--border-1);}
/* Change password dialog */
.cp-overlay{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(4,13,26,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.cp-box{border-radius:16px; padding:32px; width:100%; max-width:420px; background:var(--os-s2); border:1px solid var(--border-2); box-shadow:var(--shadow-lg);}
.cp-box h2{margin:0 0 6px; font-size:20px; color:var(--text-1);}
.cp-box p{margin:0 0 20px; font-size:13px; color:var(--text-3);}
.cp-field label{display:block; font-size:12px; margin-bottom:5px; font-weight:500; color:var(--text-3);}
.cp-field input{width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:8px; padding:9px 12px; font-size:14px; background:var(--os-s3); border-color:var(--border-2); color:var(--text-1); transition:border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.cp-field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-dim);}
.cp-field input::placeholder{ color:var(--text-5); }
.cp-reqs span{font-size:12px; color:var(--text-4);}
.cp-btn-save{padding:9px 22px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; background:var(--primary); color:#fff; transition:background var(--dur-base) var(--ease-out);}
.cp-btn-save:hover{ background:var(--primary-hover); }
.cp-btn-cancel{padding:9px 18px; border-radius:8px; font-size:14px; cursor:pointer; background:var(--glass-2); border:1px solid var(--border-2); color:var(--text-3);}
.cp-error{font-size:13px; margin-bottom:10px; min-height:18px; color:var(--danger-text);}
/* ── Scrollbar — premium dark ───────────────────────────── */
*{box-sizing:border-box; font-family:-apple-system,"Inter","SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif; scrollbar-width:thin; scrollbar-color:var(--glass-3) transparent;}
/* ── Selection color ────────────────────────────────────── */
::selection{ background:var(--brand-dim); color:var(--text-1); }
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Sidebar & Navigation (Etapa 2)
     ══════════════════════════════════════════════════════════ */
.sidebar::before{
    content:"";
    position:absolute;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, var(--brand-dim) 0%, transparent 70%);
    top:-50px; left:-30px;
    pointer-events:none; z-index:0; opacity:.5;
  }
.sidebar > *{ position:relative; z-index:1; }
.sidebar-top{display:flex; align-items:center; justify-content:space-between; padding:20px 16px 18px; border-bottom:1px solid var(--border-1); flex-shrink:0;}
.sidebar-brand-text{white-space:nowrap; line-height:1; display:flex; align-items:baseline; gap:0; font-weight:700; font-size:16px; letter-spacing:-.02em;}
.sidebar-brand-text .split{color:var(--text-1);}
.sidebar-brand-text .pay{color:var(--brand);}
.sidebar-brand-text .os{color:var(--text-5); font-weight:400; font-size:12px; letter-spacing:.01em; margin-left:2px;}
.sidebar-toggle{background:transparent; border:none; color:#475569; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--r-md); transition:all var(--dur-base) var(--ease-out);}
.sidebar-toggle:hover{color:var(--text-2); background:var(--glass-3);}
.sidebar-nav-label{white-space:nowrap; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-5); padding:18px 14px 6px;}
.sidebar-nav{display:flex; flex-direction:column; padding:10px 8px; gap:2px;}
.sidebar-nav-btn{display:flex; align-items:center; background:transparent; border:none; font-weight:500; cursor:pointer; text-align:left; width:100%; letter-spacing:.005em; padding:10px 12px; gap:12px; font-size:13px; border-radius:var(--r-md); color:var(--text-4); position:relative; transition:background var(--dur-base) var(--ease-out),
               color var(--dur-base) var(--ease-out),
               transform var(--dur-fast) var(--ease-out);}
.sidebar-nav-btn .icon{flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; opacity:.7; transition:opacity var(--dur-base) var(--ease-out);}
.sidebar-nav-btn .icon svg{stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px; stroke-width:1.6;}
.sidebar-nav-btn:hover{background:var(--glass-2); color:var(--text-2); transform:translateX(1px);}
.sidebar-nav-btn:hover .icon{opacity:1;}
.sidebar-nav-btn.active{background:var(--brand-dim); color:var(--brand); font-weight:600;}
.sidebar-nav-btn.active .icon{opacity:1;}
.sidebar-nav-btn.active::before{
    content:"";
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:3px; height:55%;
    background:var(--brand); border-radius:0 var(--r-xs) var(--r-xs) 0;
    box-shadow:0 0 8px var(--brand-glow);
  }
.sidebar-nav-btn.active:hover{ transform:none; }
.sidebar-nav-btn[disabled]{opacity:.2; cursor:not-allowed;}
.sidebar-divider{border-top:1px solid var(--border-1); margin:8px 12px;}
.sidebar-section-title{display:flex; align-items:center; justify-content:space-between; gap:8px; text-transform:uppercase; cursor:pointer; font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--text-5); padding:10px 12px; border-radius:var(--r-md); transition:all var(--dur-base) var(--ease-out);}
.sidebar-section-title:hover{background:var(--glass-2); color:var(--text-3);}
.sidebar-field label{display:block; margin-bottom:3px; text-transform:uppercase; color:var(--text-5); font-size:10px; letter-spacing:.08em; font-weight:600;}
.sidebar-field input, .sidebar-field select{width:100%; background:var(--os-s3); border:1px solid var(--border-2); color:var(--text-1); border-radius:var(--r-sm); font-size:12px; padding:7px 9px; transition:border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);}
.sidebar-field input:focus, .sidebar-field select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-dim);}
.sidebar-btn.primary{background:var(--brand-dim); color:var(--brand); border-color:rgba(0,195,137,.3);}
.sidebar-btn.primary:hover{background:rgba(0,195,137,.2); color:var(--brand-hover);}
.sidebar-avatar{color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; width:32px; height:32px; border-radius:var(--r-sm); background:linear-gradient(135deg, var(--primary), var(--brand)); font-size:12px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);}
.sidebar-footer{
    margin-top:auto; padding:14px 10px 16px;
    border-top:1px solid var(--border-1); flex-shrink:0;
  }
.sidebar-footer .sidebar-profile{
    padding:8px 10px; border-radius:var(--r-md);
    cursor:pointer; margin-bottom:0;
    transition:background var(--dur-base) var(--ease-out);
  }
.sidebar-footer .sidebar-profile:hover{ background:var(--glass-2); }
.sidebar-footer .user-name{
    font-size:13px; font-weight:600; color:var(--text-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
.sidebar-footer .user-role{
    font-size:11px; color:var(--text-5);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
.sidebar.collapsed{width:64px;}
.sidebar.collapsed .sidebar-nav-btn{padding:11px; justify-content:center;}
.sidebar.collapsed .sidebar-nav-btn .icon{width:22px; height:22px;}
.sidebar.collapsed .sidebar-nav-btn .icon svg{ width:19px; height:19px; }
.sidebar.collapsed .sidebar-nav-btn.active::before{ height:40%; }
.sidebar.collapsed .sidebar-top{justify-content:center; padding:18px 10px;}
.sidebar-upload-status{margin-top:6px; color:var(--text-5); font-size:10.5px; line-height:1.55;}
.sidebar-mini-note{margin-bottom:8px; color:var(--text-5); font-size:10.5px; line-height:1.55;}
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Componentes Base (Etapa 3)
     Buttons · Inputs · Badges · Cards · Form Elements
     ══════════════════════════════════════════════════════════ */
/* ── Buttons ─────────────────────────────────────────────── */
button, .btn, [class*="btn"]{
    font-family:inherit;
    transition:
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      color var(--dur-base) var(--ease-out);
  }
button:active, .btn:active{ transform:scale(.97); }
/* Primary / accent button */
.btn-primary, button.btn-primary{
    background:var(--brand); color:#fff;
    border:1px solid transparent;
    border-radius:var(--r-md);
    padding:9px 18px; font-size:13px; font-weight:600;
    box-shadow:var(--shadow-brand);
    cursor:pointer;
  }
.btn-primary:hover{ background:var(--brand-hover); box-shadow:0 4px 24px rgba(0,195,137,.38),0 0 48px rgba(0,195,137,.14); }
/* Ghost/secondary button */
.btn-ghost, button.btn-ghost{
    background:var(--glass-2); color:var(--text-2);
    border:1px solid var(--border-2);
    border-radius:var(--r-md);
    padding:8px 16px; font-size:13px; font-weight:500;
    cursor:pointer;
  }
.btn-ghost:hover{ background:var(--glass-3); border-color:var(--border-3); color:var(--text-1); }
/* Danger button */
.btn-danger, button.btn-danger{
    background:var(--danger-dim); color:var(--danger-text);
    border:1px solid var(--danger-border);
    border-radius:var(--r-md);
    padding:8px 16px; font-size:13px; font-weight:500;
    cursor:pointer;
  }
.btn-danger:hover{ background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.42); }
/* Sidebar utility buttons */
.sidebar-btn{margin-top:4px; background:var(--glass-2); color:var(--text-3); border:1px solid var(--border-1); border-radius:var(--r-md); padding:8px 12px; font-size:12px; font-weight:500; cursor:pointer; width:100%; text-align:left; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);}
.sidebar-btn:hover{background:var(--glass-3); border-color:var(--border-2); color:var(--text-2);}
.sidebar-btn:active{ transform:scale(.98); }
/* Action buttons (smaller inline, e.g. table row actions) */
.btn-sm{
    padding:5px 10px; font-size:11.5px; border-radius:var(--r-sm);
    font-weight:500; cursor:pointer;
    background:var(--glass-2); color:var(--text-3);
    border:1px solid var(--border-1);
    transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
.btn-sm:hover{ background:var(--glass-3); color:var(--text-1); }
/* Upload / file input trigger buttons */
.upload-btn, label[for^="upload"], label[for^="file"]{
    background:var(--primary-dim); color:var(--info-text);
    border:1px solid var(--info-border);
    border-radius:var(--r-md);
    padding:9px 16px; font-size:13px; font-weight:500;
    cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  }
.upload-btn:hover{ background:rgba(21,101,216,.22); border-color:rgba(56,189,248,.42); }
/* ── Inputs & Selects ────────────────────────────────────── */
input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  select,
  textarea{
    background:var(--glass-2) !important;
    color:var(--text-1) !important;
    border:1px solid var(--border-2) !important;
    border-radius:var(--r-md) !important;
    padding:9px 12px !important;
    font-size:13px !important;
    font-family:inherit !important;
    outline:none !important;
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      background var(--dur-base) var(--ease-out) !important;
    appearance:none;
    -webkit-appearance:none;
  }
input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="tel"]:focus,
  select:focus,
  textarea:focus{
    border-color:var(--brand) !important;
    box-shadow:0 0 0 3px var(--brand-dim) !important;
    background:var(--glass-3) !important;
  }
input::placeholder, textarea::placeholder{ color:var(--text-5) !important; }
select option{ background:var(--os-s2); color:var(--text-1); }
/* Checkbox & Radio — custom styled */
input[type="checkbox"]{
    width:16px; height:16px;
    accent-color:var(--brand);
    border-radius:var(--r-xs);
    cursor:pointer;
  }
input[type="range"]{ accent-color:var(--brand); cursor:pointer; }
/* ── Labels / Form helpers ───────────────────────────────── */
label{ color:var(--text-3); font-size:12.5px; font-weight:500; }
.field-hint, .form-hint{ color:var(--text-5); font-size:11px; }
/* ── Cards — full state system ───────────────────────────── */
.card, .home-card, .kpi-card, .config-card, .user-card{
    background:var(--glass-1) !important;
    border:1px solid var(--border-1) !important;
    border-radius:var(--r-xl) !important;
    box-shadow:var(--shadow-card) !important;
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-slow) var(--ease-out) !important;
  }
.card:hover, .home-card:hover{
    border-color:var(--border-2) !important;
    box-shadow:var(--shadow-md) !important;
    transform:translateY(-1px) !important;
  }
.card-header{
    border-bottom:1px solid var(--border-1);
    padding-bottom:12px; margin-bottom:16px;
    color:var(--text-2); font-size:13px; font-weight:600;
    display:flex; align-items:center; justify-content:space-between;
  }
.card-title{ font-size:14px; font-weight:700; color:var(--text-1); }
.card-subtitle{ font-size:11.5px; color:var(--text-4); margin-top:2px; }
/* KPI cards — special state */
.kpi-card{border-radius:10px; padding:12px 14px; background:var(--glass-1); border:1px solid var(--border-2); box-shadow:var(--shadow-card); transition:border-color var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out); position:relative; overflow:hidden;}
.kpi-card::before{
    content:""; position:absolute;
    inset:0; pointer-events:none;
    background:radial-gradient(circle at top left, var(--brand-dim) 0%, transparent 60%);
    opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
  }
.kpi-card:hover::before{ opacity:1; }
/* ── Badges & Chips ──────────────────────────────────────── */
.badge, [class*="badge"]{
    display:inline-flex; align-items:center;
    padding:3px 9px; border-radius:var(--r-full);
    font-size:11px; font-weight:600; letter-spacing:.02em;
    transition:opacity var(--dur-base) var(--ease-out);
  }
.badge.Jr, span.badge.Jr{ background:rgba(99,102,241,.16); color:#a5b4fc; border:1px solid rgba(99,102,241,.3); }
.badge.Pl, span.badge.Pl{ background:rgba(56,189,248,.14); color:#7dd3fc; border:1px solid rgba(56,189,248,.28); }
.badge.Sr, span.badge.Sr{ background:rgba(0,195,137,.14); color:#6ee7b7; border:1px solid rgba(0,195,137,.28); }
.status-pill, .status-badge{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:var(--r-full);
    font-size:11px; font-weight:600;
  }
.status-pill.pago, .status-badge.pago{
    background:var(--success-dim); color:var(--success-text); border:1px solid var(--success-border);
  }
.status-pill.programado, .status-badge.programado{
    background:var(--info-dim); color:var(--info-text); border:1px solid var(--info-border);
  }
/* Active/inactive assessor pill */
.pill-ativo{ background:var(--success-dim); color:var(--success-text); border:1px solid var(--success-border); }
.pill-inativo{ background:var(--danger-dim); color:var(--danger-text); border:1px solid var(--danger-border); }
/* ── Section headers ─────────────────────────────────────── */
.section-title, h2, h3{
    color:var(--text-1); font-weight:700;
  }
.section-subtitle{ color:var(--text-4); font-size:12.5px; }
/* ── Dividers ────────────────────────────────────────────── */
hr, .divider{
    border:none;
    border-top:1px solid var(--border-1);
    margin:16px 0;
  }
/* ── Tooltips / Notes ────────────────────────────────────── */
.note, .hint-box{
    background:var(--glass-2);
    border:1px solid var(--border-1);
    border-left:3px solid var(--brand);
    border-radius:var(--r-md);
    padding:10px 14px;
    color:var(--text-3); font-size:12px;
  }
/* ── Modal dialogs ───────────────────────────────────────── */
.modal-overlay, [id*="modal"]:not(script){
    background:rgba(4,13,26,.72);
    backdrop-filter:blur(8px);
  }
.modal-box, .dialog-box, [class*="modal-content"]{
    background:var(--os-s2) !important;
    border:1px solid var(--border-2) !important;
    border-radius:var(--r-2xl) !important;
    box-shadow:var(--shadow-lg) !important;
    color:var(--text-1) !important;
  }
.modal-title, .dialog-title{
    font-size:16px; font-weight:700; color:var(--text-1);
    border-bottom:1px solid var(--border-1);
    padding-bottom:12px; margin-bottom:16px;
  }
/* ── Progress / Loading indicators ──────────────────────── */
.spinner, .loading{
    border-color:var(--border-2);
    border-top-color:var(--brand);
  }
.progress-bar-track{
    background:var(--glass-2); border-radius:var(--r-full);
    height:4px; overflow:hidden;
  }
.progress-bar-fill{
    background:linear-gradient(90deg, var(--brand), var(--brand-hover));
    height:100%; border-radius:var(--r-full);
    transition:width var(--dur-slow) var(--ease-inout);
  }
/* ── Tab bars (content tabs, not sidebar) ────────────────── */
.tab-bar, .tabs-row{
    display:flex; gap:4px;
    border-bottom:1px solid var(--border-1);
    margin-bottom:16px;
  }
.tab-btn, .tab-item{
    padding:8px 16px; font-size:13px; font-weight:500;
    color:var(--text-4); background:transparent;
    border:none; border-bottom:2px solid transparent;
    cursor:pointer;
    transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
    margin-bottom:-1px;
  }
.tab-btn.active, .tab-item.active{
    color:var(--brand); border-bottom-color:var(--brand); font-weight:600;
  }
.tab-btn:hover:not(.active), .tab-item:hover:not(.active){ color:var(--text-2); }
/* ── Login screen upgrade ────────────────────────────────── */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 30% 20%, rgba(0,195,137,.08) 0%, transparent 55%),
               radial-gradient(ellipse at 75% 80%, rgba(21,101,216,.07) 0%, transparent 50%),
               var(--os-base);}
.login-tab-btn{flex:1; background:transparent; color:var(--text-4); border:1px solid transparent; border-radius:var(--r-sm); padding:7px 20px; font-size:13px; font-weight:500; cursor:pointer; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.login-tab-btn.active{background:var(--brand-dim); color:var(--brand); border-color:var(--brand-glow); font-weight:600;}
.login-tab-btn:hover:not(.active){ color:var(--text-2); background:var(--glass-2); }
.login-field label{text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-size:12.5px; font-weight:500; display:block; margin-bottom:6px;}
.login-field input{
    width:100%; background:var(--glass-2) !important;
    border:1px solid var(--border-2) !important;
    border-radius:var(--r-md) !important;
    padding:10px 14px !important; color:var(--text-1) !important;
  }
.login-field input:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-dim) !important; }
.login-btn{margin-top:8px; background:linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%); color:#fff; border:none; border-radius:var(--r-md); padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer; width:100%; box-shadow:var(--shadow-brand); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);}
.login-btn:hover{background:#00e5a0; box-shadow:0 6px 28px rgba(0,195,137,.42),0 0 52px rgba(0,195,137,.16);}
.login-btn:active{ transform:scale(.98); }
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Dashboard & KPIs Premium (Etapa 4)
     ══════════════════════════════════════════════════════════ */
/* ── KPI Premium Grid ─────────────────────────────────────── */
.kpi-grid-premium{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-bottom:20px;
  }
@media (max-width:1100px){.kpi-grid-premium{ grid-template-columns:repeat(2,1fr); }}
@media (max-width:640px){.kpi-grid-premium{ grid-template-columns:1fr; }}
.kpi-card-os{
    position:relative; overflow:hidden;
    background:var(--glass-1);
    border:1px solid var(--border-1);
    border-radius:var(--r-xl);
    padding:18px 18px 16px;
    display:flex; align-items:flex-start; gap:14px;
    box-shadow:var(--shadow-card);
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
    cursor:default;
  }
.kpi-card-os:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }
/* Colored accent borders per variant */
.kpi-card-os.kpi-brand{ border-top:2px solid var(--brand); }
.kpi-card-os.kpi-success{ border-top:2px solid var(--success); }
.kpi-card-os.kpi-warning{ border-top:2px solid var(--warning); }
.kpi-card-os.kpi-info{ border-top:2px solid var(--info); }
/* Glow layers */
.kpi-glow-brand, .kpi-glow-success, .kpi-glow-warning, .kpi-glow-info{
    position:absolute; width:120px; height:120px; border-radius:50%;
    top:-30px; right:-20px; pointer-events:none;
    opacity:.18; transition:opacity var(--dur-slow) var(--ease-out);
  }
.kpi-card-os:hover .kpi-glow-brand,
  .kpi-card-os:hover .kpi-glow-success,
  .kpi-card-os:hover .kpi-glow-warning,
  .kpi-card-os:hover .kpi-glow-info{ opacity:.32; }
.kpi-glow-brand{ background:radial-gradient(circle, var(--brand) 0%, transparent 70%); }
.kpi-glow-success{ background:radial-gradient(circle, var(--success) 0%, transparent 70%); }
.kpi-glow-warning{ background:radial-gradient(circle, var(--warning) 0%, transparent 70%); }
.kpi-glow-info{ background:radial-gradient(circle, var(--info) 0%, transparent 70%); }
/* Icon wrapper */
.kpi-icon-wrap{
    flex-shrink:0; width:40px; height:40px;
    border-radius:var(--r-lg);
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
  }
.kpi-brand .kpi-icon-wrap{ background:var(--brand-dim); color:var(--brand); }
.kpi-success .kpi-icon-wrap{ background:var(--success-dim); color:var(--success-text); }
.kpi-warning .kpi-icon-wrap{ background:var(--warning-dim); color:var(--warning-text); }
.kpi-info .kpi-icon-wrap{ background:var(--info-dim); color:var(--info-text); }
/* Body text */
.kpi-body-os{
    flex:1; min-width:0; position:relative; z-index:1;
  }
.kpi-label-os{
    display:block; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-4); margin-bottom:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
.kpi-value-os{
    display:block; font-size:24px; font-weight:800;
    color:var(--text-1); letter-spacing:-.02em; line-height:1.15;
    margin-bottom:6px;
  }
.kpi-delta-os{
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; font-weight:600; border-radius:var(--r-full);
    padding:2px 8px;
  }
.kpi-delta-os.up{ background:var(--success-dim); color:var(--success-text); }
.kpi-delta-os.down{ background:var(--danger-dim); color:var(--danger-text); }
.kpi-delta-os.warn{ background:var(--warning-dim); color:var(--warning-text); }
.kpi-delta-os.neutral{ background:var(--glass-2); color:var(--text-4); }
/* ── Chart cards OS ──────────────────────────────────────── */
.chart-card-os{
    background:var(--glass-1);
    border:1px solid var(--border-1);
    border-radius:var(--r-xl);
    padding:20px 20px 16px;
    box-shadow:var(--shadow-card);
    flex:1; min-width:0;
    transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
.chart-card-os:hover{
    border-color:var(--border-2);
    box-shadow:var(--shadow-md);
  }
.chart-card-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
  }
.chart-card-title{
    font-size:13.5px; font-weight:700; color:var(--text-1);
  }
.chart-card-badge{
    font-size:10.5px; font-weight:600;
    color:var(--text-4);
    background:var(--glass-2);
    border:1px solid var(--border-1);
    border-radius:var(--r-full);
    padding:2px 10px;
  }
/* ── Override old chart-card class ──────────────────────── */
.chart-card{background:var(--glass-1) !important; border:1px solid var(--border-1) !important; border-radius:var(--r-xl) !important; box-shadow:var(--shadow-card) !important; padding:20px !important; transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;}
.chart-card:hover{
    border-color:var(--border-2) !important;
    box-shadow:var(--shadow-md) !important;
  }
.chart-card h2{text-transform:uppercase; letter-spacing:.06em; font-size:13.5px; font-weight:700; color:var(--text-1); margin:0 0 14px; border:none; padding:0;}
/* ── dashboard-row spacing ───────────────────────────────── */
.dashboard-row{grid-template-columns:2fr 1fr; display:flex; gap:14px; margin-bottom:14px; align-items:stretch;}
.dashboard-row > *{ flex:1; min-width:0; }
@media (max-width:900px){.dashboard-row{ flex-direction:column; }}
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Enterprise Data Grids (Etapa 5)
     ══════════════════════════════════════════════════════════ */
/* ── Base table reset → OS theme ─────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:13px; color:var(--text-2);}
th{border-bottom-color:var(--border-1); color:var(--text-4) !important; font-weight:600 !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.06em; padding:10px 10px 9px !important; border-bottom:1px solid var(--border-2) !important; background:var(--glass-2) !important; position:sticky; top:0; z-index:2; white-space:nowrap; user-select:none; transition:color var(--dur-base) var(--ease-out);}
th:hover{ color:var(--text-2) !important; }
/* Sort indicator when clickable */
th[onclick]{ cursor:pointer; }
th[onclick]:hover{ background:var(--glass-3) !important; }
td{border-bottom-color:var(--border-1); padding:9px 10px !important; border-bottom:1px solid var(--border-1) !important; color:var(--text-2); font-size:13px; vertical-align:middle; transition:background var(--dur-fast) var(--ease-out);}
td strong, td b{ color:var(--text-1); font-weight:600; }
/* Row hover state */
tbody tr{
    transition:background var(--dur-fast) var(--ease-out);
  }
tbody tr:hover td{
    background:var(--glass-2) !important;
  }
/* Last row — no bottom border */
tbody tr:last-child td{ border-bottom:none !important; }
/* tfoot / totals row */
tfoot tr td, tfoot tr th{
    border-top:1px solid var(--border-2) !important;
    border-bottom:none !important;
    background:var(--glass-2) !important;
    font-weight:700 !important; color:var(--text-1) !important;
    font-size:13px !important;
    padding:10px 10px !important;
  }
/* Compact table variant */
.table-compact th{ padding:7px 8px !important; font-size:12px !important; }
.table-compact td{ padding:7px 8px !important; font-size:12px !important; }
/* Table wrap with glass background */
.table-wrap{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border-1); background:var(--glass-1);}
/* First column sticky option */
.table-sticky-col tbody td:first-child,
  .table-sticky-col thead th:first-child{
    position:sticky; left:0; z-index:1;
    background:inherit;
  }
/* ── Numeric cells — right aligned ───────────────────────── */
td.num, th.num{ text-align:right !important; font-variant-numeric:tabular-nums; }
td.num{ font-weight:600; color:var(--text-1); }
td.num.positive{ color:var(--success-text); }
td.num.negative{ color:var(--danger-text); }
/* ── Rank number cells ────────────────────────────────────── */
td.rank{
    font-size:11px; font-weight:700; color:var(--text-5);
    text-align:center !important; width:32px;
  }
tr:nth-child(1) td.rank{ color:var(--warning-text); }
tr:nth-child(2) td.rank{ color:var(--text-3); }
tr:nth-child(3) td.rank{ color:var(--brand); }
/* ── Empty state ─────────────────────────────────────────── */
.table-empty{
    text-align:center; padding:32px 16px !important;
    color:var(--text-5); font-size:13px;
  }
.table-empty svg{ display:block; margin:0 auto 10px; opacity:.35; }
/* ── Mini progress bar inside cells ─────────────────────── */
.cell-bar-wrap{
    display:flex; align-items:center; gap:8px;
  }
.cell-bar-track{
    flex:1; height:3px; border-radius:var(--r-full);
    background:var(--glass-3); overflow:hidden;
  }
.cell-bar-fill{
    height:100%; border-radius:var(--r-full);
    background:linear-gradient(90deg, var(--brand), var(--brand-hover));
    transition:width var(--dur-slow) var(--ease-inout);
  }
.cell-bar-label{ font-size:12px; color:var(--text-4); min-width:36px; text-align:right; }
/* ── Alerta card ─────────────────────────────────────────── */
.alerta-card{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; border-color:var(--danger-border); background:var(--danger-dim) !important; border:1px solid var(--danger-border) !important; border-radius:var(--r-lg) !important; padding:12px 16px !important; color:var(--danger-text) !important;}
.alerta-card strong{ color:var(--danger-text) !important; }
/* ══════════════════════════════════════════════════════════
     SplitOS 2026 — Motion & Microinterações (Etapa 6)
     ══════════════════════════════════════════════════════════ */
/* ── Tab / section entrance animation ────────────────────── */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
  }
@keyframes fadeIn{
    from{ opacity:0; }
    to  { opacity:1; }
  }
@keyframes scaleIn{
    from{ opacity:0; transform:scale(.97); }
    to  { opacity:1; transform:scale(1); }
  }
@keyframes slideInLeft{
    from{ opacity:0; transform:translateX(-12px); }
    to  { opacity:1; transform:translateX(0); }
  }
@keyframes shimmer{
    0%  { background-position:-400px 0; }
    100%{ background-position:400px 0; }
  }
.tab-animate-in{
    animation:fadeUp var(--dur-slow) var(--ease-out) both;
  }
/* ── KPI cards staggered entrance ────────────────────────── */
.kpi-grid-premium .kpi-card-os:nth-child(1){ animation:fadeUp var(--dur-slow) 0ms   var(--ease-spring) both; }
.kpi-grid-premium .kpi-card-os:nth-child(2){ animation:fadeUp var(--dur-slow) 55ms  var(--ease-spring) both; }
.kpi-grid-premium .kpi-card-os:nth-child(3){ animation:fadeUp var(--dur-slow) 110ms var(--ease-spring) both; }
.kpi-grid-premium .kpi-card-os:nth-child(4){ animation:fadeUp var(--dur-slow) 165ms var(--ease-spring) both; }
/* ── Dashboard row stagger ───────────────────────────────── */
.dashboard-row:nth-child(2){ animation:fadeUp var(--dur-xslow) 80ms  var(--ease-out) both; }
.dashboard-row:nth-child(3){ animation:fadeUp var(--dur-xslow) 150ms var(--ease-out) both; }
.dashboard-row:nth-child(4){ animation:fadeUp var(--dur-xslow) 220ms var(--ease-out) both; }
/* ── Sidebar nav items stagger ───────────────────────────── */
.sidebar-nav-btn:nth-child(1){ animation:slideInLeft var(--dur-slow) 0ms   var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(2){ animation:slideInLeft var(--dur-slow) 30ms  var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(3){ animation:slideInLeft var(--dur-slow) 60ms  var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(4){ animation:slideInLeft var(--dur-slow) 90ms  var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(5){ animation:slideInLeft var(--dur-slow) 120ms var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(6){ animation:slideInLeft var(--dur-slow) 150ms var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(7){ animation:slideInLeft var(--dur-slow) 180ms var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(8){ animation:slideInLeft var(--dur-slow) 210ms var(--ease-spring) both; }
.sidebar-nav-btn:nth-child(9){ animation:slideInLeft var(--dur-slow) 240ms var(--ease-spring) both; }
/* ── Login box entrance ──────────────────────────────────── */
.login-box{padding:40px 38px; width:100%; max-width:380px; position:relative; z-index:1; background:var(--glass-2) !important; border:1px solid var(--border-2) !important; border-radius:var(--r-2xl) !important; box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07) !important; backdrop-filter:blur(24px) saturate(180%) !important; animation:scaleIn var(--dur-xslow) var(--ease-spring) both !important;}
/* ── Table row stagger (tbody) ───────────────────────────── */
tbody tr:nth-child(-n/**/+10){
    animation:fadeIn var(--dur-base) var(--ease-out) both;
  }
tbody tr:nth-child(1) { animation-delay:0ms; }
tbody tr:nth-child(2) { animation-delay:18ms; }
tbody tr:nth-child(3) { animation-delay:36ms; }
tbody tr:nth-child(4) { animation-delay:54ms; }
tbody tr:nth-child(5) { animation-delay:72ms; }
tbody tr:nth-child(n/**/+6){ animation-delay:90ms; }
/* ── Skeleton loading shimmer ────────────────────────────── */
.skeleton{
    background:linear-gradient(90deg,
      var(--glass-2) 0%,
      var(--glass-3) 50%,
      var(--glass-2) 100%
    );
    background-size:400px 100%;
    animation:shimmer 1.4s infinite linear;
    border-radius:var(--r-sm);
    color:transparent !important;
  }
/* ── Ripple on button click ──────────────────────────────── */
.btn-ripple{
    position:relative; overflow:hidden;
  }
.btn-ripple::after{
    content:""; position:absolute;
    width:100px; height:100px;
    background:rgba(255,255,255,.12);
    border-radius:50%;
    transform:scale(0); opacity:1;
    transition:transform .5s var(--ease-out), opacity .5s var(--ease-out);
    pointer-events:none;
  }
.btn-ripple:active::after{
    transform:scale(3); opacity:0;
  }
/* ── Hover lift for interactive cards ───────────────────── */
.lift-on-hover{
    transition:transform var(--dur-slow) var(--ease-spring),
               box-shadow var(--dur-slow) var(--ease-out) !important;
  }
.lift-on-hover:hover{
    transform:translateY(-3px) !important;
    box-shadow:var(--shadow-lg) !important;
  }
/* ── Icon pulse (e.g. notification dot) ─────────────────── */
@keyframes pulse{
    0%,100%{ box-shadow:0 0 0 0 var(--brand-glow); }
    50%    { box-shadow:0 0 0 5px transparent; }
  }
.pulse-dot{
    display:inline-block; width:7px; height:7px;
    border-radius:50%; background:var(--brand);
    animation:pulse 2s infinite;
  }
/* ── Focus ring (keyboard navigation) ───────────────────── */
:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:2px;
    border-radius:var(--r-sm);
  }
/* ── Sidebar collapse transition ────────────────────────── */
/* overflow-x:hidden hides text during collapse; overflow-y:auto keeps scroll */
.sidebar{flex-shrink:0; color:#fff; top:0; height:100vh; width:256px; background:var(--os-s0); border-right:1px solid var(--border-1); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); display:flex; flex-direction:column; position:relative; transition:width var(--dur-slow) var(--ease-inout) !important; overflow-x:hidden !important; overflow-y:auto !important;}
/* ── Content fade when sidebar toggles ──────────────────── */
.main-area{flex:1; background:var(--os-s1); transition:margin-left var(--dur-slow) var(--ease-inout); min-width:0; overflow-x:hidden;}
/* ── Header sticky — logo never leaves viewport ──────────── */
header{color:#fff; position:sticky !important; top:0 !important; z-index:100 !important; background:var(--os-s0) !important; border-bottom:1px solid var(--border-1) !important; padding:14px 28px !important;}
header h1{letter-spacing:.01em; font-weight:800; font-size:20px !important; margin:0;}
header .brand-tagline{ font-size:12px !important; }
/* Hide the long instruction paragraph — moved to Central de Ajuda */
#header-desc{ display:none !important; }
/* ── Central de Ajuda button (special style) ─────────────── */
.sidebar-help-btn{
    margin-top:8px;
    color:var(--text-4) !important;
    border-top:1px solid var(--border-1);
    padding-top:14px !important;
  }
.sidebar-help-btn:hover{ color:var(--info-text) !important; background:var(--info-dim) !important; }
.sidebar-help-btn .icon svg{ stroke:currentColor; }
/* ── Status badge pulse (pending) ───────────────────────── */
@keyframes statusPulse{
    0%,100%{ opacity:1; }
    50%    { opacity:.6; }
  }
.status-pill.pendente, .status-badge.pendente{background:var(--warning-dim); color:var(--warning-text); border:1px solid var(--warning-border); animation:statusPulse 2.4s ease-in-out infinite;}
/* ── Scrollbar OS style ──────────────────────────────────── */
::-webkit-scrollbar{width:5px; height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--glass-3); border-radius:var(--r-full);}
::-webkit-scrollbar-thumb:hover{background:var(--glass-4);}
/* ── Respects user prefers-reduced-motion ────────────────── */
@media (prefers-reduced-motion:reduce){*, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }}
/* ══════════════════════════════════════════════════════════
     S2-05 — Comissões table: fixed layout, tudo visível sem scroll
     ══════════════════════════════════════════════════════════ */
#tab-comissoes .table-wrap{ overflow-x:hidden !important; }
#tab-comissoes table{ table-layout:fixed !important; width:100% !important; }
#tab-comissoes table th,
  #tab-comissoes table td{
    padding:8px 7px !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
#tab-comissoes table th:nth-child(1), #tab-comissoes table td:nth-child(1){ width:19%; }
#tab-comissoes table th:nth-child(2), #tab-comissoes table td:nth-child(2){ width:6%; text-align:center !important; overflow:visible; }
#tab-comissoes table th:nth-child(3), #tab-comissoes table td:nth-child(3){ width:13%; text-align:right !important; }
#tab-comissoes table th:nth-child(4), #tab-comissoes table td:nth-child(4){ width:14%; text-align:right !important; }
#tab-comissoes table th:nth-child(5), #tab-comissoes table td:nth-child(5){ width:12%; text-align:right !important; }
#tab-comissoes table th:nth-child(6), #tab-comissoes table td:nth-child(6){ width:12%; text-align:right !important; }
#tab-comissoes table th:nth-child(7), #tab-comissoes table td:nth-child(7){ width:10%; text-align:right !important; }
#tab-comissoes table th:nth-child(8), #tab-comissoes table td:nth-child(8){ width:14%; text-align:right !important; }
/* ══════════════════════════════════════════════════════════
     S2-06 — Pareto: summary strip + richer chart styles
     ══════════════════════════════════════════════════════════ */
.pareto-summary{
    display:flex; gap:0; margin-bottom:10px;
    border:1px solid var(--border-1); border-radius:var(--r-md);
    overflow:hidden; background:var(--glass-1);
  }
.pareto-stat{
    flex:1; padding:8px 12px; display:flex; flex-direction:column; gap:2px;
    border-right:1px solid var(--border-1);
  }
.pareto-stat:last-child{ border-right:none; }
.pareto-stat > span{ font-size:10px; color:var(--text-4); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.pareto-stat > strong{ font-size:13px; color:var(--text-1); font-weight:700; }
/* ══════════════════════════════════════════════════════════
     S2-07 — Treemap: legibility improvements
     ══════════════════════════════════════════════════════════ */
.treemap-cell{position:relative; box-sizing:border-box; color:#fff; font-size:11.5px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35); overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:8px 6px; min-height:64px; min-width:56px; transition:opacity var(--dur-fast) var(--ease-out); border-radius:0; cursor:default;}
.treemap-cell:hover{ opacity:.84; }
.tc-name{
    font-size:11.5px; font-weight:700; color:#fff; line-height:1.3;
    margin-bottom:2px; overflow:hidden; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical;
    word-break:break-word; max-width:100%;
  }
.tc-value{ font-size:9px; color:rgba(255,255,255,.82); margin-bottom:2px; white-space:nowrap; }
.tc-pct{
    font-size:10px; font-weight:700; color:rgba(255,255,255,.95);
    background:rgba(0,0,0,.22); border-radius:3px; padding:1px 5px;
    white-space:nowrap;
  }
/* ══════════════════════════════════════════════════════════
     S2-08c — Pagamentos: compact layout, no horizontal scroll
     ══════════════════════════════════════════════════════════ */
#tab-pagamentos .table-wrap{ overflow-x:auto !important; max-width:100%; }
#tab-pagamentos table{ table-layout:auto; }
#tab-pagamentos table th:nth-child(1), #tab-pagamentos table td:nth-child(1){ min-width:115px; }
#tab-pagamentos table th:nth-child(2), #tab-pagamentos table td:nth-child(2){ min-width:48px; text-align:center !important; }
#tab-pagamentos table th:nth-child(3), #tab-pagamentos table td:nth-child(3){ min-width:100px; text-align:right !important; }
#tab-pagamentos table th:nth-child(4), #tab-pagamentos table td:nth-child(4){ min-width:100px; text-align:right !important; }
#tab-pagamentos table th:nth-child(5), #tab-pagamentos table td:nth-child(5){ min-width:85px; text-align:right !important; }
#tab-pagamentos table th:nth-child(6), #tab-pagamentos table td:nth-child(6){ min-width:80px; text-align:right !important; }
#tab-pagamentos table th:nth-child(7), #tab-pagamentos table td:nth-child(7){ min-width:75px; text-align:right !important; }
#tab-pagamentos table th:nth-child(8), #tab-pagamentos table td:nth-child(8){ min-width:100px; text-align:right !important; }
#tab-pagamentos table th, #tab-pagamentos table td { padding:5px 6px; font-size:12px; }
#tab-pagamentos .repasse-cell{ display:flex; flex-direction:column; gap:2px; }
#tab-pagamentos .status-select{ font-size:12px; padding:2px 3px; width:100%; }
#tab-pagamentos .status-date{ font-size:12px; padding:2px 3px; width:100%; }
#tab-pagamentos .comp-badge{ font-size:12px; }
#tab-pagamentos .comp-btn-link{ font-size:12px; }
.repasse-action-btns{ display:flex; gap:3px; margin-top:2px; }
.repasse-action-btns button{ flex:1; font-size:10px; padding:2px 0; border-radius:5px; cursor:pointer; font-weight:600; white-space:nowrap; }
/* ══ Toasts + modais próprios (Fase 4) ══════════════════════ */
#toast-container{ position:fixed; top:18px; right:18px; z-index:99990; display:flex; flex-direction:column; gap:8px; max-width:370px; }
.toast{ display:flex; align-items:flex-start; gap:9px; padding:11px 14px; border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--text-1, #e2e8f0); background:var(--os-s2, #0d1526); border:1px solid var(--border-1, rgba(255,255,255,.12)); box-shadow:0 12px 32px rgba(0,0,0,.38); cursor:pointer; white-space:pre-line; animation:toastIn .25s ease-out both; }
.toast-success{ border-color:rgba(0,195,137,.45); }
.toast-error{ border-color:rgba(239,68,68,.5); }
.toast-warn{ border-color:rgba(245,158,11,.45); }
.toast-saindo{ opacity:0; transform:translateX(14px); transition:all .26s ease-out; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }
#confirm-overlay, #senhas-overlay{ position:fixed; inset:0; z-index:99980; background:rgba(4,13,26,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; }
.confirm-box{ background:var(--os-s2, #0d1526); border:1px solid var(--border-2, rgba(255,255,255,.16)); border-radius:14px; padding:22px 24px; max-width:440px; width:100%; box-shadow:0 24px 64px rgba(0,0,0,.5); }
.confirm-box p{ margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--text-1, #e2e8f0); white-space:pre-line; }
.confirm-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.confirm-btn-ok{ padding:8px 18px; background:var(--primary, #1565D8); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.confirm-btn-ok.perigo{ background:#b91c1c; }
.confirm-btn-cancel{ padding:8px 18px; background:transparent; color:var(--text-3, #94a3b8); border:1px solid var(--border-1, rgba(255,255,255,.12)); border-radius:8px; font-size:13px; cursor:pointer; }
.senhas-box{ max-width:520px; max-height:80vh; overflow-y:auto; }
.senhas-box h3{ margin:0 0 6px; font-size:17px; color:var(--text-1, #e2e8f0); }
.senhas-aviso{ font-size:12px !important; color:#fcd34d !important; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.25); border-radius:8px; padding:8px 12px; }
.senha-linha{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-1, rgba(255,255,255,.1)); }
.senha-nome{ font-size:13px; font-weight:600; color:var(--text-1, #e2e8f0); }
.senha-valor{ font-size:15px; font-weight:700; letter-spacing:.06em; color:#4ade80; background:rgba(0,195,137,.08); padding:3px 10px; border-radius:6px; display:inline-block; margin-top:3px; user-select:all; }
.senha-acoes{ display:flex; gap:8px; flex-shrink:0; }