/* ═══════════════════════════════════════════════════════
   TUKA'S 360° — Unified Design System v21
   Partilhado por todas as páginas do aplicativo
   Fonte: Plus Jakarta Sans + JetBrains Mono
═══════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES ── */
:root{
  --sidebar-w:232px;--topbar-h:58px;
  --bg:#F4F6F9;--card:#FFFFFF;--bg3:#F9FAFB;--bg4:#F2F4F7;
  --sidebar:#FFFFFF;--sidebar-border:#E8ECF0;
  --sidebar-hover:#F4F6F9;--sidebar-active-bg:#FEF9EE;--sidebar-active-border:#C9A84C;
  --topbar:#FFFFFF;--bd:#E8ECF0;--bd2:#D0D7E2;
  --t:#111827;--t2:#4B5563;--t3:#9CA3AF;--t4:#6B7280;
  /* Legacy aliases */
  --text:var(--t);--muted:var(--t4);--border:var(--bd);--surface:var(--card);
  --gold:#C9A84C;--gold2:#D4AF5A;--gold3:#E8C97A;--gold-light:#FEF9EE;--gold-dim:rgba(201,168,76,0.12);
  --green:#059669;--green-dim:rgba(5,150,105,0.10);--green-light:#ECFDF5;
  --red:#DC2626;--red-dim:rgba(220,38,38,0.10);--red-light:#FEF2F2;
  --orange:#D97706;--orange-dim:rgba(217,119,6,0.10);--orange-light:#FFFBEB;
  --blue:#2563EB;--blue-dim:rgba(37,99,235,0.10);--blue-light:#EFF6FF;
  --purple:#7C3AED;--purple-dim:rgba(124,58,237,0.10);--purple-light:#F5F3FF;
  --fd:'Plus Jakarta Sans',sans-serif;--fb:'Plus Jakarta Sans',sans-serif;
  --fm:'JetBrains Mono',monospace;
  --sh:0 1px 2px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.05);
  --sh-md:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);
  --sh-lg:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);
  --sh-sb:2px 0 8px rgba(0,0,0,0.05);
  --r:10px;--r-sm:7px;--r-xs:5px;--r-pill:50px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--fd);background:var(--bg);color:var(--t);min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D0D7E2;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── APP LAYOUT ── */
#app{display:flex;min-height:100vh}
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* ── TOPBAR ── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--topbar);border-bottom:1px solid var(--bd);
  height:var(--topbar-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 24px;gap:10px;flex-shrink:0;
}
.topbar-ham{
  display:none;cursor:pointer;padding:7px;background:none;border:none;
  color:var(--t4);border-radius:var(--r-xs);transition:background .14s;
  margin-right:4px;flex-shrink:0;
}
.topbar-ham:hover{background:var(--bg4);color:var(--t)}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-crumb{font-size:0.78rem;color:var(--t3);font-weight:500}
.topbar-sep{color:var(--bd2);font-size:0.9rem;line-height:1}
.topbar-title{font-size:0.95rem;font-weight:700;color:var(--t)}
.topbar-right{display:flex;align-items:center;gap:10px}
.tb-badge{
  background:var(--gold-light);color:var(--gold);
  border:1px solid rgba(201,168,76,0.22);border-radius:var(--r-pill);
  padding:4px 12px;font-size:0.7rem;font-weight:700;letter-spacing:0.3px;
}

/* ── CONTENT WRAP ── */
.content-wrap{flex:1;display:flex;flex-direction:column;min-height:0}

/* ── PAGE BODY / PADDING ── */
.page-body{flex:1;padding:20px 24px}
.pb{padding:18px 24px}
.ph{
  background:var(--card);border-bottom:1px solid var(--bd);
  padding:14px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.ph h2{font-family:var(--fd);font-size:0.95rem;font-weight:700;color:var(--t);display:flex;align-items:center;gap:8px}
.ph p,.ph-sub{font-size:0.76rem;color:var(--t3);margin-top:2px}
.ph-left{flex:1}
.ph-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── PAGE HEAD (h1 style) ── */
.page-head{padding:20px 24px 4px}
.page-head h1{font-family:var(--fd);font-size:1.3rem;font-weight:800;color:var(--t)}
.page-head p{font-size:0.8rem;color:var(--t3);margin-top:3px}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;font-family:var(--fd);font-size:0.78rem;font-weight:700;
  border:none;cursor:pointer;border-radius:var(--r-sm);
  transition:all 0.14s ease;user-select:none;white-space:nowrap;
  letter-spacing:0.2px;text-decoration:none;
}
.bp{background:linear-gradient(135deg,#E8C97A 0%,#C9A84C 100%);color:#111;box-shadow:0 2px 6px rgba(201,168,76,0.30)}
.bp:hover{background:linear-gradient(135deg,#f0d88a 0%,#d4af5a 100%);box-shadow:0 4px 12px rgba(201,168,76,0.40);transform:translateY(-1px)}
.bp:active{transform:translateY(0)}
.bs{background:var(--card);color:var(--t4);border:1px solid var(--bd2);box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.bs:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);background:#FFFEF8}
.bs:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 2px 6px rgba(201,168,76,0.30)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-1px)}
.btn-outline,.bs2{background:transparent;border:1px solid var(--bd2);color:var(--t)}
.btn-outline:hover,.bs2:hover{background:var(--bg4);border-color:var(--gold);color:var(--gold)}
.btn-danger,.bd2{background:var(--red-light);color:var(--red);border:1px solid rgba(220,38,38,0.18)}
.btn-danger:hover,.bd2:hover{background:#FECACA;transform:translateY(-1px)}
.bi{background:transparent;color:var(--t3);border:none;padding:5px 8px;font-size:0.88rem;border-radius:var(--r-xs)}
.bi:hover{color:var(--gold);background:var(--gold-light)}
.bsm,.btn-sm{padding:5px 11px;font-size:0.73rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ══ CARDS — .sc / .sch / .sct ══ */
.sc{
  background:var(--card);border:1px solid var(--bd);
  border-radius:var(--r);margin-bottom:16px;
  overflow:hidden;box-shadow:var(--sh);
}
.sch{
  padding:12px 18px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  gap:9px;background:var(--bg3);flex-wrap:wrap;
}
.sct{
  font-family:var(--fd);font-size:0.72rem;font-weight:700;
  letter-spacing:0.7px;text-transform:uppercase;color:var(--t4);
}
.sch h2{
  font-family:var(--fd);font-size:0.72rem;font-weight:700;
  letter-spacing:0.7px;text-transform:uppercase;color:var(--t4);margin:0;
}
.scb,.sc-body{padding:16px 18px}
.sc-note{
  padding:10px 18px;font-size:0.7rem;color:var(--t3);
  background:var(--bg3);border-top:1px solid var(--bd);line-height:1.6;
}

/* ══ KPI GRID — .kg / .kpi-row + .kc ══ */
.kg,.kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:12px;margin-bottom:18px;
}
.kc{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px 16px 14px;position:relative;overflow:hidden;
  box-shadow:var(--sh);transition:transform .16s ease,box-shadow .16s ease;
}
.kc:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kc::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--gold),var(--gold3));
}
.kc.kgr::before,.kc.kc-green::before,.kc.kg-green::before{background:var(--green)}
.kc.kr::before,.kc.kc-alert::before,.kc.kc-red::before,.kc.kg-red::before{background:var(--red)}
.kc.kb::before,.kc.kc-blue::before,.kc.kg-blue::before{background:var(--blue)}
.kc.ko::before,.kc.kc-warn::before,.kc.kc-orange::before,.kc.kg-orange::before{background:var(--orange)}
.kc.kg-purple::before{background:var(--purple)}
.kc.kc-alert,.kc.kc-warn,.kc.kc-green{border-left:none}
.ki{font-size:1.3rem;margin-bottom:6px;opacity:.75}
.kv{font-family:var(--fm);font-size:1.85rem;font-weight:600;color:var(--t);line-height:1}
.kv.sm{font-family:var(--fm);font-size:1.35rem;font-weight:600}
.kv-mono{font-family:var(--fm);font-size:1.55rem;font-weight:500;color:var(--t);line-height:1}
.kl{font-size:0.68rem;color:var(--t3);letter-spacing:0.6px;text-transform:uppercase;margin-top:5px;font-weight:600}
.ks{font-size:0.68rem;color:var(--t3);margin-top:2px}

/* ══ TABS — .tab-bar / .tab-btn / .tab-pane ══ */
.tab-bar{
  display:flex;gap:2px;
  border-bottom:2px solid var(--bd);
  overflow-x:auto;flex-shrink:0;
  background:var(--card);padding:0 20px;
}
.tab-btn{
  padding:12px 16px;background:none;border:none;cursor:pointer;
  font-family:var(--fd);font-size:0.8rem;font-weight:600;color:var(--t4);
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;
  transition:all .14s ease;border-radius:var(--r-sm) var(--r-sm) 0 0;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.tab-btn:hover{color:var(--t);background:var(--bg3)}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold);background:var(--gold-light)}
.tab-pane,.tab-content{display:none}
.tab-pane.active,.tab-content.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ══ BADGES ══ */
.badge{
  display:inline-flex;align-items:center;padding:3px 9px;
  border-radius:var(--r-pill);font-size:0.67rem;font-weight:700;letter-spacing:0.3px;
}
.badge-green,.bg-gr{background:var(--green-light);color:var(--green);border:1px solid rgba(5,150,105,0.22)}
.badge-red,.bg-r{background:var(--red-light);color:var(--red);border:1px solid rgba(220,38,38,0.22)}
.badge-orange,.bg-o{background:var(--orange-light);color:var(--orange);border:1px solid rgba(217,119,6,0.22)}
.badge-blue,.bg-b{background:var(--blue-light);color:var(--blue);border:1px solid rgba(37,99,235,0.22)}
.badge-gold,.bg-g{background:var(--gold-light);color:var(--gold);border:1px solid rgba(201,168,76,0.22)}
.badge-gray,.bg-gray{background:var(--bg4);color:var(--t4);border:1px solid var(--bd)}
.badge-purple,.bg-p{background:var(--purple-light);color:var(--purple);border:1px solid rgba(124,58,237,0.22)}
.vg{color:var(--green);font-weight:600}.vr{color:var(--red);font-weight:600}
.vo{color:var(--orange);font-weight:600}.vgold{color:var(--gold);font-weight:600}
.vb{color:var(--blue);font-weight:600}

/* ══ TABLES ══ */
.tw,.tbl-wrap{overflow-x:auto}
table,.tbl{width:100%;border-collapse:collapse;font-size:0.875rem}
thead th,.tbl th{
  background:var(--bg3);padding:9px 14px;text-align:left;
  font-family:var(--fd);font-size:0.67rem;font-weight:700;
  letter-spacing:0.7px;text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--bd);white-space:nowrap;
  position:sticky;top:0;z-index:4;
}
thead th.r,.tbl th.r{text-align:right}
thead th.c,.tbl th.c{text-align:center}
thead th[onclick],.tbl th[onclick]{cursor:pointer;user-select:none;transition:all .12s}
thead th[onclick]:hover,.tbl th[onclick]:hover{background:var(--gold-light);color:var(--gold)}
tbody tr,.tbl tr{border-bottom:1px solid var(--bd);transition:background .1s}
tbody tr:hover,.tbl tr:hover{background:#FAFBFD}
tbody tr:last-child td,.tbl tr:last-child td{border-bottom:none}
td,.tbl td{padding:10px 14px;color:var(--t);vertical-align:middle;font-size:0.875rem}
td.r,.tbl td.r{text-align:right;white-space:nowrap}
td.c,.tbl td.c{text-align:center;white-space:nowrap}
.mn,.num{font-family:var(--fm);font-size:0.78rem;white-space:nowrap}
.tnm{font-weight:600}
tfoot td{background:var(--bg3);font-weight:700;border-top:2px solid var(--bd2)}
.tbl tr.row-new td{background:var(--blue-light)}
.tbl tr.row-new:hover td{background:#DBEAFE}

/* ══ SEARCH BAR ══ */
.sr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sw{position:relative;flex:1;min-width:180px}
.sw input{padding-left:33px}
.si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:0.82rem;pointer-events:none}

/* ══ FILTER BAR ══ */
.filter-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 18px;border-bottom:1px solid var(--bd);background:var(--bg3);
}
.filter-bar label{font-family:var(--fd);font-size:0.67rem;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--t4)}

/* ══ FORMS / INPUTS ══ */
label{font-family:var(--fd);font-size:0.67rem;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;color:var(--t4)}
input,select,textarea{
  background:var(--card);border:1px solid var(--bd2);color:var(--t);
  padding:8px 12px;font-family:var(--fd);font-size:0.875rem;width:100%;
  transition:all .14s;outline:none;-webkit-appearance:none;border-radius:var(--r-sm);
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.10);background:#FFFEF8}
select option{background:var(--card);color:var(--t)}
.fn{font-size:0.7rem;color:var(--t3);margin-top:2px}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:11px}
.fg2{grid-template-columns:1fr 1fr}.fg1{grid-template-columns:1fr}
.fgp{display:flex;flex-direction:column;gap:4px}
.fgp.sp2{grid-column:span 2}.fgp.spf{grid-column:1/-1}
.fst{grid-column:1/-1;font-family:var(--fd);font-size:0.67rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding-top:3px}

/* ══ MODAL ══ */
.mo{position:fixed;inset:0;z-index:200;background:rgba(17,24,39,0.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s}
.mo.open{opacity:1;pointer-events:all}
.mob{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:translateY(-12px) scale(0.985);transition:transform .18s;box-shadow:var(--sh-lg)}
.mo.open .mob{transform:translateY(0) scale(1)}
.mol{max-width:760px}
.moh{padding:14px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border-radius:var(--r) var(--r) 0 0}
.moh h3{font-family:var(--fd);font-size:0.88rem;font-weight:700;color:var(--t)}
.moc{background:none;border:none;cursor:pointer;color:var(--t3);font-size:1.1rem;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .14s}
.moc:hover{color:var(--red);background:var(--red-light)}
.mody{padding:18px}
.mof{padding:12px 20px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:7px;background:var(--bg3)}

/* ══ TOAST ══ */
.tc{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:7px}
.toast-msg,.toast{
  background:var(--card);border-left:4px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 15px;font-size:0.8rem;min-width:215px;
  box-shadow:var(--sh-md);animation:tIn .2s ease;color:var(--t);
}
.toast-msg.err,.toast.err{border-left-color:var(--red)}
.toast-msg.wrn,.toast.wrn{border-left-color:var(--orange)}
/* Legacy center toast */
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes tIn{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ══ PROGRESS / BARS ══ */
.bt{flex:1;height:4px;background:var(--bg4);border-radius:3px;overflow:hidden}
.bf{height:100%;border-radius:3px;transition:width .4s ease}
.progress-bar{height:10px;background:var(--bg4);border-radius:99px;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;border-radius:99px;transition:width .4s ease}

/* ══ LOADING SPINNER ══ */
.spinner,.spin-el{width:24px;height:24px;border:2.5px solid var(--bd2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;margin-top:16px}
@keyframes spin{to{transform:rotate(360deg)}}
#loading,.loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999}
.loading-logo{font-size:1.5rem;font-weight:800;font-style:italic;color:var(--gold);margin-bottom:8px;font-family:var(--fd)}
.loading-sub{font-size:0.78rem;color:var(--t3)}

/* ══ EMPTY STATE ══ */
.es,.empty{text-align:center;padding:52px 20px;color:var(--t3)}
.es .ei,.empty-icon{font-size:2.8rem;opacity:.2;margin-bottom:12px}

/* ══ ALERT ITEMS ══ */
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert-item{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--bd)}
.alert-item.danger{border-left:4px solid var(--red);background:var(--red-light)}
.alert-item.warning{border-left:4px solid var(--orange);background:var(--orange-light)}
.alert-item.info{border-left:4px solid var(--blue);background:var(--blue-light)}
.alert-item.success{border-left:4px solid var(--green);background:var(--green-light)}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.alert-body{flex:1}
.alert-body strong{font-size:0.82rem;display:block;font-weight:700;color:var(--t)}
.alert-body span{font-size:0.75rem;color:var(--t4)}

/* ══ NOTE BOXES ══ */
.nt{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--bd);margin-bottom:10px}
.ni{font-size:1rem;flex-shrink:0;margin-top:1px}
.ninfo{background:var(--blue-light);border-color:rgba(37,99,235,0.2)}
.nwarn{background:var(--orange-light);border-color:rgba(217,119,6,0.2)}
.nerr{background:var(--red-light);border-color:rgba(220,38,38,0.2)}
.nok{background:var(--green-light);border-color:rgba(5,150,105,0.2)}

/* ══ GRID LAYOUTS ══ */
.g2,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px}

/* ══ DRE (Financial) ══ */
.dre-box{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.dre-head{background:var(--bg3);padding:11px 15px;font-family:var(--fd);font-size:0.72rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--t4);border-bottom:1px solid var(--bd)}
.dre-body{padding:11px 15px}
.dre-row{display:flex;justify-content:space-between;align-items:center;padding:5px 7px;font-size:0.82rem;border-bottom:1px solid var(--bd);border-radius:var(--r-xs);transition:background .1s}
.dre-row:hover{background:var(--bg3)}.dre-row:last-child{border-bottom:none}
.dre-row.subtotal{border-top:1px solid var(--bd2);margin-top:4px;padding-top:8px;font-weight:700}
.dre-row.total{border-top:2px solid var(--gold);margin-top:6px;padding-top:10px;font-family:var(--fd);font-size:0.9rem;font-weight:800;color:var(--gold)}
.dre-row.grupo{background:var(--bg4);padding:4px 7px;margin:5px -7px;font-family:var(--fd);font-size:0.64rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);border-bottom:none;font-weight:700}
.dre-pct{font-family:var(--fm);font-size:0.76rem;font-weight:500}
.pct-bar-wrap{display:flex;align-items:center;gap:7px;margin-top:2px}
.pct-bar-track{flex:1;height:4px;background:var(--bg4);border-radius:3px;overflow:hidden}
.pct-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}

/* ══ RESPONSIVE ══ */
@media(max-width:1100px){
  .kg,.kpi-row{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:900px){
  .g2,.grid2,.dg{grid-template-columns:1fr}
}
@media(max-width:768px){
  .topbar-ham{display:flex!important}
  .page-body{padding:14px}
  .pb{padding:14px}
  .ph{padding:12px 14px}
  .page-head{padding:14px 14px 4px}
  .tab-bar{padding:0 8px}
  .tab-btn{padding:10px 10px;font-size:0.72rem}
  .kg,.kpi-row{grid-template-columns:repeat(2,1fr)}
  .scb,.sc-body{padding:12px 14px}
  table{font-size:0.8rem}
  td,thead th,.tbl td,.tbl th{padding:8px 10px}
  .hide-mob{display:none!important}
}
@media print{
  .t360-sidebar,.topbar,.tab-bar,.btn{display:none!important}
  #main{margin-left:0!important}
  .sc{box-shadow:none;border:1px solid #ddd}
}