/* ============================================================
   CorbanTech Central — folha de estilo global
   Uma casca visual para todas as telas: malha isométrica de
   fundo, vidro fosco, barra lateral fixa e componentes.
   ============================================================ */

:root{
  /* --- paleta nova (elevação em 3 camadas: fundo < superfície < campo) --- */
  --azul:#2f5fff;
  --azul-claro:#7ebaff;
  --verde:#00e5a0;
  --verde-claro:#5affcb;
  --vermelho:#ff5a52;
  --vermelho-claro:#ff8a84;
  --amarelo:#ffc61a;
  --texto:#F4F4F5;
  --texto-2:#A1A1AA;
  --texto-grupo:#71717A;
  --linha:#27272A;
  /* 3 camadas de elevação, do fundo pro mais "levantado":
     fundo do app < sidebar/cards/tabelas/modais < inputs/campos. */
  --superficie:#18181B;
  --afundado:#27272A;
  --relevo:#27272A;
  --sombra-card:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --num:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- nomes antigos, apontando para a paleta nova ---
     as telas já usavam estes; remapeados, tudo troca de cor junto */
  --ink:#121214;
  --panel:#18181B;
  --panel-2:#27272A;
  --line:#27272A;
  --line-soft:rgba(255,255,255,.04);
  --amber:#2f8fff;
  --amber-dim:#1b4fd8;
  --amber-wash:rgba(47,95,255,0.14);
  --led-green:#00e5a0;
  --led-green-wash:rgba(0,229,160,0.12);
  --led-red:#ff5a52;
  --led-red-wash:rgba(255,90,82,0.12);
  --text:#F4F4F5;
  --text-dim:#A1A1AA;
  --display:'Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:var(--ink);
  color:var(--texto);
  font-family:var(--corpo);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04";
  text-rendering:optimizeLegibility;
}

/* Hierarquia tipográfica — títulos de página (fora dos cabeçalhos pequenos em
   caixa alta dos .panel/.card, que têm sua própria regra logo abaixo). */
h1,h2,h3{color:#FFFFFF;font-weight:600;}
h1{font-size:1.5rem;letter-spacing:-.01em;margin:0 0 4px;}
h3{font-size:.9375rem;margin:0 0 8px;}
label{font-size:.875rem;font-weight:500;color:var(--texto-2);}
a{color:var(--azul-claro);text-decoration:none;}
a:hover{color:#a8d4ff;}
*:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
::selection{background:rgba(47,95,255,0.3);}
img{max-width:100%;}

*{scrollbar-width:thin;scrollbar-color:#1e293b transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{border-radius:8px;background:#1e293b;box-shadow:inset 0 0 0 1px rgba(47,95,255,.45),0 0 10px -2px rgba(47,95,255,.6);}
::-webkit-scrollbar-corner{background:transparent;}

@keyframes ct-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes ct-shaft{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes ct-spin{to{transform:rotate(360deg)}}
@keyframes ct-lift{0%,100%{transform:translateZ(0)}50%{transform:translateZ(15px)}}
@keyframes ct-drift{0%{transform:translateZ(0);opacity:0}18%{opacity:1}100%{transform:translateZ(78px);opacity:0}}
@keyframes ct-trace{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}

/* ============================================================
   1. Casca: malha isométrica + barra lateral + conteúdo
   ============================================================ */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;position:relative;}

.espaco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.espaco .brilho{position:absolute;inset:0;background:radial-gradient(1300px 760px at 50% -14%,rgba(21,47,102,.85),rgba(9,15,30,.45) 52%,transparent 78%);}
.espaco .malha,.espaco .malha2{position:absolute;inset:0;}
.espaco .malha{
  background-image:
    repeating-linear-gradient(30deg,rgba(47,95,255,.14) 0 1px,transparent 1px 150px),
    repeating-linear-gradient(-30deg,rgba(47,95,255,.14) 0 1px,transparent 1px 150px),
    repeating-linear-gradient(90deg,rgba(47,95,255,.1) 0 1px,transparent 1px 261px);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 6%,#000,transparent 76%);
  mask-image:radial-gradient(90% 70% at 50% 6%,#000,transparent 76%);
}
.espaco .malha2{
  background-image:
    repeating-linear-gradient(30deg,rgba(47,95,255,.16) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(-30deg,rgba(47,95,255,.16) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,rgba(47,95,255,.11) 0 1px,transparent 1px 97px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 46%,transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 46%,transparent 78%);
}
.espaco .feixe{position:absolute;top:-60px;height:620px;filter:blur(22px);
  background:linear-gradient(180deg,rgba(126,186,255,.16),rgba(126,186,255,.05) 42%,transparent 82%);}
.espaco .f1{left:16%;width:190px;transform:skewX(12deg);animation:ct-shaft 9s ease-in-out infinite;}
.espaco .f2{left:46%;width:250px;transform:skewX(-9deg);animation:ct-shaft 11s ease-in-out 1.6s infinite;}
.espaco .f3{left:76%;width:160px;transform:skewX(15deg);animation:ct-shaft 8s ease-in-out 3s infinite;}
.espaco .horizonte{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(126,186,255,.5) 34%,rgba(0,229,160,.35) 66%,transparent);}

.menu{
  position:sticky;top:0;align-self:start;
  height:100vh;overflow-y:auto;
  z-index:2;
  display:flex;flex-direction:column;gap:26px;padding:26px 18px;
  border-right:1px solid var(--linha);
  background:var(--afundado);
}
.marca{display:flex;align-items:center;gap:12px;padding:2px 8px 0;}
.marca img{height:36px;width:auto;object-fit:contain;display:block;flex:none;}
.marca .nome{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--texto);}
.marca .sub{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2);}

.grupo{display:flex;flex-direction:column;gap:3px;}
.grupo .titulo{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-grupo);padding:0 8px 8px;}
.item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:4px;
  font-size:14px;color:rgba(238,242,248,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .24s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .24s,color .2s;
}
.item svg{width:17px;height:17px;flex:none;}
.item:hover{
  background:linear-gradient(180deg,rgba(47,95,255,.2),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 2px rgba(0,0,0,.6),0 0 22px -8px rgba(47,95,255,.8);
  color:var(--texto);transform:scale(1.02);
}
.item.ativo{
  position:relative;color:var(--texto);
  background:linear-gradient(180deg,rgba(47,143,255,.22),rgba(47,143,255,.07));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.08),0 0 24px -6px rgba(47,143,255,.55);
}
.item.ativo::before{
  content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;
  background:var(--azul);box-shadow:0 0 12px 1px rgba(47,95,255,.95),0 0 26px 2px rgba(47,95,255,.5);
}
.item.ativo svg{stroke:#2f8fff;}
.item.sair{color:rgba(238,242,248,.6);}
.item.sair:hover{background:rgba(255,90,82,.12);color:var(--vermelho-claro);box-shadow:none;}
.hidden{display:none!important;}

.conta{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);}
.conta .linha{display:flex;align-items:center;gap:10px;padding:0 8px;}
.avatar{
  width:30px;height:30px;border-radius:4px;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--azul-claro);
  background:linear-gradient(180deg,rgba(47,143,255,.34),rgba(47,143,255,.11));
  border:1px solid rgba(47,143,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px -2px rgba(0,0,0,.85);
}
.conta .quem{display:flex;flex-direction:column;gap:2px;min-width:0;}
.conta .quem b{font-size:14px;font-weight:500;}
.roleBadge{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.roleBadge.admin{color:var(--verde);}
.roleBadge.user{color:var(--texto-2);}

/* ---- sino de notificação ---- */
.notifWrap{position:relative;}
.notifBadge{
  position:absolute;top:6px;right:10px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--vermelho);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--afundado);
}
.notifPanel{
  display:none;position:fixed;width:300px;max-height:360px;overflow-y:auto;
  z-index:9999;border-radius:7px;border:1px solid var(--linha);background:var(--relevo);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.9);
}
.notifPanel.show{display:block;}
.notifPanelHead{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-2);padding:14px 16px 10px;border-bottom:1px solid var(--linha);
}
.notifItem{padding:12px 16px;font-size:13px;line-height:1.5;border-bottom:1px solid var(--linha);color:var(--texto);}
.notifItem:last-child{border-bottom:0;}
.notifItem-warn{color:var(--amarelo);}
.notifItem-empty{color:var(--texto-2);}
.notifWhen{font-family:var(--mono);font-size:11px;color:var(--texto-2);margin-top:4px;}

/* ---- avatar do cliente/parceiro (logo cadastrada, ou iniciais do nome) ---- */
.avatarThumb{
  display:inline-block;border-radius:50%;object-fit:cover;vertical-align:middle;flex-shrink:0;
}
.avatarThumb-fallback{
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  font-family:var(--mono);text-transform:uppercase;line-height:1;
}
.avatarCell{display:inline-flex;align-items:center;gap:8px;}
.logoEditor{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.logoEditor button{padding:3px 7px;font-size:10.5px;}

/* ---- editor de avatar por hover (tabela Usuários do admin): passa o mouse
   em cima da foto pra ver o lápis (trocar) e o x (remover) ---- */
.avatarEditWrap{position:relative;display:inline-flex;width:36px;height:36px;flex-shrink:0;}
.avatarEditWrap .avatarThumb,.avatarEditWrap .avatarThumb-fallback{width:36px;height:36px;}
.avatarEditBtn{
  position:absolute;inset:0;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.avatarEditBtn svg{width:15px;height:15px;}
.avatarEditWrap:hover .avatarEditBtn,.avatarEditWrap:focus-within .avatarEditBtn{opacity:1;}
.avatarRemoveBtn{
  position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;border:0;
  background:var(--vermelho);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.avatarEditWrap:hover .avatarRemoveBtn,.avatarEditWrap:focus-within .avatarRemoveBtn{opacity:1;}

/* ---- botão + caixa de sugestão ---- */
.suggestOverlay{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.suggestModal{
  width:100%;max-width:440px;padding:24px;border-radius:12px;border:1px solid var(--linha);
  background:var(--relevo);box-shadow:0 24px 70px -24px rgba(0,0,0,.8);
}
.suggestModal h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--texto);}
.suggestModal p{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--texto-2);}
.suggestModal textarea{width:100%;min-height:110px;resize:vertical;}
.suggestMsg{display:none;font-size:12px;margin-top:10px;}
.suggestMsg.show{display:block;}
.suggestMsg.ok{color:var(--verde);}
.suggestMsg.err{color:var(--vermelho-claro);}
.suggestActions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}

main{position:relative;z-index:1;padding:30px 40px 56px;display:flex;flex-direction:column;gap:30px;min-width:0;}
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2f8fff;}
main h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:6px 0 0;}
.led{position:relative;width:6px;height:6px;flex:none;display:inline-block;}
.led i,.led b{position:absolute;inset:0;border-radius:50%;background:var(--verde);}
.led i{animation:ct-ping 2s cubic-bezier(0,0,.2,1) infinite;}
.led b{box-shadow:0 0 10px 2px rgba(0,229,160,.8);}

/* créditos no topo */
.creditos{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.pill{display:flex;flex-direction:column;gap:5px;}
.pill .pillText{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);}
.pill .pillValue{font-family:var(--num);font-size:19px;font-weight:500;color:var(--verde);}
.pill.low .pillValue{color:var(--amarelo);}
.pill .pillIcon{display:none;}
.divisor{width:1px;height:34px;background:rgba(255,255,255,.09);}

/* ============================================================
   2. Componentes compartilhados
   ============================================================ */
.panel,.card,.chartCard,.statCard,.topCard,.faqItem,.tabPanel.active,.varBlock,.resumeBanner{
  padding:24px;border-radius:12px;border:1px solid var(--linha);
  background:var(--superficie);
  box-shadow:var(--sombra-card);
}
.panel h2,.chartCard h2,.chartCardTitle,.statsHead,.varTitle,.topTitle{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-2);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.panel h2::before,.panel h2::after{content:none;}
.panelHead,.statsHead,.panel .headtext{display:flex;align-items:baseline;justify-content:space-between;gap:20px;}

/* Botão de atualizar (Rodada 23, estendido na Rodada 27 pras telas que
   tinham ficado de fora — Histórico, Painel, Agendamentos, Encurtador de
   links, Meu consumo) — movido pra cá (antes só existia no <style> do
   admin.html) pra ficar disponível em qualquer página que já carrega este
   arquivo. Só ícone, gira uma vez enquanto busca de novo.
   Rodada 39: aumentado (34px → 42px, ícone 17px → 21px) e a resposta ao
   passar o mouse ficou só de cor/borda — NENHUM movimento/escala, pra não
   competir com o clique. O botão "fugir" do cursor (relatado pelo cliente)
   não era desse hover em si: era o cabeçalho (.topo) inteiro tendo uma
   inclinação 3D decorativa (ver [data-tilt] mais abaixo) que deslocava o
   botão de verdade na tela ao aproximar o mouse — removida do cabeçalho
   nesta mesma rodada (continua só nos cartões decorativos, que não têm
   botão nenhum dentro). */
.refreshBtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; border-radius:8px; flex-shrink:0;
  border:1px solid var(--line); background:transparent; color:var(--text-dim);
  cursor:pointer; transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.refreshBtn:hover{ color:var(--text); border-color:#2f8fff; background:rgba(255,255,255,.04); }
.refreshBtn:disabled{ opacity:.6; cursor:default; }
.refreshBtn svg{ width:21px; height:21px; }
.refreshBtn.spinning svg{ animation:refreshSpin .6s linear; }
@keyframes refreshSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.panelHead h2{margin:0;}
.small{font-size:12px;color:var(--texto-2);}
.big{font-family:var(--num);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;}

/* campos */
.field,.filterField{display:flex;flex-direction:column;gap:8px;}
.field label,.filterField label,.formGrid label,.teamFormGrid label{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);
}
input[type=text],input[type=url],input[type=date],input[type=time],input[type=number],
input[type=password],input[type=email],input[type=search],select,textarea{
  font-family:var(--mono);font-size:14px;padding:12px 16px;border-radius:6px;
  border:1px solid var(--linha);color:var(--texto);color-scheme:dark;
  background:var(--afundado);
  box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
/* as opções de um <select> (o popup que abre ao clicar) são desenhadas pelo
   navegador/sistema operacional, não pelo CSS normal da página — por isso
   não respeitam gradiente (var(--afundado) é um gradiente no tema escuro).
   Sem essa regra, o popup cai no branco padrão do navegador enquanto o
   texto continua claro (herdado do tema escuro), ficando ilegível. Aqui
   forçamos um fundo sólido no tema escuro; o tema claro é ajustado
   na seção "5. Tema claro" mais abaixo. */
select option{background-color:#0d1219;color:var(--texto);}
input:hover,select:hover,textarea:hover{border-color:rgba(126,186,255,.35);}
input:focus,select:focus,textarea:focus{
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(47,95,255,.22);
  outline:none;
}
input::placeholder,textarea::placeholder{color:rgba(238,242,248,.35);}
input[type=file]{font-family:var(--mono);font-size:13px;}
input[type=checkbox],input[type=radio]{accent-color:var(--azul);width:17px;height:17px;box-shadow:none;}
.checkRow,.useNameChk{display:flex;align-items:center;gap:11px;font-size:14px;}

/* botões */
button,.btn,.actionBtn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
button.primary,.btn.primary,button.saveBtn,button.teamSaveBtn,button.statsBtn,button.resolveBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;border-radius:8px;color:#fff;
  border:1px solid transparent;
  background:var(--azul);
  box-shadow:var(--sombra-card);
  transition:background .16s ease,transform .12s ease,box-shadow .16s ease;
}
button.primary:hover,.btn.primary:hover,button.saveBtn:hover,button.teamSaveBtn:hover,button.statsBtn:hover,button.resolveBtn:hover{
  background:#2650e0;
  transform:translateY(-1px);
}
button.primary:active,.btn.primary:active,button.saveBtn:active,button.teamSaveBtn:active,button.statsBtn:active,button.resolveBtn:active{
  background:#1740b8;
  transform:translateY(0);
}
button.primary:focus-visible,.btn.primary:focus-visible,button.saveBtn:focus-visible,button.teamSaveBtn:focus-visible,button.statsBtn:focus-visible,button.resolveBtn:focus-visible{
  outline:2px solid var(--azul-claro);outline-offset:2px;
}
button.secondary,button.ghost,button.toggleBtn,.actionBtn,button.genPwBtn,button.rowPwToggle{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:6px;color:var(--texto-2);
  border:1px solid var(--linha);
  background:var(--relevo);
  box-shadow:none;
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .12s ease;
  text-decoration:none;
}
button.secondary:hover,button.ghost:hover,button.toggleBtn:hover,.actionBtn:hover,button.genPwBtn:hover,button.rowPwToggle:hover{
  border-color:#2f8fff;color:#2f8fff;transform:translateY(-1px);
}
button.secondary:active,button.ghost:active,button.toggleBtn:active,.actionBtn:active,button.genPwBtn:active,button.rowPwToggle:active{
  transform:translateY(0);background:var(--afundado);
}
button.danger,button.delBtn,button.teamDelBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:6px;color:var(--vermelho-claro);
  border:1px solid rgba(255,90,82,.35);background:rgba(255,90,82,.1);
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
button.danger:hover,button.delBtn:hover,button.teamDelBtn:hover{
  background:rgba(255,90,82,.2);border-color:rgba(255,90,82,.6);transform:translateY(-1px);
}
button.danger:active,button.delBtn:active,button.teamDelBtn:active{
  background:rgba(255,90,82,.28);transform:translateY(0);
}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}
button.big,.btn.big{font-size:14px;padding:16px 28px;}

/* abas (admin) */
.tabs{display:flex;gap:4px;flex-wrap:wrap;}
.tabBtn{
  padding:10px 18px;border-radius:4px 4px 0 0;color:var(--texto-2);
  border:1px solid transparent;border-bottom:0;background:none;transition:color .2s,background .2s;
}
.tabBtn:hover{color:var(--texto);background:rgba(255,255,255,.04);}
.tabBtn.active{
  color:var(--texto);border-color:var(--linha);
  background:linear-gradient(180deg,rgba(47,143,255,.22),rgba(47,143,255,.05));
  box-shadow:inset 0 2px 0 var(--azul);
}
.tabPanel{display:none;}
.tabPanel.active{display:block;}

/* tabelas */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{
  text-align:left;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-2);padding:12px 16px;
  background:var(--afundado);
}
th[data-key]{cursor:pointer;user-select:none;transition:color .2s;}
th[data-key]:hover{color:var(--texto);}
td{padding:12px 16px;vertical-align:middle;}
tbody tr,table tr{border-bottom:1px solid var(--linha);transition:background .2s;}
tbody tr:hover,table tr:hover{background:var(--afundado);box-shadow:none;}
table tr:first-child:hover{background:none;box-shadow:none;}
td.empty,.empty{font-family:var(--mono);font-size:13px;color:var(--texto-2);padding:18px 0;font-style:normal;text-align:left;}
.rowActions{display:flex;gap:7px;flex-wrap:wrap;}

/* etiquetas */
.platformBadge,.badge,.trustBadge,.ticketLabel{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  background:rgba(47,95,255,.15);border:1px solid rgba(47,95,255,.4);color:#b3d7ff;
}
.platformBadge.hyperflow{background:rgba(0,229,160,.12);border-color:rgba(0,229,160,.4);color:var(--verde-claro);}
/* ---- status de fatura (Financeiro): pendente = âmbar, pago = verde ---- */
.statusBadge{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.statusBadge.pendente{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4);color:var(--amber);}
.statusBadge.pago{background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.4);color:var(--verde-claro);}
/* Rodada 75: 3º status de fatura ("vencida" — gerada há mais de 3 dias e
   ainda não paga), cor de aviso (vermelho) pra diferenciar de "gerada"
   (âmbar, reaproveita .pendente) e "paga" (verde, reaproveita .pago). */
.statusBadge.vencida{background:rgba(255,90,82,.14);border:1px solid rgba(255,90,82,.4);color:var(--vermelho-claro);}
/* Financeiro → Detalhado: ciclo em aberto (ainda não virou fatura) e
   pré-pago (sem ciclo nenhum) usam cores neutras próprias, pra não confundir
   com pago/pendente de fatura. */
.statusBadge.aberto{background:rgba(126,186,255,.14);border:1px solid rgba(126,186,255,.4);color:var(--azul-claro);}
.statusBadge.prepago{background:rgba(161,161,170,.14);border:1px solid rgba(161,161,170,.4);color:var(--text-dim);}
.statusBadge{white-space:nowrap;}
.rateBar,.waProgressBar{
  display:inline-block;width:64px;height:5px;border-radius:3px;margin-right:10px;vertical-align:middle;
  background:#05070b;box-shadow:inset 0 1px 3px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.04);overflow:hidden;
}
.rateBar .fill,.waProgressFill{display:block;height:100%;background:linear-gradient(180deg,#5affcb,#00c78b);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);}

/* ---- barra de progresso compacta, embaixo do nome do arquivo/execução
   (Rodada 30) — Histórico e Painel, só aparece enquanto a validação de
   WhatsApp daquela linha ainda está em andamento (ver js/wa-progress.js).
   Nomes próprios (não reaproveita .waProgressBar/.waProgressFill, que já
   são usados pela barra grande do Formatador de base — em vez de arriscar
   um dos dois herdar geometria do outro por engano, cada um com sua
   classe). */
.rowWaProgress{margin-top:6px;max-width:230px;}
.rowWaProgress:empty{margin:0;}
.rowWaProgressBar{
  width:100%;height:5px;border-radius:3px;overflow:hidden;
  background:#05070b;box-shadow:inset 0 1px 3px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.04);
}
.rowWaProgressFill{display:block;height:100%;background:linear-gradient(180deg,#5affcb,#00c78b);transition:width .5s ease;}
.rowWaProgressLabel{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--texto-2);white-space:nowrap;}

/* avisos */
.msg,.warn,.ok,.bad,.lowCreditWarn,.error,.success{
  font-family:var(--mono);font-size:13px;line-height:1.6;
  padding:13px 16px;border-radius:5px;border:1px solid var(--linha);
  background:rgba(255,255,255,.03);color:var(--texto-2);
}
.ok,.success{border-color:rgba(0,229,160,.4);background:rgba(0,229,160,.1);color:var(--verde-claro);}
.bad,.error,.danger.msg{border-color:rgba(255,90,82,.4);background:rgba(255,90,82,.1);color:var(--vermelho-claro);}
.warn,.lowCreditWarn{border-color:rgba(255,198,26,.4);background:rgba(255,198,26,.1);color:var(--amarelo);}
.msg:empty,.error:empty,.success:empty{display:none;}

/* faixa de números (histórico) */
.summaryGrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  background:rgba(255,255,255,.07);border-radius:4px;
  box-shadow:0 6px 0 -1px #04060a,0 7px 0 -1px rgba(255,255,255,.05),0 28px 44px -24px rgba(0,0,0,.95);
}
.summaryCard{display:flex;flex-direction:column;gap:8px;padding:20px 24px;
  background:var(--relevo);box-shadow:none;}
.summaryCard:first-child{border-radius:4px 0 0 4px;}
.summaryCard:last-child{border-radius:0 4px 4px 0;}
.summaryLabel{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);}
.summaryValue{font-family:var(--num);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;
  margin-top:auto;}
.summaryValue.amber{color:var(--azul-claro);}
.summaryValue.green{color:var(--verde);}
.summaryValue.red{color:var(--vermelho-claro);}

.filtersPanel{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.chartsGrid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;}
.chartWrap{position:relative;height:230px;}
/* trava o <canvas> do Chart.js na largura do contêiner — sem isso, um
   canvas ainda sem JS aplicado (ex.: script do gráfico não terminou de
   carregar) usa o tamanho padrão do navegador (300x150), maior que a
   tela em celulares, e empurra a página inteira pro lado. */
.chartWrap canvas{max-width:100%;}

/* números sempre em fonte de largura fixa */
.summaryValue,.big,.statCard .count,.topCliquesLbl,.ticketNum,.ticketPct,.stat .val,.moduleStat .val{
  font-family:var(--num);font-variant-numeric:tabular-nums;
}

/* ============================================================
   3. Cartões de módulo do Painel + ícones isométricos 3D
   ============================================================ */
.modulos{display:grid;grid-template-columns:1fr 1fr;gap:20px;perspective:1500px;}
.cartao{
  position:relative;display:grid;grid-template-columns:1fr 158px;align-items:start;gap:22px 20px;
  padding:24px;border-radius:12px;color:var(--texto);
  border:1px solid var(--linha);
  background:var(--superficie);
  box-shadow:var(--sombra-card);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .2s;
}
.cartao::before{content:none;}
.cartao.azul{border-color:rgba(47,95,255,.3);transform:rotateX(3.5deg) rotateY(2deg);}
.cartao.verde{border-color:rgba(0,229,160,.28);transform:rotateX(3.5deg) rotateY(-2deg);}
.cartao:hover{transform:translateZ(8px) translateY(-10px) rotateX(1deg) scale(1.02);}
.cartao.azul:hover{border-color:rgba(47,95,255,.6);box-shadow:0 20px 40px -16px rgba(0,0,0,.5);}
.cartao.verde:hover{border-color:rgba(0,229,160,.55);box-shadow:0 20px 40px -16px rgba(0,0,0,.5);}
.cartao .canto{position:absolute;width:14px;height:14px;}
.cartao .canto.tl{top:0;left:0;border-top:1px solid currentColor;border-left:1px solid currentColor;}
.cartao .canto.br{bottom:0;right:0;border-bottom:1px solid currentColor;border-right:1px solid currentColor;}
.cartao.azul .canto{color:#2f8fff;}
.cartao.verde .canto{color:var(--verde);}
.cartao .corpo{display:flex;flex-direction:column;gap:18px;}
.cartao .cabeca{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.cartao h2{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0;}
.cartao p{font-size:14px;line-height:1.6;color:var(--texto-2);margin:9px 0 0;}
.moduleStats{grid-column:1/-1;display:flex;gap:34px;padding-top:17px;border-top:1px solid rgba(255,255,255,.07);}
.moduleStat .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);margin-bottom:4px;}
.moduleStat .val{font-size:22px;font-weight:500;}
.moduleStat .val.destaque{font-size:1.8rem;font-weight:700;letter-spacing:-.02em;}

/* --- palco isométrico dos ícones --- */
.iso{width:158px;height:150px;position:relative;perspective:760px;perspective-origin:50% 42%;}
.iso .cena{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-42deg);}

/* pastas de dados (Formatador) */
.iso .pasta{position:absolute;left:22px;top:20px;width:108px;height:82px;transform-style:preserve-3d;}
.iso .pasta > span{position:absolute;inset:0;transform-style:preserve-3d;animation:ct-lift 5.2s ease-in-out infinite;}
.iso .pasta .aba{position:absolute;left:0;top:-11px;width:44px;height:13px;border-radius:2px 6px 0 0;border-bottom:0;}
.iso .pasta .face{
  position:absolute;inset:0;padding:11px 13px;border-radius:2px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  box-shadow:0 9px 0 -1px rgba(4,7,14,.95),0 10px 0 -1px rgba(255,255,255,.05);
}
.iso .pasta .face i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.16);}
.iso .p1{transform:translateZ(0);}
.iso .p2{transform:translateZ(26px);}
.iso .p3{transform:translateZ(52px);}
.iso .p4{transform:translateZ(78px);}
.iso .p2 > span{animation-delay:.5s;}
.iso .p3 > span{animation-delay:1s;}
.iso .p4 > span{animation-delay:1.5s;}
.iso .p1 .aba,.iso .p1 .face{background:linear-gradient(148deg,#101827,#070b12);border:1px solid rgba(47,95,255,.28);}
.iso .p2 .aba,.iso .p2 .face{background:linear-gradient(148deg,#152142,#0a1024);border:1px solid rgba(47,95,255,.4);}
.iso .p3 .aba,.iso .p3 .face{background:linear-gradient(148deg,#1b2c5c,#0d1530);border:1px solid rgba(47,95,255,.55);}
.iso .p3 .face{box-shadow:0 9px 0 -1px rgba(4,7,14,.95),0 0 26px -6px rgba(47,95,255,.75);}
.iso .p4 .aba,.iso .p4 .face{background:linear-gradient(148deg,#2f5fff,#12225e);border:1px solid rgba(150,190,255,.7);}
.iso .p4 .face{box-shadow:0 9px 0 -1px rgba(4,7,14,.95),0 0 40px -4px rgba(47,95,255,.95);}
.iso .p3 .face i:first-child{background:rgba(126,186,255,.5);}
.iso .p4 .face i:first-child{background:#fff;}
.iso .p4 .face i:last-child{background:rgba(255,255,255,.55);}
.iso .poeira{position:absolute;width:4px;height:4px;border-radius:50%;animation:ct-drift 3.6s linear infinite;}
.iso .d1{left:44px;top:46px;background:#7ebaff;box-shadow:0 0 9px 2px #7ebaff;}
.iso .d2{left:96px;top:32px;background:#2f5fff;box-shadow:0 0 9px 2px #2f5fff;animation-duration:4.1s;animation-delay:.9s;}
.iso .d3{left:66px;top:74px;background:#a8d4ff;box-shadow:0 0 9px 2px #a8d4ff;animation-duration:3.8s;animation-delay:1.8s;}
.iso .d4{left:112px;top:62px;background:#2f5fff;box-shadow:0 0 9px 2px #2f5fff;animation-duration:4.6s;animation-delay:2.6s;}

/* rede de cubos (Encurtador) */
.iso .placa{
  position:absolute;left:20px;top:22px;width:112px;height:112px;border-radius:3px;
  background:linear-gradient(148deg,rgba(9,18,14,.7),rgba(4,8,7,.6));
  border:1px solid rgba(0,255,0,.14);
  background-image:
    repeating-linear-gradient(90deg,rgba(0,255,0,.1) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(0deg,rgba(0,255,0,.1) 0 1px,transparent 1px 18px);
  box-shadow:0 11px 0 -1px rgba(3,6,5,.95);
}
.iso .cabo{
  position:absolute;left:46px;top:66px;width:66px;height:5px;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,rgba(0,255,0,.16),rgba(0,255,0,.3));
  box-shadow:0 0 16px -2px rgba(0,255,0,.5);
  transform:translateZ(26px) rotate(-4deg);
}
.iso .cabo i{position:absolute;inset:0;width:34%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:ct-trace 2.2s linear infinite;}
.iso .cubo{position:absolute;transform-style:preserve-3d;}
.iso .cubo > span{position:absolute;inset:0;transform-style:preserve-3d;animation:ct-lift 4.6s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(0,255,0,.5));}
.iso .cubo em{position:absolute;inset:0;border:1px solid rgba(0,255,0,.38);background:linear-gradient(148deg,rgba(1,18,11,.92),rgba(0,44,24,.88));}
.iso .cubo em.topo{background:linear-gradient(148deg,rgba(0,255,0,.3),rgba(0,120,60,.22));border-color:rgba(0,255,0,.75);}
.iso .cubo em.frente{background:linear-gradient(148deg,rgba(2,26,16,.9),rgba(0,60,32,.85));border-color:rgba(0,255,0,.5);}
.iso .cubo b{
  position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;
  background:#00ff00;box-shadow:0 0 16px 4px rgba(0,255,0,.9);
}
.iso .c1{left:26px;top:30px;width:40px;height:40px;transform:translateZ(26px);}
.iso .c1 em.topo{transform:translateZ(20px);}
.iso .c1 em.frente{transform:rotateX(90deg) translateZ(20px);}
.iso .c1 em.lado{transform:rotateY(90deg) translateZ(20px);}
.iso .c1 em.lado2{transform:rotateY(-90deg) translateZ(20px);}
.iso .c1 b{transform:translateZ(20px);}
.iso .c2{left:88px;top:78px;width:30px;height:30px;transform:translateZ(21px);}
.iso .c2 > span{animation-delay:1.1s;}
.iso .c2 em.topo{transform:translateZ(15px);}
.iso .c2 em.frente{transform:rotateX(90deg) translateZ(15px);}
.iso .c2 em.lado{transform:rotateY(90deg) translateZ(15px);}
.iso .c2 em.lado2{transform:rotateY(-90deg) translateZ(15px);}
.iso .c2 b{transform:translateZ(15px);}

/* ============================================================
   4. Telas específicas
   ============================================================ */
/* Ajuda — é documento, não painel */
.intro{font-size:16px;line-height:1.7;color:var(--texto-2);max-width:65ch;}
.navGrid{display:flex;flex-wrap:wrap;gap:10px;}
.navGrid a{
  flex:1;min-width:150px;text-align:center;padding:13px;border-radius:5px;
  font-family:var(--mono);font-size:13px;color:var(--texto);
  border:1px solid var(--linha);background:var(--relevo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s,color .2s,transform .2s;
}
.navGrid a:hover{border-color:#2f8fff;color:#2f8fff;transform:translateY(-2px);}
.faqItem{margin-bottom:14px;}
.faqQ{font-size:16px;font-weight:600;margin-bottom:8px;}
.faqA{font-size:15px;line-height:1.7;color:var(--texto-2);max-width:65ch;}
.desc{font-size:15px;line-height:1.7;color:var(--texto-2);max-width:65ch;}
.tip{
  font-size:14px;line-height:1.65;padding:14px 16px;border-radius:5px;
  border:1px solid rgba(47,95,255,.3);background:rgba(47,95,255,.08);color:var(--texto);
}

/* Links — cartões de estatística */
.statCards,.topGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.statCard .name,.topCliquesLbl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);}
.statCard .count{font-size:28px;font-weight:700;color:var(--verde-claro);}
.shortLink,.shortLinkBig{font-family:var(--mono);color:var(--verde-claro);}
.shortLinkBig{font-size:18px;}
.formRow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.urlCell{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Formatador — trilha de passos */
.steps{display:flex;flex-direction:column;gap:20px;}
.step{display:grid;grid-template-columns:34px 1fr;gap:20px;align-items:stretch;}
.step-rail{display:flex;flex-direction:column;align-items:center;gap:10px;}
.step-num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--num);font-size:13px;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.14);background:var(--afundado);color:var(--texto-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 2px 5px rgba(0,0,0,.6);
}
.step-num.lit,.step.lit .step-num,.step.active .step-num{
  border-color:transparent;color:#fff;
  background:var(--azul);
}
.step.lit,.step.active{color:var(--texto);}
.step-line{flex:1;width:1px;min-height:20px;background:linear-gradient(180deg,rgba(126,186,255,.35),rgba(255,255,255,.06));}
.step:last-child .step-line{background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);}
.step:has(> .panel.hidden){display:none;}
.step-count{font-family:var(--num);font-size:9.5px;letter-spacing:.03em;color:var(--texto-2);white-space:nowrap;opacity:.75;}
.step.lit .step-count,.step.active .step-count{color:var(--azul);opacity:1;}
.platformRow{display:flex;gap:16px;flex-wrap:wrap;}
.platformOpt{
  display:flex;align-items:center;gap:11px;padding:16px 20px;border-radius:6px;cursor:pointer;
  border:1px solid var(--linha);background:var(--superficie);
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.platformOpt:hover{border-color:rgba(126,186,255,.45);transform:translateY(-2px);}
.helpBtn{
  width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;
  font-family:var(--mono);font-size:11px;padding:0;
  border:1px solid rgba(126,186,255,.4);background:rgba(47,95,255,.14);color:var(--azul-claro);
}
.helpPop{
  display:none; /* corrigido nesta rodada — faltava o estado escondido por
    padrão, então a janelinha de ajuda de cada etapa (Formatador de base)
    aparecia sempre aberta em vez de só quando clicava no "?" (ver .show
    logo abaixo e initHelpPopovers em js/formatador.js, que já esperava
    esse comportamento) */
  font-family:var(--corpo);font-size:13px;line-height:1.6;text-transform:none;letter-spacing:0;
  padding:14px 16px;border-radius:6px;border:1px solid var(--linha);
  background:linear-gradient(180deg,#141b29,#0b0e16);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.98);color:var(--texto-2);
}
.helpPop.show{
  display:block; /* essa regra vivia só no <style> local do Formatador de
    base — movida pra cá (Prévia — rodada adicional) porque agora o mesmo
    padrão de tooltip "?" também é usado no Financeiro (Admin) e no Meu
    consumo, via js/help-tooltip.js */
}
.filename{font-family:var(--mono);font-size:13px;color:var(--azul-claro);}

/* Login */
.login-body{display:grid;place-items:center;min-height:100vh;position:relative;padding:40px 20px;}
.login-body .card{
  position:relative;z-index:1;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:20px;padding:32px;
}
.login-body .logo{display:flex;flex-direction:column;align-items:center;gap:14px;}
.login-body img.logo,.login-body .logo img{height:64px;width:auto;}
.pwWrap{position:relative;display:flex;}
.pwWrap input{width:100%;padding-right:44px;}
.pwToggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;padding:0;
  border:0;background:none;color:var(--texto-2);cursor:pointer;
}
.pwToggle:hover{color:var(--azul-claro);}
.forgotLink{font-family:var(--mono);font-size:12px;color:var(--texto-2);text-align:center;}
.sideTools{display:flex;justify-content:center;gap:14px;}

/* ============================================================
   5. Tema claro (alternável em todas as telas)
   ============================================================ */
html[data-theme="light"]{
  --azul:#2f5fff;
  --azul-claro:#1b4fd8;
  --verde:#00966e;
  --verde-claro:#00784f;
  --vermelho:#c92a22;
  --vermelho-claro:#a8221b;
  --amarelo:#9a6b06;
  --texto:#0f172a;
  --texto-2:#52607a;
  --linha:rgba(15,23,42,0.12);
  --superficie:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(241,245,249,0.9));
  --afundado:#eef2f8;
  --relevo:linear-gradient(180deg,#ffffff,#eef2f8);

  --ink:#eef2f8;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --line:rgba(37,99,235,0.28);
  --line-soft:rgba(15,23,42,0.08);
  --amber:#2f5fff;
  --amber-dim:#1740b8;
  --amber-wash:rgba(47,95,255,0.12);
  --led-green:#00966e;
  --led-green-wash:rgba(0,150,110,0.12);
  --led-red:#c92a22;
  --led-red-wash:rgba(201,42,34,0.12);
  --text:#0f172a;
  --text-dim:#52607a;

  /* --- tokens próprios do tema claro (não derivados do escuro) ---
     usados nos componentes que precisavam de superfície/cor dedicada em vez
     de herdar o visual do tema escuro (selos, cartões de módulo). Contrastes
     medidos e documentados na entrega. */
  --lt-surface-page:#eef2f8;
  --lt-surface-card:#ffffff;
  --lt-surface-elevated:#ffffff;
  --lt-border:rgba(15,23,42,.12);
  --lt-border-strong:#64748b;
  --lt-text:#0f172a;
  --lt-text-2:#3f4b63;
  --lt-text-3:#5b6b85;
  --lt-azul-stroke:#1b4fd8;
  --lt-azul-fill:rgba(27,79,216,.10);
  --lt-verde-stroke:#00784f;
  --lt-verde-fill:rgba(0,120,79,.10);
  --lt-vermelho-stroke:#c92a22;
  --lt-vermelho-fill:rgba(201,42,34,.10);
  --lt-amarelo-stroke:#8a5a06;
  --lt-amarelo-fill:rgba(154,107,6,.10);
}

html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(37,99,235,0.08), transparent 62%),
    radial-gradient(1000px 600px at 92% 105%, rgba(0,150,110,0.06), transparent 62%),
    var(--ink);
}
/* Bug pré-existente encontrado na Rodada 44 (não introduzido por ela):
   "h1,h2,h3{color:#FFFFFF}" lá em cima (seção de tipografia) nunca tinha
   uma versão pro tema claro — todo título de página e cabeçalho de seção
   (ex.: "Painel", "Últimas execuções") ficava branco sobre fundo claro,
   ou seja, invisível, em qualquer uma das 8 telas com o tema claro
   ativado. Corrigido aqui pra usar a mesma variável de texto do tema. */
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3{color:var(--texto);}
html[data-theme="light"] ::selection{background:rgba(47,95,255,0.18);color:#0f172a;}
html[data-theme="light"] *{scrollbar-color:#cbd5e1 transparent;}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbd5e1;box-shadow:inset 0 0 0 1px rgba(47,95,255,.3),0 0 10px -2px rgba(47,95,255,.3);}

/* fundo decorativo: no claro tem que ficar bem discreto, senão vira uma
   mancha escura por cima de páginas com conteúdo real (diferente do
   login, que é só um cartão centralizado) */
html[data-theme="light"] .espaco{opacity:.4;}
html[data-theme="light"] .espaco .brilho{
  background:radial-gradient(1300px 760px at 50% -14%,rgba(37,99,235,.12),rgba(255,255,255,0) 52%,transparent 78%);
}
html[data-theme="light"] .espaco .horizonte{
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.35) 34%,rgba(0,150,110,.25) 66%,transparent);
}

/* barra lateral */
html[data-theme="light"] .menu{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,245,249,.97));
  box-shadow:inset -1px 0 0 rgba(37,99,235,.12),inset 1px 0 0 rgba(255,255,255,.7),14px 0 44px -18px rgba(15,23,42,.14);
}
html[data-theme="light"] .item{color:rgba(15,23,42,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
html[data-theme="light"] .item:hover{
  background:linear-gradient(180deg,rgba(47,95,255,.12),rgba(255,255,255,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 2px rgba(15,23,42,.06),0 0 22px -8px rgba(47,95,255,.35);
  color:var(--texto);
}
html[data-theme="light"] .item.ativo{
  color:var(--texto);
  background:linear-gradient(180deg,rgba(47,143,255,.18),rgba(47,143,255,.05));
  box-shadow:inset 0 2px 6px rgba(15,23,42,.08),inset 0 -1px 0 rgba(255,255,255,.7),0 0 24px -6px rgba(47,143,255,.3);
}
html[data-theme="light"] .item.sair{color:rgba(168,34,27,.85);}
html[data-theme="light"] .item.sair:hover{background:rgba(201,42,34,.1);color:var(--vermelho-claro);}
html[data-theme="light"] .conta{border-top:1px solid rgba(15,23,42,.1);}
html[data-theme="light"] .avatar{
  background:linear-gradient(180deg,rgba(47,143,255,.22),rgba(47,143,255,.08));
  border:1px solid rgba(47,143,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px -2px rgba(15,23,42,.2);
}

/* campos e formulários */
html[data-theme="light"] input[type=text],html[data-theme="light"] input[type=url],
html[data-theme="light"] input[type=date],html[data-theme="light"] input[type=time],
html[data-theme="light"] input[type=number],html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=email],html[data-theme="light"] input[type=search],
html[data-theme="light"] select,html[data-theme="light"] textarea{
  color-scheme:light;
  border-color:rgba(15,23,42,.14);
  box-shadow:inset 0 2px 5px rgba(15,23,42,.06),inset 0 -1px 0 rgba(255,255,255,.6);
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:rgba(15,23,42,.35);}
html[data-theme="light"] select option{background-color:#eef2f8;color:var(--texto);}

/* botões */
html[data-theme="light"] button,
html[data-theme="light"] button.secondary,html[data-theme="light"] button.ghost,
html[data-theme="light"] button.toggleBtn,html[data-theme="light"] .actionBtn,
html[data-theme="light"] button.genPwBtn,html[data-theme="light"] button.rowPwToggle{
  color:rgba(15,23,42,.75);border-color:rgba(15,23,42,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(15,23,42,.08);
}

/* popover de ajuda + cartões de resumo (histórico) */
html[data-theme="light"] .helpPop{
  background:linear-gradient(180deg,#ffffff,#f1f5f9);
  box-shadow:0 22px 46px -20px rgba(15,23,42,.22);
}
html[data-theme="light"] .summaryCard{
  background:linear-gradient(180deg,#ffffff,#f8fafc 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .summaryGrid{
  background:rgba(15,23,42,.08);
  box-shadow:0 6px 0 -1px #dbe3ee,0 7px 0 -1px rgba(255,255,255,.7),0 28px 44px -24px rgba(15,23,42,.16);
}

/* cartões de módulo do Painel (Formatador/Links) — CORRIGIDO: antes ficavam
   escuros de propósito (hack) porque o texto herdava a cor escura do tema
   claro e ficava ilegível sobre o fundo escuro original do cartão. Agora o
   cartão vira uma superfície branca de verdade, com filete de acento no topo
   (azul no Formatador, verde no Encurtador) em vez do gradiente escuro. */
html[data-theme="light"] .cartao{
  color:var(--lt-text);
  background:var(--lt-surface-card);
  border:1px solid var(--lt-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 40px -28px rgba(15,23,42,.18);
}
html[data-theme="light"] .cartao::before{background:none;} /* remove o gradiente de borda diagonal do tema escuro */
html[data-theme="light"] .cartao.azul{border-top:3px solid var(--lt-azul-stroke);}
html[data-theme="light"] .cartao.verde{border-top:3px solid var(--lt-verde-stroke);}
html[data-theme="light"] .cartao:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 26px 54px -30px rgba(15,23,42,.22);}
html[data-theme="light"] .cartao.azul:hover{border-color:var(--lt-border);border-top-color:var(--lt-azul-stroke);}
html[data-theme="light"] .cartao.verde:hover{border-color:var(--lt-border);border-top-color:var(--lt-verde-stroke);}
html[data-theme="light"] .cartao p{color:var(--lt-text-2);}
html[data-theme="light"] .cartao h2{color:var(--lt-text);}
html[data-theme="light"] .cartao .canto{color:var(--lt-border-strong);}
html[data-theme="light"] .cartao.azul .canto{color:var(--lt-azul-stroke);}
html[data-theme="light"] .cartao.verde .canto{color:var(--lt-verde-stroke);}
html[data-theme="light"] .moduleStats{border-top-color:var(--lt-border);}
html[data-theme="light"] .moduleStat .lbl{color:var(--lt-text-2);}
html[data-theme="light"] .moduleStat .val{color:var(--lt-text);}
html[data-theme="light"] .cartao.azul .moduleStat .val,
html[data-theme="light"] .cartao.azul .moduleStat .val.destaque{color:var(--lt-azul-stroke);text-shadow:none;}
html[data-theme="light"] .cartao.verde .moduleStat .val,
html[data-theme="light"] .cartao.verde .moduleStat .val.destaque{color:var(--lt-verde-stroke);text-shadow:none;}
/* a ilustração isométrica não pode "dominar" uma superfície agora clara */
html[data-theme="light"] .iso{opacity:.5;}

/* selos e badges (tabela "Últimas execuções", HYPERFLOW/WATI, status de fatura)
   — CORRIGIDO: antes usavam cor de texto clara fixa em hex (#b3d7ff) sobre um
   fundo azul claro translúcido, ilegível no tema claro. Contrastes medidos:
   selo azul 5.68:1, selo verde 4.81:1, selo âmbar/vermelho ≥4.5:1 (ver entrega). */
html[data-theme="light"] .platformBadge,html[data-theme="light"] .badge,
html[data-theme="light"] .trustBadge,html[data-theme="light"] .ticketLabel{
  background:var(--lt-azul-fill);border-color:var(--lt-azul-stroke);color:var(--lt-azul-stroke);
  text-shadow:none;box-shadow:none;
}
html[data-theme="light"] .platformBadge.hyperflow{
  background:var(--lt-verde-fill);border-color:var(--lt-verde-stroke);color:var(--lt-verde-stroke);text-shadow:none;
}
html[data-theme="light"] .statusBadge.pendente{
  background:var(--lt-amarelo-fill);border-color:var(--lt-amarelo-stroke);color:var(--lt-amarelo-stroke);text-shadow:none;
}
html[data-theme="light"] .statusBadge.pago{
  background:var(--lt-verde-fill);border-color:var(--lt-verde-stroke);color:var(--lt-verde-stroke);text-shadow:none;
}
html[data-theme="light"] .statusBadge.vencida{
  background:var(--lt-vermelho-fill);border-color:var(--lt-vermelho-stroke);color:var(--lt-vermelho-stroke);text-shadow:none;
}
html[data-theme="light"] .roleBadge.admin{color:var(--lt-verde-stroke);}
html[data-theme="light"] .roleBadge.user{color:var(--lt-text-2);}

/* estados vazios ("—", "sem registro") — já usavam --texto-2, que no tema
   claro já é escuro o bastante (--texto-2 -> #52607a, 8.76:1 sobre branco);
   reforçando aqui só pra deixar explícito que não é mais o texto claro do
   tema escuro em nenhum contexto. */
html[data-theme="light"] td.empty,html[data-theme="light"] .empty{color:var(--lt-text-2);}

/* dropdown de notificações — --relevo já vira um gradiente 100% opaco no
   tema claro (linear-gradient branco->#eef2f8, sem alpha), então já cumpre
   "nunca translúcido"; aqui só garantimos que o cabeçalho/itens usam os
   tokens corretos de texto. */
html[data-theme="light"] .notifPanelHead{color:var(--lt-text-2);}
html[data-theme="light"] .notifItem{color:var(--lt-text);}
html[data-theme="light"] .notifItem-empty{color:var(--lt-text-2);}

/* tabelas e abas */
html[data-theme="light"] tbody tr,html[data-theme="light"] table tr{border-bottom:1px solid rgba(15,23,42,.06);}
html[data-theme="light"] tbody tr:hover,html[data-theme="light"] table tr:hover{
  background:rgba(15,23,42,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -14px rgba(15,23,42,.12);
}
html[data-theme="light"] .tabBtn:hover{background:rgba(15,23,42,.04);}

/* login: cartão precisa continuar contrastando com o fundo claro */
html[data-theme="light"] .login-body .card{
  background:rgba(255,255,255,0.85);
  box-shadow:0 24px 70px -24px rgba(37,99,235,0.25),0 1px 0 rgba(255,255,255,0.6) inset;
}

@media (max-width:1180px){
  .modulos,.chartsGrid{grid-template-columns:1fr;}
  .summaryGrid{grid-template-columns:repeat(2,1fr);}
  .summaryCard:first-child,.summaryCard:last-child{border-radius:0;}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .menu{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;border-right:0;border-bottom:1px solid var(--linha);padding:16px 18px;}
  .menu .grupo{flex-direction:row;flex-wrap:wrap;}
  .menu .grupo .titulo{display:none;}
  .conta{margin-top:0;padding-top:0;border-top:0;flex-direction:row;align-items:center;}
  main{padding:24px 18px 48px;}
  main h1{font-size:26px;}
  .iso{display:none;}
  .cartao{grid-template-columns:1fr;}
}

/* ============================================================
   6. Celular — Rodada 29
   A barra lateral só "quebrava linha" (regra de 900px acima), o que em
   telas de celular (< 680px) sobra pouco espaço útil: os itens embolam,
   texto corta na borda (ex.: "NOTIFICAÇÕES") e o menu inteiro empurra o
   conteúdo real pra muito longe do topo. Abaixo de 680px o menu vira uma
   gaveta (fora da tela, abre por cima do conteúdo) com um botão fixo de
   abrir/fechar — o botão e o overlay são injetados uma vez por página via
   js/session.js (setupMobileMenu), reaproveitando o mesmo <nav class="menu">
   que já existe em toda tela autenticada. Acima de 680px nada muda: o
   botão fica escondido e o menu volta a ser a barra de sempre. */
.menuToggle{
  display:none;
  position:fixed;top:14px;left:14px;z-index:70;
  width:42px;height:42px;padding:0;gap:0;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--linha);background:var(--afundado);
  color:var(--texto);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.menuToggle svg{width:20px;height:20px;}
.menuOverlay{
  display:none;position:fixed;inset:0;z-index:59;
  background:rgba(4,6,10,.6);
}

@media (max-width:680px){
  .menuToggle{display:inline-flex;}
  .app.menuAberto .menuOverlay{display:block;}

  .menu{
    position:fixed;top:0;left:0;z-index:60;
    height:100vh;width:min(84vw,300px);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:22px;
    padding:22px 16px;
    border-right:1px solid var(--linha);border-bottom:0;
    box-shadow:24px 0 60px -20px rgba(0,0,0,.7);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .app.menuAberto .menu{transform:translateX(0);}
  .menu .grupo{flex-direction:column;flex-wrap:nowrap;gap:3px;}
  .menu .grupo .titulo{display:block;}
  .conta{flex-direction:column;align-items:stretch;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);}

  main{padding:70px 16px 40px;}
  main h1{font-size:22px;}
  .topo{gap:16px;}
  .summaryGrid{grid-template-columns:1fr 1fr;}
  .statCards,.topGrid{grid-template-columns:1fr;}
  .step{grid-template-columns:26px 1fr;gap:12px;}
  .step-num{width:26px;height:26px;font-size:11px;}
}

/* ---- correções pós-conversão ---- */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:4px;color:rgba(238,242,248,.75);
  border:1px solid rgba(255,255,255,.1);background:var(--relevo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 3px rgba(0,0,0,.8);
  transition:color .2s,border-color .2s,transform .2s;
}
button:hover{border-color:#2f8fff;color:#2f8fff;transform:translateY(-1px);}
.pwToggle,.helpBtn,.led i,.led b{box-shadow:none;}
.pwToggle{border:0;background:none;padding:0;}
.pwToggle:hover{border:0;transform:translateY(-50%);}
.pwToggle svg,.eyeOn,.eyeOff{width:18px;height:18px;}
.quickBar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.pillsRow{display:flex;gap:26px;flex-wrap:wrap;}
.summaryLabel{min-height:2.6em;}
.tabs{margin-bottom:-1px;}
.tabPanel.active{border-radius:0 7px 7px 7px;}
main > .panel,main > .tabPanel{margin:0;}

/* ---- login: logo, olho da senha, botão ---- */
.login-body img.logo,.login-body .logo{align-self:center;height:64px;width:auto;object-fit:contain;}
.login-body .card h1{text-align:center;font-size:26px;}
.login-body .card .eyebrow,.login-body .card .kicker{text-align:center;}
.pwWrap{position:relative;display:block;}
.pwWrap input{width:100%;padding-right:46px;}
.pwToggle .eyeOff{display:none;}
.pwToggle.showing .eyeOn{display:none;}
.pwToggle.showing .eyeOff{display:block;}
.login-body button[type=submit]{
  width:100%;padding:15px 24px;font-size:13px;color:#fff;
  border:1px solid transparent;
  background:var(--azul);
  box-shadow:var(--sombra-card);
  transition:background .16s ease,transform .12s ease;
}
.login-body button[type=submit]:hover{color:#fff;background:#2650e0;transform:translateY(-1px);}
.sideTools{position:fixed;right:24px;top:24px;z-index:3;}
.sideTools button{width:44px;height:44px;padding:0;border-radius:50%;}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2f8fff;}
.login-body .card .eyebrow{color:var(--texto-2);}

/* ============================================================
   Inclinação 3D (v2) — camadas injetadas pelo js/tilt.js.
   Aplicado via [data-tilt] em: .cartao (módulos do Painel) e
   .login-body .card (login). Removido do .topo (cabeçalho) na Rodada 39:
   o cabeçalho tem botões/controles de verdade (atualizar, "usuários
   ativos" no Admin) e a inclinação deslocava esses controles na tela ao
   aproximar o mouse, fazendo o clique "errar" o alvo — decorativo demais
   pra conviver com clique de precisão. Continua só nos cartões, que não
   têm esse problema.
   ============================================================ */
[data-tilt]{ /* a suavização do movimento já é feita pelo tilt.js quadro a quadro (lerp) — sem transition CSS aqui, que colidia com a transition própria do .cartao (mesma especificidade, quebrava o fade de box-shadow/border-color no hover) */ }
.tilt-shadow{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgba(0,0,0,.35);
  transition:filter .05s linear,transform .05s linear;
}
html[data-theme="light"] .tilt-shadow{background:rgba(15,23,42,.16);}
.tilt-glare{
  position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;
  mix-blend-mode:overlay;
}
/* filhos com paralaxe (ícone/ilustração) — nunca aplicado à logo */
[data-tilt-layer]{transition:transform .05s linear;}

/* ============================================================
   PRÉVIA DE REDESIGN — dashboard minimalista (padrão Vercel/
   Linear/Stripe). Bloco isolado no final do arquivo: sobrescreve
   tokens de cor, remove o fundo decorativo/neon e as ilustrações
   3D, achata badges e reorganiza o rodapé da barra lateral num
   popover de perfil. Nenhuma função existente foi alterada —
   apenas aparência. Ver LEIA-ME-CORRECOES.md para detalhes caso
   isto seja aprovado e vire uma Rodada de verdade.
   ============================================================ */

:root{
  --azul:#3B82F6;
  --azul-claro:#93c5fd;
  --verde:#10B981;
  --verde-claro:#34d399;
  --vermelho:#f87171;
  --vermelho-claro:#fca5a5;
  --amarelo:#F59E0B;
  --texto:#F8FAFC;
  --texto-2:#94A3B8;
  --texto-grupo:#64748B;
  --linha:rgba(255,255,255,.08);

  --ink:#090D16;
  --superficie:#111827;
  --afundado:#111827;
  --relevo:#111827;
  --sombra-card:0 1px 2px rgba(0,0,0,.35);

  --amber:#3B82F6;
  --amber-dim:#2563eb;
  --amber-wash:rgba(59,130,246,.14);
  --led-green:#10B981;
  --led-green-wash:rgba(16,185,129,.12);
  --led-red:#f87171;
  --led-red-wash:rgba(248,113,113,.12);
  --text:#F8FAFC;
  --text-dim:#94A3B8;
  --line:rgba(255,255,255,.06);
}

/* 1. Fundo — fora o "cyberpunk": sem malha isométrica, sem feixes de
   luz animados, sem brilho verde-neon. Fundo sólido e uma única
   linha sutil no topo. */
.espaco{display:none!important;}
body{background:var(--ink);}

/* 2. Tipografia — caixa alta só permanece em badges de status/labels
   de tabela em micro-fonte (já eram 10-12px; mantidos). Removida a
   caixa alta de botões (ficam em Sentence case, como o resto). */
button,.btn,.actionBtn{text-transform:none;letter-spacing:normal;font-family:var(--corpo);font-weight:500;}
.refreshBtn{font-family:var(--corpo);}

/* Alinhamento numérico das tabelas — classe já usada em várias
   páginas, mas sem regra correspondente até então. */
.dir{text-align:right;}

/* 3. Badges/pills — achatados (sem brilho interno), cores do novo
   status system. */
.platformBadge,.badge,.trustBadge,.ticketLabel,.statusBadge{
  border-radius:999px;box-shadow:none;font-weight:500;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#93c5fd;
}
.statusBadge.pendente{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amarelo);}
.statusBadge.pago{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:var(--verde);}
/* Rodada 75: 3º status de fatura ("vencida"), mesma lógica do bloco de
   cima — cor de aviso, reaproveitando os tokens de vermelho já
   redefinidos aqui em cima. */
.statusBadge.vencida{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--vermelho-claro);}
.statusBadge.aberto{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:var(--azul-claro);}
.statusBadge.prepago{background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.2);color:var(--texto-2);}
.platformBadge.hyperflow{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.2);color:var(--verde);}

/* 4. Cards/painéis/tabelas — bordas sutis e bem definidas (1px,
   rgba(255,255,255,.08) — dá mais profundidade sobre o fundo #090D16
   sem pesar). */
.panel,.card,.chartCard,.statCard,.topCard,.faqItem,.tabPanel.active,.varBlock,.resumeBanner{
  box-shadow:none;border:1px solid var(--linha);
}
/* .summaryGrid usa um técnica de "grade sem costura" (fundo claro +
   2px de espaço entre cards fazendo de divisor) — reforçar aqui com
   uma borda própria por card ia duplicar a linha. Só a moldura externa
   ganha a borda nova. */
.summaryGrid{border:1px solid var(--linha);}
tbody tr,table tr{border-bottom:1px solid var(--linha);}
.item.ativo{box-shadow:none;background:rgba(59,130,246,.12);}
.item:hover{box-shadow:none;background:rgba(59,130,246,.1);transform:none;}
.item.ativo::before{box-shadow:none;background:var(--azul);}
.item.ativo svg{stroke:var(--azul);}

/* 5. KPI row do Painel (substitui os dois cards 3D "Formatador"/
   "Encurtador" por uma linha de números + ações rápidas). */
.kpiRow{display:flex;flex-direction:column;gap:16px;}
.kpiGrid{grid-template-columns:repeat(4,1fr);}
.quickActions{display:flex;gap:12px;flex-wrap:wrap;}
.quickAction{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;
  border:1px solid var(--linha);background:var(--superficie);color:var(--texto);
  font-size:14px;font-weight:500;transition:border-color .15s ease,background .15s ease;
}
.quickAction svg{flex:none;color:var(--texto-2);}
.quickAction .chev{margin-left:2px;width:14px;height:14px;}
.quickAction:hover{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.06);color:var(--texto);}
@media (max-width:900px){.kpiGrid{grid-template-columns:repeat(2,1fr);}}

/* 6. Rodapé da barra lateral — perfil compacto com popover
   (Tema/Sugestão/Sair), em vez de 3 itens soltos sempre visíveis. */
.perfilWrap{position:relative;}
.perfilTrigger{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--texto);cursor:pointer;text-align:left;
  font-family:var(--corpo);font-size:14px;transition:background .15s ease,border-color .15s ease;
}
.perfilTrigger:hover{background:rgba(255,255,255,.03);border-color:var(--linha);}
.perfilTrigger .quem{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.perfilChevron{flex:none;width:16px;height:16px;color:var(--texto-2);transition:transform .15s ease;}
.perfilTrigger[aria-expanded="true"] .perfilChevron{transform:rotate(180deg);}
.perfilPopover{
  display:none;position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:20;
  padding:6px;border-radius:10px;border:1px solid var(--linha);background:var(--relevo);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.5);
}
.perfilPopover.aberto{display:block;}
.popItem{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;
  border:0;background:none;color:var(--texto);font-family:var(--corpo);font-size:13.5px;
  font-weight:500;text-align:left;cursor:pointer;text-decoration:none;
}
.popItem svg{flex:none;width:16px;height:16px;}
.popItem:hover{background:rgba(255,255,255,.05);color:var(--texto);}
.popItem-sair{color:var(--vermelho-claro);}
.popItem-sair:hover{background:rgba(248,113,113,.1);color:var(--vermelho-claro);}
.notifWrapCompacto{display:flex;justify-content:center;width:34px;margin:0 auto;}
.notifWrapCompacto .notifBadge{top:-4px;right:-4px;}
.notifIconBtn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:34px;height:34px;padding:0;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--texto-2);cursor:pointer;
}
.notifIconBtn:hover{background:rgba(255,255,255,.03);border-color:var(--linha);color:var(--texto);}
.notifIconBtn svg{width:18px;height:18px;}

/* ============================================================
   PRÉVIA — rodada adicional de limpeza (a pedido do usuário,
   antes de aplicar de verdade): remove o sub-rótulo "Base de
   disparo" dos cabeçalhos, encolhe os números grandes dos passos
   do Formatador para um marcador discreto, deixa o perfil da
   sidebar em uma única linha (sem a tag de papel duplicando o
   nome), e esconde um card de usuário morto no Formatador (ids
   duplicados faziam esse card nunca atualizar — sempre mostrava
   "…").
   ============================================================ */

/* 2. Sub-rótulo "BASE DE DISPARO" removido de todas as páginas —
   fica só o título da página atual. */
.kicker{display:none;}

/* 3. Formatador — números grandes ("01".."06") viram um marcador
   discreto; o estado aceso/apagado continua funcionando (mesmo
   JS de sempre, só muda a aparência). */
.step{grid-template-columns:14px 1fr;}
.step-num{
  width:10px;height:10px;font-size:0;border-width:0;
  box-shadow:none;background:rgba(255,255,255,.12);
}
.step-num.lit,.step.lit .step-num,.step.active .step-num{
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

/* Card de usuário duplicado no Formatador (id repetido de
   sessionInitial/sessionName/roleBadge — nunca era atualizado
   pelo JS, sempre ficava travado em "…"). Escondido por ser um
   componente morto, não por causa do redesign em si. */
.pillUser{display:none;}

/* 4. Perfil da sidebar em uma única linha — sem a tag de papel
   ("ADMIN") repetindo o que já está no nome de usuário logo
   acima. */
.perfilTrigger .roleBadge{display:none;}
.perfilTrigger .quem{justify-content:center;}

/* 1. Textos explicativos de cabeçalho (Financeiro/Consumo) —
   viram tooltip via botão "?" (mesmo padrão já usado no
   Formatador). Ver js/help-tooltip.js. */
.panel h2 .helpBtn,h2 .helpBtn{margin-left:2px;}
.finStatHint{margin-top:6px;}
.finStatHint .helpBtn{vertical-align:-4px;}

/* ============================================================
   PRÉVIA — acabamento final (a pedido do usuário, ainda como
   prévia): stroke dos ícones padronizado, hover nas linhas de
   tabela, e ações secundárias de "limpar filtro" viram link de
   texto em vez de botão com borda.
   ============================================================ */

/* Ícones — stroke uniforme em todo o site (os SVGs inline já são
   no mesmo estilo "vazado"/outline das bibliotecas Lucide/Phosphor;
   uma troca de biblioteca inteira — centenas de ícones, sem empacotador
   de ícones no projeto — ficou fora desta rodada por risco/tempo, mas
   fica registrado como possível próximo passo se for importante ter
   os arquivos SVG exatos do Lucide/Phosphor). Uma regra de CSS já
   sobrescreve o stroke-width de todos eles pro valor pedido. */
svg{stroke-width:1.5;}
.item svg,.quickAction svg{width:17px;height:17px;}

/* Tabelas — divisor um pouco mais fino que o de cards (60 vs 80 de
   opacidade), e hover suave por linha. */
tbody tr,table tr{border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s ease;}
tbody tr:hover{background:rgba(255,255,255,.035);}
thead tr,table tr:has(th){border-bottom:1px solid rgba(255,255,255,.08);}

/* Ações secundárias de "limpar filtro/período" — texto puro, sem
   fundo nem borda; some do caminho visual até que o usuário precise
   dele. Continuam com a classe .ghost (mesmo id/comportamento JS de
   sempre) — .linkBtn só muda a aparência. */
button.ghost.linkBtn{
  background:none;border:0;box-shadow:none;padding:2px 0;border-radius:0;
  color:var(--texto-2);font-family:var(--corpo);text-transform:none;letter-spacing:normal;
  font-size:13px;font-weight:500;
}
button.ghost.linkBtn:hover{background:none;border:0;color:var(--texto);transform:none;box-shadow:none;}
button.ghost.linkBtn:active{background:none;color:var(--texto-2);transform:none;}