/* ============================================================
   A Casa do Marketing — sistema visual do painel
   Carregado por TODAS as páginas. Carregar DEPOIS do <style> da
   página, pra este arquivo ser a palavra final nos componentes
   compartilhados (cabeçalho, cards, tabela, botões, movimento).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --preto:#0A0A0A;
  --carvao:#141210;        /* superfície elevada — mesmo tom do <option> */
  --creme:#F5EDE2;
  --laranja:#E85820;
  --laranja-claro:#FF8642;
  --laranja-escuro:#b8431a;
  --gradiente:linear-gradient(135deg,var(--laranja-claro) 0%,var(--laranja) 55%,var(--laranja-escuro) 100%);

  --linha:rgba(245,237,226,.12);
  --linha-forte:rgba(245,237,226,.2);
  --suave:rgba(245,237,226,.55);
  --apagado:rgba(245,237,226,.35);

  --verde:#3FB950; --amarelo:#D9A93C; --vermelho:#F0533F;
  --verde-fraco:rgba(63,185,80,.14);
  --amarelo-fraco:rgba(217,169,60,.14);
  --vermelho-fraco:rgba(240,83,63,.14);

  --r-p:8px; --r-m:12px; --r-g:16px;
  --saida:cubic-bezier(.22,1,.36,1);     /* desacelera forte: parece "assentar" */
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--preto);
  color:var(--creme);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  padding:24px 20px 64px;
  /* brilho laranja fixo no topo: a assinatura da marca, sem animação
     — glow que respira o dia inteiro cansa quem olha o painel 5x por dia */
  background-image:radial-gradient(1100px 520px at 82% -18%, rgba(232,88,32,.10), transparent 62%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.wrap{max-width:1400px;margin:0 auto}

h1,h2,.display{
  font-family:'Inter Tight',Inter,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
}

a{color:var(--laranja)}
::selection{background:rgba(232,88,32,.3);color:var(--creme)}

:focus-visible{
  outline:2px solid var(--laranja-claro);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- cabeçalho + marca ---------- */
header{
  display:flex;flex-wrap:wrap;gap:20px;
  align-items:flex-end;justify-content:space-between;
  margin-bottom:26px;
}

.marca{display:flex;align-items:center;gap:14px}

/* O telhado do logo, recortado do arquivo original da marca e usado
   como máscara — assim ele aceita o gradiente laranja e escala sem serrilhar. */
.telhado{
  width:46px;height:28px;flex-shrink:0;
  background:var(--gradiente);
  filter:drop-shadow(0 3px 10px rgba(232,88,32,.35));
  -webkit-mask:url(/assets/marca-casa.png) center/contain no-repeat;
  mask:url(/assets/marca-casa.png) center/contain no-repeat;
}
.marca h1{font-size:22px;line-height:1.05}
.marca .sub{font-size:12.5px;color:var(--suave);margin-top:3px}

/* ---------- navegação ---------- */
.nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.nav a{
  font-size:12.5px;font-weight:600;text-decoration:none;
  color:var(--suave);
  border:1px solid transparent;border-radius:999px;
  padding:7px 13px;
  transition:color .18s,background .18s,border-color .18s;
}
.nav a:hover{color:var(--creme);background:rgba(245,237,226,.06);border-color:var(--linha)}
.nav a[aria-current=page]{
  color:var(--preto);
  background:var(--gradiente);
  border-color:transparent;
  font-weight:700;
}

/* ---------- controles ---------- */
.ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

select,input,button,textarea{
  font-family:inherit;font-size:13px;color:var(--creme);
  background:rgba(245,237,226,.06);
  border:1px solid var(--linha);
  border-radius:var(--r-p);
  padding:9px 12px;outline:none;
  transition:border-color .18s,background .18s,transform .12s var(--saida);
}
select:hover,input:hover{border-color:var(--linha-forte)}
select:focus,input:focus,textarea:focus{border-color:var(--laranja)}
select option{background:var(--carvao);color:var(--creme)}
input[type=search]{min-width:200px}

button{cursor:pointer;font-weight:600}
button:hover{background:rgba(245,237,226,.12)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed}

.btn-p{
  background:var(--gradiente);border-color:transparent;color:#1a0d06;font-weight:700;
  box-shadow:0 4px 14px -6px rgba(232,88,32,.7);
}
.btn-p:hover{background:var(--gradiente);filter:brightness(1.08)}

/* ---------- termômetro da carteira ----------
   A assinatura da tela: uma barra que É a carteira. Cada faixa é uma
   fatia dos clientes por situação, e clicar filtra a tabela. Responde
   "como está a carteira" antes de qualquer número. */
.termo{margin-bottom:22px}
.termo-barra{
  height:12px;border-radius:999px;overflow:hidden;
  background:rgba(245,237,226,.07);
  border:1px solid var(--linha);
}
/* A barra entra varrendo da esquerda. O scaleX vai na camada de dentro,
   não nas faixas: escalando faixa a faixa elas abririam buracos no meio
   da animação. E a largura fica inline no HTML, sem depender de JS —
   se o script falhar, a barra ainda mostra a verdade. */
.termo-fill{
  display:flex;height:100%;
  transform-origin:left;
  animation:varre .8s var(--saida);   /* sem fill-mode de propósito: se a animação não rodar, a barra aparece cheia e certa, nunca vazia */
}
@keyframes varre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.termo-fill span{display:block;height:100%;cursor:pointer;transition:filter .18s}
.termo-fill span:hover{filter:brightness(1.3)}
.termo-fill .s-verde{background:var(--verde)}
.termo-fill .s-amarelo{background:var(--amarelo)}
.termo-fill .s-vermelho{background:var(--vermelho)}
.termo-fill .s-inativo{background:rgba(245,237,226,.18)}
.termo-legenda{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;
  font-size:11.5px;color:var(--suave);
}
.termo-legenda button{
  background:none;border:none;padding:0;font-size:inherit;color:inherit;
  display:flex;align-items:center;gap:6px;font-weight:500;
}
.termo-legenda button:hover{background:none;color:var(--creme)}
.termo-legenda b{color:var(--creme);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- cards de número ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:12px;margin-bottom:24px}

.card{
  position:relative;overflow:hidden;
  background:rgba(245,237,226,.04);
  border:1px solid var(--linha);
  border-radius:var(--r-m);
  padding:16px 18px;
  transition:border-color .2s,transform .2s var(--saida),background .2s;
}
/* fio laranja que corre no topo do card ao passar o mouse */
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradiente);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--saida);
}
.card:hover{border-color:var(--linha-forte);background:rgba(245,237,226,.06);transform:translateY(-2px)}
.card:hover::after{transform:scaleX(1)}

.card .rot{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);font-weight:600}
.card .val{
  font-family:'Inter Tight',Inter,sans-serif;
  font-size:28px;font-weight:800;letter-spacing:-.035em;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.1;
  white-space:nowrap;                      /* "R$ 24.677,50" não pode quebrar no meio */
}
.card .val.moeda{font-size:24px}           /* valor em reais é mais largo: cabe menor */
/* A variação sai de dentro do número e vira legenda própria: "6%" sozinho
   colado no valor não diz 6% de quê. */
.card .delta{font-size:11.5px;font-weight:600;margin-top:5px}
.card .delta.up{color:var(--verde)} .card .delta.down{color:#e8a08a}
.card .delta span{color:var(--suave);font-weight:500}
.card .val.al{color:var(--vermelho)}
.card .val.ok{color:var(--verde)}
.card .val.at{color:var(--amarelo)}

/* ---------- tabela ---------- */
.tabela{border:1px solid var(--linha);border-radius:var(--r-m);overflow:hidden;background:rgba(245,237,226,.02)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}

th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--suave);font-weight:700;text-align:right;padding:13px 14px;
  background:#151311;white-space:nowrap;
  position:sticky;top:0;z-index:2;                 /* cabeçalho fica à vista ao rolar */
  border-bottom:1px solid var(--linha);
}
th:first-child,td:first-child{text-align:left}
td{
  padding:14px;border-top:1px solid var(--linha);
  font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
tbody tr{transition:background .16s}
tbody tr:hover{background:rgba(245,237,226,.045)}

/* trilho de situação na borda esquerda da linha */
tbody tr td:first-child{position:relative}
tbody tr td:first-child::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cor-linha,transparent);
  opacity:.85;
}
tr.st-verde     td:first-child{--cor-linha:var(--verde)}
tr.st-amarelo   td:first-child{--cor-linha:var(--amarelo)}
tr.st-vermelho  td:first-child{--cor-linha:var(--vermelho)}
tr.inativo td{opacity:.45}

/* ---------- situação ---------- */
.cli{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative}
.dot.verde{background:var(--verde)}
.dot.amarelo{background:var(--amarelo)}
.dot.vermelho{background:var(--vermelho)}
.dot.inativo{background:transparent;border:1.5px solid rgba(245,237,226,.3)}
.dot.indeterminado{background:#8a8f98}

/* SÓ o vermelho pulsa. Se tudo pulsa, nada chama atenção. */
.dot.vermelho::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--vermelho);
  animation:halo 2.4s ease-out infinite;
}
@keyframes halo{
  0%{transform:scale(.6);opacity:.9}
  70%{transform:scale(1.5);opacity:0}
  100%{opacity:0}
}

.var{font-size:11px;font-weight:700;margin-left:6px}
.var.up{color:var(--verde)} .var.down{color:#e8a08a}

.nome{font-weight:600;letter-spacing:-.01em;color:var(--creme);text-decoration:none;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
a.nome:hover{color:var(--laranja);border-bottom-color:var(--laranja)}

.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);border:1px solid var(--linha);border-radius:4px;padding:1px 5px;margin-left:6px}
.rotres{display:block;font-size:10.5px;color:var(--suave);font-weight:500;margin-top:1px}
.fraco{color:var(--apagado)}

.saldo.zerado,.saldo.critico{color:#ff8a78;font-weight:700}
.saldo.baixo{color:#e8c576;font-weight:600}
.saldo.ok{color:var(--verde)}

.alertas{padding:0 14px 13px;text-align:left}
.pill{display:inline-block;font-size:11.5px;font-weight:500;border-radius:6px;padding:3px 9px;margin:3px 5px 0 0}
.pill.vermelho{background:var(--vermelho-fraco);color:#ff8a78}
.pill.amarelo{background:var(--amarelo-fraco);color:#e8c576}
.pill.verde{background:var(--verde-fraco);color:#7ee08a}

/* ---------- blocos de aviso / porta de entrada ---------- */
.aviso{
  background:rgba(245,237,226,.04);border:1px solid var(--linha);
  border-radius:var(--r-m);padding:30px;text-align:center;
  color:var(--suave);font-size:14px;line-height:1.6;
}
.aviso b{color:var(--creme)}

.gate{
  max-width:420px;margin:9vh auto 0;
  background:rgba(245,237,226,.04);border:1px solid var(--linha);
  border-radius:var(--r-g);padding:32px;
  box-shadow:var(--sombra);
}
.gate .telhado{width:52px;height:31px;margin:0 auto 18px}
.gate h2{font-size:19px;margin-bottom:6px;text-align:center}
.gate p{font-size:13px;color:var(--suave);line-height:1.6;margin-bottom:18px;text-align:center}
.gate input{width:100%;margin-bottom:10px}
.gate button{width:100%;padding:11px}
.erro{color:#ff8a78;font-size:12.5px;margin-top:10px;text-align:center}

footer{margin-top:20px;font-size:12px;color:var(--suave);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- carregando ---------- */
.esqueleto{display:grid;gap:10px}
.esqueleto i{
  display:block;height:46px;border-radius:var(--r-p);
  background:linear-gradient(90deg,rgba(245,237,226,.04) 25%,rgba(245,237,226,.09) 37%,rgba(245,237,226,.04) 63%);
  background-size:400% 100%;
  animation:brilho 1.4s ease-in-out infinite;
}
@keyframes brilho{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- entrada em cena ----------
   Uma vez, na carga. O escalonamento vai até o 12º item: em tabela de
   30 linhas, esperar a última aparecer vira lentidão, não elegância. */
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.entra{animation:sobe .42s var(--saida) both}
.entra-1{animation-delay:.04s} .entra-2{animation-delay:.08s}
.entra-3{animation-delay:.12s} .entra-4{animation-delay:.16s}
.entra-5{animation-delay:.2s}  .entra-6{animation-delay:.24s}
.entra-7{animation-delay:.28s} .entra-8{animation-delay:.32s}
.entra-9{animation-delay:.36s} .entra-10{animation-delay:.4s}
.entra-11{animation-delay:.44s} .entra-12{animation-delay:.48s}

/* ---------- responsivo ---------- */
@media(max-width:640px){
  body{padding:16px 12px 48px}
  .marca h1{font-size:19px}
  .card .val{font-size:23px}
  header{align-items:flex-start}
  .ctrl{width:100%}
  .ctrl input[type=search]{flex:1 1 100%}
}

/* ---------- quem pediu menos movimento, recebe menos ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .termo-fill{animation:none}
}

/* ---------- cliente que acabou de entrar em vermelho ----------
   Aparece junto com o toque. O som sozinho deixa a pessoa procurando o que
   mudou; o nome escrito resolve em um segundo. */
.alerta-novo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--vermelho-fraco);
  border:1px solid rgba(240,83,63,.45);
  border-radius:var(--r-m);
  padding:12px 14px;margin-bottom:20px;
  font-size:13.5px;
  animation:sobe .42s var(--saida);
}
.alerta-novo b{font-weight:700}
.alerta-novo button{
  padding:5px 11px;font-size:12px;
  background:rgba(245,237,226,.07);border-color:rgba(240,83,63,.35);
}
.alerta-novo #fechar-novos{margin-left:auto;color:var(--suave)}

/* "no ar agora": o ponto que pisca é a resposta que o Handerson procura antes
   de qualquer número. Verde porque é o único estado que não pede ação. */
.noar{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--verde)}
.noar::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--verde);animation:batida 2s ease-out infinite}
@keyframes batida{
  0%{box-shadow:0 0 0 0 rgba(126,224,138,.55)}
  70%{box-shadow:0 0 0 7px rgba(126,224,138,0)}
  100%{box-shadow:0 0 0 0 rgba(126,224,138,0)}
}

/* Fonte do dado. A carteira é uma só, mas quem olha precisa saber de onde
   veio o número antes de cobrar alguém por ele. */
.tag.fonte-google{color:#8ab4f8;border-color:rgba(138,180,248,.4)}
.nota-google{font-size:12.5px;color:var(--suave);line-height:1.6;border:1px dashed var(--linha);
  border-radius:var(--r-p);padding:11px 14px;margin:0 0 14px}
.nota-google.ruim{border-style:solid;border-color:rgba(240,83,63,.35);color:#ff8a78}
.nota-google b{color:var(--creme)}