/* ══════════════════════════════════════════════════════════════════════════
   Caixa — Do Zero à Nota Máxima
   Manrope · base tinta-navy · superfícies de vidro · ouro como acento
   ══════════════════════════════════════════════════════════════════════════
   Entrada é verde, saída é coral, e o ouro fica reservado para o que é
   decisão sua — botões, item ativo, saldo. Se o ouro pintasse tudo, ele
   pararia de significar alguma coisa.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#060911;
  --bg-alto:#0a0f1c;

  --vidro:rgba(255,255,255,.045);
  --vidro-2:rgba(255,255,255,.075);
  --vidro-3:rgba(255,255,255,.11);
  --borda:rgba(190,210,255,.11);
  --borda-2:rgba(190,210,255,.2);
  --brilho:inset 0 1px 0 rgba(255,255,255,.08);

  --txt:#e9edf7;
  --txt-2:rgba(233,237,247,.62);
  --txt-3:rgba(233,237,247,.36);

  --ouro:#ffc75a; --ouro-2:#ffdb94; --ouro-luz:rgba(255,199,90,.13);
  --entra:#4ed69a; --entra-luz:rgba(78,214,154,.13);
  --sai:#ff7a6b;   --sai-luz:rgba(255,122,107,.13);
  --aviso:#ffc861; --aviso-luz:rgba(255,200,97,.13);
  --azul:#7aa2f7;

  --r:20px; --r-2:14px; --r-3:10px;
  --blur:blur(22px) saturate(150%);
  --sombra:0 10px 34px rgba(0,0,0,.5);
  --sombra-alta:0 24px 64px rgba(0,0,0,.62);
  --mola:cubic-bezier(.22,1,.36,1);

  --fonte:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--fonte);
  background:var(--bg);
  color:var(--txt);
  font-size:15px; line-height:1.55; font-weight:450;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; position:relative; overflow-x:hidden;
}

/* Aurora — dá profundidade pro vidro ter o que borrar */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(780px 540px at 10% -10%, rgba(122,162,247,.20), transparent 60%),
    radial-gradient(700px 500px at 94% 4%,  rgba(255,199,90,.11),  transparent 62%),
    radial-gradient(900px 640px at 66% 106%,rgba(78,214,154,.10),  transparent 60%),
    radial-gradient(560px 440px at 2% 90%,  rgba(10,15,28,.9),     transparent 65%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--ouro);text-decoration:none;transition:color .2s}
a:hover{color:var(--ouro-2)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(255,199,90,.28);color:#fff}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--vidro-2);padding:1px 6px;border-radius:6px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(190,210,255,.14);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(190,210,255,.26);background-clip:content-box}

/* ══ Vidro — o átomo do sistema ════════════════════════════════════════════ */
.vidro,.card,.kpi,.sidebar,.modal-cx,.login-cx,.toast,.alerta{
  background:linear-gradient(158deg,var(--vidro-2),var(--vidro));
  border:1px solid var(--borda);
  box-shadow:var(--sombra),var(--brilho);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .vidro,.card,.kpi,.sidebar,.modal-cx,.login-cx,.toast,.alerta{
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  }
}

/* ══ Layout ════════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh}

.sidebar{
  width:250px;flex-shrink:0;
  margin:14px 0 14px 14px;padding:20px 13px;
  border-radius:var(--r);
  display:flex;flex-direction:column;gap:3px;
  position:sticky;top:14px;height:calc(100vh - 28px);overflow-y:auto;
}
.marca{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-size:18px}
.marca b{font-weight:800;letter-spacing:-.02em}
.marca small{display:block;font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:.04em;text-transform:uppercase}
.nav-sep{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);padding:16px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--r-3);
  color:var(--txt-2);font-weight:550;font-size:14.5px;
  transition:background .18s,color .18s;
}
.nav-item:hover{background:var(--vidro-2);color:var(--txt)}
.nav-item.ativo{background:var(--ouro-luz);color:var(--ouro-2);box-shadow:inset 0 0 0 1px rgba(255,199,90,.22)}
.nav-item .ic{width:18px;text-align:center;opacity:.85;font-size:15px}
.nav-item .badge{margin-left:auto;background:var(--sai);color:#2a0d09;font-size:11px;font-weight:800;padding:1px 7px;border-radius:20px}
.sidebar-rodape{margin-top:auto;padding:14px 12px 2px;border-top:1px solid var(--borda);font-size:13px;color:var(--txt-2)}

.conteudo{flex:1;min-width:0;padding:26px 30px 60px}

/* ══ Cabeçalho de página ═══════════════════════════════════════════════════ */
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.topo h1{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.topo .sub{color:var(--txt-2);font-size:14px;margin-top:3px}
.topo-acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ══ KPIs ══════════════════════════════════════════════════════════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:22px}
.kpi{padding:18px 19px;border-radius:var(--r-2);position:relative;overflow:hidden}
.kpi .rot{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.kpi .num{font-size:27px;font-weight:800;letter-spacing:-.035em;margin-top:7px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .pe{font-size:12.5px;color:var(--txt-2);margin-top:5px}
.kpi.entra .num{color:var(--entra)} .kpi.sai .num{color:var(--sai)}
.kpi.ouro .num{color:var(--ouro)}
.kpi.destaque{box-shadow:var(--sombra),var(--brilho),inset 0 0 0 1px rgba(255,199,90,.2)}

/* ══ Cards ═════════════════════════════════════════════════════════════════ */
.card{padding:20px 21px;border-radius:var(--r-2);margin-bottom:16px}
.card > h2,.titulo-secao{font-size:15px;font-weight:750;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .apoio{font-size:12.5px;color:var(--txt-3);font-weight:500}
.grade-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.grade-2{grid-template-columns:1fr}}

/* ══ Tabela ════════════════════════════════════════════════════════════════ */
.tabela-cx{overflow-x:auto;margin:0 -21px -20px;padding:0 6px 6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3);padding:9px 15px;white-space:nowrap;border-bottom:1px solid var(--borda);
}
td{padding:11px 15px;border-bottom:1px solid rgba(190,210,255,.06);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--vidro)}
.num-col{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650}
.v-entra{color:var(--entra)} .v-sai{color:var(--sai)}
.td-forte{font-weight:650}
.td-fraco{color:var(--txt-2)}
.linha-total td{border-top:1px solid var(--borda-2);font-weight:800;background:var(--vidro)}

/* ══ Etiquetas ═════════════════════════════════════════════════════════════ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:650;padding:3px 10px;border-radius:20px;
  background:var(--vidro-2);color:var(--txt-2);white-space:nowrap;
}
.tag .ponto{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.tag.vazia{color:var(--aviso);background:var(--aviso-luz)}
.tag.ok{color:var(--entra);background:var(--entra-luz)}
.tag.perigo{color:var(--sai);background:var(--sai-luz)}

/* ══ Botões ════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-3);border:1px solid var(--borda-2);
  background:var(--vidro-2);color:var(--txt);
  font-size:14px;font-weight:650;cursor:pointer;
  transition:transform .16s var(--mola),background .18s,border-color .18s;
}
.btn:hover{background:var(--vidro-3);border-color:rgba(190,210,255,.32)}
.btn:active{transform:scale(.975)}
.btn.primario{background:linear-gradient(160deg,var(--ouro),#f0a92e);color:#231703;border-color:transparent;font-weight:750}
.btn.primario:hover{filter:brightness(1.07)}
.btn.perigo{color:var(--sai);border-color:rgba(255,122,107,.3);background:var(--sai-luz)}
.btn.pequeno{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn.largo{width:100%;margin-top:6px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ══ Formulários ═══════════════════════════════════════════════════════════ */
.form{display:flex;flex-direction:column;gap:13px}
.form label,.campo{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:650;color:var(--txt-2)}
input,select,textarea{
  background:rgba(0,0,0,.24);border:1px solid var(--borda);
  border-radius:var(--r-3);padding:10px 12px;
  font-size:14.5px;font-weight:500;color:var(--txt);
  transition:border-color .18s,box-shadow .18s;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(255,199,90,.45);box-shadow:0 0 0 3px rgba(255,199,90,.11);
}
select option{background:#0a0f1c}
.linha-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filtros .campo{min-width:135px}
.filtros input,.filtros select{padding:8px 11px;font-size:13.5px}

/* ══ Alertas ═══════════════════════════════════════════════════════════════ */
.alerta{padding:12px 15px;border-radius:var(--r-3);font-size:13.5px;margin-bottom:14px;line-height:1.5}
.alerta.ok{color:var(--entra);box-shadow:inset 0 0 0 1px rgba(78,214,154,.25)}
.alerta.aviso{color:var(--aviso);box-shadow:inset 0 0 0 1px rgba(255,200,97,.25)}
.alerta.perigo{color:var(--sai);box-shadow:inset 0 0 0 1px rgba(255,122,107,.25)}
.alerta b{font-weight:750}

/* ══ Gráfico de barras (fluxo mensal) ══════════════════════════════════════ */
.gfx{display:flex;align-items:flex-end;gap:min(2.2%,16px);height:210px;padding:14px 2px 0;overflow-x:auto}
.gfx-mes{flex:1;min-width:38px;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.gfx-barras{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.gfx-b{width:44%;max-width:20px;border-radius:5px 5px 2px 2px;min-height:2px;transition:opacity .18s;position:relative}
.gfx-b.e{background:linear-gradient(180deg,var(--entra),rgba(78,214,154,.35))}
.gfx-b.s{background:linear-gradient(180deg,var(--sai),rgba(255,122,107,.35))}
.gfx-mes:hover .gfx-b{opacity:.85}
.gfx-rot{font-size:11px;font-weight:650;color:var(--txt-3);white-space:nowrap}
.gfx-mes.atual .gfx-rot{color:var(--ouro)}
.legenda{display:flex;gap:16px;font-size:12.5px;color:var(--txt-2);margin-top:12px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

/* ══ Barra proporcional (top categorias) ═══════════════════════════════════ */
.barras{display:flex;flex-direction:column;gap:11px}
.barra-item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13.5px}
.barra-nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--txt-2)}
.barra-trilho{grid-column:1/-1;height:6px;border-radius:20px;background:var(--vidro-2);overflow:hidden}
.barra-preench{height:100%;border-radius:20px;background:var(--ouro)}

/* ══ Modal ═════════════════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,5,10,.7)}
.modal.aberto{display:flex}
.modal-cx{width:100%;max-width:520px;border-radius:var(--r);padding:24px;max-height:90vh;overflow-y:auto}
.modal-cx h2{font-size:18px;font-weight:780;margin-bottom:16px;letter-spacing:-.02em}
.modal-acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:6px}

/* ══ Login / setup ═════════════════════════════════════════════════════════ */
.entrada-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-cx{width:100%;max-width:390px;border-radius:var(--r);padding:32px}
.marca-grande{text-align:center;margin-bottom:24px}
.marca-grande b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em}
.marca-grande span{display:block;font-size:12px;font-weight:650;color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.lista-passos{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;font-size:13.5px;color:var(--txt-2)}
.lista-passos li{padding-left:22px;position:relative}
.lista-passos li::before{content:'✓';position:absolute;left:0;color:var(--entra);font-weight:800}

/* ══ Diversos ══════════════════════════════════════════════════════════════ */
.pequeno{font-size:12.5px;color:var(--txt-3)}
.vazio{text-align:center;padding:46px 20px;color:var(--txt-3);font-size:14px}
.vazio b{display:block;font-size:16px;color:var(--txt-2);margin-bottom:6px;font-weight:700}
.paginacao{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:18px;font-size:13.5px;color:var(--txt-2)}
.select-linha{background:transparent;border:1px solid transparent;padding:4px 8px;font-size:13px;border-radius:8px;width:auto;min-width:150px;cursor:pointer}
.select-linha:hover{border-color:var(--borda)}
.toast{position:fixed;bottom:22px;right:22px;z-index:80;padding:13px 18px;border-radius:var(--r-2);font-size:14px;font-weight:600;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s var(--mola);pointer-events:none}
.toast.ver{opacity:1;transform:none}
.toast.ok{color:var(--entra)} .toast.erro{color:var(--sai)}

@media(max-width:860px){
  .app{flex-direction:column}
  .sidebar{width:auto;height:auto;position:static;margin:12px 12px 0;flex-direction:row;flex-wrap:wrap;gap:6px;padding:14px}
  .sidebar .marca{width:100%;padding-bottom:10px}
  .nav-sep{display:none}
  .nav-item{flex:0 0 auto}
  .sidebar-rodape{width:100%;margin-top:8px}
  .conteudo{padding:18px 14px 50px}
  .topo h1{font-size:22px}
}