/* Visual do portal Bateu — mesmas cores e fontes do site */
:root{
  color-scheme: light only;
  --verde:#0EA65D; --verde-esc:#0A7F47; --ambar:#F5A623; --vermelho:#E5484D;
  --grafite:#14181F; --cinza:#6B7280; --linha:#E2E4E0; --papel:#F7F8F5;
  --display:Sora,Inter,sans-serif; --corpo:Inter,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;}
html{background:var(--papel);}
body{margin:0;background:var(--papel);color:var(--grafite);font-family:var(--corpo);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
[hidden]{display:none !important;}
.wrap{max-width:980px;margin:0 auto;padding:0 20px;}
a{color:var(--verde-esc);}

/* topo */
.topo{background:var(--grafite);color:var(--papel);padding:14px 0;}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.topo svg{display:block;height:38px;width:auto;}
.topo .quem{display:flex;align-items:center;gap:12px;font-size:14px;color:#C9CDD3;flex-wrap:wrap;}
.topo .quem strong{color:var(--papel);font-weight:600;}
.sair{background:transparent;border:1px solid #3A4150;color:#C9CDD3;border-radius:60px;padding:6px 14px;
  font:600 13px var(--corpo);cursor:pointer;}
.sair:hover{border-color:#6B7280;color:#fff;}

/* tela de login */
.entrada{min-height:100vh;display:flex;flex-direction:column;}
.entrada .hero{background:var(--grafite);text-align:center;padding:38px 20px 70px;}
.entrada .hero svg{width:150px;height:auto;}
.entrada .hero p{color:#9CA3AF;margin:12px 0 0;font-size:15px;}
.caixa{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:28px 26px;
  max-width:420px;width:calc(100% - 40px);margin:-44px auto 40px;box-shadow:0 6px 24px rgba(20,24,31,.06);}
.caixa h1{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.6px;margin:0 0 4px;}
.caixa .sub{color:var(--cinza);font-size:15px;margin:0 0 20px;}
.rodape-login{text-align:center;color:var(--cinza);font-size:14px;padding:0 20px 30px;}

/* formulários */
label{display:block;font:600 13px var(--corpo);color:var(--grafite);margin:14px 0 6px;}
label .op{font-weight:400;color:var(--cinza);}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=month],select,textarea{
  width:100%;border:1.5px solid var(--linha);border-radius:10px;padding:11px 13px;font:400 16px var(--corpo);
  background:#fff;color:var(--grafite);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(14,166,93,.15);}
textarea{resize:vertical;min-height:90px;}
textarea.grande{min-height:340px;font:400 14.5px/1.55 var(--mono);}
input[type=file]{width:100%;font:400 14px var(--corpo);padding:10px;border:1.5px dashed var(--linha);border-radius:10px;background:#FBFBF9;}
.dica{font-size:13px;color:var(--cinza);margin:6px 0 0;}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.linha2{grid-template-columns:1fr;}}

.btn{display:inline-block;background:var(--verde);color:#08301E;border:0;border-radius:60px;
  font:800 16px var(--display);padding:13px 26px;cursor:pointer;text-decoration:none;text-align:center;}
.btn:hover{background:#0c9553;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn.cheio{width:100%;margin-top:20px;}
.btn.sec{background:#fff;color:var(--grafite);border:1.5px solid var(--linha);font-weight:600;font-family:var(--corpo);font-size:14px;padding:9px 18px;}
.btn.sec:hover{border-color:var(--cinza);background:#fff;}
.btn.perigo{background:#fff;color:#B3261E;border:1.5px solid #F0C4C1;font-weight:600;font-family:var(--corpo);font-size:14px;padding:9px 18px;}
.btn.peq{font-size:13px;padding:7px 14px;}
.link{background:none;border:0;color:var(--verde-esc);font:600 14px var(--corpo);cursor:pointer;padding:0;text-decoration:underline;}

.aviso{border-radius:10px;padding:12px 14px;font-size:14.5px;margin:14px 0 0;}
.aviso.erro{background:#FDECEA;color:#8A1C14;border:1px solid #F5C6C2;}
.aviso.ok{background:#E7F6EE;color:#0A5B34;border:1px solid #BDE5CF;}
.aviso.info{background:#FDF6E7;color:#5A3D07;border-left:4px solid var(--ambar);border-radius:0 10px 10px 0;}

/* conteúdo */
main.painel{padding:26px 0 60px;}
.abas{display:flex;gap:6px;border-bottom:1.5px solid var(--linha);margin:0 0 22px;overflow-x:auto;}
.aba{background:none;border:0;padding:11px 16px;font:600 15px var(--corpo);color:var(--cinza);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1.5px;white-space:nowrap;}
.aba.on{color:var(--grafite);border-bottom-color:var(--verde);}
.aba .n{background:var(--ambar);color:#3b2600;border-radius:20px;font:700 11px var(--mono);padding:2px 7px;margin-left:6px;}

.card{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:22px 24px;margin-bottom:18px;}
.card h2{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.4px;margin:0 0 4px;}
.card h3{font-family:var(--display);font-weight:600;font-size:16px;margin:0 0 8px;}
.card .sub{color:var(--cinza);font-size:14.5px;margin:0 0 6px;}
.olho{font:700 11px var(--mono);letter-spacing:1.8px;color:var(--cinza);text-transform:uppercase;margin:0 0 8px;}

.upsell{background:var(--grafite);color:var(--papel);border-radius:14px;padding:22px 24px;margin-bottom:18px;position:relative;}
.upsell .olho{color:#78E5AC;}
.upsell .fechar{position:absolute;top:14px;right:14px;background:none;border:0;color:#8B909B;font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;}
.upsell .fechar:hover{color:#fff;}
.upsell h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.4px;margin:0 22px 4px 0;color:#fff;}
.upsell .sub{color:#B7BCC4;font-size:14.5px;margin:0 0 16px;}
.upsell ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px;}
.upsell li{position:relative;padding-left:22px;font-size:14.5px;color:#E5E7EB;}
.upsell li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:7px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg);}
.upsell .rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.upsell .preco-nota{font:700 12px var(--mono);color:#8B909B;letter-spacing:.4px;}
.upsell .btn{background:var(--verde);color:#08301E;}

.caixa-sugestao{background:#F1F8F4;border:1.5px solid #BDE5CF;border-left:4px solid var(--verde);
  border-radius:0 10px 10px 0;padding:14px 16px;margin:10px 0 16px;}
.caixa-sugestao p{margin:0;font-size:15px;line-height:1.55;color:#0A5B34;}

.passos{list-style:none;counter-reset:passo;padding:0;margin:18px 0;display:grid;gap:16px;}
.passos li{position:relative;padding-left:42px;}
.passos li::before{counter-increment:passo;content:counter(passo);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--grafite);color:var(--papel);
  font:700 13px var(--mono);display:flex;align-items:center;justify-content:center;}
.passos li > strong{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;margin-bottom:2px;}
.passos li p{margin:0;color:var(--cinza);font-size:14.5px;line-height:1.5;}

.pill{display:inline-block;font:700 11px var(--mono);letter-spacing:.8px;text-transform:uppercase;border-radius:20px;padding:4px 10px;}
.pill.analise{background:#FDF6E7;color:#8A5A00;}
.pill.pronto{background:#E7F6EE;color:#0A7F47;}
.pill.pendente{background:#EEF0F3;color:#4B5563;}
.pill.atraso{background:#FDECEA;color:#B3261E;}
.pill.cancelado{background:#EEF0F3;color:#6B7280;text-decoration:line-through;}
.pill.plano{background:#14181F;color:#F7F8F5;}
.pill.inativo{background:#FDECEA;color:#B3261E;}
.pill.troca{background:#FDF6E7;color:#8A5A00;}

.item{border:1px solid var(--linha);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:#fff;}
.item .topo-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.item .titulo{font:600 16px var(--corpo);}
.item .meta{color:var(--cinza);font-size:13.5px;margin-top:2px;}
.item .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.item.clicavel{cursor:pointer;}
.item.clicavel:hover{border-color:#C7CBD1;}

.relatorio{border-top:1px solid var(--linha);margin-top:14px;padding-top:6px;font-size:16px;}
.relatorio h3{font-family:var(--display);font-size:18px;margin:22px 0 8px;letter-spacing:-.3px;}
.relatorio h4{font-family:var(--display);font-size:16px;margin:16px 0 6px;}
.relatorio p{margin:0 0 12px;}
.relatorio ul{padding-left:22px;margin:0 0 14px;}
.tabela-rolagem{overflow-x:auto;margin:10px 0 16px;}
table{border-collapse:collapse;width:100%;font-size:14.5px;}
th{text-align:left;font:700 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--cinza);
  padding:0 10px 8px 0;border-bottom:2px solid var(--linha);white-space:nowrap;}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--linha);vertical-align:top;}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px;}
.kpi{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px 16px;}
.kpi .v{font:800 24px var(--display);letter-spacing:-.8px;margin-top:2px;}
.kpi.alerta .v{color:#B3261E;} .kpi.bom .v{color:var(--verde-esc);}

.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.chip{border:1.5px solid var(--linha);background:#fff;border-radius:60px;padding:6px 14px;font:600 13px var(--corpo);cursor:pointer;color:var(--cinza);}
.chip.on{background:var(--grafite);border-color:var(--grafite);color:#fff;}

.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:820px){.duas-colunas{grid-template-columns:1fr;}}
.previa{background:#FBFBF9;border:1px solid var(--linha);border-radius:10px;padding:8px 18px;max-height:560px;overflow:auto;}
.caixa-senha{background:#F1F8F4;border:1.5px solid #BDE5CF;border-radius:12px;padding:16px 18px;margin-top:14px;}
.caixa-senha pre{white-space:pre-wrap;font:400 14px/1.6 var(--mono);margin:8px 0 12px;}
.hist-entry{border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:#FAFBF9;}
.vazio{color:var(--cinza);text-align:center;padding:26px 10px;font-size:15px;}
.barra-progresso{height:6px;border-radius:6px;background:var(--linha);overflow:hidden;margin-top:10px;}
.barra-progresso i{display:block;height:100%;width:0;background:var(--verde);transition:width .2s;}
details summary{cursor:pointer;font-weight:600;font-size:14.5px;margin:6px 0;}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--grafite);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:14.5px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw;}
#toast.on{opacity:1;transform:translateX(-50%);}
#toast.erro{background:#B3261E;}