/* =============================================================================
   BETTER PAY — identidade v4
   Tokens vindos do Figma (BetterPay → 🎨 Styleguide). Tema claro por padrão,
   escuro sob [data-theme="dark"].

   A barra lateral é escura nos DOIS temas — é assinatura da marca, não
   consequência do tema. Por isso ela tem tokens próprios (--side-*).
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ============================================================
   RAMPAS DE COR — direto do Figma, iguais nos dois temas
   ============================================================ */
:root{
  --better-50:#FBFEE7;  --better-100:#F4FCCB; --better-200:#E8F89E;
  --better-300:#CEEF4C; --better-400:#C0E536; --better-500:#A1CB17;
  --better-600:#7DA20E; --better-700:#5F7B10; --better-800:#4C6212;
  --better-900:#405314; --better-950:#212E05;

  --neutral-50:#F5F5F6;  --neutral-100:#E6E6E7; --neutral-200:#CFCFD2;
  --neutral-300:#AEAFB2; --neutral-400:#85868B; --neutral-500:#6A6B70;
  --neutral-600:#5B5B5F; --neutral-700:#4D4D51; --neutral-800:#444546;
  --neutral-900:#3B3B3E; --neutral-950:#161617;

  --yellow-50:#FEFCE8;  --yellow-100:#FEF9C3; --yellow-300:#FDE047;
  --yellow-400:#FACC15; --yellow-500:#EAB308; --yellow-600:#CA8A04;
  --yellow-700:#A16207; --yellow-900:#713F12;

  --red-50:#FEF2F2;  --red-100:#FEE2E2; --red-300:#FCA5A5;
  --red-400:#F87171; --red-500:#EF4444; --red-600:#DC2626;
  --red-700:#B91C1C; --red-900:#7F1D1D;

  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;

  /* --- escala de espaçamento (Figma: base 4px) --- */
  --s0:0; --s-px:1px; --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:28px; --s8:32px; --s9:36px; --s10:40px;
  --s12:48px; --s14:56px; --s16:64px; --s20:80px;

  /* --- tipografia (Figma: Space Grotesk, Regular e Bold) --- */
  --fonte:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --text-xxs:8px;  --text-xs:12px;  --text-sm:14px;  --text-base:16px;
  --text-lg:18px;  --text-xl:20px;  --text-2xl:24px; --text-3xl:30px;
  --text-4xl:36px; --text-5xl:48px;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;

  /* --- raio: não há escala no Figma; derivado das telas --- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* --- movimento --- */
  --t-fast:.12s; --t:.18s;

  /* --- barra lateral: escura nos dois temas --- */
  --side-bg:var(--neutral-950);
  --side-txt:#FFFFFF;
  --side-txt2:var(--neutral-300);
  --side-ativo:var(--better-500);
  --side-hover:rgba(255,255,255,.06);
  --side-linha:rgba(255,255,255,.10);
}

/* ============================================================
   TEMA CLARO (padrão)
   ============================================================ */
:root{
  --bg:var(--neutral-50);
  --bg2:#FFFFFF;
  --card:#FFFFFF;
  --card2:var(--neutral-50);
  --linha:var(--neutral-100);
  --linha-forte:var(--neutral-200);

  --txt:var(--neutral-950);
  --txt2:var(--neutral-500);
  --txt3:var(--neutral-400);

  --marca:var(--better-500);        /* preenchimentos, botões, detalhes */
  --marca-txt:var(--better-700);    /* texto sobre fundo claro — AA */
  --marca-dim:var(--better-100);
  --marca-borda:var(--better-300);

  --ok:var(--better-700);   --ok-dim:var(--better-100);  --ok-borda:var(--better-300);
  --warn:var(--yellow-700); --warn-dim:var(--yellow-100);--warn-borda:var(--yellow-300);
  --err:var(--red-600);     --err-dim:var(--red-100);    --err-borda:var(--red-300);
  --info:var(--blue-700);   --info-dim:var(--blue-100);  --info-borda:var(--blue-500);

  --sh-1:0 1px 2px rgba(22,22,23,.05), 0 1px 3px rgba(22,22,23,.04);
  --sh-2:0 4px 14px rgba(22,22,23,.07);
  --sh-3:0 12px 36px rgba(22,22,23,.13);
  --sh-modal:0 24px 64px rgba(22,22,23,.22);

  --btn-txt:var(--neutral-950);
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236A6B70'/%3E%3C/svg%3E");
  --overlay:rgba(22,22,23,.45);
}

/* ============================================================
   TEMA ESCURO
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#0C0C0D;
  --bg2:#141416;
  --card:#18181A;
  --card2:#202023;
  --linha:#2A2A2C;
  --linha-forte:#3B3B3E;

  --txt:var(--neutral-50);
  --txt2:var(--neutral-300);
  --txt3:var(--neutral-500);

  --marca:var(--better-500);
  --marca-txt:var(--better-400);    /* no escuro o lima claro é legível */
  --marca-dim:rgba(161,203,23,.14);
  --marca-borda:rgba(161,203,23,.35);

  --ok:var(--better-400);   --ok-dim:rgba(161,203,23,.14);  --ok-borda:rgba(161,203,23,.35);
  --warn:var(--yellow-400); --warn-dim:rgba(250,204,21,.13);--warn-borda:rgba(250,204,21,.32);
  --err:var(--red-400);     --err-dim:rgba(248,113,113,.13);--err-borda:rgba(248,113,113,.32);
  --info:#60A5FA;           --info-dim:rgba(96,165,250,.13);--info-borda:rgba(96,165,250,.32);

  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 6px 20px rgba(0,0,0,.50);
  --sh-3:0 12px 40px rgba(0,0,0,.55);
  --sh-modal:0 24px 64px rgba(0,0,0,.70);

  --btn-txt:var(--neutral-950);
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AEAFB2'/%3E%3C/svg%3E");
  --overlay:rgba(0,0,0,.65);

  /* No escuro a lateral precisa se separar do fundo, que já é escuro. */
  --side-bg:#000000;
  --side-linha:rgba(255,255,255,.08);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* O `display:none` que o atributo hidden traz vem da folha do navegador e
   perde para qualquer seletor de classe — era por isso que a busca de cliente
   marcava as linhas como hidden e elas continuavam na tela (.lista-sel button
   declara display:flex). Aqui o hidden volta a valer em toda a interface. */
[hidden]{display:none !important}
body{
  font-family:var(--fonte);
  background:var(--bg);color:var(--txt);
  min-height:100vh;font-size:var(--text-sm);line-height:1.5;
  transition:background-color var(--t),color var(--t);
}
.mono{font-family:var(--mono)}
::selection{background:var(--better-200);color:var(--neutral-950)}

/* ícones Lucide */
.ico,svg.lucide{width:1em;height:1em;stroke-width:2;flex:none;vertical-align:-.14em}
.ico-lg,svg.lucide.ico-lg{width:1.25em;height:1.25em}
.ico-xl,svg.lucide.ico-xl{width:40px;height:40px;stroke-width:1.5}
[data-lucide]{display:inline-block;width:1em;height:1em}

/* ============================================================
   LOGO
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:var(--s2);user-select:none}
.logo svg{height:18px;width:auto;color:currentColor}
.logo .pay{
  background:var(--better-400);color:var(--neutral-950);
  font-weight:var(--fw-bold);font-size:var(--text-sm);letter-spacing:.5px;
  padding:2px var(--s2);border-radius:var(--r-sm);line-height:1.35;
}
.logo.sm svg{height:13px}
.logo.sm .pay{font-size:var(--text-xs);padding:1px 6px}

/* Sobre o painel lime, o badge PAY inverte para branco. */
.logo.inverso .pay{background:#FFFFFF;color:var(--neutral-950)}

/* Marca compacta: B em cima do badge PAY, para a lateral recolhida. */
.logo-mini{display:inline-flex;flex-direction:column;align-items:center;gap:3px;user-select:none}
.logo-mini svg{height:13px;width:auto;color:currentColor}
.logo-mini .pay{
  background:var(--better-400);color:var(--neutral-950);
  font-weight:var(--fw-bold);font-size:10px;letter-spacing:.5px;line-height:1.4;
  padding:1px 7px;border-radius:6px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--marca);color:var(--btn-txt);
  font-family:inherit;font-weight:var(--fw-bold);font-size:var(--text-sm);
  border:1.5px solid transparent;border-radius:var(--r-sm);
  padding:11px var(--s5);cursor:pointer;white-space:nowrap;
  transition:background-color var(--t),border-color var(--t),color var(--t),opacity var(--t);
}
.btn:hover{background:var(--better-600)}
.btn:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--txt);border-color:var(--linha-forte)}
.btn.sec:hover{background:var(--card2);border-color:var(--txt3)}
.btn.ter{background:transparent;color:var(--marca-txt);border-color:transparent;padding-left:var(--s2);padding-right:var(--s2)}
.btn.ter:hover{background:var(--marca-dim)}
.btn.danger{background:transparent;color:var(--err);border-color:var(--err-borda)}
.btn.danger:hover{background:var(--err-dim)}
.btn.mini{padding:6px var(--s3);font-size:var(--text-xs);border-radius:6px}
.btn.block{width:100%}

/* estado de carregamento — o spinner substitui o ícone, o texto continua */
.btn[data-loading="1"]{pointer-events:none;opacity:.75}
.btn[data-loading="1"] .ico{display:none}
.btn[data-loading="1"]::before{
  content:"";width:1em;height:1em;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:girar .6s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.btn-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--txt2);
  cursor:pointer;transition:all var(--t-fast);
}
.btn-icone:hover{background:var(--card2);color:var(--txt);border-color:var(--linha)}

/* ============================================================
   AUTENTICAÇÃO — login, recuperar senha e nova senha
   ============================================================ */
#login{min-height:100vh;display:none;align-items:center;justify-content:center;padding:var(--s6)}
.auth{
  display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1040px;
  background:var(--card);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  /* Ocupa cerca de 65% da altura da janela, com um piso em px para o card não
     ficar espremido em tela baixa e um teto para não estourar em tela alta. */
  min-height:clamp(520px, 65vh, 680px);
}

/* Painel da marca: lime nos dois temas, como a lateral do painel é escura
   nos dois — é identidade, não consequência do tema. */
.auth-marca{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s10);
  padding:var(--s10);color:var(--neutral-950);
  background:var(--better-300);
  background-image:
    radial-gradient(ellipse 80% 60% at 110% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse 70% 70% at -10% 100%, rgba(33,46,5,.10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(33,46,5,.05) 0 1px, transparent 1px 34px);
}
.auth-marca h1{font-size:var(--text-3xl);font-weight:var(--fw-bold);line-height:1.18;letter-spacing:-.5px}
.auth-marca p{font-size:var(--text-sm);line-height:1.6;margin-top:var(--s3);color:var(--better-950);opacity:.75}
.auth-rodape{font-size:var(--text-xs);color:var(--better-950);opacity:.6}

/* Painel do formulário */
.auth-form{padding:var(--s10);display:flex;flex-direction:column;justify-content:center}
.auth-form h2{font-size:var(--text-2xl);margin-bottom:var(--s1)}
.auth-form .sub{font-size:var(--text-sm);color:var(--txt2);margin-bottom:var(--s7)}
.auth-form .btn{margin-top:var(--s5)}
.auth-link{display:block;font-size:var(--text-sm);color:var(--marca-txt);text-decoration:none;font-weight:var(--fw-medium)}
.auth-link:hover{text-decoration:underline}
.auth-voltar{margin-top:var(--s6);text-align:center}

/* Campo de senha com o olho de revelar */
.campo-senha{position:relative}
.campo-senha input{padding-right:var(--s10)}
.olho{
  position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--txt3);cursor:pointer;border-radius:6px;
}
.olho:hover{color:var(--txt2);background:var(--card2)}

/* O logo dentro do formulário só existe quando o painel lime sai de cena.
   Esta linha precisa vir ANTES do media query: com a mesma especificidade,
   quem vem depois vence — e era isso que apagava a marca no celular. */
.auth-form .logo-topo{display:none}

@media(max-width:820px){
  /* Não cabem duas colunas, mas o painel da marca NÃO some: vira uma faixa
     lime no topo do card. Tela de login de sistema de pagamento sem marca
     nenhuma não é só feia — marca aqui também é sinal de confiança. */
  #login{padding:var(--s4);align-items:flex-start;padding-top:max(6vh,var(--s6))}
  .auth{grid-template-columns:1fr;max-width:440px;min-height:0}

  .auth-marca{
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
    padding:var(--s6) var(--s6) var(--s5);
  }
  .auth-marca .logo{width:150px;height:auto}
  .auth-marca h1{font-size:var(--text-lg);line-height:1.25;letter-spacing:-.2px}
  .auth-marca p,.auth-rodape{display:none}

  .auth-form{padding:var(--s7) var(--s6) var(--s8)}
  .auth-form h2{font-size:var(--text-xl)}
  .auth-form .sub{margin-bottom:var(--s6)}
  /* Abaixo de 16px o Safari do iPhone dá zoom sozinho ao focar o campo e
     desloca a página inteira. */
  .auth-form input{font-size:16px}
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
label.f{
  display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);
  color:var(--txt2);margin:0 0 6px 2px;
}
input,select,textarea{
  width:100%;background:var(--card);border:1.5px solid var(--linha-forte);
  border-radius:var(--r-sm);color:var(--txt);font-family:inherit;
  font-size:var(--text-sm);padding:10px var(--s3);outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
input::placeholder,textarea::placeholder{color:var(--txt3)}
input:focus,select:focus,textarea:focus{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-dim)}
input:disabled,select:disabled{background:var(--card2);color:var(--txt3);cursor:not-allowed}
select{appearance:none;background-image:var(--sel-arrow);background-repeat:no-repeat;background-position:right var(--s3) center;padding-right:var(--s8)}
.field{margin-bottom:var(--s4)}

/* estado de erro — vem do design system do Figma (State=Error) */
.field.erro input,.field.erro select,.field.erro textarea{border-color:var(--err)}
.field.erro input:focus{box-shadow:0 0 0 3px var(--err-dim)}
.field .msg-erro{
  display:flex;align-items:center;gap:5px;
  color:var(--err);font-size:var(--text-xs);margin-top:5px;
}

/* busca */
.busca{position:relative}
.busca .ico{position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);color:var(--txt3);pointer-events:none}
.busca input{padding-left:var(--s10)}

/* slider */
input[type=range]{
  appearance:none;height:6px;border-radius:var(--r-full);padding:0;border:none;margin:var(--s3) 0 var(--s1);
  background:linear-gradient(90deg,var(--marca) var(--pct,0%),var(--linha-forte) var(--pct,0%));
}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:4px solid var(--marca);cursor:pointer;box-shadow:var(--sh-2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:4px solid var(--marca);cursor:pointer;box-shadow:var(--sh-2)}

/* Contador com − e + (parcelas). O valor real vai num input escondido, para o
   resto do formulário continuar lendo do mesmo lugar. */
.stepper{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  /* Sem altura fixa: 3px de padding + botão de 32px + 3px + a borda dão
     exatamente os 41px do input e do select ao lado. */
  padding:3px;
  border:1.5px solid var(--linha-forte);border-radius:var(--r-sm);
}
.stepper button{
  width:32px;height:32px;flex:none;border:none;border-radius:6px;cursor:pointer;
  background:var(--marca-dim);color:var(--marca-txt);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-fast),color var(--t-fast);
}
.stepper button:hover:not(:disabled){background:var(--marca);color:var(--btn-txt)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper button .ico{width:18px;height:18px}
.stepper .valor{flex:1;min-width:0;text-align:center;line-height:1.1}
.stepper .valor b{font-size:var(--text-base);font-weight:var(--fw-bold)}
.stepper .valor span{font-size:var(--text-xs);color:var(--txt2);margin-left:4px}

/* Opções em cartão (forma de pagamento), no lugar de um <select>.
   Cinco colunas para os nove formatos caberem em duas linhas exatas. Só ícone
   e nome: a descrição vai no title, porque ler nove parágrafos para escolher
   uma forma de pagamento é pior do que passar o mouse na dúvida. */
.opcoes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
/* Duas linhas exigem 5 colunas. Abaixo de 1200px não cabe sem espremer o
   nome, e aí é melhor uma terceira linha do que texto ilegível. */
@media(max-width:1200px){.opcoes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.opcoes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}}

.opcao{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:6px;text-align:center;min-height:96px;padding:var(--s3) 6px;
  border:1.5px solid var(--linha-forte);border-radius:var(--r-sm);
  background:var(--card);color:var(--txt);font-family:inherit;cursor:pointer;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.opcao:hover{border-color:var(--marca-borda);background:var(--card2)}
.opcao.on{border-color:var(--marca);background:var(--marca-dim)}
.opcao:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.opcao .anel{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card2);color:var(--txt2);transition:all var(--t-fast);
}
.opcao.on .anel{background:var(--marca);color:var(--btn-txt)}
.opcao .nome{font-size:var(--text-xs);font-weight:var(--fw-semi);line-height:1.25}
/* Restrição de pessoa é regra, não enfeite: fica visível sem roubar espaço. */
.opcao .selo{
  position:absolute;top:5px;right:5px;
  font-size:9px;font-weight:var(--fw-bold);letter-spacing:.3px;
  background:var(--card2);color:var(--txt2);border-radius:var(--r-full);padding:1px 5px;
}
.opcao.on .selo{background:var(--card);color:var(--marca-txt)}

/* switch *//* switch */
.switch{position:relative;display:inline-block;width:39px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch .trilho{
  position:absolute;inset:0;border-radius:var(--r-full);
  background:var(--neutral-300);transition:background-color var(--t);
}
.switch .trilho::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t);
}
.switch input:checked + .trilho{background:var(--marca)}
.switch input:checked + .trilho::after{transform:translateX(15px)}
.switch input:focus-visible + .trilho{box-shadow:0 0 0 3px var(--marca-dim)}

/* ============================================================
   CARDS, CHIPS, ALERTAS
   ============================================================ */
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1)}
.card.destaque{background:var(--marca-dim);border-color:var(--marca-borda)}
.card.plano{box-shadow:none}
.card-titulo{font-size:var(--text-lg);font-weight:var(--fw-bold);margin-bottom:var(--s1)}
.card-sub{font-size:var(--text-xs);color:var(--txt2);margin-bottom:var(--s5)}

/* card de métrica: ícone em anel + rótulo + valor */
.metrica{display:flex;align-items:center;gap:var(--s4)}
.metrica .anel{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid currentColor;
}
.metrica .anel .ico{width:20px;height:20px}
.metrica .rot{font-size:var(--text-xs);color:var(--txt2);line-height:1.3}
.metrica .val{font-size:var(--text-xl);font-weight:var(--fw-bold);color:var(--txt);line-height:1.25}
.metrica.ok .anel{color:var(--ok)}      .metrica.ok .val{color:var(--ok)}
.metrica.warn .anel{color:var(--warn)}  .metrica.warn .val{color:var(--warn)}
.metrica.err .anel{color:var(--err)}    .metrica.err .val{color:var(--err)}
.metrica.info .anel{color:var(--info)}  .metrica.info .val{color:var(--info)}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--text-xs);font-weight:var(--fw-semi);
  padding:3px 10px;border-radius:var(--r-full);white-space:nowrap;
}
.chip.ok{background:var(--ok-dim);color:var(--ok)}
.chip.warn{background:var(--warn-dim);color:var(--warn)}
.chip.err{background:var(--err-dim);color:var(--err)}
.chip.info{background:var(--info-dim);color:var(--info)}
.chip.marca{background:var(--marca-dim);color:var(--marca-txt)}
.chip.neutro{background:var(--card2);color:var(--txt2);border:1px solid var(--linha)}

.alerta{display:flex;align-items:flex-start;gap:var(--s2);border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-size:var(--text-sm);margin-top:var(--s3)}
.alerta .ico{margin-top:.15em;flex:none}
.alerta.ok{background:var(--ok-dim);color:var(--ok);border:1px solid var(--ok-borda)}
.alerta.warn{background:var(--warn-dim);color:var(--warn);border:1px solid var(--warn-borda)}
.alerta.err{background:var(--err-dim);color:var(--err);border:1px solid var(--err-borda)}
.alerta.info{background:var(--info-dim);color:var(--info);border:1px solid var(--info-borda)}

/* ============================================================
   TABELAS
   ============================================================ */
.tabela-wrap{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th{
  text-align:left;font-size:var(--text-xs);font-weight:var(--fw-semi);
  color:var(--txt2);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--linha);white-space:nowrap;background:var(--card2);
}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--linha);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tr.click{cursor:pointer;transition:background-color var(--t-fast)}
tr.click:hover td{background:var(--marca-dim)}

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.vazio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s16) var(--s6);color:var(--txt2);
}
/* Filho direto de propósito: sem isso a regra aumentaria também o ícone do
   botão de ação dentro do estado vazio. */
.vazio > .ico{width:44px;height:44px;stroke-width:1.5;color:var(--txt3);margin-bottom:var(--s4)}
.vazio h3{font-size:var(--text-base);color:var(--txt);margin-bottom:var(--s1)}
.vazio p{font-size:var(--text-sm);max-width:420px;margin-bottom:var(--s5)}

/* ============================================================
   ESQUELETO DE CARREGAMENTO
   ============================================================ */
.skel{
  background:linear-gradient(90deg,var(--card2) 25%,var(--linha) 37%,var(--card2) 63%);
  background-size:400% 100%;border-radius:6px;animation:brilho 1.3s ease infinite;
}
@keyframes brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-linha{height:14px;margin-bottom:var(--s3)}
.skel-titulo{height:26px;width:220px;margin-bottom:var(--s5)}
@media (prefers-reduced-motion:reduce){
  .skel{animation:none}
  .btn[data-loading="1"]::before{animation-duration:2s}
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-fundo{
  position:fixed;inset:0;background:var(--overlay);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--s6);
  animation:surgir var(--t) ease;
}
@keyframes surgir{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r-xl);
  box-shadow:var(--sh-modal);width:100%;max-width:524px;
  max-height:calc(100vh - var(--s12));overflow-y:auto;
  animation:subir var(--t) ease;
}
@keyframes subir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal.g{max-width:874px}
.modal.p{max-width:366px}
.modal-topo{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s6) var(--s6) 0}
.modal-topo .anel{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--marca-dim);color:var(--marca-txt);
}
.modal-topo.ok .anel{background:var(--ok-dim);color:var(--ok)}
.modal-topo.warn .anel{background:var(--warn-dim);color:var(--warn)}
.modal-topo.err .anel{background:var(--err-dim);color:var(--err)}
.modal-topo h3{font-size:var(--text-lg);font-weight:var(--fw-bold)}
.modal-topo p{font-size:var(--text-sm);color:var(--txt2);margin-top:var(--s1)}
.modal-corpo{padding:var(--s5) var(--s6) 0}
.modal-pe{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s6)}
.modal-fechar{margin-left:auto}

/* Lista selecionável dentro de modal (ex.: escolher cliente). */
.lista-sel{max-height:340px;overflow-y:auto;margin-top:var(--s3);display:flex;flex-direction:column;gap:2px}
.lista-sel button{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);
  padding:var(--s3);cursor:pointer;font-family:inherit;color:var(--txt);
  transition:background-color var(--t-fast),border-color var(--t-fast);
}
.lista-sel button:hover{background:var(--marca-dim);border-color:var(--marca-borda)}
.lista-sel .nome{font-weight:var(--fw-semi);font-size:var(--text-sm)}
.lista-sel .meta{font-size:var(--text-xs);color:var(--txt2)}
.lista-sel .vazio-busca{padding:var(--s6);text-align:center;color:var(--txt2);font-size:var(--text-sm)}

/* ============================================================
   MENU DE CONTEXTO (o "..." das linhas)
   ============================================================ */
.menu-ctx{
  position:fixed;z-index:110;min-width:180px;padding:var(--s1);
  background:var(--card);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sh-3);
}
.menu-ctx button{
  display:flex;align-items:center;gap:var(--s2);width:100%;
  background:none;border:none;font-family:inherit;font-size:var(--text-sm);
  color:var(--txt);padding:9px var(--s3);border-radius:6px;cursor:pointer;text-align:left;
}
.menu-ctx button:hover{background:var(--card2)}
.menu-ctx button.perigo{color:var(--err)}
.menu-ctx button.perigo:hover{background:var(--err-dim)}
.menu-ctx hr{border:none;border-top:1px solid var(--linha);margin:var(--s1) 0}

/* ============================================================
   TIPOGRAFIA E UTILITÁRIOS
   ============================================================ */
h1{font-size:var(--text-2xl);font-weight:var(--fw-bold)}
h2{font-size:var(--text-xl);font-weight:var(--fw-bold)}
h3{font-size:var(--text-base);font-weight:var(--fw-semi)}
a{color:var(--marca-txt)}
.muted{color:var(--txt2)}
.dim{color:var(--txt3)}
.v{color:var(--marca-txt)}
.err-txt{color:var(--err)}
.b{font-weight:var(--fw-bold)}

.text-xs{font-size:var(--text-xs)}   .text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)} .text-lg{font-size:var(--text-lg)}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)}
.mb-1{margin-bottom:var(--s1)} .mb-2{margin-bottom:var(--s2)} .mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)} .mb-6{margin-bottom:var(--s6)}
.w-full{width:100%}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.wrap{flex-wrap:wrap}

.toast{
  position:fixed;bottom:var(--s6);left:50%;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:var(--s2);
  background:var(--neutral-950);color:#fff;
  border-radius:var(--r);padding:var(--s3) var(--s5);
  font-size:var(--text-sm);font-weight:var(--fw-medium);
  box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:opacity .25s;
}
.toast.show{opacity:1}

@media(max-width:1000px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:860px){ .grid2,.grid3,.grid4{grid-template-columns:1fr} }