/* Mesma paleta do portal.nexphi.com.br — verde NexPhi sobre fundo claro. */
:root{
  --bg:#f4f6f3; --surface:#ffffff; --border:#e5e9e2; --border-soft:#eef1ea;
  --green:#10b981; --green-dim:#0ea173; --green-bright:#059669; --green-tint:#e6f8f1;
  --text:#0f1712; --muted:#66766c;
  --red:#b91c1c; --red-tint:#fef2f2; --amber:#b45309; --amber-tint:#fffbeb;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow-sm:0 1px 2px rgba(15,23,18,.05); --shadow-md:0 8px 24px -10px rgba(15,23,18,.10);
  --raio:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}
a{color:inherit}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;gap:24px;padding:14px 28px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.marca{font-weight:800;font-size:16px;letter-spacing:-.3px}
.topo nav{display:flex;gap:4px;flex:1}
.topo nav a{padding:8px 14px;border-radius:9px;text-decoration:none;font-weight:700;color:var(--muted)}
.topo nav a:hover{background:var(--border-soft);color:var(--text)}
.topo nav a.ativo{background:var(--green-tint);color:var(--green-bright)}
.usuario{display:flex;align-items:center;gap:14px;font-weight:700}
.usuario small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.sair{color:var(--muted);text-decoration:none;font-size:12px;font-weight:700}
main{max-width:1180px;margin:0 auto;padding:26px 28px 60px}
.titulo{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px}
.ajuda{color:var(--muted);margin:0 0 18px;font-weight:500}

/* ---------- avisos ---------- */
.aviso{padding:11px 15px;border-radius:10px;font-weight:700;margin-bottom:16px}
.aviso.ok{background:var(--green-tint);color:var(--green-bright)}
.aviso.erro{background:var(--red-tint);color:var(--red)}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--raio);padding:14px 16px;margin:18px 0;box-shadow:var(--shadow-sm)}
.filtros label,.formulario label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:12px;color:var(--muted)}
.filtros .cresce{flex:1;min-width:220px}
input,select{font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:9px;padding:9px 11px;outline:none}
input:focus,select:focus{border-color:var(--green)}
button{font-family:var(--font);font-weight:800;font-size:13px;cursor:pointer;border:none;border-radius:9px;
  padding:10px 18px;background:linear-gradient(160deg,var(--green-bright),var(--green-dim));color:#fff}
button:hover{filter:brightness(1.06)}

/* ---------- tabela ---------- */
.tabela-rolagem{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--raio);overflow:hidden;box-shadow:var(--shadow-sm)}
.tabela th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--border-soft)}
.tabela td{padding:12px 14px;border-top:1px solid var(--border-soft);vertical-align:top}
.tabela tr.inativo{opacity:.5}
.forte{font-weight:800}
.direita{text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posicao{color:var(--muted);font-weight:800;width:32px}
.motivo{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px;max-width:230px}
.rodape-tabela{color:var(--muted);font-size:12px;font-weight:600;margin-top:10px}
.vazio{color:var(--muted);font-weight:600;padding:26px 0}

/* ---------- selo de status ---------- */
.selo{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800}
.selo.aprovado{background:var(--green-tint);color:var(--green-bright)}
.selo.reprovado{background:var(--red-tint);color:var(--red)}
.selo.pendente{background:var(--amber-tint);color:var(--amber)}

.acoes{white-space:nowrap}
.acoes a{font-weight:800;color:var(--green-bright);text-decoration:none;margin-right:8px}
.linha-acao{display:inline-flex;gap:6px;align-items:center;margin:0}
.mini{padding:5px 10px;font-size:11.5px;background:var(--border-soft);color:var(--muted)}
.mini.ok{background:var(--green-tint);color:var(--green-bright)}
.mini.nao{background:var(--red-tint);color:var(--red)}
.senha-inline{width:130px;padding:5px 8px;font-size:12px}

/* ---------- cartões e painéis ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0}
.cartao{background:var(--surface);border:1px solid var(--border);border-radius:var(--raio);
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.cartao span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800}
.cartao strong{display:block;font-weight:800;letter-spacing:-.5px;margin-top:6px;line-height:1.15}
.cartao.destaque{background:linear-gradient(160deg,var(--green-bright),var(--green-dim));color:#fff;box-shadow:var(--shadow-md)}
.cartao.destaque span{color:rgba(255,255,255,.85)}
.painel{background:var(--surface);border:1px solid var(--border);border-radius:var(--raio);
  padding:20px 22px;margin-top:20px;box-shadow:var(--shadow-sm)}
.painel h2{margin:0 0 4px;font-size:15px;font-weight:800}
.painel .tabela{border:none;box-shadow:none}


/* ---------- formulário ---------- */
.formulario{display:flex;flex-direction:column;gap:16px;max-width:520px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--raio);padding:22px;box-shadow:var(--shadow-sm)}
.painel .formulario{border:none;box-shadow:none;padding:16px 0 0}
.formulario small{font-weight:600;color:var(--muted);font-size:11px}
.formulario .dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulario .marcador{flex-direction:row;align-items:flex-start;gap:9px;color:var(--text);font-size:13px}
.formulario .marcador input{margin-top:2px}
.formulario button{align-self:flex-start}

/* ---------- login ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,#eef4f0,#f4f6f3)}
.cartao-login{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px 32px;
  width:min(380px,92vw);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-md)}
.cartao-login h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.5px}
.cartao-login .sub{margin:0 0 6px;color:var(--muted);font-weight:600}
.cartao-login label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:12px;color:var(--muted)}
.cartao-login button{margin-top:6px;padding:12px}

@media (max-width:760px){
  .topo{flex-wrap:wrap;gap:12px;padding:12px 16px}
  main{padding:18px 16px 50px}
  .formulario .dupla{grid-template-columns:1fr}
}

/* Cartões por estado: o painel precisa mostrar dinheiro em cada situação, e
   não só o confirmado — com um comprovante pendente e nada aprovado, a
   versão anterior lia zero em tudo e parecia quebrada. */
.cartao em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-top:4px}
.cartao.destaque em{color:rgba(255,255,255,.8)}
.cartao.pendente{border-color:#f3e2bd;background:var(--amber-tint)}
.cartao.pendente span,.cartao.pendente em{color:var(--amber)}
.cartao.recusado{border-color:#f5d6d6;background:var(--red-tint)}
.cartao.recusado span,.cartao.recusado em{color:var(--red)}
/* A barra do dia é o total recebido; a parte cheia, embaixo, é o confirmado. */
.barra{position:relative;background:#dcefe6;display:flex;align-items:flex-end}
.barra-confirmada{width:100%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--green),var(--green-dim))}

/* Estorno: nem verde (não é dinheiro em caixa) nem vermelho (não é fraude
   nem recusa) — é dinheiro que entrou e voltou. */
.selo.estornado{background:#eef0f4;color:#5b6472;text-decoration:line-through}
.cartao.estornado{border-color:#dfe3ea;background:#f4f6f9}
.cartao.estornado span,.cartao.estornado em{color:#5b6472}
.mini.estorno{background:#eef0f4;color:#5b6472}

/* Os cards do painel são links para a lista já filtrada por aquele estado. */
a.cartao{display:block;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
a.cartao:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
a.cartao em{opacity:.85}

/* Cada barra do gráfico abre a lista daquele dia. */
a.barra-coluna{text-decoration:none;color:inherit}
a.barra-coluna:hover .barra{filter:brightness(.94)}
a.barra-coluna:hover span{color:var(--green-bright);font-weight:800}

/* Valor grande dentro do card: com milhões na tela ("R$ 399.596.138,89") o
   número passava da borda do quadradinho. Ele agora encolhe conforme a
   largura disponível, usa dígito de largura fixa (tabular-nums, senão os
   cards ficam com números de tamanhos diferentes) e, no pior caso, quebra
   dentro do card em vez de vazar. */
.cartao{overflow:hidden}
.cartao strong{
  font-size:clamp(15px, 1.45vw + 8px, 22px);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.cartao span{overflow-wrap:anywhere}

/* Os seis cards numa fileira só, como era antes — alargar o card para caber
   o número tinha empurrado metade deles para uma segunda linha, e o painel
   perdeu a leitura de bater o olho e ver tudo. Agora quem cede é o número,
   não o layout: a fileira é fixa em 6 colunas e o valor encolhe até caber.
   Abaixo de 900px não cabe seis de jeito nenhum, e aí sim eles quebram. */
@media (min-width:900px){
  .cartoes{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cartao{padding:14px 15px}
  .cartao strong{font-size:clamp(13px, 1.15vw + 2px, 20px)}
  .cartao span{font-size:10px;letter-spacing:.3px}
  .cartao em{font-size:10px}
}
@media (max-width:899px){
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ---------- modal de estorno ---------- */
.modal{border:none;border-radius:16px;padding:0;max-width:520px;width:92vw;box-shadow:0 24px 60px -20px rgba(15,23,18,.35)}
.modal::backdrop{background:rgba(15,23,18,.45)}
.modal-corpo{display:flex;flex-direction:column;gap:15px;padding:26px 26px 22px;background:var(--surface)}
.modal-corpo h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}
.modal-alvo{margin:-8px 0 0;color:var(--muted);font-weight:700;font-size:12px}
.modal-alvo strong{color:var(--text)}
.modal-corpo label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:12px;color:var(--muted)}
.modal-corpo small{font-weight:600;font-size:11px;color:var(--muted-2, #8a9691)}
.modal-corpo textarea{font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
  border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;outline:none;resize:vertical}
.modal-corpo textarea:focus{border-color:var(--green)}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
button.ghost{background:var(--border-soft);color:var(--muted)}
button.perigo{background:linear-gradient(160deg,#dc2626,#b91c1c)}

/* ---------- aba de estornos ---------- */
.estorno-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--raio);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.estorno-item header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.valor-estorno{font-weight:800;font-size:16px;color:#5b6472;text-decoration:line-through}
.texto-motivo{margin:12px 0 0;padding:11px 13px;background:var(--bg);border-radius:10px;
  font-weight:600;line-height:1.5}
.anexos{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.anexo-foto img{height:88px;width:auto;border-radius:9px;border:1px solid var(--border);display:block}
.anexo-arquivo{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;background:var(--border-soft);
  border-radius:9px;font-weight:700;font-size:12px;text-decoration:none;color:var(--text)}
.anexo-arquivo:hover{background:var(--green-tint);color:var(--green-bright)}

/* ---------- três colunas do dia, ao vivo ---------- */
.ao-vivo-cabecalho{display:flex;align-items:center;gap:10px}
.ao-vivo-cabecalho h2{margin:0}
.data-hoje{color:var(--muted);font-weight:700;font-size:12px;margin-left:4px}
.pulso{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--green-bright);background:var(--green-tint);padding:3px 9px;border-radius:99px}
.pulso::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulsando 1.8s ease-in-out infinite}
@keyframes pulsando{0%,100%{opacity:1}50%{opacity:.25}}

.colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.coluna{border:1px solid var(--border);border-radius:var(--raio);overflow:hidden;background:var(--bg)}
.coluna header{padding:12px 14px;border-bottom:1px solid var(--border)}
.coluna header span{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.coluna header strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:3px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.coluna header em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.coluna.aprovado header{background:var(--green-tint);border-color:#c9ecdd}
.coluna.aprovado header span,.coluna.aprovado header strong{color:var(--green-bright)}
.coluna.pendente header{background:var(--amber-tint);border-color:#f3e2bd}
.coluna.pendente header span,.coluna.pendente header strong{color:var(--amber)}
.coluna.reprovado header{background:var(--red-tint);border-color:#f5d6d6}
.coluna.reprovado header span,.coluna.reprovado header strong{color:var(--red)}

.coluna ul{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.coluna li{padding:9px 14px;border-top:1px solid var(--border-soft);background:var(--surface)}
.coluna li:first-child{border-top:none}
.linha-topo{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.linha-topo .cliente{font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-topo .valor{font-weight:800;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.linha-baixo{display:flex;gap:8px;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.linha-baixo .motivo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vazio-coluna{margin:0;padding:22px 14px;text-align:center;color:var(--muted);font-weight:600;
  font-size:12px;background:var(--surface)}
@media (max-width:820px){ .colunas{grid-template-columns:1fr} }

/* Filtro de data no menu de cima, um só para as três telas. */
.filtro-topo{display:flex;align-items:center;gap:7px;margin-right:4px}
.filtro-topo input[type=date]{padding:6px 9px;font-size:12px;border-radius:8px}
.filtro-topo span{font-size:11px;font-weight:700;color:var(--muted)}
.filtro-topo button{padding:7px 13px;font-size:12px}
@media (max-width:900px){
  .filtro-topo{order:3;width:100%;margin:0}
  .filtro-topo input[type=date]{flex:1;min-width:0}
}

/* Pódio do Top 10: medalha no lugar do número nos três primeiros. */
.medalha{font-size:19px;line-height:1}
.tabela tr:has(.medalha) .forte{font-size:13.5px}

/* ---------- gráfico por dia (refeito) ----------
   O anterior esticava cada barra para preencher a largura toda: com o mês
   corrente filtrado, seis dias viravam seis blocos gordos e o gráfico
   parecia um paredão. Agora a barra tem largura máxima, as colunas ficam
   coladas à esquerda, e ganharam eixo de valor e legenda — sem isso a
   parte clara da barra não dizia nada a quem olhava. */
.grafico-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.grafico-cabecalho h2{margin:0}
.grafico-cabecalho .ajuda{margin:2px 0 0}
.legenda{display:flex;gap:14px;font-size:11px;font-weight:700;color:var(--muted)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.amostra{width:11px;height:11px;border-radius:3px;display:inline-block}
.amostra.confirmada{background:linear-gradient(180deg,var(--green),var(--green-dim))}
.amostra.pendente{background:#dcefe6}

.grafico-area{display:flex;gap:12px;margin-top:18px}
.eixo{display:flex;flex-direction:column;justify-content:space-between;height:190px;
  font-size:10px;font-weight:700;color:var(--muted-2,#8a9691);text-align:right;
  padding-bottom:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.grafico{flex:1;display:flex;align-items:flex-end;gap:10px;height:190px;overflow-x:auto;padding-bottom:0;
  background:repeating-linear-gradient(to top,transparent 0,transparent 84px,var(--border-soft) 84px,var(--border-soft) 85px);
  background-size:100% 170px;background-position:0 -20px;background-repeat:repeat-y}
.barra-coluna{flex:0 0 auto;width:100%;max-width:46px;min-width:26px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%;gap:7px;text-decoration:none;color:inherit}
.barra{width:100%;min-height:4px;border-radius:7px 7px 0 0;background:#e4f1ea;
  display:flex;align-items:flex-end;transition:filter .12s}
.barra-confirmada{width:100%;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,var(--green),var(--green-dim))}
.barra-coluna .dia{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.barra-coluna:hover .barra{filter:brightness(.93)}
.barra-coluna:hover .dia{color:var(--green-bright);font-weight:800}

/* ---------- a linha inteira conta o status ----------
   Antes só o selo tinha cor, e numa tela com 100 linhas era preciso caçar a
   coluna Status para saber o que era o quê. Agora a linha toda diz, e a faixa
   colorida na borda esquerda dá para ver de longe, mesmo com a tela rolada
   para o lado. Os tons são de fundo, bem claros, para o texto continuar
   legível — vermelho forte em linha inteira cansa a vista em segundos. */
.tabela tr.linha-reprovado td{background:#fdf3f3}
.tabela tr.linha-reprovado td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tabela tr.linha-pendente td{background:#fffaf0}
.tabela tr.linha-pendente td:first-child{box-shadow:inset 3px 0 0 #d99b21}
.tabela tr.linha-aprovado td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.tabela tr.linha-estornado td{background:#f6f7f9}
.tabela tr.linha-estornado td:first-child{box-shadow:inset 3px 0 0 #94a0ae}
.tabela tr.linha-estornado .valor,.tabela tr.linha-estornado td.direita.forte{text-decoration:line-through;color:#5b6472}

.tabela tbody tr:hover td{filter:brightness(.985)}
.tabela tr.linha-reprovado .motivo{color:#a83232}
.tabela tr.linha-pendente .motivo{color:#a5741a}
/* O selo dentro de uma linha já colorida vira contorno: dois blocos do mesmo
   tom, um dentro do outro, ficam pesados. */
.tabela tr.linha-reprovado .selo{background:transparent;border:1.5px solid #eec4c4;color:var(--red)}
.tabela tr.linha-pendente .selo{background:transparent;border:1.5px solid #f0dcb0;color:var(--amber)}