/* ══════════════════════════════════════════════════════════════════════════
   Finanças Pessoais — sistema visual
   Manrope · base neutra profunda · superfícies de vidro · verde como luz
   ══════════════════════════════════════════════════════════════════════════
   A paleta original é a mesma, mas com os PAPÉIS reestruturados: antes o verde
   pintava todas as superfícies e o resultado ficava pesado e monótono. Aqui o
   fundo é neutro quase preto, os painéis são vidro translúcido, e o verde
   aparece só onde precisa puxar o olho — números, ações, estados.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Paleta base */
  --g900:#132a13; --g700:#31572c; --g600:#4f772d; --g400:#90a955; --g200:#ecf39e;

  /* Fundo neutro com fundo de verde, não verde chapado */
  --bg:#070a07;
  --bg-alto:#0b100b;

  /* Vidro: branco translúcido sobre o fundo, não uma cor sólida */
  --vidro:rgba(255,255,255,.045);
  --vidro-2:rgba(255,255,255,.07);
  --vidro-3:rgba(255,255,255,.10);
  --borda:rgba(236,243,158,.10);
  --borda-2:rgba(236,243,158,.18);
  --brilho:inset 0 1px 0 rgba(255,255,255,.08);

  /* Texto */
  --txt:#eef4e3;
  --txt-2:rgba(238,244,227,.62);
  --txt-3:rgba(238,244,227,.36);

  /* Estados */
  --perigo:#ff6f61; --perigo-luz:rgba(255,111,97,.13);
  --aviso:#ffc861;  --aviso-luz:rgba(255,200,97,.13);
  --ok:var(--g400);  --ok-luz:rgba(144,169,85,.14);

  --r:20px; --r-2:14px; --r-3:10px;
  --blur:blur(22px) saturate(150%);
  --sombra:0 10px 34px rgba(0,0,0,.45);
  --sombra-alta:0 24px 64px rgba(0,0,0,.6);
  --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: manchas de luz fixas atrás de tudo ───────────────────────────
   É o que dá profundidade pro vidro ter o que borrar. Sem isso, backdrop-filter
   não tem efeito nenhum — vidro sobre cor chapada é só uma cor mais clara.    */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(760px 520px at 12% -8%,  rgba(79,119,45,.30), transparent 60%),
    radial-gradient(680px 480px at 92% 6%,   rgba(49,87,44,.34),  transparent 62%),
    radial-gradient(900px 640px at 68% 104%, rgba(144,169,85,.14),transparent 60%),
    radial-gradient(520px 420px at 4% 88%,   rgba(19,42,19,.55),  transparent 65%);
  pointer-events:none;
}
/* Textura sutil pra tirar o aspecto de degradê digital puro */
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; opacity:.028; 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(--g400);text-decoration:none;transition:color .2s}
a:hover{color:var(--g200)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(144,169,85,.3);color:#fff}

/* Barra de rolagem discreta */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(236,243,158,.13);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(236,243,158,.24);background-clip:content-box}

/* ══ Superfície de 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;gap:0}

.sidebar{
  width:256px;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;
}
.sidebar .marca{padding:6px 10px 22px;display:flex;align-items:center;gap:11px}
.sidebar .marca b{font-size:16.5px;font-weight:800;letter-spacing:-.03em}
.sidebar .marca span{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(145deg,var(--g600),var(--g900));
  border:1px solid var(--borda-2);
  box-shadow:0 4px 14px rgba(79,119,45,.4),inset 0 1px 0 rgba(255,255,255,.18);
}

.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9.5px 12px;border-radius:var(--r-3);
  color:var(--txt-2);font-size:14.5px;font-weight:550;
  border:1px solid transparent;
  transition:all .22s var(--mola);
  position:relative;
}
.nav-item:hover{background:var(--vidro-2);color:var(--txt);transform:translateX(2px)}
.nav-item.ativo{
  color:#fff;font-weight:700;
  background:linear-gradient(100deg,rgba(79,119,45,.55),rgba(49,87,44,.25));
  border-color:var(--borda-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
/* Marcador luminoso do item ativo */
.nav-item.ativo::before{
  content:'';position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;
  background:var(--g200);box-shadow:0 0 12px var(--g400);
}
.nav-item .ic{width:19px;text-align:center;font-size:15px;opacity:.9}
.nav-item.ativo .ic{opacity:1}
.nav-item .badge{
  margin-left:auto;font-size:11px;font-weight:800;padding:1px 7px;border-radius:20px;
  background:var(--perigo);color:#2a0906;
  box-shadow:0 0 14px rgba(255,111,97,.5);
}
.nav-sep{
  margin:16px 12px 7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);font-weight:800;
}
.sidebar-rodape{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--borda);
  font-size:12.5px;color:var(--txt-3);
}

.conteudo{flex:1;min-width:0;padding:30px 32px 70px;max-width:1460px}

.topo{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.topo h1{font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.15}
.topo p{color:var(--txt-2);font-size:14px;margin-top:5px}
.topo-acoes{display:flex;gap:9px;flex-wrap:wrap}

/* ══ Cartões ═══════════════════════════════════════════════════════════════ */
.card{border-radius:var(--r);padding:22px}
.card+.card{margin-top:18px}
.card h2{font-size:16.5px;font-weight:750;letter-spacing:-.02em}
.card .sub{color:var(--txt-2);font-size:13px;margin-top:3px;margin-bottom:18px}
.card-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.card-cabeca h2{margin:0}
.card-cabeca .sub{margin-bottom:0}

.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* ══ KPIs ══════════════════════════════════════════════════════════════════ */
.kpi{border-radius:var(--r-2);padding:18px 19px;position:relative;overflow:hidden;transition:transform .3s var(--mola),box-shadow .3s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta),var(--brilho)}
.kpi .rot{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--txt-3);font-weight:800}
.kpi .val{
  font-size:28px;font-weight:800;letter-spacing:-.045em;margin-top:8px;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.kpi .nota{font-size:12.5px;color:var(--txt-2);margin-top:6px}

/* Halo de cor no canto, em vez de pintar o cartão inteiro */
.kpi::after{
  content:'';position:absolute;top:-42px;right:-42px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(144,169,85,.3),transparent 68%);
  pointer-events:none;opacity:0;transition:opacity .35s;
}
.kpi.destaque::after{opacity:1}
.kpi.destaque .val{color:var(--g200)}
.kpi.perigo{border-color:rgba(255,111,97,.34);background:linear-gradient(158deg,var(--perigo-luz),var(--vidro))}
.kpi.perigo::after{background:radial-gradient(circle,rgba(255,111,97,.32),transparent 68%);opacity:1}
.kpi.perigo .val{color:var(--perigo)}

.pos{color:var(--g400)} .neg{color:var(--perigo)}

/* ══ Tabela ════════════════════════════════════════════════════════════════ */
.tabela-wrap{overflow-x:auto;margin:0 -22px -22px;padding:0 22px 6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--txt-3);font-weight:800;padding:10px 12px;white-space:nowrap;
  border-bottom:1px solid var(--borda);
}
td{padding:12px;border-bottom:1px solid rgba(236,243,158,.06);vertical-align:middle}
tbody tr{transition:background .2s}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--vidro-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.linha-atrasada{background:rgba(255,111,97,.055)}
.linha-atrasada:hover{background:rgba(255,111,97,.1)}
.linha-paga{opacity:.5}
.linha-paga .desc{text-decoration:line-through}
.desc{font-weight:650}

/* ══ Selos ═════════════════════════════════════════════════════════════════ */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:750;padding:3.5px 10px;border-radius:20px;white-space:nowrap;
  border:1px solid transparent;letter-spacing:-.01em;
}
.selo.pendente{background:var(--vidro-2);color:var(--txt-2);border-color:var(--borda)}
.selo.pago{background:var(--ok-luz);color:var(--g400);border-color:rgba(144,169,85,.3)}
.selo.atrasado{background:var(--perigo-luz);color:var(--perigo);border-color:rgba(255,111,97,.3)}
.selo.hoje{background:var(--aviso-luz);color:var(--aviso);border-color:rgba(255,200,97,.3)}
.selo.fixa{background:rgba(79,119,45,.2);color:var(--g400);border-color:rgba(79,119,45,.35)}
.selo.parcelada{background:rgba(144,169,85,.14);color:var(--g200);border-color:rgba(144,169,85,.26)}
.selo.variavel{background:var(--vidro-2);color:var(--txt-2);border-color:var(--borda)}
.ponto{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;margin-right:2px}

/* ══ Botões ════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9.5px 17px;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;white-space:nowrap;
  transition:all .22s var(--mola);
  box-shadow:var(--brilho);
}
.btn:hover{background:var(--vidro-3);color:var(--txt);transform:translateY(-1.5px);box-shadow:0 8px 20px rgba(0,0,0,.35),var(--brilho)}
.btn:active{transform:translateY(0)}
.btn-primario{
  background:linear-gradient(145deg,var(--g600),var(--g700));
  border-color:rgba(144,169,85,.4);color:#fff;
  box-shadow:0 5px 18px rgba(79,119,45,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primario:hover{
  background:linear-gradient(145deg,var(--g400),var(--g600));color:#0d1a0b;
  box-shadow:0 10px 26px rgba(144,169,85,.45),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-perigo{background:var(--perigo-luz);border-color:rgba(255,111,97,.4);color:var(--perigo)}
.btn-perigo:hover{background:var(--perigo);color:#2a0906;border-color:var(--perigo)}
.btn-sm{padding:5.5px 12px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn-icone{padding:6px 9px;background:transparent;border-color:transparent;color:var(--txt-3);box-shadow:none}
.btn-icone:hover{background:var(--vidro-3);color:var(--txt);border-color:var(--borda)}

/* ══ Formulários ═══════════════════════════════════════════════════════════ */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12px;font-weight:750;color:var(--txt-2);margin-bottom:7px;letter-spacing:.01em}
.campo input,.campo select,.campo textarea,
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],select,textarea{
  width:100%;padding:10.5px 13px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--borda);
  border-radius:var(--r-3);
  font-size:14.5px;font-weight:500;color:var(--txt);
  transition:all .22s;
}
.campo input::placeholder,textarea::placeholder{color:var(--txt-3)}
.campo input:focus,.campo select:focus,.campo textarea:focus,select:focus,input:focus{
  outline:0;border-color:rgba(144,169,85,.55);background:rgba(0,0,0,.42);
  box-shadow:0 0 0 3.5px rgba(144,169,85,.15);
}
.campo .dica{font-size:11.5px;color:var(--txt-3);margin-top:6px;line-height:1.45}
.campo-linha{display:grid;gap:13px}
.campo-check{display:flex;align-items:center;gap:10px;font-size:14px}
.campo-check input{width:auto;accent-color:var(--g600)}
input[type=color]{padding:4px;height:44px;cursor:pointer}

/* ══ Progresso ═════════════════════════════════════════════════════════════ */
.barra{height:7px;background:rgba(0,0,0,.4);border-radius:20px;overflow:hidden;margin-top:10px;border:1px solid var(--borda)}
.barra i{
  display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--g600),var(--g400));
  box-shadow:0 0 14px rgba(144,169,85,.55);
  animation:preencher 1.1s var(--mola) both;
}
.barra.cheia i{background:linear-gradient(90deg,var(--g400),var(--g200))}
@keyframes preencher{from{width:0!important}}

/* ══ Alertas ═══════════════════════════════════════════════════════════════ */
.alerta{
  display:flex;gap:14px;padding:15px 17px;border-radius:var(--r-2);margin-bottom:12px;
  animation:surgir .5s var(--mola) both;
}
.alerta .ic{font-size:18px;line-height:1.35;flex-shrink:0}
.alerta b{display:block;font-size:14.5px;font-weight:750;margin-bottom:3px}
.alerta p{font-size:13.5px;color:var(--txt-2);line-height:1.5}
.alerta.critico{border-color:rgba(255,111,97,.35);background:linear-gradient(158deg,var(--perigo-luz),var(--vidro))}
.alerta.atencao{border-color:rgba(255,200,97,.32);background:linear-gradient(158deg,var(--aviso-luz),var(--vidro))}
.alerta .fechar{
  margin-left:auto;background:none;border:0;color:var(--txt-3);cursor:pointer;
  font-size:19px;line-height:1;align-self:flex-start;padding:2px 5px;border-radius:7px;transition:all .2s;
}
.alerta .fechar:hover{background:var(--vidro-3);color:var(--txt)}

/* ══ Gráfico de provisionamento ════════════════════════════════════════════ */
.prov-graf{display:flex;align-items:flex-end;gap:7px;height:200px;padding:16px 0 0}
.prov-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.prov-barras{width:100%;display:flex;gap:3px;align-items:flex-end;height:100%;justify-content:center}
.prov-barra{
  flex:1;max-width:18px;border-radius:5px 5px 2px 2px;min-height:3px;
  transform-origin:bottom;
  animation:crescer .8s var(--mola) both;
  transition:filter .25s;
}
.prov-barra.entrada{
  background:linear-gradient(180deg,var(--g200),var(--g400));
  box-shadow:0 0 16px rgba(144,169,85,.4);
}
.prov-barra.saida{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.09));border:1px solid var(--borda)}
.prov-barra.saida.estoura{
  background:linear-gradient(180deg,var(--perigo),rgba(255,111,97,.45));
  border-color:transparent;box-shadow:0 0 16px rgba(255,111,97,.45);
}
.prov-col:hover .prov-barra{filter:brightness(1.3)}
.prov-col .rot{font-size:10px;color:var(--txt-3);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
@keyframes crescer{from{transform:scaleY(0);opacity:0}}
/* Entrada em cascata da esquerda pra direita */
.prov-col:nth-child(1) .prov-barra{animation-delay:.02s}
.prov-col:nth-child(2) .prov-barra{animation-delay:.06s}
.prov-col:nth-child(3) .prov-barra{animation-delay:.1s}
.prov-col:nth-child(4) .prov-barra{animation-delay:.14s}
.prov-col:nth-child(5) .prov-barra{animation-delay:.18s}
.prov-col:nth-child(6) .prov-barra{animation-delay:.22s}
.prov-col:nth-child(7) .prov-barra{animation-delay:.26s}
.prov-col:nth-child(8) .prov-barra{animation-delay:.3s}
.prov-col:nth-child(9) .prov-barra{animation-delay:.34s}
.prov-col:nth-child(10) .prov-barra{animation-delay:.38s}
.prov-col:nth-child(11) .prov-barra{animation-delay:.42s}
.prov-col:nth-child(12) .prov-barra{animation-delay:.46s}

.legenda{display:flex;gap:18px;font-size:12.5px;color:var(--txt-2);margin-top:16px;flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:7px}
.legenda i{width:11px;height:11px;border-radius:3.5px;display:block}

/* ══ Rosca ═════════════════════════════════════════════════════════════════ */
.rosca{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rosca svg{flex-shrink:0;filter:drop-shadow(0 5px 18px rgba(0,0,0,.45))}
.rosca svg circle{transition:stroke-width .25s}
.rosca-lista{flex:1;min-width:168px;display:flex;flex-direction:column;gap:10px}
.rosca-lista div{display:flex;align-items:center;gap:9px;font-size:13.5px}
.rosca-lista .v{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--txt-2);font-weight:600}

/* ══ Diversos ══════════════════════════════════════════════════════════════ */
.vazio{text-align:center;padding:46px 20px;color:var(--txt-3)}
.vazio .ic{font-size:32px;opacity:.35;display:block;margin-bottom:12px}
.vazio p{font-size:14px;margin-bottom:17px;color:var(--txt-2)}

.abas{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;padding:4px;border-radius:var(--r-3);background:rgba(0,0,0,.28);border:1px solid var(--borda);width:fit-content;max-width:100%}
.abas a{
  padding:8px 16px;font-size:13.5px;font-weight:650;color:var(--txt-2);
  white-space:nowrap;border-radius:8px;transition:all .22s var(--mola);
}
.abas a:hover{color:var(--txt);background:var(--vidro-2)}
.abas a.ativo{
  color:#fff;background:linear-gradient(145deg,var(--g600),var(--g700));
  box-shadow:0 3px 12px rgba(79,119,45,.4),inset 0 1px 0 rgba(255,255,255,.16);
}

.pill{
  display:inline-block;font-size:10.5px;padding:2.5px 8px;border-radius:20px;
  background:var(--vidro-2);color:var(--txt-2);font-weight:750;
  border:1px solid var(--borda);letter-spacing:.02em;
}
.mono{font-variant-numeric:tabular-nums}
.tenue{color:var(--txt-3)} .fraco{color:var(--txt-2)}
.pequeno{font-size:12.5px}
.mt{margin-top:18px} .mb{margin-bottom:18px}
.flex{display:flex;align-items:center;gap:10px}
.entre{justify-content:space-between}
.direita{margin-left:auto}
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;border:1px solid var(--borda)}

/* ══ Modal ═════════════════════════════════════════════════════════════════ */
/* Fundo travado enquanto há modal aberto (classe posta pelo App.abrirModal) */
body.travado{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.modal{
  position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;overflow-y:auto;
  background:rgba(3,6,3,.62);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.modal.aberto{display:grid;animation:aparecer .25s ease both}
.modal-cx{
  border-radius:var(--r);width:100%;max-width:520px;margin:auto;
  box-shadow:var(--sombra-alta),var(--brilho);
  animation:subir .4s var(--mola) both;
}
.modal-cabeca{padding:20px 23px;border-bottom:1px solid var(--borda);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-cabeca h3{font-size:17px;font-weight:750;letter-spacing:-.02em}
.modal-x{background:none;border:0;color:var(--txt-3);font-size:22px;line-height:1;cursor:pointer;padding:3px 8px;border-radius:8px;transition:all .2s}
.modal-x:hover{background:var(--vidro-3);color:var(--txt)}
.modal-corpo{padding:23px}
.modal-pe{padding:16px 23px;border-top:1px solid var(--borda);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
@keyframes aparecer{from{opacity:0}}
@keyframes subir{from{opacity:0;transform:translateY(20px) scale(.97)}}

/* Resumo da conta dentro do modal de pagamento */
.pg-resumo{
  padding:16px 18px;border-radius:var(--r-2);
  background:linear-gradient(150deg,rgba(79,119,45,.2),rgba(0,0,0,.25));
  border:1px solid var(--borda-2);
}
.pg-desc{font-size:16px;font-weight:750;letter-spacing:-.02em}
.pg-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.pg-meta span{font-size:12.5px;color:var(--txt-2)}
.pg-meta b{font-size:21px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--g200)}

/* ══ Toast ═════════════════════════════════════════════════════════════════ */
#toasts{position:fixed;bottom:22px;right:22px;z-index:90;display:flex;flex-direction:column;gap:10px}
.toast{
  padding:13px 18px;border-radius:var(--r-2);font-size:14px;font-weight:600;
  border-left:2.5px solid var(--g400);max-width:370px;
  animation:entrar .35s var(--mola) both;
  box-shadow:var(--sombra-alta),var(--brilho);
}
.toast.erro{border-left-color:var(--perigo)}
@keyframes entrar{from{opacity:0;transform:translateX(26px) scale(.96)}}

/* ══ Login ═════════════════════════════════════════════════════════════════ */
.login-tela{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-cx{
  width:100%;max-width:400px;border-radius:24px;padding:36px;
  animation:subir .55s var(--mola) both;
}
.login-cx .marca{text-align:center;margin-bottom:28px}
.login-cx .marca span{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:26px;margin:0 auto 15px;
  background:linear-gradient(145deg,var(--g600),var(--g900));
  border:1px solid var(--borda-2);
  box-shadow:0 8px 26px rgba(79,119,45,.5),inset 0 1px 0 rgba(255,255,255,.2);
}
.login-cx h1{font-size:23px;font-weight:800;letter-spacing:-.035em}
.login-cx .marca p{color:var(--txt-2);font-size:13.5px;margin-top:5px}
.erro-cx{
  background:var(--perigo-luz);border:1px solid rgba(255,111,97,.4);color:var(--perigo);
  padding:12px 15px;border-radius:var(--r-3);font-size:13.5px;margin-bottom:18px;font-weight:600;
}

/* ══ Entrada em cascata ════════════════════════════════════════════════════ */
@keyframes surgir{from{opacity:0;transform:translateY(14px)}}
.card,.kpi{animation:surgir .55s var(--mola) both}
.grade>*:nth-child(1){animation-delay:.03s}
.grade>*:nth-child(2){animation-delay:.09s}
.grade>*:nth-child(3){animation-delay:.15s}
.grade>*:nth-child(4){animation-delay:.21s}

/* ══ Responsivo ════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .app{flex-direction:column}
  .sidebar{
    width:auto;height:auto;position:sticky;top:8px;z-index:40;
    margin:8px 8px 0;padding:9px;
    flex-direction:row;overflow-x:auto;gap:4px;align-items:center;border-radius:var(--r-2);
  }
  .sidebar .marca{padding:0 10px 0 5px}
  .sidebar .marca b{display:none}
  .nav-sep,.sidebar-rodape{display:none}
  .nav-item{padding:8px 11px;white-space:nowrap}
  .nav-item:hover{transform:none}
  .nav-item.ativo::before{display:none}
  .nav-item span:not(.ic):not(.badge){display:none}
  .conteudo{padding:20px 14px 60px}
  .g2,.g4{grid-template-columns:minmax(0,1fr)}
  .topo h1{font-size:23px}
  .card{padding:18px;border-radius:var(--r-2)}
  .tabela-wrap{margin:0 -18px -18px;padding:0 18px 6px}
  #toasts{left:14px;right:14px;bottom:14px}
  .toast{max-width:none}
}

/* Vidro custa GPU: em telas pequenas o blur sai e vira opacidade sólida. */
@media (max-width:520px){
  .card,.kpi,.sidebar,.modal-cx,.login-cx,.toast,.alerta{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(158deg,#141a13,#0e130e);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}