/* Layout: protótipo Lovable (github.com/lexgaldino/layout-preview, public/prototipo/estilo.css) */
:root{
  --primaria:hsl(211 74% 37%);--primaria-esc:hsl(211 74% 30%);--primaria-clara:hsl(211 74% 95%);
  --sucesso:hsl(100 72% 24%);--sucesso-claro:hsl(100 50% 94%);
  --erro:hsl(1 72% 59%);--erro-texto:hsl(1 65% 42%);--erro-claro:hsl(1 80% 96%);
  --atencao:hsl(36 77% 41%);--atencao-texto:hsl(36 80% 30%);--atencao-claro:hsl(40 90% 94%);
  --fundo:#fff;--fundo-2:hsl(40 7% 95%);--texto:hsl(0 0% 10%);--texto-2:hsl(40 1% 41%);
  --borda:hsl(40 6% 86%);--cinza:hsl(0 0% 60%);
  --raio:10px;--raio-p:6px;--esp:16px;--esp-p:8px;
  --alt-btn:48px;--alt-campo:44px;--sombra:0 1px 3px hsl(0 0% 0%/.08);
}
*{box-sizing:border-box}
body{margin:0;font:400 15px/1.5 Inter,system-ui,sans-serif;color:var(--texto);background:var(--fundo-2);font-variant-numeric:tabular-nums}
h1{font-size:24px;font-weight:600;margin:0 0 4px}h2{font-size:18px;font-weight:600;margin:24px 0 12px}h3{font-weight:600;margin:8px 0}
a{color:var(--primaria)}
.sub,.mut{color:var(--texto-2);margin:0}.pequeno{font-size:13px;margin-top:12px}
/* topo */
.topo{position:sticky;top:0;z-index:20;background:var(--primaria);color:#fff}
.topo-int{max-width:1200px;margin:auto;display:flex;align-items:center;gap:16px;padding:0 var(--esp);min-height:56px}
.marca{color:#fff;text-decoration:none;font-weight:600;font-size:16px;display:flex;flex-direction:column;line-height:1.2}
.marca small{font-weight:400;opacity:.8;font-size:12px}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.menu a,.usuario{color:#fff;text-decoration:none;padding:8px 10px;border-radius:var(--raio-p);font-size:14px;white-space:nowrap}
.menu a:hover{background:var(--primaria-esc)}.menu a.ativo{background:hsl(0 0% 100%/.18);font-weight:600}
.usuario{opacity:.85;border-left:1px solid hsl(0 0% 100%/.3);margin-left:8px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid hsl(0 0% 100%/.4);color:#fff;font-size:22px;width:44px;height:44px;border-radius:var(--raio-p)}
.conteudo{max-width:1200px;margin:auto;padding:24px var(--esp) 48px}
.com-rodape .conteudo{padding-bottom:120px}
.cab-pagina{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
/* cartões */
.cartao{background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);padding:var(--esp);margin-bottom:var(--esp);box-shadow:var(--sombra)}
.sem-pad{padding:0;overflow:hidden}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--esp)}
.kpi{background:var(--fundo);border:1px solid var(--borda);border-left:4px solid var(--primaria);border-radius:var(--raio);padding:14px 16px;display:flex;flex-direction:column}
.kpi span{color:var(--texto-2);font-size:14px}.kpi strong{font-size:28px;font-weight:700}.kpi small{color:var(--texto-2);font-size:13px}
.kpi.verde{border-left-color:var(--sucesso)}.kpi.verde strong{color:var(--sucesso)}
.kpi.vermelho{border-left-color:var(--erro)}.kpi.vermelho strong{color:var(--erro-texto)}
.kpi.ambar{border-left-color:var(--atencao)}.kpi.ambar strong{color:var(--atencao-texto)}
/* botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--alt-btn);padding:0 20px;border-radius:var(--raio-p);border:1px solid var(--borda);background:var(--fundo);color:var(--texto);font:600 15px Inter,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--fundo-2)}
.btn.primario{background:var(--primaria);border-color:var(--primaria);color:#fff}.btn.primario:hover{background:var(--primaria-esc)}
.btn.sucesso{background:var(--sucesso);border-color:var(--sucesso);color:#fff}
.btn.perigo{color:var(--erro-texto);border-color:var(--erro)}.btn.perigo:hover{background:var(--erro-claro)}
.btn.perigo-cheio{background:var(--erro-texto);border-color:var(--erro-texto);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}.btn.largo{width:100%}
.link{background:none;border:0;color:var(--primaria);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.campo{width:100%;min-height:var(--alt-campo);padding:8px 12px;border:1px solid var(--borda);border-radius:var(--raio-p);font:inherit;background:#fff;color:var(--texto)}
.campo:focus{outline:3px solid var(--primaria-clara);border-color:var(--primaria)}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.check{flex-direction:row;align-items:center;gap:8px;font-weight:400;min-height:44px}
.check input{width:20px;height:20px}
.barra-acoes{display:flex;gap:12px;align-items:center;margin-bottom:var(--esp);flex-wrap:wrap}
.busca{flex:1;min-width:220px}
.rotulo{font-weight:600;font-size:14px;margin-bottom:8px}
.segmentado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.segmentado.quebra{display:flex;flex-wrap:wrap}
.segmentado button{min-height:var(--alt-btn);border:2px solid var(--borda);background:#fff;border-radius:var(--raio-p);font:600 15px Inter;cursor:pointer;padding:0 16px;color:var(--texto)}
.segmentado button.ativo{border-color:var(--primaria);background:var(--primaria-clara);color:var(--primaria)}
.datas,.filtros{display:flex;gap:12px;margin-top:12px;align-items:flex-end;flex-wrap:wrap}
.datas label,.filtros label{flex:1;min-width:140px}
/* selos */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;vertical-align:middle}
.badge.vermelho{background:var(--erro-claro);color:var(--erro-texto)}
.badge.ambar{background:var(--atencao-claro);color:var(--atencao-texto)}
.badge.azul{background:var(--primaria-clara);color:var(--primaria)}
.badge.verde{background:var(--sucesso-claro);color:var(--sucesso)}
.badge.cinza{background:var(--fundo-2);color:var(--texto-2)}
.badge.grande{font-size:13px}
/* tabela */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th,.tabela td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--borda)}
.tabela thead th{background:var(--fundo-2);color:var(--texto-2);font-weight:600;font-size:13px}
.tabela .num{text-align:right}
.grupo-cab th,.grupo-cab{background:var(--primaria-clara);color:var(--primaria-esc);font-weight:600}
.saldo{font-weight:700;font-size:16px}
.verde-t{color:var(--sucesso)}.vermelho-t{color:var(--erro-texto)}.forte{font-weight:700}
.tabela tr.zerado td{color:var(--cinza)}
.tabela tr.vencido td{background:var(--erro-claro)}
.subtotal td{font-weight:600;background:var(--fundo-2)}
tfoot td{font-weight:700;background:var(--fundo-2);border-top:2px solid var(--texto)}
.clicavel{cursor:pointer}.clicavel:hover td{background:var(--primaria-clara)}
.estornado td{text-decoration:line-through;color:var(--texto-2)}.estornado .badge{text-decoration:none}
.inativo td{color:var(--texto-2)}
.oculta-sem-uso .sem-uso{display:none}
/* alertas, vazio */
.alerta{padding:12px 16px;border-radius:var(--raio-p);margin:0 0 12px;font-size:14px;border-left:4px solid}
.alerta.erro{background:var(--erro-claro);border-color:var(--erro);color:var(--erro-texto)}
.alerta.sucesso{background:var(--sucesso-claro);border-color:var(--sucesso);color:var(--sucesso)}
.alerta.ambar{background:var(--atencao-claro);border-color:var(--atencao);color:var(--atencao-texto)}
.vazio{text-align:center;padding:40px 16px}.vazio-ico{font-size:40px}
.estado-titulo{color:var(--texto-2);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-top:40px;border-top:1px dashed var(--borda);padding-top:16px}
/* dar baixa */
.grupo-baixa{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);margin-bottom:12px;overflow:hidden}
.grupo-baixa .grupo-cab{padding:10px 16px}
.linha-baixa{display:grid;grid-template-columns:1fr 90px 130px 90px;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--borda)}
.lb-info{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lb-saldo{text-align:right;display:flex;flex-direction:column}
.lb-saldo small,.lb-campo small{color:var(--texto-2);font-size:12px;font-weight:500}
.lb-saldo strong{font-size:20px}
.fica{font-style:normal;font-size:13px;font-weight:600}
.campo.grande{font-size:20px;font-weight:600;text-align:right;min-height:52px}
.lb-campo.menor .campo{text-align:right}
.linha-baixa.preenchida{background:var(--sucesso-claro)}.linha-baixa.preenchida .fica{color:var(--sucesso)}
.linha-baixa.excede{background:var(--erro-claro);box-shadow:inset 4px 0 var(--erro)}.linha-baixa.excede .fica{color:var(--erro-texto)}
.linha-baixa.excede .campo{border-color:var(--erro)}
.ocultando .ocultavel{display:none}
.rodape-fixo{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--borda);box-shadow:0 -4px 12px hsl(0 0% 0%/.08);z-index:15}
.rf-int{max-width:1200px;margin:auto;padding:12px var(--esp);display:flex;align-items:center;justify-content:space-between;gap:12px}
#resumo{font-weight:600}
.modal{border:0;border-radius:var(--raio);padding:24px;max-width:640px;width:calc(100% - 32px)}
.modal::backdrop{background:hsl(0 0% 0%/.45)}.modal h2{margin-top:0}
.modal-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
/* importar */
.dropzone{border:2px dashed var(--primaria);background:var(--primaria-clara);border-radius:var(--raio);padding:40px;text-align:center;align-items:center;cursor:pointer;margin-bottom:var(--esp);font-size:16px}
.expansivel{margin-top:16px}.expansivel summary{cursor:pointer;color:var(--primaria);font-weight:600;min-height:44px;display:flex;align-items:center}
/* usuários */
.duas-colunas{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--esp);align-items:start}
.form{display:flex;flex-direction:column;gap:12px}.form h2{margin:0}
/* login */
.tela-login{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(180deg,var(--primaria) 0 40%,var(--fundo-2) 40%)}
.login{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;padding:32px}
.login h1{text-align:center;margin:0}.login .sub{text-align:center;margin-top:-10px}.login .mut{text-align:center}
.login-marca{font-size:40px;text-align:center}
/* impressão */
.cab-impressao,.assinaturas{display:none}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;font-size:11px}
  .topo,.nao-imprime,.rodape-fixo,.so-ok,.kpis,.acoes,.vazio,.estado-titulo{display:none!important}
  .cab-impressao{display:block;border-bottom:2px solid #000;margin-bottom:10px}.cab-impressao h1{font-size:16px}
  .cartao{border:0;box-shadow:none;padding:0}.conteudo{padding:0;max-width:none}
  .tabela th,.tabela td{padding:4px 6px}
  .assinaturas{display:flex;gap:60px;margin-top:60px}.assinaturas div{flex:1;border-top:1px solid #000;text-align:center;padding-top:4px}
}
/* celular */
@media (max-width:900px){
  .menu-btn{display:block}.menu{display:none}
  .menu-aberto .menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:56px;left:0;right:0;background:var(--primaria);padding:8px 16px 16px}
  .menu-aberto .menu a,.menu-aberto .usuario{padding:12px;border:0;margin:0}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi strong{font-size:22px}
  .duas-colunas{grid-template-columns:1fr}
  .tabela.empilha thead{display:none}
  .tabela.empilha tr{display:block;padding:8px 12px;border-bottom:1px solid var(--borda)}
  .tabela.empilha tr.grupo-cab,.tabela.empilha tr.subtotal{display:flex;justify-content:space-between}
  .tabela.empilha td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:right}
  .tabela.empilha td[data-r]::before{content:attr(data-r);color:var(--texto-2);font-weight:500;text-align:left}
  .tabela.empilha th{border:0;padding:6px 0}
  .linha-baixa{grid-template-columns:1fr 1fr;grid-template-areas:"info saldo" "aplic perdas"}
  .lb-info{grid-area:info}.lb-saldo{grid-area:saldo}
  .segmentado{grid-template-columns:1fr}
  .rf-int{flex-direction:column;align-items:stretch;text-align:center}
  .btn.primario{width:100%}
}

/* ---- Ajustes para as páginas reais (PHP) ---- */
.oculto,.filtrado{display:none!important}
.mono{font-family:ui-monospace,Consolas,monospace}
.n{text-align:right}
/* Seletor segmentado feito com rádios (funciona sem JS e envia no formulário) */
.segmentado label{flex-direction:row;align-items:center;justify-content:center;min-height:var(--alt-btn);border:2px solid var(--borda);background:#fff;border-radius:var(--raio-p);font:600 15px Inter,sans-serif;cursor:pointer;padding:0 16px;color:var(--texto)}
.segmentado label:has(input:checked){border-color:var(--primaria);background:var(--primaria-clara);color:var(--primaria)}
.segmentado input{position:absolute;opacity:0;pointer-events:none}
.segmentado label:focus-within{outline:3px solid var(--primaria-clara)}
.datas .btn,.filtros .btn{flex:0 0 auto}
.linha-baixa.indisponivel .lb-info b{color:var(--texto-2)}
.campo:disabled{background:var(--fundo-2);color:var(--cinza)}
.sel-unidade{min-width:220px;width:auto}
.dropzone{display:flex;flex-direction:column;gap:4px;position:relative}
.dropzone.arrastando{background:hsl(211 74% 90%)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.obs{margin-top:12px}
.grupo-cab .total-grupo{text-align:right;white-space:nowrap}
@media (max-width:900px){.sel-unidade{width:100%}}
/* Menu cabe numa linha até ~1180px; abaixo disso vira ☰ */
.marca{white-space:nowrap}
.menu a,.usuario{padding:8px 9px}
@media (max-width:1180px) and (min-width:901px){
  .menu-btn{display:block}.menu{display:none}
  .menu-aberto .menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:56px;left:0;right:0;background:var(--primaria);padding:8px 16px 16px}
  .menu-aberto .menu a,.menu-aberto .usuario{padding:12px;border:0;margin:0}
}
/* Celular: períodos lado a lado para economizar tela */
@media (max-width:900px){
  .segmentado:not(.quebra){grid-template-columns:repeat(3,1fr);gap:6px}
  .segmentado:not(.quebra) label{padding:0 4px;font-size:14px;text-align:center}
}