/* ==========================================================================
   AegisSales UI Kit
   Única fonte de estilo do painel e das páginas públicas. Regras (CLAUDE.md,
   "Regras de Frontend"): proibido style= inline, <style> em template e botão
   fora das classes .btn. Precisa de algo novo? Crie aqui, como componente ou
   utilitário, e use pela classe.

   Índice
     1. Tokens (cores, espaçamento, raios, sombras)
     2. Base
     3. Utilitários (espaçamento, layout, texto)
     4. Botões (.btn)
     5. Formulários (.field, .input)
     6. Componentes (card, kpi, badge, chip, tabs, callout, flash, empty, table…)
     7. Layout do app (sidebar, header) e público
     8. Páginas (paywall, alertas, modos, custos)
     9. Responsivo
     10. Landing pública (tema escuro próprio, escopado em .landing)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Marca AegisSales (marca/README.md, projeto "AegisSales — Logo" do Claude Design): Meia-Noite
   #0b132b é a base, Ciano Neon #00e5ff marca contornos e ações (só sobre fundo escuro; no claro, o
   ciano escurecido de --accent, com contraste para texto) e Dourado #ffd700 é o destaque. Fonte da
   marca: Montserrat, servida daqui (a CSP não carrega fonte de fora). */
@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2"); /* licença: montserrat-OFL.txt */
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-brand: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --midnight: #0b132b;
  --cyan: #00e5ff;
  --gold: #ffd700;

  --bg: #f3f5fa;
  --surface: #ffffff;
  --text: #0b132b;
  --muted: #4a5578;
  --line: #d5dae6;
  --accent: #007c99;       /* ciano da marca escurecido: 4.8:1 sobre branco */
  --accent-hover: #006680;
  --accent-text: #ffffff;
  --primary: #0b132b;      /* botão principal: Meia-Noite sobre o claro, Ciano sobre o escuro */
  --primary-hover: #1c2a52;
  --primary-text: #ffffff;
  --good: #1f8a4c;
  --bad: #c0392b;
  --warn: #9a6408;
  --sidebar: #0b132b;
  --sidebar-text: #c9d2e6;
  --sidebar-active: #1c2a52;

  /* Escala de espaçamento (base 4 px). Use pelos utilitários .mt-*, .mb-*, .gap-*. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 8px;      /* botões, campos */
  --radius-lg: 12px;  /* cartões */
  --control-height: 40px;
  --transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b132b;
    --surface: #111c3d;
    --text: #e8edf7;
    --muted: #9aa8c7;
    --line: #22305a;
    --accent: #00e5ff;
    --accent-hover: #7ff2ff;
    --accent-text: #0b132b;
    --primary: #00e5ff;
    --primary-hover: #7ff2ff;
    --primary-text: #0b132b;
    --good: #4cc27f;
    --bad: #ef6b5b;
    --warn: #e3a93b;
    --sidebar: #070d1f;
    --sidebar-active: #18244a;
  }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; }
/* Títulos e rótulos da interface na fonte da marca; o texto corrido segue na do sistema. */
h1, h2, h3, .btn, .nav, .tab, .chip, .badge, .label, .kpi .value, .table th, .hello, .card-title, legend {
  font-family: var(--font-brand);
}
h1, h2, h3, .hello { font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 3. Utilitários ----------------------------------------------------------- */
.mt-0 { margin-top: 0; }               .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); }  .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* .row: itens lado a lado (quebra no celular). .stack: um embaixo do outro. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.nowrap { flex-wrap: nowrap; white-space: nowrap; }

.text-muted, .muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: .9rem; color: var(--muted); }
.lead { color: var(--muted); margin: 0 0 var(--space-5); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 4. Botões ---------------------------------------------------------------- */
/* Todo botão (ou link com cara de botão) é .btn + UMA variante. Mesmo tamanho,
   mesmo raio e mesma transição em todos: não crie tamanhos nem botões novos. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Botão com pedido em andamento: gira e não aceita outro clique. Vale para o botão com hx-*, para o
   de envio de um formulário htmx e para formulário comum (aria-busy, posto pelo app.js). */
.btn.htmx-request, form.htmx-request .btn[type="submit"], .btn[aria-busy="true"] { pointer-events: none; cursor: progress; }
.btn.htmx-request::before, form.htmx-request .btn[type="submit"]::before, .btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
  animation: spin .8s linear infinite;
}

.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); background: var(--bg); }

.btn-danger { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* 5. Formulários ----------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.label { font-size: .9rem; font-weight: 600; }
.hint { font-size: .85rem; font-weight: 400; color: var(--muted); }
.input {
  font: inherit;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
  transition: var(--transition);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input[type="file"] { padding: 5px var(--space-2); cursor: pointer; }
.input[type="file"]::file-selector-button {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  min-height: 32px;
  margin-right: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
/* Campo e botão na mesma linha (quebra quando não cabe, como no celular). */
.form-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.form-line .input { flex: 1 1 280px; }
.form-line .input-money { flex: 0 0 120px; }
/* O htmx não injeta o próprio estilo (CSP): o indicador de andamento é definido aqui. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
/* Indicador de que algo está sendo feito (só CSS, sem GIF): avisos de espera e selos "Lendo". Sempre
   ao lado de um texto que diz o que acontece; o indicador é aria-hidden. */
.spinner {
  display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; vertical-align: -0.15em;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor;
  animation: spin .8s linear infinite;
}
.callout-icon.spinner { width: 1.1rem; height: 1.1rem; margin-top: 3px; color: var(--accent); }
.badge .spinner { width: .8em; height: .8em; margin-right: var(--space-1); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Quem pediu menos movimento no sistema vê o indicador piscar devagar, em vez de girar. */
@media (prefers-reduced-motion: reduce) {
  .spinner, .btn.htmx-request::before, form.htmx-request .btn[type="submit"]::before, .btn[aria-busy="true"]::before { animation: pulse 2s ease-in-out infinite; }
}
.input-money { width: 120px; text-align: right; }
.input-number { width: 96px; text-align: right; } /* número curto numa tabela (ex: dias de retenção) */
/* QR code do aplicativo autenticador (SVG desenhado em internal/totp; módulos pretos sobre fundo branco em qualquer tema). */
.qr-box { max-width: 240px; }
.qr { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.qr-bg { fill: #fff; }
.qr-dots { fill: #000; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; }
.input-prefix { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.field-error { color: var(--bad); font-size: .85rem; }
.input-file { font: inherit; font-size: .9rem; color: var(--muted); }
.input-file::file-selector-button {
  font: inherit; font-weight: 600; font-size: .9rem;
  min-height: var(--control-height); padding: 0 var(--space-4); margin-right: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer; transition: var(--transition);
}
.input-file::file-selector-button:hover { border-color: var(--muted); background: var(--bg); }

/* 6. Componentes ----------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-title { font-size: 1.05rem; margin: 0 0 var(--space-3); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.kpi h2 { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .4px; }
.kpi .value { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.kpi .note { color: var(--muted); font-size: .88rem; margin: var(--space-2) 0 0; }
.kpi.alert-card { border-color: var(--bad); }
progress { width: 100%; height: 8px; margin-top: 10px; accent-color: var(--accent); }
progress.full { accent-color: var(--bad); }

.badge { display: inline-block; border-radius: 99px; padding: 1px 9px; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; }

/* Chip: filtro/ordenação (não é botão de ação). */
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--text); font-size: .88rem; text-decoration: none; transition: var(--transition);
}
.chip:hover { border-color: var(--muted); }
.chip[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Barra de filtros: no computador quebra a linha; no celular fica numa linha só, que rola de lado
   (a página não rola: só a barra), para a lista começar mais cedo. */
.chip-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 720px) {
  .chip-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .chip-bar .chip { flex: none; white-space: nowrap; }
}

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); overflow-x: auto; }
.tab {
  padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: var(--transition);
}
.tab:hover { color: var(--text); }
.tab[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

.callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-lg); padding: 14px var(--space-4); margin-bottom: var(--space-5);
}
.card > .callout:last-child { margin-bottom: 0; }
.callout-icon { flex: none; font-size: 1.15rem; line-height: 1.45; }
.callout-danger { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.consent-check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; }
.consent-check input { margin-top: 4px; flex: none; }

.flash { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: 1px solid; background: var(--surface); }
.flash-ok { color: var(--good); border-color: var(--good); }
.flash-bad { color: var(--bad); border-color: var(--bad); }

.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 18px; color: var(--muted); margin: 0; }

.help { cursor: help; font-size: .8rem; text-transform: none; }

.summary { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; color: var(--muted); font-size: .92rem; margin: 0; }
.summary strong { color: var(--text); }

.disclosure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px var(--space-4); font-size: .9rem; }
.disclosure summary { cursor: pointer; font-weight: 600; color: var(--warn); }

.steps { margin: 0; padding-left: 20px; font-size: .9rem; color: var(--muted); display: grid; gap: var(--space-1); }

/* Tabela de dados. No celular, cada linha vira um cartão (td com data-label). */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: var(--space-3) 14px; text-align: right; border-top: 1px solid var(--line); vertical-align: middle; }
.table th { border-top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; background: var(--bg); }
.table th:first-child, .table td:first-child { text-align: left; }
.table td { font-variant-numeric: tabular-nums; }
.table td:not(:first-child) { white-space: nowrap; } /* valores não quebram ("R$" e número juntos) */
.table .title { font-weight: 600; overflow-wrap: anywhere; }
.table .sub { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.table .sub.good { color: var(--good); font-weight: 600; }
.table .sub.warn { color: var(--warn); }
.table td .hint { display: block; margin-top: var(--space-1); } /* explicação abaixo do nome, numa célula */
.table .est { color: var(--warn); font-size: .78rem; display: block; }
.table-text th, .table-text td { text-align: left; } /* tabela de texto (ex: auditoria): tudo à esquerda */
.table .actions-cell { white-space: nowrap; }
.table .sub.wrap { white-space: normal; max-width: 220px; }
.table td.wrap { white-space: normal; overflow-wrap: anywhere; } /* texto longo (ex: erro de um job) quebra a linha */
.table .actions-cell .row { justify-content: flex-end; flex-wrap: nowrap; }
.table tr.saved td { background: color-mix(in srgb, var(--good) 8%, transparent); }
.table tr.editing td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.htmx-request .table-wrap { opacity: .6; transition: opacity .2s; }

/* 7. Layout ---------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); padding: 20px var(--space-3); }
/* Logo (símbolo + AEGIS / SALES), como no design: AEGIS em 800, SALES espaçado em 600 e o traço
   ciano depois dele. Sobre o escuro, o símbolo colorido no computador e o branco no celular (o
   <picture> troca); em página clara, a versão meia-noite (.brand-light). */
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--font-brand); } /* wrap: o selo "Admin" desce se não couber */
.brand-mark { display: block; flex-shrink: 0; width: 30px; height: auto; }
.brand-word { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand-aegis { font-weight: 800; font-size: 1.45rem; letter-spacing: .06em; }
.brand-sales { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .58rem; letter-spacing: .52em; }
.brand-sales::after { content: ""; flex: 1; height: 1px; background: var(--cyan); opacity: .6; }
.brand-light { color: var(--text); justify-content: center; margin-bottom: var(--space-5); }
.brand-light .brand-sales::after { content: none; }
.sidebar .brand { padding: 4px 10px 24px; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav span { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--radius); color: var(--sidebar-text); text-decoration: none; font-size: .95rem; }
.nav a:hover { background: var(--sidebar-active); }
.nav .active { background: var(--sidebar-active); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--cyan); }
.nav .soon { opacity: .55; cursor: default; }
.nav .soon small { font-size: .7rem; border: 1px solid currentColor; border-radius: 99px; padding: 0 6px; }
.nav .locked { opacity: .75; }
/* O cadeado fica dentro do link: sem o enchimento de item que ".nav span" dá. */
.nav .locked span { font-size: .8rem; padding: 0; }
.main { display: flex; flex-direction: column; min-width: 0; }
.header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.header h1 { font-size: 1.1rem; margin: 0; }
.who { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: .9rem; }
.who form { margin: 0; }
.content { padding: 28px; max-width: 1100px; width: 100%; }
.section { margin-top: var(--space-6); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section h2 { font-size: 1.05rem; margin: 0; }

.public { max-width: 440px; margin: 64px auto; padding: 0 var(--space-4); }
.public h1 { font-size: 1.3rem; margin-top: 0; }
/* Termos e Privacidade: texto longo, largura de leitura confortável. */
.legal { max-width: 760px; margin: 40px auto; padding: 0 var(--space-4); line-height: 1.6; }
.legal h1 { font-size: 1.5rem; margin-top: 0; }
.legal h2 { font-size: 1.1rem; margin: var(--space-5) 0 var(--space-2); }
.legal li { margin-bottom: var(--space-2); }

/* Administração (body.admin): usada mais no computador. Mais largura, cabeçalho fixo e tabelas mais
   densas; o painel do vendedor não muda. No celular volta ao layout de sempre (ver 9. Responsivo). */
.admin .content { max-width: 1440px; }
.admin .header { position: sticky; top: 0; z-index: 10; }
/* Grade de cartões: uma coluna no celular, duas ou três em tela larga. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-5); align-items: start; }
.card-grid > .card { margin: 0; max-width: none; }
/* Barra de ferramentas: busca e filtros na mesma linha (quebra quando não cabe). */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.toolbar form { flex: 1 1 320px; max-width: 520px; min-width: 0; }
.toolbar .input { flex: 1; min-width: 0; }
@media (min-width: 861px) {
  .admin .table th, .admin .table td { padding: var(--space-2) var(--space-3); }
}

/* 8. Páginas --------------------------------------------------------------- */
/* Frete por tamanho (Fornecedores): uma linha por categoria, com o seletor e o botão alinhados. */
.size-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; align-items: center; gap: var(--space-3); }
.size-row .label { margin: 0; }
@media (max-width: 720px) {
  .size-row { grid-template-columns: minmax(0, 1fr) auto; }
  .size-row .label { grid-column: 1 / -1; }
}

.hello { font-size: 1.5rem; margin: 0 0 var(--space-1); }

.alerts { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.alerts li { display: flex; gap: var(--space-3); padding: 14px 18px; border-top: 1px solid var(--line); }
.alerts li:first-child { border-top: 0; }
.alerts .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--accent); }
.alerts .critical .dot { background: var(--bad); }
.alerts p { margin: 0; overflow-wrap: anywhere; }
.alerts time { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* Linha do tempo (histórico do Escudo): pontos ligados por uma linha vertical. */
.timeline { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.timeline li { position: relative; display: flex; gap: var(--space-4); padding: var(--space-4) 18px; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline li::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li:first-child::before { top: 24px; }
.timeline li:last-child::before { bottom: calc(100% - 24px); }
.timeline .dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.timeline .critical .dot { background: var(--bad); }
.timeline p { margin: 0; overflow-wrap: anywhere; }
.timeline p + p { margin-top: var(--space-1); }

.metric-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: .9rem; }
.metric-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }

.paywall { text-align: center; max-width: 620px; margin: var(--space-2) auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 36px 28px; }
.paywall .lock { font-size: 2.6rem; line-height: 1; }
.paywall h2 { font-size: 1.45rem; margin: 14px 0 var(--space-2); }
.benefits { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: grid; gap: var(--space-3); }
.benefits li { display: flex; gap: var(--space-3); align-items: flex-start; }
.benefits .icon { flex: none; font-size: 1.2rem; }
.benefits strong { display: block; }
.benefits .muted { font-size: .92rem; }

.modes { max-width: 720px; }
.modes fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.modes legend { font-weight: 600; margin-bottom: 10px; }
.mode-card { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-4); cursor: pointer; transition: var(--transition); }
.mode-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode-card input { margin-top: 4px; accent-color: var(--accent); }
.mode-card .muted { display: block; font-size: .9rem; margin-top: 2px; }

.textarea { min-height: 110px; padding: 10px var(--space-3); line-height: 1.45; resize: vertical; }

/* Perguntas: um cartão por pergunta do comprador. */
.question-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.question-item { display: block; font-weight: 600; overflow-wrap: anywhere; }
.question-text { font-size: 1.05rem; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.suggestion {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.suggestion .label { display: block; margin-bottom: var(--space-1); }
.suggestion p { overflow-wrap: anywhere; }
/* Prévia de mensagem (Comunicação): mantém as quebras de linha como o Telegram mostra. */
.message-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.costs th:nth-child(2), .costs td:nth-child(2) { width: 240px; }
.costs th:last-child, .costs td:last-child { width: 230px; }
.cost-panel { max-width: 560px; }

/* Ação principal + coluna lateral: uma coluna no celular, duas no computador. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.split .card { margin: 0; }

/* Radar de Fornecedores: a conta de um produto e os campos de peso e medidas. */
.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); white-space: normal; }
.account-col { min-width: 0; }
@media (min-width: 1200px) {
  .account { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
}
.account-row td { border-top: 0; padding-top: 0; }
.account-title { font-weight: 600; margin-bottom: var(--space-2); }
.account-grid { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-1) var(--space-4); font-size: .85rem; }
.account-grid > :nth-child(3n+2), .account-grid > :nth-child(3n) { text-align: right; }
.account-grid > :nth-last-child(-n+3) { border-top: 1px solid var(--line); padding-top: var(--space-1); }
/* Conta de um tipo de anúncio só (o vendedor escolheu Clássico ou Premium): duas colunas. */
.account-grid.account-grid-one { grid-template-columns: 1fr auto; }
.account-grid.account-grid-one > * { text-align: left; border-top: 0; padding-top: 0; }
.account-grid.account-grid-one > :nth-child(2n) { text-align: right; }
.account-grid.account-grid-one > :nth-last-child(-n+2) { border-top: 1px solid var(--line); padding-top: var(--space-1); }
/* Escolhas lado a lado (cartões .mode-card), em fieldset sem a moldura do navegador. */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.price-list { display: flex; flex-direction: column; gap: var(--space-1); }
.price-line { display: flex; justify-content: space-between; gap: var(--space-3); }
.price-list .sub { white-space: normal; max-width: 240px; margin-left: auto; }
.parcel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.parcel-fields label { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.parcel-fields .input { width: 100%; min-width: 0; }
@media (min-width: 861px) {
  .parcel-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .table-products td:first-child { min-width: 260px; }
}
@media (min-width: 861px) and (max-width: 1280px) {
  .table-products .actions-cell .row { flex-direction: column; align-items: stretch; }
}

/* 9. Responsivo ------------------------------------------------------------ */
@media (min-width: 861px) {
  .split { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
  /* Página com tabela larga e coluna lateral: usa a tela do computador. */
  .content:has(.page-wide) { max-width: 1440px; }
}

@media (max-width: 860px) {
  .table-wrap { background: none; border: 0; overflow: visible; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: 6px 0; }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-top: 0; padding: 6px var(--space-4); text-align: right; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; text-align: left; }
  .table td:first-child { display: block; text-align: left; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: var(--space-1); }
  .table td:first-child::before { content: none; }
  /* Texto longo e ações não podem alargar o cartão: a nota vai para a própria linha e as ações quebram. */
  .table td { flex-wrap: wrap; }
  .table td > .sub { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .table .actions-cell .row { flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  .costs th:nth-child(2), .costs td:nth-child(2), .costs th:last-child, .costs td:last-child { width: auto; }
}

@media (max-width: 720px) {
  /* minmax(0, 1fr): a barra de navegação (rolagem lateral) não pode alargar a página. */
  /* grid-template-rows: a barra fica do tamanho dela; só o conteúdo estica (página curta não alonga a barra). */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar { padding: var(--space-3) var(--space-4); min-width: 0; }
  .sidebar .brand { padding: var(--space-1) 0 var(--space-3); }
  /* No celular, o logo monocromático branco (o <picture> troca o símbolo; sem o traço ciano). */
  .brand-sales::after { content: none; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav .active { box-shadow: inset 0 -2px 0 var(--cyan); }
  .nav a, .nav span { white-space: nowrap; gap: 6px; }
  .header, .content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* 10. Landing -------------------------------------------------------------- */
/* Tema escuro próprio, escopado em .landing (não afeta painel nem administração). Neon com
   contraste >= 4.5:1 sobre o fundo. Animações desligadas em prefers-reduced-motion. */
.landing {
  --bg: #0b132b; /* paleta da marca: Meia-Noite, Ciano Neon (#00e5ff), Dourado (#ffd700) */
  --surface: rgba(17, 28, 61, .6);
  --text: #ffffff;
  --muted: #9aa8c7;
  --line: rgba(0, 229, 255, .16);
  --accent: #00e5ff;
  --accent-hover: #7ff2ff;
  --accent-text: #0b132b;
  --primary: #00e5ff;
  --primary-hover: #7ff2ff;
  --primary-text: #0b132b;
  --good: #34d399;
  --bad: #fb7185;
  --neon: #00e5ff;
  --neon-soft: rgba(0, 229, 255, .25);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 229, 255, .12), transparent 60%),
              radial-gradient(900px 500px at -10% 30%, rgba(255, 215, 0, .05), transparent 60%), var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.landing a:not(.btn) { color: var(--neon); } /* :not(.btn): botão usa as cores do kit */
.landing a.brand { color: #fff; } /* o logo é branco, como no design (o link da landing é ciano) */
.landing h1, .landing h2, .landing h3 { font-family: var(--font-brand); font-weight: 800; letter-spacing: -.01em; margin: 0; }
.landing h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; }
.landing h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.15; }
.landing h3 { font-size: 1.1rem; }
.landing p { margin: 0; }
.landing-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.landing-nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(11, 19, 43, .82); border-bottom: 1px solid var(--line); }
.landing-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.landing-glow { color: var(--neon); text-shadow: 0 0 12px var(--neon-soft); }
.landing-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.landing-links a { color: var(--muted); text-decoration: none; }
.landing-links a:hover, .landing-links a:focus-visible { color: var(--text); }
.landing-hero { padding: 72px 0 48px; }
.landing-section { padding: 56px 0; border-top: 1px solid var(--line); }
.landing-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: center; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.landing-kicker { color: var(--neon); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; }
.landing-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 62ch; }
.landing-section .landing-lead { margin-top: var(--space-3); }
.landing-note { color: var(--muted); font-size: .9rem; }
.landing-glass { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(0, 229, 255, .04), 0 20px 60px rgba(0, 0, 0, .35);
  transition: border-color .2s ease, box-shadow .2s ease; }
.landing-card { display: flex; flex-direction: column; gap: var(--space-3); }
.landing-card:hover { border-color: var(--neon-soft); box-shadow: 0 0 24px var(--neon-soft); }
.landing-tag { position: absolute; top: var(--space-3); right: var(--space-3); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.landing-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.landing-kpis strong { display: block; font-size: 1.5rem; }
.landing-kpi-label { color: var(--muted); font-size: .8rem; }
.landing-good { color: var(--good); }
.landing-bad { color: var(--bad); }
.landing-big { font-size: 1.8rem; font-weight: 700; }
.landing-big small { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: var(--space-1); }
.landing-list { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.8; }
.landing-msg { position: relative; background: rgba(7, 13, 31, .55); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); line-height: 1.5; }
.landing-bubble { background: rgba(7, 13, 31, .55); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: var(--space-3) var(--space-4); max-width: 90%; line-height: 1.5; }
.landing-bubble-me { align-self: flex-end; margin-left: auto; border-radius: 14px 14px 4px 14px; border-color: var(--neon-soft); background: rgba(0, 229, 255, .08); }
.landing-footer { padding: var(--space-6) 0; border-top: 1px solid var(--line); }

/* Radar girando e alerta piscando (CSS puro). */
.landing-radar { position: relative; width: 160px; height: 160px; margin: var(--space-5) auto 0; border-radius: 50%;
  border: 1px solid var(--neon-soft); background: repeating-radial-gradient(circle, transparent 0 26px, rgba(0, 229, 255, .12) 27px 28px); overflow: hidden; }
.landing-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 229, 255, .45), transparent 70deg); animation: landing-spin 4s linear infinite; }
.landing-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); animation: landing-blink 2s ease-in-out infinite; }
.landing-blip-1 { top: 38px; left: 96px; }
.landing-blip-2 { top: 104px; left: 44px; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation-delay: 1s; }
.landing-pulse { position: absolute; top: var(--space-3); right: var(--space-3); width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: landing-blink 1.4s ease-in-out infinite; }
@keyframes landing-spin { to { transform: rotate(360deg); } }
@keyframes landing-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .landing-sweep, .landing-blip, .landing-pulse { animation: none; }
  .landing-glass, .landing-card { transition: none; }
}
@media (max-width: 720px) {
  .landing-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .landing-hero { padding: 40px 0 32px; }
  .landing-section { padding: 40px 0; }
  .landing-links a:not(:last-child) { display: none; }
}