/* ═══ TOKENS (copiados do painel original — filesparaia/painel_relatorios_tok.html) ═══ */
:root{
  --navy:#0D2B5B;--navy2:#091d3e;--navy3:#1a3a6a;--navy4:#1e4080;
  --orange:#E8650A;--orange2:#f07320;--orange-glow:rgba(232,101,10,.18);
  --bg:#F0F4FA;--bg2:#E8EDF5;--surface:#fff;--surface2:#F8FAFF;
  --glass:rgba(255,255,255,.88);--glass-b:rgba(255,255,255,.25);
  --text:#1A2340;--text2:#2d3a56;--muted:#6B7A99;--muted2:#94a3b8;
  --line:#DDE3EE;--line2:#e8edf5;
  --green:#059669;--green2:#10b981;--green-bg:#D1FAE5;--green-glow:rgba(5,150,105,.15);
  --amber:#D97706;--amber2:#f59e0b;--amber-bg:#FEF3C7;
  --red:#DC2626;--red2:#ef4444;--red-bg:#FEE2E2;--red-glow:rgba(220,38,38,.15);
  --blue:#3B82F6;--blue-bg:#EFF6FF;
  --purple:#6D28D9;--purple-bg:#EDE9FE;
  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:0 2px 8px rgba(13,43,91,.07),0 4px 20px rgba(13,43,91,.09);
  --sh-md:0 4px 16px rgba(13,43,91,.1),0 8px 32px rgba(13,43,91,.08);
  --sh-lg:0 8px 32px rgba(13,43,91,.12),0 20px 48px rgba(13,43,91,.1);
  --sh-xl:0 20px 60px rgba(13,43,91,.2),0 8px 24px rgba(13,43,91,.1);
  --sh-or:0 4px 20px rgba(232,101,10,.3);
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-f:9999px;
  --ease-expo:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#080e1c;--bg2:#0b1220;--surface:#101828;--surface2:#162032;
  --glass:rgba(16,24,40,.92);--glass-b:rgba(255,255,255,.08);
  --text:#e2e8f4;--text2:#c4cde0;--muted:#68789a;--muted2:#4a5470;
  --line:#1c2840;--line2:#182030;
  --green-bg:rgba(5,150,105,.15);--amber-bg:rgba(217,119,6,.15);
  --red-bg:rgba(220,38,38,.14);--blue-bg:rgba(59,130,246,.12);
  --purple-bg:rgba(109,40,217,.15);
  --sh:0 2px 8px rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.25);
  --sh-md:0 4px 16px rgba(0,0,0,.45),0 8px 32px rgba(0,0,0,.35);
  --sh-lg:0 8px 32px rgba(0,0,0,.55),0 20px 48px rgba(0,0,0,.45);
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:13px;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

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

/* ═══ TEST BANNER (só neste ambiente de teste, não existe no original) ═══ */
.test-banner{
  background:var(--red);color:#fff;text-align:center;padding:6px 10px;
  font-size:11px;font-weight:700;letter-spacing:.03em;
}

/* ═══ HEADER (mesma estrutura do painel original) ═══ */
.header{height:52px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,.22);z-index:100;gap:10px;}
.logo{font-size:15px;font-weight:900;letter-spacing:-.3px;white-space:nowrap;}
.logo span{color:var(--orange);}
.mode-tabs{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:var(--r-sm);padding:3px;}
.mode-tab{padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;border:none;background:transparent;color:rgba(255,255,255,.6);transition:all .2s var(--ease-io);white-space:nowrap;}
.mode-tab.active{background:var(--orange);color:#fff;box-shadow:var(--sh-or);}
.mode-tab:hover:not(.active){background:rgba(255,255,255,.12);color:#fff;}
.header-actions{display:flex;gap:8px;align-items:center;}
.top-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-radius:var(--r-sm);padding:5px 11px;cursor:pointer;font-size:11px;font-weight:700;white-space:nowrap;transition:all .15s;}
.top-btn:hover{background:rgba(255,255,255,.18);color:#fff;}
.user-name{color:rgba(255,255,255,.85);font-size:12px;font-weight:600;white-space:nowrap;}
.role-badge{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-radius:var(--r-f);padding:3px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}

/* ═══ LOGIN ═══ */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy);background:radial-gradient(circle at 30% 20%,var(--navy3),var(--navy) 60%,var(--navy2));}
.login-box{background:var(--surface);padding:32px;border-radius:var(--r-xl);width:360px;box-shadow:var(--sh-xl);border:1px solid var(--line);animation:fadeUp .4s var(--ease-expo) both;}
.login-box .test-banner{margin:-32px -32px 20px -32px;border-radius:var(--r-xl) var(--r-xl) 0 0;}
.login-box h1{margin:0 0 4px;font-size:20px;font-weight:900;letter-spacing:-.3px;color:var(--navy);}
.login-box h1 span{color:var(--orange);}
.login-box .subtitle{margin:0 0 22px;color:var(--muted);font-size:12px;font-weight:600;}
.login-box label{display:block;font-size:11px;margin-bottom:5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.login-box input{
  width:100%;padding:9px 11px;margin-bottom:14px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13px;background:var(--surface);color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.login-box input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,43,91,.1);}
.login-box button{
  width:100%;padding:10px;background:var(--navy);color:#fff;border:none;
  border-radius:var(--r-sm);font-size:13px;font-weight:800;cursor:pointer;transition:background .15s,transform .1s;
}
.login-box button:hover{background:var(--navy3);}
.login-box button:active{transform:scale(.98);}
.error-msg{color:var(--red);font-size:12px;font-weight:600;margin-top:-6px;margin-bottom:8px;}

/* ═══ MAIN LAYOUT ═══ */
main{max-width:1200px;margin:0 auto;padding:20px 18px 36px;width:100%;}

/* ═══ KPI STATS (mesma estrutura do original) ═══ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;animation:fadeUp .4s var(--ease-expo) both;transition:transform .2s var(--ease-expo),box-shadow .2s;}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--navy3));}
.stat:nth-child(2)::before{background:linear-gradient(90deg,var(--green),var(--green2));}
.stat:nth-child(3)::before{background:linear-gradient(90deg,var(--orange),var(--orange2));}
.stat:nth-child(4)::before{background:linear-gradient(90deg,var(--amber),var(--amber2));}
.stat:nth-child(5)::before{background:linear-gradient(90deg,var(--muted2),var(--muted));}
.stat strong{display:block;font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.5px;margin-bottom:2px;}
.stat span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em;}
.stat .green{color:var(--green);}
.stat .orange{color:var(--orange);}

/* ═══ TOOLBAR ═══ */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.date-input{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:7px 11px;min-height:36px;color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s;outline:none;}
.date-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,43,91,.1);}
.section-title{margin:16px 0 9px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.section-title:after{content:"";height:1px;flex:1;background:var(--line);}

/* ═══ BANK CARD GRID (mesma estrutura do original) ═══ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(174px,1fr));gap:8px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 12px 10px;min-height:84px;position:relative;transition:border-color .2s,box-shadow .2s,transform .15s;animation:fadeUp .3s var(--ease-expo) both;}
.card:hover{border-color:var(--navy3);box-shadow:var(--sh-md);transform:translateY(-1px);}
.card.done{border-color:var(--green2);border-left:3px solid var(--green);background:rgba(5,150,105,.04);opacity:.9;}
.card.inactive{opacity:.55;border-style:dashed;}
.card.sem-rel{border-color:var(--amber);background:rgba(217,119,6,.06);}
.check{position:absolute;right:10px;top:10px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;flex-shrink:0;transition:all .2s;}
.card.done .check{background:var(--green);border-color:var(--green);color:#fff;}
.card.sem-rel .check{border-color:var(--amber);color:var(--amber);}
.name{font-size:12px;font-weight:800;padding-right:26px;line-height:1.3;margin-bottom:6px;color:var(--text);}
.badges{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;}
.badge{font-size:10px;padding:2px 6px;border-radius:var(--r-f);font-weight:700;white-space:nowrap;}
.b-d{background:var(--blue-bg);color:var(--blue);}
.b-q{background:var(--amber-bg);color:var(--amber);}
.b-s{background:var(--purple-bg);color:var(--purple);}
.b-em{background:var(--green-bg);color:var(--green);}
.b-si{background:var(--bg2);color:var(--muted);}
.b-sp{background:var(--red-bg);color:var(--red);}
.status-select{width:100%;border:1px solid var(--line);border-radius:6px;padding:5px 6px;font-size:11px;font-weight:600;background:var(--surface2);color:var(--text);outline:none;transition:border-color .15s;}
.status-select:focus{border-color:var(--navy);}
.empty{text-align:center;padding:32px;color:var(--muted);font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}

/* ═══ TABLE (financeiro — mesma linguagem visual do original) ═══ */
table.fin-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);}
table.fin-table th{background:var(--bg2);padding:9px 12px;text-align:left;font-size:11px;font-weight:800;color:var(--muted);border-bottom:2px solid var(--line);white-space:nowrap;letter-spacing:.04em;}
table.fin-table td{padding:8px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;color:var(--text2);}
table.fin-table tr:hover td{background:var(--bg2);}
.fin-input{width:110px;padding:5px 7px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s;}
.fin-input:focus{border-color:var(--navy);}
.fin-input[data-field="observacao"]{width:220px;}

.count-note{color:var(--muted);font-size:11px;margin-top:10px;font-weight:600;}
.footnote{margin-top:16px;font-size:11px;color:var(--muted);font-style:italic;}
.footer{text-align:center;color:var(--muted);font-size:11px;padding:16px;border-top:1px solid var(--line2);margin-top:8px;}

/* ═══ TABS / PANELS ═══ */
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.panel-header h2{margin:0;font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.3px;}

@media(max-width:720px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}