/* ============================================================
   SISTEMA — o design system de assinatura da plataforma.

   Uma fonte de verdade para cor, tipo, espaço, canto e movimento.
   As telas (app.css) só COMPÕEM o que está aqui; nunca inventam
   valor novo "só para essa peça".

   Vocabulário em português, como o resto do código:
     papel      fundo da página (nunca branco puro — branco é cartão)
     superficie cartão, balão, campo
     tinta      texto principal
     grafite    texto secundário, metadado
     fantasma   borda, divisor
     marca      a cor do cliente (WR = verde). É UMA variável: trocar
                de cliente é trocar de valor aqui.
     dourado    tensão e destaque, em pouco volume — 1 lugar por tela
     rampa-1..5 os cinco passos do funil (sequencial, um tom só)

   Tipografia própria, self-hosted (public/app/fontes):
     Funnel Display  títulos e números-herói
     Funnel Sans     corpo
     Sometype Mono   etiquetas, hora, recibo, números tabulares
   ============================================================ */

/* ---------- fontes ---------- */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./fontes/funnel-display-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./fontes/funnel-sans-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("./fontes/funnel-sans-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Sometype Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fontes/sometype-mono-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Sometype Mono";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fontes/sometype-mono-italic.woff2") format("woff2");
}

/* ---------- tokens: claro (o padrão) ---------- */
:root {
  color-scheme: light;

  --papel: #f3f1ea;
  --papel-fundo: #ebe8df;        /* um degrau abaixo do papel: trilho de lista, faixa de rodapé */
  --superficie: #ffffff;
  --superficie-2: #f8f7f3;       /* campo, linha zebrada, hover de linha */
  --tinta: #13251d;
  --grafite: #68766e;
  --grafite-forte: #4a5750;      /* para texto pequeno: 5,5:1 sobre o papel */
  --fantasma: #dfe5df;
  --fantasma-forte: #c9d3cb;

  --marca: #087847;
  --marca-forte: #05563a;
  --marca-tinta: #ffffff;        /* texto sobre a marca */
  --marca-5: rgba(8, 120, 71, .06);
  --marca-12: rgba(8, 120, 71, .12);
  --marca-25: rgba(8, 120, 71, .25);

  --dourado: #b88931;
  --dourado-12: rgba(184, 137, 49, .14);
  --dourado-30: rgba(184, 137, 49, .32);

  --sucesso: #087847;
  --atencao: #b27818;
  --atencao-12: rgba(178, 120, 24, .13);
  --erro: #c43e38;
  --erro-12: rgba(196, 62, 56, .12);

  /* funil — rampa sequencial validada (claro): monotônica em luminosidade */
  --rampa-1: #bfe3d0;
  --rampa-2: #7ec5a2;
  --rampa-3: #3ca575;
  --rampa-4: #087847;
  --rampa-5: #05563a;
  --rampa-1-tinta: #13251d;      /* texto sobre os dois passos claros */
  --rampa-2-tinta: #13251d;
  --rampa-3-tinta: #ffffff;
  --rampa-4-tinta: #ffffff;
  --rampa-5-tinta: #ffffff;
  --neutro-fora: #b8bdb9;        /* encerrado / não traqueado: fora da rampa */

  /* o trilho lateral vive sempre em tom de marca, nos dois temas */
  --trilho-fundo: #05563a;
  --trilho-fundo-2: #043f28;
  --trilho-tinta: rgba(255, 255, 255, .78);
  --trilho-tinta-ativa: #ffffff;
  --trilho-ativo: rgba(255, 255, 255, .14);

  --balao-contato: #ffffff;
  --balao-agente: #dcefe4;
  --balao-voce: #fff3d6;         /* quando o humano assume — um toque de dourado */

  --sombra-flutuante: 0 24px 60px rgba(7, 26, 18, .16);

  --fonte-titulo: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --fonte-corpo: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "Sometype Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --u: 4px;
  --raio-s: 6px;
  --raio: 10px;
  --raio-m: 14px;
  --raio-g: 20px;

  --rapido: 140ms cubic-bezier(.2, .7, .3, 1);
  --normal: 220ms cubic-bezier(.2, .7, .3, 1);

  --trilho-largura: 72px;
  --topo-altura: 56px;
}

/* ---------- tokens: escuro (selecionado, não espelhado) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --papel: #071a12;
    --papel-fundo: #051309;
    --superficie: #0d251a;
    --superficie-2: #112e21;
    --tinta: #f5f2e9;
    --grafite: #9eafa5;
    --grafite-forte: #b9c7be;
    --fantasma: #244435;
    --fantasma-forte: #2f5644;

    --marca: #38b878;
    --marca-forte: #6fd3a2;
    --marca-tinta: #071a12;
    --marca-5: rgba(56, 184, 120, .08);
    --marca-12: rgba(56, 184, 120, .16);
    --marca-25: rgba(56, 184, 120, .32);

    --dourado: #d9b461;
    --dourado-12: rgba(217, 180, 97, .14);
    --dourado-30: rgba(217, 180, 97, .34);

    --sucesso: #4dcc8b;
    --atencao: #e0ae55;
    --atencao-12: rgba(224, 174, 85, .14);
    --erro: #ef756f;
    --erro-12: rgba(239, 117, 111, .14);

    /* a rampa INVERTE a direção de propósito: no escuro, mais fundo = mais claro */
    --rampa-1: #1d5c42;
    --rampa-2: #2a8159;
    --rampa-3: #38b878;
    --rampa-4: #6fd3a2;
    --rampa-5: #a7e6c8;
    --rampa-1-tinta: #f5f2e9;
    --rampa-2-tinta: #f5f2e9;
    --rampa-3-tinta: #071a12;
    --rampa-4-tinta: #071a12;
    --rampa-5-tinta: #071a12;
    --neutro-fora: #4b5f54;

    --trilho-fundo: #04120c;
    --trilho-fundo-2: #030d09;

    --balao-contato: #16362a;
    --balao-agente: #0f4a30;
    --balao-voce: #3b2f12;

    --sombra-flutuante: 0 24px 60px rgba(0, 0, 0, .5);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #071a12;
  --papel-fundo: #051309;
  --superficie: #0d251a;
  --superficie-2: #112e21;
  --tinta: #f5f2e9;
  --grafite: #9eafa5;
  --grafite-forte: #b9c7be;
  --fantasma: #244435;
  --fantasma-forte: #2f5644;
  --marca: #38b878;
  --marca-forte: #6fd3a2;
  --marca-tinta: #071a12;
  --marca-5: rgba(56, 184, 120, .08);
  --marca-12: rgba(56, 184, 120, .16);
  --marca-25: rgba(56, 184, 120, .32);
  --dourado: #d9b461;
  --dourado-12: rgba(217, 180, 97, .14);
  --dourado-30: rgba(217, 180, 97, .34);
  --sucesso: #4dcc8b;
  --atencao: #e0ae55;
  --atencao-12: rgba(224, 174, 85, .14);
  --erro: #ef756f;
  --erro-12: rgba(239, 117, 111, .14);
  --rampa-1: #1d5c42;
  --rampa-2: #2a8159;
  --rampa-3: #38b878;
  --rampa-4: #6fd3a2;
  --rampa-5: #a7e6c8;
  --rampa-1-tinta: #f5f2e9;
  --rampa-2-tinta: #f5f2e9;
  --rampa-3-tinta: #071a12;
  --rampa-4-tinta: #071a12;
  --rampa-5-tinta: #071a12;
  --neutro-fora: #4b5f54;
  --trilho-fundo: #04120c;
  --trilho-fundo-2: #030d09;
  --balao-contato: #16362a;
  --balao-agente: #0f4a30;
  --balao-voce: #3b2f12;
  --sombra-flutuante: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 14px/1.5 var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--marca); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--raio-s); }
::selection { background: var(--marca-25); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- tipografia ---------- */
.t-heroi {
  font: 600 clamp(56px, 9vw, 104px)/.95 var(--fonte-titulo);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.t-h1 { font: 600 28px/1.15 var(--fonte-titulo); letter-spacing: -.02em; }
.t-h2 { font: 600 22px/1.2 var(--fonte-titulo); letter-spacing: -.015em; }
.t-h3 { font: 600 17px/1.3 var(--fonte-titulo); letter-spacing: -.01em; }
.t-corpo-g { font-size: 15px; }
.t-meta { font-size: 13px; color: var(--grafite-forte); }
.t-mini { font-size: 12px; color: var(--grafite-forte); }
.t-num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

/* a etiqueta: assinatura do sistema — mono, caixa alta, tracking aberto */
.etiqueta {
  font: 500 11px/1 var(--fonte-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grafite-forte);
}

/* ---------- ícones (SVG inline, 20px, traço 1.75) ---------- */
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-s { width: 16px; height: 16px; }
.ico-g { width: 24px; height: 24px; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--raio);
  border: 1px solid var(--fantasma-forte);
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido);
}
.botao:hover { background: var(--superficie-2); border-color: var(--grafite); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.botao.principal { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }
.botao.principal:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.botao.perigo { color: var(--erro); border-color: var(--erro-12); background: var(--erro-12); }
.botao.perigo:hover { background: var(--erro); color: #fff; border-color: var(--erro); }
.botao.dourado { background: var(--dourado); border-color: var(--dourado); color: #1a1405; }
.botao.discreto { border-color: transparent; background: transparent; color: var(--grafite-forte); }
.botao.discreto:hover { background: var(--superficie-2); color: var(--tinta); }
.botao.p { height: 32px; padding: 0 12px; font-size: 13px; }
.botao.icone { width: 38px; padding: 0; }
.botao.icone.p { width: 32px; }

/* ---------- campos ---------- */
.campo {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--fantasma-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-12); }
.campo::placeholder { color: var(--grafite); }
textarea.campo { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.campo.invalido { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-12); }
.rotulo { display: block; margin-bottom: 6px; font-weight: 500; }
.ajuda { margin-top: 6px; font-size: 13px; color: var(--grafite-forte); }
.ajuda.erro { color: var(--erro); }
.linha-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* interruptor (liga/desliga) — só para coisas que podem estar ligadas ao mesmo tempo */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .pista {
  width: 40px; height: 24px; border-radius: 12px;
  background: var(--fantasma-forte);
  position: relative; transition: background var(--rapido); flex: none;
}
.interruptor .pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--rapido);
}
.interruptor input:checked + .pista { background: var(--marca); }
.interruptor input:checked + .pista::after { transform: translateX(16px); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---------- cartão e caixa de configuração ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--fantasma);
  border-radius: var(--raio-m);
}
.cartao > .cabeca { padding: 18px 20px 0; }
.cartao > .corpo { padding: 18px 20px 20px; }
.cartao .cabeca .t-h3 + .t-meta { margin-top: 3px; }
.cartao .escopo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 4px 8px; border-radius: 6px;
  font: 500 11px/1 var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase;
}
.escopo.agente { background: var(--marca-12); color: var(--marca-forte); }
.escopo.conta { background: var(--dourado-12); color: var(--dourado); }
.cartao .rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--fantasma);
  background: var(--superficie-2); border-radius: 0 0 var(--raio-m) var(--raio-m);
}
.rodape .estado-salvo { font-size: 13px; color: var(--grafite-forte); display: flex; align-items: center; gap: 6px; }
.rodape .estado-salvo.ok { color: var(--sucesso); }

/* ---------- chips e selos ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 7px;
  font: 500 11px/1 var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--superficie-2); color: var(--grafite-forte); border: 1px solid var(--fantasma);
  white-space: nowrap;
}
.chip .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.marca { background: var(--marca-12); color: var(--marca-forte); border-color: transparent; }
.chip.dourado { background: var(--dourado-12); color: var(--dourado); border-color: transparent; }
.chip.atencao { background: var(--atencao-12); color: var(--atencao); border-color: transparent; }
.chip.erro { background: var(--erro-12); color: var(--erro); border-color: transparent; }
/* etiquetas do funil: cada passo com a cor da rampa */
.chip.etapa-1 { background: var(--rampa-1); color: var(--rampa-1-tinta); border-color: transparent; }
.chip.etapa-2 { background: var(--rampa-2); color: var(--rampa-2-tinta); border-color: transparent; }
.chip.etapa-3 { background: var(--rampa-3); color: var(--rampa-3-tinta); border-color: transparent; }
.chip.etapa-4 { background: var(--rampa-4); color: var(--rampa-4-tinta); border-color: transparent; }
.chip.etapa-5 { background: var(--dourado); color: #1a1405; border-color: transparent; }
.chip.etapa-fora { background: transparent; color: var(--grafite); border-style: dashed; }

/* ---------- avatar ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--marca-12); color: var(--marca-forte);
  font: 600 15px/1 var(--fonte-titulo);
  overflow: hidden;
}
.avatar.p { width: 32px; height: 32px; font-size: 13px; }
.avatar.g { width: 56px; height: 56px; font-size: 20px; }
.avatar.sem-nome { background: var(--superficie-2); color: var(--grafite); border: 1px dashed var(--fantasma-forte); }

/* ---------- faixas (avisos de página inteira) ---------- */
.faixa {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--fantasma);
  font-size: 13.5px;
}
.faixa .ico { flex: none; }
.faixa .texto { flex: 1; }
.faixa.dourada { background: var(--dourado-12); color: var(--tinta); border-color: var(--dourado-30); }
.faixa.atencao { background: var(--atencao-12); }
.faixa.erro { background: var(--erro-12); }
.faixa.marca { background: var(--marca-12); }
.faixa strong { font-weight: 600; }

/* ---------- vazio (empty state) ---------- */
.vazio {
  display: grid; place-items: center; text-align: center;
  padding: 48px 24px; color: var(--grafite-forte);
}
.vazio .ico-g { width: 40px; height: 40px; margin-bottom: 12px; color: var(--grafite); }
.vazio .t-h3 { color: var(--tinta); margin-bottom: 4px; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--fantasma); }
.tabela th { font: 500 11px/1 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite-forte); }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--fantasma); vertical-align: middle; }
.tabela tr:hover td { background: var(--superficie-2); }
.tabela .num { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- gaveta lateral e diálogo ---------- */
.veu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 26, 18, .45);
  opacity: 0; pointer-events: none; transition: opacity var(--normal);
}
.veu.aberto { opacity: 1; pointer-events: auto; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(440px, 100vw);
  background: var(--superficie);
  border-left: 1px solid var(--fantasma);
  box-shadow: var(--sombra-flutuante);
  transform: translateX(100%); transition: transform var(--normal);
  display: flex; flex-direction: column;
}
.gaveta.aberta { transform: none; }
.gaveta .cabeca { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--fantasma); }
.gaveta .corpo { flex: 1; overflow: auto; padding: 20px; }
.dialogo {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--normal);
}
.dialogo.aberto { opacity: 1; pointer-events: auto; }
.dialogo .caixa {
  width: min(460px, 100%);
  background: var(--superficie); border: 1px solid var(--fantasma);
  border-radius: var(--raio-g); box-shadow: var(--sombra-flutuante);
  padding: 24px;
  transform: translateY(8px) scale(.98); transition: transform var(--normal);
}
.dialogo.aberto .caixa { transform: none; }
.dialogo .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; }
.toast {
  padding: 10px 14px; border-radius: var(--raio);
  background: var(--tinta); color: var(--papel);
  font-size: 13.5px; box-shadow: var(--sombra-flutuante);
  animation: subir var(--normal);
}
.toast.erro { background: var(--erro); color: #fff; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* ---------- utilidades ---------- */
.linha { display: flex; align-items: center; gap: 10px; }
.entre { justify-content: space-between; }
.cresce { flex: 1; min-width: 0; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); box-shadow: 0 0 0 3px var(--marca-12); }
.ponto-vivo.fora { background: var(--erro); box-shadow: 0 0 0 3px var(--erro-12); }
.ponto-vivo.espera { background: var(--atencao); box-shadow: 0 0 0 3px var(--atencao-12); }