/* =============================================================================
   R2Tag ERP — sistema visual

   Escrito a mao com tokens, em vez de framework utilitario: as telas sao montadas
   por fragmentos compartilhados (crud-table, campo), entao a superficie de CSS e
   pequena e reaproveitada. Utilitario por classe compensa quando cada tela tem
   marcacao propria — aqui nao tem.

   Organizacao:
     1. Tokens          6. Formularios
     2. Reset e base    7. Botoes
     3. Layout          8. Avisos e etiquetas
     4. Navegacao       9. Tabelas
     5. Cartoes        10. Responsivo
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutros com viés azul, para conversar com o marinho da marca sem parecer cinza puro */
  --n0:  #ffffff;
  --n25: #fafbfd;
  --n50: #f2f5f9;
  --n100:#e7ecf3;
  --n200:#d8dfe9;
  --n300:#bfc9d6;
  --n400:#94a1b3;
  --n500:#5f6d80;
  --n600:#4a576a;
  --n700:#354155;
  --n800:#222c3d;
  --n900:#111a2b;

  /* Acento: o azul da logo (#005BFA). O 500 é a própria cor da marca e já passa 4.5:1 sobre branco */
  --a50: #e8f0ff;
  --a100:#c8dbff;
  --a200:#94b8ff;
  --a400:#3b7dfb;
  --a500:#005bfa;
  --a600:#004ad0;
  --a700:#003a9f;

  --ok:#137a51;      --ok-bg:#e2f4ec;
  --warn:#9a6410;    --warn-bg:#fbf1dd;
  --crit:#b03024;    --crit-bg:#fce8e5;
  --info:#1b5fa8;    --info-bg:#e6f0fb;

  /* Barra lateral no marinho da logo: separa navegação de conteúdo sem precisar de borda grossa */
  --side-bg:#041634;
  --side-bg-alt:#0a2148;
  --side-fg:#aebbd2;
  --side-fg-strong:#eef3fb;
  --side-muted:#7f91b0;
  --side-hover:rgba(255,255,255,.06);
  --side-active-bg:rgba(0,91,250,.28);
  --side-active-fg:#8ab6ff;
  --side-line:rgba(255,255,255,.08);

  --ground:var(--n50);
  --surface:var(--n0);
  --surface-alt:var(--n25);
  --line:var(--n200);
  --line-soft:var(--n100);
  --ink:var(--n900);
  --ink-2:var(--n700);
  --muted:var(--n500);

  --r-sm:6px; --r:9px; --r-lg:14px; --r-full:999px;

  --sh-1:0 1px 2px rgba(18,26,30,.06);
  --sh-2:0 1px 3px rgba(18,26,30,.07), 0 4px 12px -4px rgba(18,26,30,.09);
  --sh-3:0 8px 30px -8px rgba(18,26,30,.20);
  --ring:0 0 0 3px rgba(0,91,250,.18);

  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"Roboto Mono",monospace;

  --side-w:252px;
  --top-h:58px;
  --content-max:1280px;

  --t:150ms cubic-bezier(.4,0,.2,1);
}

/* -----------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.018em; font-weight:650; }
h1 { font-size:23px; letter-spacing:-.024em; }
h2 { font-size:18px; }
h3 { font-size:15.5px; }
p  { margin:0; }

a { color:var(--a600); text-underline-offset:3px; }
a:hover { color:var(--a500); }

:focus-visible { outline:2px solid var(--a500); outline-offset:2px; border-radius:var(--r-sm); }

svg { flex:none; }

.mono   { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num    { font-variant-numeric:tabular-nums; text-align:right; }
.muted  { color:var(--muted); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}

/* -----------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.app { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; }

.conteudo { display:flex; flex-direction:column; min-width:0; }

main { flex:1; padding:26px 28px 64px; }

/* Conteudo ocupa a largura da tela. As proporcoes de cada campo ficam por conta
   da grade de 12 colunas, nao de um limite global. */
.wrap { width:100%; }
.wrap-largo { width:100%; }

.pagina-cabecalho {
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:22px;
}
.pagina-cabecalho .acoes { display:flex; gap:9px; flex-wrap:wrap; }

/* -----------------------------------------------------------------------------
   4. Navegacao
   -------------------------------------------------------------------------- */
.menu {
  background:var(--side-bg);
  color:var(--side-fg);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}

.menu-topo {
  padding:16px 18px;
  border-bottom:1px solid var(--side-line);
  flex:none;
}

/*
  A marca é a logo em PNG, em duas versões: a normal (marinho + azul) para fundo claro e a
  "negativo" (branco + azul) para o menu escuro. O miolo da tag é transparente — a versão normal
  sobre o marinho do menu perderia o contorno e sobraria só o "2" azul.
*/
.marca { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-decoration:none; color:inherit; }
.marca-logo { display:block; height:32px; width:auto; }
.marca-sub  { font-size:11px; color:var(--side-muted); letter-spacing:.02em; }
/* fora do menu (tela de erro, troca de senha) a marca fica sobre cartão branco */
.cartao .marca-sub { color:var(--muted); }

.menu-nav { flex:1; overflow-y:auto; padding:10px 10px 18px; }
.menu-nav::-webkit-scrollbar { width:8px; }
.menu-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border-radius:4px; }
.menu-nav::-webkit-scrollbar-track { background:transparent; }

.menu-grupo {
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--side-muted);
  padding:16px 12px 6px;
}
.menu-grupo:first-child { padding-top:6px; }
/* bloco dentro de um grupo (Engenharia: materiais / processo / ferramental):
   mais discreto que o grupo, para não parecer um módulo novo */
.menu-subgrupo {
  font-size:10.5px; font-weight:500; color:var(--side-muted); opacity:.75;
  padding:10px 12px 3px 40px;
}

.menu-item {
  display:flex; align-items:center; gap:11px;
  padding:8px 12px; margin-bottom:1px;
  border-radius:8px;
  color:var(--side-fg); text-decoration:none;
  font-size:13.5px; font-weight:450;
  position:relative;
  transition:background var(--t), color var(--t);
}
.menu-item svg { width:17px; height:17px; opacity:.75; transition:opacity var(--t); }
.menu-item:hover { background:var(--side-hover); color:var(--side-fg-strong); }
.menu-item:hover svg { opacity:1; }
.menu-item.ativo {
  background:var(--side-active-bg); color:var(--side-active-fg); font-weight:600;
}
.menu-item.ativo svg { opacity:1; }
.menu-item.ativo::before {
  content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:19px; border-radius:0 3px 3px 0; background:var(--side-active-fg);
}

.menu-pe {
  flex:none; padding:13px 18px;
  border-top:1px solid var(--side-line);
  font-size:11px; color:var(--side-muted); line-height:1.45;
}

/* --- topbar --- */
.topbar {
  height:var(--top-h); flex:none;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  padding:0 28px;
  position:sticky; top:0; z-index:30;
}

.trilha { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); min-width:0; }
.trilha .atual { color:var(--ink); font-weight:550; }
.trilha svg { width:14px; height:14px; opacity:.5; }

.topbar-direita { margin-left:auto; display:flex; align-items:center; gap:6px; }

.botao-icone {
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:0; border-radius:8px;
  color:var(--n500); cursor:pointer; position:relative;
  transition:background var(--t), color var(--t);
}
.botao-icone:hover { background:var(--n100); color:var(--ink-2); }
.botao-icone svg { width:19px; height:19px; }
.botao-icone .selo {
  position:absolute; top:5px; right:5px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--crit); color:#fff;
  border-radius:var(--r-full); font-size:10px; font-weight:700;
  display:grid; place-items:center;
  border:2px solid var(--surface);
}

.identidade {
  display:flex; align-items:center; gap:9px;
  padding:5px 10px 5px 6px; border-radius:9px;
  transition:background var(--t);
}
.identidade:hover { background:var(--n100); }
.avatar {
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--a400),var(--a600));
  color:#fff; font-weight:650; font-size:12.5px;
  border-radius:var(--r-full);
}
.identidade-texto { line-height:1.25; min-width:0; }
.identidade-nome { font-size:13px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.identidade-cpf  { font-family:var(--mono); font-size:10.5px; color:var(--muted); }

.abre-menu { display:none; }
/* Só no celular, quando o menu (e a logo dele) está recolhido: o símbolo mantém a marca à vista */
.topbar-simbolo { display:none; height:24px; width:auto; flex:none; }

/* -----------------------------------------------------------------------------
   5. Cartoes
   -------------------------------------------------------------------------- */
.cartao {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.cartao-pad { padding:22px 24px; }

.cartao-cabecalho {
  display:grid; gap:2px;
  padding:15px 24px;
  border-bottom:1px solid var(--line-soft);
}
.cartao-cabecalho h2 { font-size:15px; font-weight:650; }
.cartao-cabecalho .descricao { font-size:12.5px; color:var(--muted); }
.cartao-corpo { padding:22px 24px; }

.pilha { display:grid; gap:16px; }
/* fieldset só para desabilitar o cadastro inteiro na consulta: sem moldura nem recuo */
.campos-do-cadastro { border:0; padding:0; margin:0; min-width:0; }

/* Indicador numerico do painel */
.indicadores { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.indicador {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh-1);
}
.indicador .rotulo { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.indicador .rotulo svg { width:14px; height:14px; opacity:.7; }
.indicador .valor {
  display:block; margin-top:7px;
  font-size:27px; font-weight:680; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.indicador .nota { font-size:11.5px; color:var(--muted); margin-top:3px; }

/* -----------------------------------------------------------------------------
   6. Formularios
   -------------------------------------------------------------------------- */

/* Grade de 12 colunas: cada campo declara quanto ocupa, com .col-N.
   E o que resolve o problema de CEP ter a mesma largura de Logradouro. */
.grade-form { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px 14px; }
.col-1{grid-column:span 1}  .col-2{grid-column:span 2}  .col-3{grid-column:span 3}
.col-4{grid-column:span 4}  .col-5{grid-column:span 5}  .col-6{grid-column:span 6}
.col-7{grid-column:span 7}  .col-8{grid-column:span 8}  .col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

.campo {
  display:grid; gap:5px; min-width:0;
  /* align-content padrao e "stretch": as linhas automaticas do campo cresceriam para
     preencher a altura da linha da grade, afastando rotulo e input. O resultado e o
     input de uma coluna ficar mais baixo que o da coluna ao lado so porque a vizinha
     tem texto de ajuda. Empilhar a partir do topo alinha todos os inputs. */
  align-content:start;
}
.campo label {
  font-size:12.5px; font-weight:550; color:var(--ink-2);
  display:flex; align-items:flex-end; gap:4px;
  /* reserva a altura de uma linha: rotulo que quebra em duas ainda desalinha,
     mas a diferenca fica contida no proprio campo */
  min-height:18px; line-height:1.3;
}
.campo label .obrigatorio { color:var(--crit); font-weight:600; }
.campo .ajuda { font-size:11.5px; color:var(--muted); line-height:1.4; }
.campo .erro  { font-size:11.5px; color:var(--crit); font-weight:500; }
/* ocupa o lugar do rótulo quando o campo ao lado tem um e este não: mantém as duas colunas alinhadas */
.rotulo-espaco { min-height:18px; line-height:1.3; font-size:12.5px; }

/* Prévia da condição de pagamento, ao lado do campo: a altura do input, e as parcelas como fichas */
.condicao-previa {
  min-height:40px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-size:12.5px; color:var(--ink-2);
}
.condicao-previa-parcelas { display:flex; flex-wrap:wrap; gap:6px; }
.condicao-previa-parcelas .etiqueta { padding:3px 10px; font-weight:550; }
.condicao-previa-parcelas .etiqueta b { color:var(--ink); font-weight:650; }

/* contador ao lado do título do cartão */
.contador {
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px;
  border-radius:var(--r-full); background:var(--a50); color:var(--a600);
  font-size:11.5px; font-weight:650; vertical-align:2px;
}

/* Documentos da pessoa: uma linha por arquivo, com a sigla do formato fazendo as vezes de ícone */
.documentos { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.documento {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--surface); transition:border-color var(--t), background var(--t);
}
.documento:hover { border-color:var(--line); background:var(--n25); }
.documento-sigla {
  flex:none; width:40px; height:46px; display:grid; place-items:end center; padding-bottom:6px;
  border-radius:6px 12px 6px 6px; font-size:10.5px; font-weight:750; letter-spacing:.04em;
  background:var(--n100); color:var(--n600);
}
.sigla-pdf { background:#fde8e6; color:#b3261e; }
.sigla-img { background:#e6f4ea; color:#1e7b3c; }
.sigla-doc { background:var(--a50); color:var(--a600); }
.sigla-xls { background:#e3f3ec; color:#137a51; }
.documento-info { flex:1 1 240px; min-width:0; display:grid; gap:4px; }
.documento-titulo { font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.documento-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12px; color:var(--muted); }
.documento-acoes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.documento-acoes .botao svg { width:15px; height:15px; }

.envio-documentos {
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px;
  padding:14px; border:1px dashed var(--n300); border-radius:var(--r); background:var(--n25);
}
.envio-documentos-arquivos {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
  font-weight:600; font-size:13px; color:var(--ink-2);
}
.envio-documentos-arquivos svg { width:17px; height:17px; }
.envio-documentos-arquivos input { font-size:12px; max-width:220px; }

/* Prévia das entregas do contrato: as próximas datas em fichas, com o dia em que o pedido nasce */
.previa-entregas { display:flex; flex-wrap:wrap; gap:8px; }
.previa-entrega {
  display:grid; gap:1px; padding:8px 14px; min-width:110px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--n25); font-size:12px;
}
.previa-entrega-dia { font-family:var(--mono); font-size:16px; font-weight:650; color:var(--ink); }
.previa-entrega:first-child { border-color:var(--a200); background:var(--a50); }

/* -----------------------------------------------------------------------------
   CRM
   -------------------------------------------------------------------------- */
.botao-whats { background:#1f9d55; color:#fff; border-color:#1f9d55; }
.botao-whats:hover { background:#17864a; color:#fff; border-color:#17864a; }
.botao-whats svg { width:16px; height:16px; }

.alternador { display:inline-flex; padding:3px; border-radius:var(--r); background:var(--n100); }
.alternador a { padding:6px 12px; border-radius:7px; font-size:13px; font-weight:600; color:var(--n600); text-decoration:none; }
.alternador a.ativo { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }

/* Hoje: blocos de ação em duas colunas */
.painel-hoje { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }

/* nota do lead: bolinha colorida pela faixa */
.nota-lead {
  flex:none; min-width:34px; height:34px; padding:0 6px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:12.5px; font-weight:700; cursor:help;
}
.nota-quente { background:#fde8e6; color:#b3261e; }
.nota-morno  { background:var(--warn-bg); color:var(--warn); }
.nota-frio   { background:var(--n100); color:var(--n600); }

/* Funil kanban: colunas de largura fixa com rolagem horizontal */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; padding-bottom:12px; align-items:start; }
.kanban-coluna { background:var(--n100); border-radius:var(--r-lg); display:flex; flex-direction:column; max-height:calc(100vh - 250px); min-height:220px; }
.kanban-cabeca { padding:12px 14px 8px; display:grid; gap:2px; border-top:3px solid var(--a400); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.kanban-cabeca > div { display:flex; align-items:center; justify-content:space-between; }
.kanban-soma { font-size:12px; color:var(--muted); font-family:var(--mono); }
.coluna-ganho .kanban-cabeca { border-top-color:var(--ok); }
.coluna-perdido .kanban-cabeca { border-top-color:var(--n400); }
.kanban-cartoes { flex:1; overflow-y:auto; padding:6px 8px 10px; display:grid; gap:8px; align-content:start; border-radius:0 0 var(--r-lg) var(--r-lg); transition:background var(--t); }
.kanban-cartoes.soltar-aqui { background:var(--a50); outline:2px dashed var(--a200); outline-offset:-4px; }
.kanban-cartao {
  display:grid; gap:5px; padding:11px 12px; border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line-soft); box-shadow:var(--sh-1); color:inherit; text-decoration:none; cursor:grab;
  transition:box-shadow var(--t), transform var(--t);
}
.kanban-cartao:hover { box-shadow:var(--sh-2); color:inherit; }
.kanban-cartao.arrastando { opacity:.5; transform:rotate(2deg); cursor:grabbing; }
/* toque: sem o menu "abrir link" do celular ao segurar, e a cópia que segue o dedo */
.kanban-cartao { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.kanban-fantasma {
  position:fixed; left:0; top:0; z-index:1000; pointer-events:none; margin:0;
  box-shadow:var(--sh-3); opacity:.96; will-change:transform;
}
.dica-toque { display:none; }
@media (hover:none) and (pointer:coarse) { .dica-toque { display:block; } }
.kanban-cartao.cartao-atrasado { border-left:3px solid var(--crit); }
.kanban-cartao-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kanban-cartao-topo b { font-weight:600; line-height:1.3; }
.kanban-cartao .nota-lead { min-width:28px; height:28px; font-size:11.5px; }
.kanban-linha { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-rodape { display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; font-size:12px; }
.kanban-dono {
  margin-left:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--side-bg); color:#fff; font-size:11px; font-weight:700;
}
.kanban-vazia { color:var(--muted); font-size:12.5px; text-align:center; padding:18px 0; }

.dialogo { border:0; border-radius:var(--r-lg); padding:22px; width:min(440px, calc(100vw - 32px)); box-shadow:var(--sh-3); }
.dialogo::backdrop { background:rgba(1,22,52,.45); backdrop-filter:blur(3px); }

/* Lead: formulário e painel lateral */
.lead-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); gap:16px; align-items:start; }
.lead-resumo { display:flex; gap:16px; align-items:center; }
.nota-grande { flex:none; width:78px; height:78px; border-radius:50%; display:grid; place-items:center; align-content:center; }
.nota-grande b { font-family:var(--mono); font-size:26px; line-height:1; }
.nota-grande span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; }
.nota-razoes { margin:0; padding:0; list-style:none; display:grid; gap:3px; font-size:12.5px; color:var(--ink-2); }

/* Assistente de IA */
.assistente { display:grid; gap:12px; }
#assistente-crm { display:grid; gap:12px; }
.assistente-cabeca { display:flex; gap:10px; align-items:center; }
.assistente-cabeca > div { display:grid; font-size:13px; }
.assistente-cabeca .muted { font-size:12px; }
.assistente-selo {
  flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--a500), #7b5cff);
}
.assistente-selo svg { width:18px; height:18px; }
.assistente-bloco { display:grid; gap:5px; padding:12px; border-radius:var(--r); background:var(--n25); border:1px solid var(--line-soft); }
.assistente-acao { background:var(--a50); border-color:var(--a100); }

/* Timeline e registro de atividade */
.timeline-crm { display:grid; gap:14px; }
.registro-tipo input { position:absolute; opacity:0; pointer-events:none; }
.registro-tipo span {
  display:inline-block; padding:4px 10px; border-radius:var(--r-full); border:1px solid var(--line);
  font-size:12px; font-weight:600; color:var(--n600); background:var(--surface); cursor:pointer;
}
.registro-tipo input:checked + span { background:var(--a600); border-color:var(--a600); color:#fff; }
.registro-tipo input:focus-visible + span { box-shadow:var(--ring); }
.registro-acoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.registro-acoes input[type=date] { width:auto; padding:5px 8px; font-size:12.5px; }

/* Relacionamento na tela do cliente */
.relacionamento { display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr); gap:18px; align-items:start; }
.relacionamento-lado { display:grid; gap:14px; }
.ritmo { display:grid; gap:8px; padding:14px; border-radius:var(--r); background:var(--n25); border:1px solid var(--line-soft); justify-items:start; }
.ritmo-numeros { display:flex; gap:18px; }
.ritmo-numeros div { display:grid; }
.ritmo-numeros b { font-size:22px; line-height:1.1; color:var(--ink); }
.ritmo-numeros span { font-size:11.5px; color:var(--muted); }
.ritmo-atrasado { background:var(--warn-bg); border-color:rgba(154,100,16,.2); }
.ritmo-inativo { background:var(--crit-bg); border-color:rgba(176,48,36,.2); }

/* Modo feira: uma coluna, alvos grandes para o polegar */
.modo-feira { max-width:560px; margin:0 auto; }
.feira-campos { display:grid; gap:14px; }
.feira-campos input, .feira-campos select { font-size:16px; padding:12px 12px; }
.feira-campos .botao-largo { padding:14px; font-size:15px; }

/* Fila do dia */
.hoje-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.hoje-cabecalho { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.hoje-cabecalho h1 { margin-top:2px; }
.hoje-cabecalho p { font-size:13.5px; margin-top:4px; }
.hoje-cabecalho .acoes { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

.fila-filtros { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.fila-filtro {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.fila-filtro b { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.fila-filtro:hover { border-color:var(--n300); }
.fila-filtro.ativo { background:var(--side-bg); border-color:var(--side-bg); color:#fff; }
.fila-filtro.ativo b { color:#b9c7e0; }

.fila { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fila-item {
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); transition:box-shadow var(--t), border-color var(--t);
}
.fila-item:hover { border-color:var(--line); box-shadow:var(--sh-2); }
.fila-primeiro { border-color:var(--a200); box-shadow:0 0 0 3px var(--a50), var(--sh-2); }
.fila-linha { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; }
.fila-icone { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
.fila-icone svg { width:19px; height:19px; }
.tom-azul { background:var(--a50); color:var(--a600); }
.tom-verde { background:#e3f3ec; color:#137a51; }
.tom-laranja { background:var(--warn-bg); color:var(--warn); }
.tom-roxo { background:#efeafe; color:#6a4cd6; }
.tom-cinza { background:var(--n100); color:var(--n600); }
.fila-texto { min-width:0; display:grid; gap:3px; }
.fila-titulo { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.fila-titulo a { font-weight:650; font-size:14.5px; color:var(--ink); text-decoration:none; }
.fila-titulo a:hover { color:var(--a600); text-decoration:underline; }
.fila-tipo { font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.fila-atraso { font-size:11.5px; font-weight:650; color:var(--crit); }
.fila-valor { font-size:12px; color:var(--ink-2); background:var(--n50); padding:1px 7px; border-radius:var(--r-full); }
.fila-porque { font-size:13px; color:var(--ink-2); }
.fila-mensagem {
  font-size:12.5px; color:var(--n600); margin-top:3px; padding-left:10px; border-left:2px solid #9bd8b5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fila-acoes { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; }
.fila-acoes .botao svg { width:15px; height:15px; }
.fila-form-inline { display:inline; }

.menu-suspenso { position:relative; }
.menu-suspenso summary { list-style:none; }
.menu-suspenso summary::-webkit-details-marker { display:none; }
.menu-suspenso-painel {
  position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:150px; padding:5px;
  display:grid; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3);
}
.menu-suspenso-painel button {
  text-align:left; padding:8px 10px; border:0; background:none; border-radius:var(--r-sm); font:inherit; font-size:13px; color:var(--ink-2); cursor:pointer;
}
.menu-suspenso-painel button:hover { background:var(--n50); color:var(--ink); }

.fila-resultado { border-top:1px solid var(--line-soft); }
.fila-resultado > summary {
  list-style:none; cursor:pointer; padding:7px 16px 8px 70px; font-size:12px; font-weight:600; color:var(--muted);
}
.fila-resultado > summary::-webkit-details-marker { display:none; }
.fila-resultado > summary:hover { color:var(--a600); }
.fila-resultado[open] > summary { color:var(--ink-2); }
.fila-resultado form { display:grid; gap:8px; padding:0 16px 14px 70px; }
.resultado-opcoes { display:flex; flex-wrap:wrap; gap:6px; }
.resultado-opcao {
  padding:8px 14px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface);
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all var(--t);
}
.resultado-opcao:hover { transform:translateY(-1px); box-shadow:var(--sh-1); }
.opcao-conversamos:hover { background:#e3f3ec; border-color:#9bd8b5; color:#137a51; }
.opcao-nao_atendeu:hover { background:var(--n100); }
.opcao-pediu_proposta:hover { background:var(--a50); border-color:var(--a200); color:var(--a600); }
.opcao-sem_interesse:hover { background:var(--warn-bg); border-color:#ecc98c; color:var(--warn); }
.fila-resultado input[name=nota] { font-size:13px; padding:7px 10px; }

.fila-resolvida {
  display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:13px; font-weight:600;
  color:var(--ok); background:#f3faf6; border-color:#cfeadb; box-shadow:none; animation:aparecer .2s ease-out;
}
.fila-resolvida svg { width:17px; height:17px; }
.fila-erro { color:var(--crit); background:var(--crit-bg); border-color:rgba(176,48,36,.2); }
.fila-vazia { display:grid; justify-items:center; gap:8px; padding:48px 20px; text-align:center; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-lg); }
.fila-vazia svg { width:34px; height:34px; color:var(--ok); }

.hoje-lado { display:grid; gap:12px; position:sticky; top:12px; }
.placar { padding:16px 18px; display:grid; gap:6px; }
.placar .muted { font-size:12.5px; }
.placar-numero { font-size:32px; line-height:1.05; font-weight:700; color:var(--ink); }
.placar-link { font-size:12.5px; font-weight:600; margin-top:4px; }
.atalhos-crm { padding:6px; display:grid; }
.atalhos-crm a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink-2); text-decoration:none; font-size:13.5px; }
.atalhos-crm a:hover { background:var(--n50); color:var(--ink); }
.atalhos-crm svg { width:17px; height:17px; color:var(--muted); }

@media (max-width:1100px) {
  .hoje-layout { grid-template-columns:minmax(0,1fr); }
  .hoje-lado { position:static; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
}
@media (max-width:700px) {
  .fila-linha { grid-template-columns:36px minmax(0,1fr); }
  .fila-acoes { grid-column:1 / -1; justify-content:flex-start; }
  .fila-resultado > summary, .fila-resultado form { padding-left:16px; }
}

/* Lead em modo leitura */
.lead-topo { padding:18px 22px 0; margin-bottom:16px; }
.lead-topo-linha { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-start; }
.lead-identidade h1 { margin:2px 0 6px; }
.lead-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--muted); }
.lead-meta b { color:var(--ink-2); font-weight:600; }
.lead-acoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lead-acoes .botao svg { width:16px; height:16px; }
.menu-suspenso-painel a {
  display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.menu-suspenso-painel a:hover { background:var(--n50); color:var(--ink); }
.menu-suspenso-painel select, .menu-suspenso-painel input { margin:4px 0 8px; }
.agendar-painel { min-width:220px; padding:10px; }

.etapas-lead { list-style:none; margin:16px -22px 0; padding:0 22px; display:flex; gap:0; border-top:1px solid var(--line-soft); overflow-x:auto; }
.etapas-lead > li { position:relative; flex:1 1 0; min-width:max-content; }
.etapas-lead form, .etapas-lead details { display:block; }
.etapas-lead button, .etapas-lead summary {
  width:100%; padding:12px 14px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--muted);
  cursor:pointer; text-align:center; list-style:none; border-bottom:3px solid transparent; white-space:nowrap;
}
.etapas-lead summary::-webkit-details-marker { display:none; }
.etapas-lead button:hover:not(:disabled), .etapas-lead summary:hover { color:var(--ink); background:var(--n25); }
.etapas-lead .etapa-passada button { color:var(--a600); border-bottom-color:var(--a100); }
.etapas-lead .etapa-atual button, .etapas-lead .etapa-atual summary { color:var(--a600); border-bottom-color:var(--a500); cursor:default; }
.etapas-lead .etapa-perdido.etapa-atual summary { color:var(--crit); border-bottom-color:var(--crit); }
.etapas-lead .etapa-perdido .menu-suspenso-painel { right:0; padding:10px; min-width:220px; }

.lead-layout { grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); }
.proximo-passo { padding:16px 18px; display:grid; gap:12px; border-left:4px solid var(--a500); }
.passo-atrasado { border-left-color:var(--crit); }
.proximo-passo-cabeca { display:flex; justify-content:space-between; align-items:center; }
.proximo-passo-corpo { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; }
.proximo-passo-corpo p { font-size:13.5px; color:var(--ink-2); margin-top:2px; }
.proximo-passo-resultado { display:grid; gap:8px; padding-top:12px; border-top:1px dashed var(--line); }
.proximo-passo-resultado input[name=nota] { font-size:13px; padding:7px 10px; }
.proximo-passo-vazio { border-left-color:var(--warn); }
.proximo-passo-vazio p { font-size:13px; color:var(--ink-2); }
.dados-lead { display:grid; grid-template-columns:90px minmax(0,1fr); gap:7px 12px; margin:0; font-size:13px; }
.dados-lead dt { color:var(--muted); }
.dados-lead dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }

.duplicados { border-color:#ecc98c; background:#fffaf0; }
.duplicados h2 { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--warn); }
.duplicados h2 svg { width:18px; height:18px; }
.duplicados-lista { list-style:none; margin:0; padding:4px 18px 0; display:grid; gap:8px; }
.duplicados-lista li { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:13px; }
.duplicados-lista a { font-weight:600; }

/* Linha do tempo */
.registro-linha { display:grid; grid-template-columns:150px minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.registro-linha select, .registro-linha input[type=text] { padding:7px 10px; font-size:13px; }
.agendados { border:1px solid var(--line-soft); border-radius:var(--r); background:var(--n25); }
.agendados > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; font-weight:600; color:var(--ink-2); }
.agendados > summary::-webkit-details-marker { display:none; }
.agendados > summary svg { width:16px; height:16px; color:var(--a600); }
.agendados ul { list-style:none; margin:0; padding:0 12px 10px; display:grid; gap:4px; }
.agendados li { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:12.5px; padding:5px 0; border-top:1px solid var(--line-soft); }
.agendado-data { font-weight:650; color:var(--a600); }
.agendado-atrasado .agendado-data { color:var(--crit); }
.agendado-texto { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.agendado-texto b { margin-right:6px; color:var(--ink); }
.linha-filtros { display:flex; flex-wrap:wrap; gap:6px; }
.linha-tempo { list-style:none; margin:0; padding:0; display:grid; }
.evento { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; position:relative; padding-bottom:14px; }
.evento::before { content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--line-soft); }
.evento:last-child::before { display:none; }
.evento-icone { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--n100); color:var(--n600); }
.evento-icone svg { width:15px; height:15px; }
.evento-pedido .evento-icone { background:#e3f3ec; color:#137a51; }
.evento-proposta .evento-icone { background:#efeafe; color:#6a4cd6; }
.evento-financeiro .evento-icone { background:var(--warn-bg); color:var(--warn); }
.evento-cabeca { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:13px; padding-top:4px; }
.evento-cabeca a { font-weight:600; }
.evento-valor { font-size:12px; color:var(--ink-2); }
.evento-quando { margin-left:auto; font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.evento-texto { font-size:13px; color:var(--ink-2); margin-top:2px; white-space:pre-line; }

/* Funil: colunas abertas flexíveis, fechadas empilhadas numa coluna estreita */
.kanban { display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.kanban > .kanban-coluna { flex:1 1 0; min-width:168px; }
.kanban-fechados { flex:0 0 176px; display:grid; gap:10px; }
.kanban-coluna-compacta { min-height:0; max-height:calc(50vh - 130px); }
.kanban-coluna-compacta .kanban-cartoes { min-height:70px; }
.cartao-compacto { padding:8px 10px; gap:2px; font-size:12.5px; }
.cartao-compacto .kanban-cartao-topo b { font-size:12.5px; }
.kanban-proximo { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); }
.kanban-proximo svg { width:13px; height:13px; }
.proximo-atrasado { color:var(--crit); font-weight:600; }

/* Modo feira: aviso rápido */
.feira-aviso-rapido {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50;
  padding:12px 18px; border-radius:var(--r-full); background:var(--side-bg); color:#fff; font-weight:600; font-size:14px;
  box-shadow:var(--sh-3); animation:aparecer .2s ease-out; max-width:calc(100vw - 32px);
}
.feira-dica { margin-top:2px; }
.feira-fila { margin-bottom:12px; }

@media (max-width:1000px) {
  .registro-linha { grid-template-columns:1fr 1fr; }
  .registro-linha input[type=text] { grid-column:1 / -1; grid-row:1; }
  .etapas-lead > li { flex:0 0 auto; }
}

/* Cadastro rápido: captura por QR code e foto */
.captura-rapida { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-bottom:12px; }
.captura-rapida .cartao-foto { margin:0; }
button.cartao-foto-botao { width:100%; border:1px solid var(--line); text-align:left; font:inherit; color:inherit; border-radius:var(--r-lg); }
.leitor-qr { width:min(520px, calc(100vw - 24px)); padding:14px; }
.leitor-qr-cabeca { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.leitor-qr-video { position:relative; aspect-ratio:4 / 3; max-width:100%; background:#000; border-radius:var(--r); overflow:hidden; }
.leitor-qr-video video { width:100%; height:100%; object-fit:cover; display:block; }
.leitor-qr-mira {
  position:absolute; inset:18% 22%; border:3px solid rgba(255,255,255,.85); border-radius:14px;
  box-shadow:0 0 0 999px rgba(0,0,0,.28);
}
.leitor-qr-status { font-size:13px; margin:10px 0; min-height:20px; }
.leitor-qr-foto { cursor:pointer; }

/* Importação de leads */
.passos-importacao { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.passos-importacao li { display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:var(--r-full); background:var(--surface); border:1px solid var(--line-soft); font-size:13px; color:var(--muted); font-weight:600; }
.passos-importacao b { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--n100); color:var(--n600); font-size:12px; }
.passos-importacao .passo-atual { color:var(--ink); border-color:var(--a200); }
.passos-importacao .passo-atual b { background:var(--a500); color:#fff; }
.passos-importacao .passo-feito b { background:#e3f3ec; color:#137a51; }
.progresso-importacao .cartao-corpo { display:grid; gap:10px; }
.progresso-cabeca { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:baseline; }
.progresso-trilho { height:10px; border-radius:var(--r-full); background:var(--n100); overflow:hidden; }
.progresso-trilho span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--a400), var(--a600)); transition:width .6s ease; }
@media (prefers-reduced-motion: reduce) { .progresso-trilho span { transition:none; } }
.envio-planilha-area {
  display:grid; justify-items:center; gap:6px; margin:18px; padding:34px 20px; text-align:center; cursor:pointer;
  border:2px dashed var(--n300); border-radius:var(--r-lg); background:var(--n25);
}
.envio-planilha-area:hover { border-color:var(--a400); background:var(--a50); }
.envio-planilha-area > svg { width:34px; height:34px; color:var(--a600); }
.envio-planilha-area input { margin-top:8px; font-size:13px; }
.tabela-mapeamento select { padding:6px 8px; font-size:13px; }
.exemplos-coluna { font-size:12.5px; }
.exemplos-coluna span { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.exemplos-coluna span + span::before { content:" · "; }
.lista-importacao { margin:0; padding-left:34px; display:grid; gap:4px; font-size:13px; }
.erro-importacao { color:var(--crit); }

/* CRM fase 2 */
.indicador > span { font-size:12px; color:var(--muted); }
.indicador > b { font-size:22px; line-height:1.2; color:var(--ink); }
.indicador > small { font-size:11.5px; color:var(--muted); line-height:1.4; }

/* Distribuir carteira: cada indicador é um filtro */
a.indicador { display:grid; gap:2px; align-content:start; color:inherit; text-decoration:none; transition:border-color var(--t), box-shadow var(--t); }
a.indicador:hover { text-decoration:none; border-color:var(--a500); }
.indicador-ativo { border-color:var(--a500); box-shadow:inset 0 -3px 0 var(--a500); }
.barra-distribuir { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.barra-distribuir-acao { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.barra-distribuir-acao { flex-wrap:nowrap; }
.barra-distribuir-acao select { width:auto; min-width:0; max-width:100%; }
@media (max-width:640px) {
  .barra-distribuir-acao { flex-wrap:wrap; width:100%; }
  .barra-distribuir-acao select { flex:1 1 100%; }
}
/* cadastro em consulta: sem os botões de acrescentar e tirar contato */
.campos-do-cadastro:disabled [data-adicionar-contato],
.campos-do-cadastro:disabled [data-remover-contato] { display:none; }
.texto-ok { color:var(--ok) !important; }
.navegador-mes { align-items:center; }
.navegador-mes b { min-width:150px; text-align:center; }
.linha-total td { background:var(--n25); border-top:2px solid var(--line); }
.linha-inativa { opacity:.55; }

.barra-meta { position:relative; height:22px; border-radius:var(--r-full); background:var(--n100); overflow:hidden; }
.barra-meta span { position:absolute; inset:0 auto 0 0; border-radius:inherit; }
.barra-meta b { position:relative; display:block; text-align:center; font-size:11.5px; line-height:22px; color:var(--ink); }
.meta-no-ritmo span { background:linear-gradient(90deg, #b9e6cf, #7fd1a8); }
.meta-abaixo span { background:linear-gradient(90deg, #f7dfb4, #f0c173); }
.meta-form { display:flex; gap:4px; align-items:center; }
.meta-form input { width:90px; padding:5px 7px; font-size:12.5px; }
.meta-form input[name=novosClientes] { width:64px; }

.funil-barras { display:grid; gap:10px; }
.funil-barra { display:grid; grid-template-columns:minmax(120px,1fr) 2fr auto; gap:10px; align-items:center; }
.funil-barra-rotulo { display:grid; font-size:13px; line-height:1.25; }
.funil-barra-rotulo .muted { font-size:11.5px; }
.funil-barra-trilho { height:12px; border-radius:var(--r-full); background:var(--n100); overflow:hidden; }
.funil-barra-trilho span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--a400), var(--a600)); }
.funil-barra-trilho.perda span { background:linear-gradient(90deg, #f1a79f, var(--crit)); }
.funil-barra-valor { font-size:12.5px; min-width:80px; text-align:right; }

.cadencia-ativa { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; border-top:1px solid var(--line-soft); font-size:13px; color:var(--info); }
.cadencia-ativa svg { width:15px; height:15px; vertical-align:-2px; }
.timeline-cancelada { text-decoration:line-through; color:var(--muted); }
.timeline-mensagem {
  font-size:12.5px; color:var(--ink-2); background:#eaf7ef; border-left:3px solid #1f9d55;
  padding:6px 9px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin-top:4px; white-space:pre-line;
}

.recompras-cliente { display:grid; gap:6px; padding:12px; border-radius:var(--r); border:1px solid var(--line-soft); }
.recompras-cliente ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.recompras-cliente li { display:grid; gap:2px; font-size:12.5px; justify-items:start; }

.cartao-foto { overflow:hidden; }
.cartao-foto-botao {
  display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer;
  background:linear-gradient(135deg, var(--a50), #f1ecff);
}
.cartao-foto-botao > svg { width:28px; height:28px; color:var(--a600); flex:none; }
.cartao-foto-botao span { display:grid; }
.cartao-foto-botao small { color:var(--muted); font-size:12px; }
.cartao-foto-botao input { position:absolute; width:1px; height:1px; opacity:0; }

.linha-edicao { display:grid; grid-template-columns:minmax(120px,1fr) minmax(160px,2fr) 90px 110px; gap:8px; }
.linha-edicao input { padding:6px 8px; font-size:13px; }

.cadencia { border:1px solid var(--line-soft); border-radius:var(--r); padding:14px; display:grid; gap:12px; }
.cadencia-cabeca { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:flex-start; }
.cadencia-passos { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cadencia-passos li { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:start; font-size:13px; }
.cadencia-dia { display:grid; place-items:center; height:28px; border-radius:var(--r-sm); background:var(--a50); color:var(--a600); font-weight:700; font-size:12px; }
.passo-novo { padding-top:10px; border-top:1px dashed var(--line); }

@media (max-width:1000px) {
  .painel-hoje, .lead-layout, .relacionamento { grid-template-columns:minmax(0,1fr); }
  .linha-edicao { grid-template-columns:1fr 1fr; }
  .funil-barra { grid-template-columns:1fr auto; }
  .funil-barra-trilho { grid-column:1 / -1; grid-row:2; }
}

/* Visualizador: páginas empilhadas como folhas sobre a mesa */
.visualizador { display:grid; justify-items:center; gap:18px; padding:18px 0 40px; }
.visualizador-pagina {
  width:100%; max-width:900px; height:auto; background:#fff;
  border-radius:4px; box-shadow:0 1px 2px rgba(1,22,52,.08), 0 8px 28px -10px rgba(1,22,52,.25);
}

input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=time],input[type=month],input[type=tel],select,textarea {
  width:100%; min-width:0;
  padding:9px 11px;
  font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--n300);
  border-radius:var(--r);
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea { resize:vertical; min-height:76px; line-height:1.5; }
select {
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
input:hover,select:hover,textarea:hover { border-color:var(--n400); }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--a500); box-shadow:var(--ring);
}
input::placeholder,textarea::placeholder { color:var(--n400); }
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true] { border-color:var(--crit); }
input[aria-invalid=true]:focus { box-shadow:0 0 0 3px rgba(176,48,36,.14); }
/*
  Aviso imediato ao sair do campo: e-mail sem @ ou telefone incompleto ficam vermelhos antes de gravar.
  :user-invalid só acende depois que a pessoa mexeu no campo — um formulário novo não abre todo vermelho.
  É só aviso visual: quem decide é a validação do servidor, que confere DDD e domínio.
*/
input:user-invalid { border-color:var(--crit); }
input:disabled,select:disabled,textarea:disabled { background:var(--n50); color:var(--muted); cursor:not-allowed; }
/*
  Campo derivado pelo servidor (o codigo do substrato, o nome de perfil de sistema): parece campo,
  para nao desalinhar a grade, mas nao convida a digitar. Continua no fluxo de leitura da tela —
  diferente de :disabled, que alem de cinza fica invisivel para leitor de tela.
*/
input[readonly] { background:var(--n50); color:var(--ink-2); cursor:default; }
input[readonly]:hover { border-color:var(--line); }
input[readonly]:focus { border-color:var(--line); box-shadow:none; }

input.mono,input[inputmode=numeric] { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/*
  Card de contatos do cadastro de pessoa.

  Duas situações com cara própria. Vazio: um convite que diz para que serve o bloco — cabeçalho de
  colunas sobre nada parece tela que não carregou. Com contatos: cada pessoa é uma faixa com fundo
  e borda próprios, porque quatro campos soltos por linha se misturam com os da linha de baixo; o
  cabeçalho usa a mesma grade das faixas, para as colunas alinharem sem tabela (tabela com
  formulário dentro é frágil).
*/
.cartao-cabecalho-acao { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px; }

.contatos-vazio {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:18px 20px;
  border:1px dashed var(--n300); border-radius:var(--r-lg);
  background:var(--surface-alt);
}
.contatos-vazio-icone {
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--a50); color:var(--a600);
}
.contatos-vazio-icone svg { width:21px; height:21px; }
.contatos-vazio b { font-size:14px; font-weight:620; color:var(--ink); }
.contatos-vazio p { font-size:13px; color:var(--muted); margin-top:3px; max-width:62ch; line-height:1.5; }

.contatos-cabecalho,
.contato-linha {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.2fr) minmax(0,2fr) minmax(0,3fr) 34px;
  gap:10px; align-items:start;
}
.contatos-cabecalho {
  padding:0 12px 8px;
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.contatos-lista { display:grid; gap:8px; }
.contato-linha {
  padding:10px 12px;
  background:var(--surface-alt);
  border:1px solid var(--line-soft); border-radius:var(--r);
  transition:border-color var(--t), background var(--t);
}
.contato-linha:focus-within { border-color:var(--a200); background:var(--surface); }
.contato-linha .erro { display:block; margin-top:4px; font-size:11.5px; color:var(--crit); }

/* "Principal" acompanha a primeira faixa sozinho, por CSS: remover ou reordenar não exige script */
.contato-principal { display:none; }
.contato-linha:first-child .contato-principal {
  display:inline-block; margin-top:5px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--a600); background:var(--a50); padding:2px 8px; border-radius:var(--r-full);
}

.contato-remover { margin-top:3px; color:var(--muted); font-size:20px; line-height:1; }
.contato-remover:hover { color:var(--crit); background:var(--crit-bg); }

@media (max-width:900px) {
  .cartao-cabecalho-acao { grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .contatos-vazio { grid-template-columns:auto minmax(0,1fr); }
  .contatos-vazio .botao { grid-column:1 / -1; justify-self:start; }
  .contatos-cabecalho { display:none; }
  .contato-linha { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px; }
  /* o botão fica fixo no canto da primeira linha; telefone e e-mail descem para a segunda */
  .contato-remover { grid-column:3; grid-row:1; }
}

/* Caixa de seleção como alvo clicável inteiro, não só o quadradinho */
.chk {
  display:flex; align-items:center; gap:9px;
  padding:9px 11px;
  border:1px solid var(--n200); border-radius:var(--r);
  background:var(--surface-alt);
  font-size:13.5px; cursor:pointer;
  transition:border-color var(--t), background var(--t);
}
.chk:hover { border-color:var(--n400); background:var(--surface); }
.chk input { width:16px; height:16px; accent-color:var(--a500); cursor:pointer; flex:none; }
.chk:has(input:checked) { border-color:var(--a200); background:var(--a50); color:var(--a700); font-weight:550; }

.grupo-chk { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }

/* Barra de ações grudada no rodapé: em formulário longo, o botão não some do alcance */
.barra-acoes {
  position:sticky; bottom:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:14px 0 4px;
  margin-top:4px;
  background:linear-gradient(to top,var(--ground) 74%,transparent);
}
.barra-acoes .direita { margin-left:auto; }

/* -----------------------------------------------------------------------------
   7. Botoes
   -------------------------------------------------------------------------- */
.botao {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 17px;
  font-family:inherit; font-size:14px; font-weight:600;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.botao svg { width:16px; height:16px; }
.botao:active { transform:translateY(.5px); }

.botao-primario { background:var(--a500); color:#fff; box-shadow:0 1px 2px rgba(11,96,112,.25); }
.botao-primario:hover { background:var(--a600); color:#fff; box-shadow:0 2px 8px -2px rgba(11,96,112,.45); }

.botao-secundario { background:var(--surface); color:var(--ink-2); border-color:var(--n300); }
.botao-secundario:hover { border-color:var(--n400); background:var(--surface-alt); color:var(--ink); }

.botao-perigo { background:var(--surface); color:var(--crit); border-color:rgba(176,48,36,.4); }
.botao-perigo:hover { background:var(--crit-bg); border-color:var(--crit); color:var(--crit); }

.botao-plano { background:transparent; color:var(--muted); border-color:transparent; }
.botao-plano:hover { background:var(--n100); color:var(--ink-2); }

.botao-pequeno { padding:5px 11px; font-size:12.5px; border-radius:var(--r-sm); }
.botao-largo { width:100%; }

/* -----------------------------------------------------------------------------
   8. Avisos e etiquetas
   -------------------------------------------------------------------------- */
.aviso {
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 15px; border-radius:var(--r);
  font-size:13.5px; line-height:1.5;
  border:1px solid transparent;
}
.aviso svg { width:17px; height:17px; margin-top:1px; flex:none; }
.aviso-info    { background:var(--info-bg); color:var(--info); border-color:rgba(27,95,168,.16); }
.aviso-sucesso { background:var(--ok-bg);   color:var(--ok);   border-color:rgba(19,122,81,.16); }
.aviso-atencao { background:var(--warn-bg); color:var(--warn); border-color:rgba(154,100,16,.18); }
.aviso-erro    { background:var(--crit-bg); color:var(--crit); border-color:rgba(176,48,36,.18); }
.aviso b { font-weight:650; }

.etiqueta {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.etiqueta-ok      { background:var(--ok-bg);   color:var(--ok);   border-color:rgba(19,122,81,.2); }
.etiqueta-atencao { background:var(--warn-bg); color:var(--warn); border-color:rgba(154,100,16,.22); }
.etiqueta-crit    { background:var(--crit-bg); color:var(--crit); border-color:rgba(176,48,36,.2); }
.etiqueta-neutra  { background:var(--n100);    color:var(--n600); border-color:var(--n200); }
.etiqueta-info    { background:var(--info-bg); color:var(--info); border-color:rgba(27,95,168,.18); }
.etiqueta-marcada { background:var(--a600);    color:#fff;        border-color:var(--a600); }

/* Campo de etiquetas: as tags moram dentro da mesma moldura do input, e o que se digita
   entra na sobra da linha. Sem isso a lista de tags parece um bloco solto acima do campo. */
.etiquetas {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  min-height:40px; padding:6px 8px;
  background:var(--surface);
  border:1px solid var(--n300); border-radius:var(--r);
  cursor:text;
  transition:border-color var(--t), box-shadow var(--t);
}
.etiquetas:hover { border-color:var(--n400); }
.etiquetas:focus-within { border-color:var(--a500); box-shadow:var(--ring); }
.etiquetas input[type=text] {
  flex:1 1 150px; width:auto; min-width:110px;
  padding:3px 2px;
  border:none; background:none;
}
.etiquetas input[type=text]:hover,
.etiquetas input[type=text]:focus { border:none; box-shadow:none; }

.etiqueta-x {
  border:none; background:none; padding:0;
  font-size:15px; line-height:1; color:inherit; opacity:.55;
  cursor:pointer;
}
.etiqueta-x:hover { opacity:1; }

/* Atalhos de filtro acima da tabela: a etiqueta que existe vira o filtro com um clique */
.atalhos-etiqueta { display:flex; flex-wrap:wrap; gap:7px; margin:-6px 0 14px; }
.atalhos-etiqueta a { text-decoration:none; }
.atalhos-etiqueta a:hover { border-color:var(--a400); color:var(--a600); }
.atalhos-etiqueta a.etiqueta-marcada:hover { color:#fff; }

/* -----------------------------------------------------------------------------
   9. Tabelas
   -------------------------------------------------------------------------- */
.tabela-caixa {
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-1);
  overflow:hidden;
}
.tabela-rolagem { overflow-x:auto; }

table { border-collapse:collapse; width:100%; font-size:13.5px; }
th,td { text-align:left; padding:11px 16px; }
thead th {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  background:var(--surface-alt);
  border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
thead th a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
thead th a:hover { color:var(--ink-2); }
thead th .seta { color:var(--a500); font-size:9px; }
tbody td { border-bottom:1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background var(--t); }
tbody tr:hover { background:var(--surface-alt); }
td.n,th.n { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
td.c,th.c { text-align:center; }
td.acoes { text-align:right; white-space:nowrap; }

.tabela-vazia { text-align:center; padding:46px 18px; color:var(--muted); }
.tabela-vazia svg { width:30px; height:30px; opacity:.35; margin-bottom:10px; }

.rodape-tabela {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  margin-top:14px;
}

/* barra de filtro */
.filtro {
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  padding:16px 18px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.campo-busca { position:relative; flex:1 1 260px; max-width:420px; }
.campo-busca input { padding-left:34px; }
.campo-busca .lupa {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--n400); pointer-events:none;
}

/* -----------------------------------------------------------------------------
   10. Responsivo
   -------------------------------------------------------------------------- */

/* Telas médias: a grade de 12 vira efetivamente de 6 */
@media (max-width:1180px) {
  .col-1,.col-2,.col-3 { grid-column:span 3; }
  .col-4,.col-5        { grid-column:span 6; }
  .col-7,.col-8,.col-9,.col-10,.col-11 { grid-column:span 12; }
}

/* Tablet e celular: menu vira gaveta */
@media (max-width:900px) {
  .app { grid-template-columns:minmax(0,1fr); }

  .menu {
    position:fixed; inset:0 auto 0 0; width:min(84vw,300px); z-index:60;
    transform:translateX(-100%);
    transition:transform var(--t);
    box-shadow:var(--sh-3);
  }
  body.menu-aberto .menu { transform:translateX(0); }

  .cortina {
    position:fixed; inset:0; z-index:50;
    background:rgba(18,26,30,.45);
    opacity:0; pointer-events:none; transition:opacity var(--t);
  }
  body.menu-aberto .cortina { opacity:1; pointer-events:auto; }

  .abre-menu { display:grid; }
  .topbar-simbolo { display:block; }
  .topbar { padding:0 16px; }
  main { padding:20px 16px 56px; }

  .identidade-texto { display:none; }
  .identidade { padding:4px; }
}

@media (max-width:640px) {
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { grid-column:span 12; }

  h1 { font-size:20px; }
  .cartao-pad,.cartao-corpo,.cartao-cabecalho { padding-left:16px; padding-right:16px; }
  .filtro { padding:14px; }
  .grupo-chk { grid-template-columns:1fr 1fr; }

  /* Tabela vira lista de cartões: rolagem horizontal em celular é sofrível,
     e no chão de fábrica o acesso é por tablet e telefone. */
  .tabela-cartoes thead { display:none; }
  .tabela-cartoes table,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td { display:block; width:100%; }
  .tabela-cartoes tr {
    border-bottom:1px solid var(--line);
    padding:6px 0;
  }
  .tabela-cartoes tr:last-child { border-bottom:none; }
  .tabela-cartoes td {
    display:flex; align-items:baseline; gap:12px;
    padding:5px 16px; border:none; text-align:left !important;
  }
  .tabela-cartoes td::before {
    content:attr(data-rotulo);
    flex:0 0 40%;
    font-family:var(--mono); font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); font-weight:600;
  }
  .tabela-cartoes td.acoes { justify-content:flex-end; padding-top:9px; padding-bottom:11px; }
  .tabela-cartoes td.acoes::before { content:""; flex:0; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* htmx */
.htmx-indicator { opacity:0; transition:opacity var(--t); }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator { opacity:1; }
.htmx-request.tabela-caixa { opacity:.55; }

/* -----------------------------------------------------------------------------
   Carregamento (static/js/carregando.js)
   -------------------------------------------------------------------------- */
.spinner {
  display:inline-block; width:30px; height:30px; flex:none;
  border-radius:50%;
  border:3px solid var(--a100);
  border-top-color:var(--a500);
  animation:girar .75s linear infinite;
}
@keyframes girar { to { transform:rotate(360deg); } }

/*
  O carregador: a logo, um trilho que corre e o texto, num cartão branco sobre um véu marinho.
  O véu é o marinho da marca translúcido, e não branco: branco sobre a tela clara só "apaga" o
  conteúdo e parece erro de renderização; o escuro diz "espere" sem ambiguidade e faz o cartão saltar.
  Um brilho atravessa a logo, como a luz passando no verniz da etiqueta — movimento que mostra
  trabalho em andamento sem virar enfeite girando.
*/
.carregador {
  display:grid; justify-items:center; gap:12px;
  min-width:220px;
  padding:22px 32px 20px;
  background:var(--surface);
  border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -12px rgba(1,22,52,.55), 0 6px 18px -6px rgba(1,22,52,.3);
  color:var(--ink-2); font-size:13.5px; font-weight:600; letter-spacing:.01em;
  animation:surgir .22s cubic-bezier(.2,.8,.2,1);
}
.carregador-marca {
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  animation:respirar 1.8s ease-in-out infinite;
}
.carregador-marca img { display:block; width:120px; height:auto; }
.carregador-marca::after {
  content:""; position:absolute; inset:-10% 0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:brilho 1.8s ease-in-out infinite;
}
.carregador-trilho {
  position:relative; overflow:hidden;
  width:132px; height:4px; border-radius:var(--r-full);
  background:var(--a50);
}
.carregador-trilho::after {
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:45%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--a400), var(--a500));
  animation:correr 1.1s cubic-bezier(.45,0,.55,1) infinite;
}
.carregador-texto { text-align:center; white-space:nowrap; }

@keyframes surgir  { from { opacity:0; transform:translateY(6px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes respirar { 50% { transform:scale(1.035); } }
@keyframes brilho  { 60%,100% { transform:translateX(120%); } }
@keyframes correr  { to { left:100%; } }
@keyframes aparecer { from { opacity:0; } to { opacity:1; } }

/*
  Véu sobre a área que está sendo atualizada. O script insere um elemento de verdade dentro da área
  (e não pseudo-elemento) por causa da área alta: um formulário inteiro tem mais que uma tela, e um
  carregador centralizado nele cairia fora da vista de quem está rolado até o Endereço. O script põe
  a caixa no meio da parte VISÍVEL da área (o 'top' da caixa), onde a pessoa está olhando.
  Quando a resposta troca o conteúdo, o véu vai embora junto.
*/
.carregando { position:relative; }
.veu-carregando {
  position:absolute; inset:-6px; z-index:20;
  background:rgba(4,22,52,.38);
  backdrop-filter:blur(3px) saturate(.8); -webkit-backdrop-filter:blur(3px) saturate(.8);
  border-radius:var(--r-lg);
  cursor:progress;
  animation:aparecer .18s ease-out;
}
.veu-caixa { position:absolute; left:50%; translate:-50% -50%; max-width:calc(100% - 24px); }

/* Tela inteira ao gravar: mais escura e um carregador maior — a tela toda está esperando */
.carregando-pagina {
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  background:rgba(1,22,52,.55);
  backdrop-filter:blur(5px) saturate(.8); -webkit-backdrop-filter:blur(5px) saturate(.8);
  cursor:progress;
  animation:aparecer .2s ease-out;
}
.carregando-pagina-caixa { min-width:260px; padding:30px 40px 26px; gap:16px; font-size:14.5px; color:var(--ink); }
.carregando-pagina-caixa .carregador-marca img { width:156px; }
.carregando-pagina-caixa .carregador-trilho { width:168px; }

/* Barra do topo: indeterminada, discreta, acima de tudo */
.barra-carregando {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:3px; overflow:hidden;
  background:var(--a50);
}
.barra-carregando::after {
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(90deg, transparent, var(--a500), transparent);
  animation:correr 1.1s ease-in-out infinite;
}

/*
  Movimento reduzido: a regra global zera animações, e um carregador parado parece travado. O trilho
  e o spinner seguem devagar — é informação ("ainda estou trabalhando"); brilho e respiração saem.
*/
@media (prefers-reduced-motion:reduce) {
  .spinner { animation:girar 2.4s linear infinite !important; }
  .carregador-trilho::after { animation:correr 2.4s linear infinite !important; }
  .carregador-marca, .carregador-marca::after { animation:none !important; }
  .carregador-marca::after { display:none; }
  .barra-carregando::after { animation:none !important; left:0; width:100%; opacity:.5; }
}

/* impressão: sem navegação, sem sombra */
@media print {
  .menu,.topbar,.barra-acoes,.filtro,.cortina { display:none !important; }
  .app { display:block; }
  main { padding:0; }
  .cartao { box-shadow:none; border-color:var(--n300); break-inside:avoid; }
}

/* [hidden] tem de vencer qualquer display do autor.
   Sem isto, um `display: block` numa regra de componente deixa o elemento visivel
   mesmo com o atributo hidden - foi assim que a arte quebrada apareceu junto com
   o aviso que deveria substitui-la. */
[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   Entrada de notas: registrar (XML, chave, digitação), conferir e lançar
   -------------------------------------------------------------------------- */
.entrada-notas input[type=search] {
  width:100%; min-width:0; padding:9px 11px 9px 34px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--n300); border-radius:var(--r);
  transition:border-color var(--t), box-shadow var(--t);
}
.entrada-notas input[type=search]:focus { outline:none; border-color:var(--a500); box-shadow:var(--ring); }
.eyebrow-link { color:inherit; text-decoration:none; }
.eyebrow-link:hover { color:var(--a600); text-decoration:underline; }
.rotulo-mini { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* números do topo */
.notas-indicadores { margin-bottom:16px; }
.notas-indicadores .indicador { display:grid; gap:3px; align-content:start; }
.notas-indicadores .rotulo { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.notas-indicadores b { font-size:24px; letter-spacing:-.02em; }
.ponto { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.ponto-atencao { background:#e0a42b; }
.ponto-info { background:var(--a500); }
.ponto-ok { background:var(--ok); }
.ponto-marca { background:#6a4cd6; }

/* registrar: abas grandes, cada uma diz de onde a nota vem */
.registrar-nota { margin-bottom:16px; overflow:hidden; }
.registrar-topo { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line-soft); }
.registrar-topo h2 { font-size:15px; }
.registrar-topo .descricao { font-size:12.5px; color:var(--muted); }
.abas-nota { display:flex; flex-wrap:wrap; gap:8px; }
.abas-nota a {
  display:flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); text-decoration:none;
  transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.abas-nota a svg { width:30px; height:30px; padding:7px; border-radius:8px; background:var(--n50); color:var(--n600); }
.abas-nota a span { display:grid; line-height:1.25; }
.abas-nota a b { font-size:13px; font-weight:650; }
.abas-nota a small { font-size:11.5px; color:var(--muted); }
.abas-nota a:hover { border-color:var(--n300); background:var(--n25); color:var(--ink); }
.abas-nota a.ativa { border-color:var(--a500); box-shadow:0 0 0 3px var(--a50); color:var(--ink); }
.abas-nota a.ativa svg { background:var(--a500); color:#fff; }
.painel-aba { padding:20px 22px 22px; }

.importar-xml { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:stretch; }
.soltar-xml {
  display:grid; justify-items:center; align-content:center; gap:4px; min-height:190px; padding:22px; text-align:center; cursor:pointer;
  border:2px dashed var(--n300); border-radius:var(--r-lg); background:var(--n25); transition:border-color var(--t), background var(--t);
}
.soltar-xml:hover, .soltar-xml:focus-within { border-color:var(--a400); background:var(--a50); }
.soltar-xml.arrastando { border-color:var(--a500); background:var(--a50); border-style:solid; }
.soltar-icone { width:38px; height:38px; color:var(--a600); margin-bottom:6px; }
.soltar-titulo { font-size:15px; font-weight:650; color:var(--ink); }
.soltar-sub { font-size:12.5px; color:var(--muted); }
.soltar-sub u { color:var(--a600); text-underline-offset:3px; }
.soltar-lista { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px; width:100%; max-width:460px; max-height:150px; overflow:auto; text-align:left; }
.soltar-lista li { display:flex; justify-content:space-between; gap:10px; padding:5px 10px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line-soft); font-size:12.5px; }
.soltar-lista li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); }
.soltar-lista li small { color:var(--muted); flex:none; }
.soltar-lista .arquivo-estranho { border-color:rgba(176,48,36,.3); color:var(--crit); }
.soltar-lista .arquivo-estranho small { color:var(--crit); }
.importar-lado { display:flex; flex-direction:column; gap:12px; justify-content:space-between; }
.importar-lado .ajuda { font-size:11.5px; color:var(--muted); text-align:center; }
.o-que-acontece { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.o-que-acontece li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.o-que-acontece svg { width:28px; height:28px; padding:6px; border-radius:8px; background:var(--a50); color:var(--a600); }

/* chave de acesso */
.consulta-chave { display:grid; gap:6px; max-width:900px; }
.consulta-chave-rotulo { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.campo-chave { font-size:17px !important; letter-spacing:.06em; padding:12px 14px !important; }
.consulta-chave .ajuda { font-size:12px; color:var(--muted); }
.analise-chave { margin-top:14px; max-width:900px; }
.analise-chave:empty { display:none; }
.chave-progresso { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; font-size:12px; }
.chave-progresso .progresso-trilho { height:6px; }
.chave-resultado { border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; display:grid; gap:14px; background:var(--surface); box-shadow:var(--sh-1); }
.chave-resultado-topo { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.chave-formatada { font-size:11.5px; margin-left:auto; }
.chave-dados { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px 18px; margin:0; }
.chave-dados dt { font-size:11px; color:var(--muted); }
.chave-dados dd { margin:2px 0 0; font-size:13.5px; display:grid; gap:1px; }
.chave-dados dd b { font-weight:600; }
.chave-acoes { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.chave-sefaz { flex:1 1 100%; display:flex; gap:6px; align-items:flex-start; font-size:12px; color:var(--muted); margin:0; }
.chave-sefaz svg { width:14px; height:14px; margin-top:2px; }

/* listagem */
.notas-filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.notas-filtros .fila-filtros { margin:0; }
.notas-filtros .fila-filtro { text-decoration:none; }
.notas-busca { display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 420px; justify-content:flex-end; }
.notas-busca .campo-busca { max-width:340px; }
.notas-busca select { width:auto; min-width:160px; }
.tabela-notas td { vertical-align:middle; }
.nota-numero { font-weight:650; color:var(--ink); text-decoration:none; }
.nota-numero:hover { color:var(--a600); text-decoration:underline; }
.celula-forte { font-weight:600; color:var(--ink); }
.celula-sub { font-size:11.5px; color:var(--muted); margin-top:1px; }
.origem { display:inline-block; margin-left:6px; padding:0 6px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:2px; }
.origem-xml { background:var(--n100); color:var(--n600); }
.origem-sefaz { background:var(--info-bg); color:var(--info); }
.origem-manual { background:#efeafe; color:#6a4cd6; }
.conferencia-mini { display:grid; grid-template-columns:70px auto; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); }
.conferencia-mini .progresso-trilho { height:6px; }
.progresso-trilho.trilho-completo span { background:var(--ok); }
.notas-rodape { margin:0; padding:12px 18px; border-top:1px solid var(--line-soft); }

/* a nota */
.nota-titulo { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.nota-titulo .origem { margin-left:0; vertical-align:0; }
.nota-subtitulo { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:13px; color:var(--muted); }
.nota-subtitulo a { font-weight:600; }
.nota-subtitulo b { color:var(--ink-2); font-weight:600; }

.etapas-nota { list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.etapas-nota li { display:flex; gap:12px; align-items:center; padding:13px 18px; position:relative; color:var(--muted); }
.etapas-nota li + li { border-left:1px solid var(--line-soft); }
.etapas-nota i { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; background:var(--n100); color:var(--n600); }
.etapas-nota i svg { width:14px; height:14px; }
.etapas-nota div { display:grid; line-height:1.3; min-width:0; }
.etapas-nota b { font-size:13px; color:var(--ink-2); }
.etapas-nota small { font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etapas-nota .etapa-feita i { background:var(--ok-bg); color:var(--ok); }
.etapas-nota .etapa-atual { background:var(--a50); box-shadow:inset 0 -3px 0 var(--a500); }
.etapas-nota .etapa-atual i { background:var(--a500); color:#fff; }
.etapas-nota .etapa-atual b { color:var(--a700); }

.conferencia-cabeca { display:grid; grid-template-columns:120px auto; gap:10px; align-items:center; font-size:13px; font-weight:600; }
.conferencia-cabeca .progresso-trilho { height:8px; }

.itens-nota { list-style:none; margin:0; padding:0; }
.item-nota { display:grid; grid-template-columns:26px minmax(0,1.4fr) 120px minmax(260px,1.2fr); gap:14px; padding:14px 20px; border-bottom:1px solid var(--line-soft); align-items:start; scroll-margin-top:80px; }
.item-nota:last-child { border-bottom:0; }
.item-nota.item-pendente { background:linear-gradient(90deg, rgba(224,164,43,.10), transparent 40%); box-shadow:inset 3px 0 0 #e0a42b; }
.item-nota:target { background:var(--a50); }
.item-nota-seq { font-size:12px; color:var(--muted); padding-top:2px; }
.item-nota .item-nome { font-weight:600; color:var(--ink); line-height:1.35; }
.fiscal { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px; font-size:11.5px; color:var(--muted); }
.fiscal i { font-style:normal; font-size:10px; letter-spacing:.04em; }
.fiscal b { color:var(--ink-2); font-weight:600; }
.item-valores { display:grid; gap:2px; margin-top:6px; font-size:12.5px; color:var(--ink-2); }
.acrescimos { display:flex; flex-wrap:wrap; gap:2px 10px; font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.acrescimos .credito { color:#6a4cd6; }
.item-nota-custo { text-align:right; display:grid; gap:2px; }
.item-nota-custo strong { font-size:14.5px; color:var(--ink); }
.item-nota-custo small { font-size:11px; color:var(--muted); }
.vinculo-feito { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; }
.vinculo-selo { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ok-bg); color:var(--ok); }
.vinculo-selo svg { width:13px; height:13px; }
.vinculo-item { display:flex; flex-wrap:wrap; gap:2px 8px; font-size:13px; line-height:1.35; }
.vinculo-item b { color:var(--ok); }
.vinculo-conta { font-size:12px; color:var(--muted); margin-top:2px; }
.vinculo-conta b { color:var(--ink-2); }
.vinculo-pendente { display:grid; gap:6px; }
.vincular { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vincular select { flex:1 1 100%; padding:7px 30px 7px 10px; font-size:13px; }
.vincular input[type=text] { flex:1 1 120px; padding:6px 9px; font-size:12.5px; }
.vincular select[name=tipo] { flex:1 1 120px; }
.fator { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); flex:1 1 140px; }
.fator span { white-space:nowrap; }
.fator input { padding:6px 8px; font-size:12.5px; min-width:70px; }
/* cadastro rapido: linha inteira do item, abaixo das colunas */
.cadastro-rapido-caixa { grid-column:2 / -1; margin-top:-4px; }
.cadastro-rapido-caixa > summary {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none;
  padding:6px 11px; border:1px dashed var(--a200); border-radius:var(--r);
  font-size:12.5px; color:var(--ink-2); background:var(--surface);
  transition:border-color var(--t), background var(--t);
}
.cadastro-rapido-caixa > summary::-webkit-details-marker { display:none; }
.cadastro-rapido-caixa > summary:hover { border-color:var(--a500); background:var(--a50); }
.cadastro-rapido-caixa > summary svg { width:14px; height:14px; color:var(--a600); }
.cadastro-rapido-caixa > summary b { color:var(--a600); font-weight:650; }
.cadastro-rapido-caixa[open] > summary { border-style:solid; background:var(--a50); border-color:var(--a200); margin-bottom:10px; }
.cadastro-rapido-caixa[open] > summary svg { transform:rotate(45deg); }

.cadastro-rapido {
  display:grid; gap:14px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-1);
}
.cr-tipos { border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cr-tipos legend { float:left; margin-right:6px; font-size:12px; font-weight:600; color:var(--muted); }
.cr-tipo {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:550; color:var(--ink-2); background:var(--surface);
}
.cr-tipo input { position:absolute; opacity:0; pointer-events:none; }
.cr-tipo:hover { border-color:var(--a200); }
.cr-tipo.marcado { background:var(--a600); border-color:var(--a600); color:#fff; }
.cr-tipo:focus-within { box-shadow:var(--ring); }

.cr-grade { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px 12px; align-items:end; }
.cr-grade .campo { margin:0; }
.cr-grade label { font-size:12px; }
.cr-grade input, .cr-grade select { padding:7px 10px; font-size:13px; }
.cr-4 { grid-column:span 4; } .cr-6 { grid-column:span 6; } .cr-8 { grid-column:span 8; } .cr-12 { grid-column:span 12; }
.cr-codigo { grid-column:span 4; margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.cr-codigo b { color:var(--ink); }
/* o que a nota nao disse e o cadastro exige: a pessoa ve de cara o que falta */
.cr-falta { border-color:#e0a42b !important; background:var(--warn-bg) !important; }

.cr-rodape {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding-top:12px; border-top:1px solid var(--line-soft);
}
.cr-fator { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); margin:0; }
.cr-fator input { width:130px; padding:7px 10px; font-size:13px; }
.cr-explica { font-size:12px; color:var(--muted); flex:1 1 200px; }
.cr-explica-falta { color:var(--warn); }
.cr-rodape .botao { margin-left:auto; }
@media (max-width:900px) {
  .cadastro-rapido-caixa { grid-column:1 / -1; }
  .cr-4, .cr-6, .cr-8, .cr-codigo { grid-column:span 12; }
}

.sem-duplicata { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; }
.sem-duplicata > svg { width:34px; height:34px; padding:8px; border-radius:10px; background:var(--n50); color:var(--n600); }
.sem-duplicata p { font-size:13px; margin-top:2px; }
.cartao-lancar.pronto { border-color:var(--a200); box-shadow:0 0 0 3px var(--a50), var(--sh-1); }
.lancar-botao { display:flex; align-items:flex-end; justify-content:flex-end; }
details.descartar > summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:13px 22px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:600; color:var(--ink-2); }
details.descartar > summary::-webkit-details-marker { display:none; }
details.descartar > summary svg { width:15px; height:15px; color:var(--crit); }
details.descartar > summary small { font-weight:400; color:var(--muted); font-size:12.5px; }
details.descartar[open] > summary { border-bottom:1px solid var(--line-soft); }
.chave-resumo { margin-top:12px; display:grid; gap:3px; }
.chave-resumo .mono { font-size:11px; line-height:1.5; color:var(--ink-2); word-spacing:2px; }
.emitente { display:grid; gap:2px; font-size:13px; }

/* digitação */
/* ficha.css carrega depois: a classe dupla vence a coluna de 410px da ficha técnica */
.ficha-layout.digitacao-layout { grid-template-columns:minmax(0,1fr) 330px; }
.ficha-layout.nota-layout { grid-template-columns:minmax(0,1fr) 350px; }
.passo-cabecalho { grid-template-columns:30px minmax(0,1fr); align-items:center; column-gap:12px; }
.passo-numero { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--a50); color:var(--a600); font-weight:700; font-size:13px; }
.aviso-campo { margin-top:4px; padding:8px 12px; font-size:12.5px; }
.emitente-achado { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:center; align-self:end; padding:9px 12px; border-radius:var(--r); background:var(--ok-bg); border:1px solid rgba(19,122,81,.18); }
.emitente-achado div { display:grid; line-height:1.3; }
.emitente-achado small { font-size:12px; }

.linhas-digitacao { list-style:none; margin:0; padding:0; }
.linha-digitacao { display:grid; grid-template-columns:24px minmax(0,1fr) 34px; gap:6px 12px; padding:14px 18px 14px 16px; border-bottom:1px solid var(--line-soft); }
.linha-digitacao:nth-child(even) { background:var(--n25); }
.linha-numero { grid-row:1 / span 2; padding-top:24px; font-size:12px; color:var(--muted); text-align:center; }
.linha-remover { grid-column:3; grid-row:1; align-self:start; margin-top:20px; padding:6px; color:var(--muted); }
.linha-remover:hover { color:var(--crit); }
.linha-grade { grid-column:2; display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:8px; }
.linha-extra { grid-column:2; display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:8px; padding-top:8px; border-top:1px dashed var(--line); }
.linha-digitacao .campo label { font-size:11.5px; min-height:16px; }
.linha-digitacao input, .linha-digitacao select { padding:7px 9px; font-size:13.5px; }
.linha-digitacao select { padding-right:30px; }
.c-codigo { grid-column:span 4; } .c-descricao { grid-column:span 14; } .c-ncm { grid-column:span 4; } .c-cfop { grid-column:span 2; }
.c-un { grid-column:span 2; } .c-num { grid-column:span 3; } .c-total { grid-column:span 7; }
.linha-extra .c-num { grid-column:span 3; } .c-estoque { grid-column:span 14; } .c-fator { grid-column:span 4; }
.c-total { display:grid; align-content:end; justify-items:end; padding-bottom:7px; }
.c-total b { font-size:15px; color:var(--ink); }
.linhas-rodape { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:14px 18px; }
.linhas-rodape .ajuda { font-size:12px; color:var(--muted); }
.campo-destaque input { border-color:var(--a200); background:var(--a50); }
.campo-com-botao { display:flex; gap:6px; }
.campo-com-botao input { flex:1 1 auto; }
.duplicatas-digitacao { margin-bottom:8px; }
.duplicatas-digitacao td { padding:6px 10px; }
.duplicatas-digitacao input { padding:6px 9px; font-size:13.5px; }
.digitacao-acoes { justify-content:flex-end; background:linear-gradient(to top, var(--ground) 70%, transparent); }
.conferencias { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.conferencias li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; align-items:start; font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.conferencias i { width:10px; height:10px; margin-top:4px; border-radius:50%; background:var(--n300); }
.conferencias .conf-ok i { background:var(--ok); }
.conferencias .conf-ok { color:var(--ok); }
.conferencias .conf-erro i { background:var(--crit); }
.conferencias .conf-erro { color:var(--crit); }

@media (max-width:1180px) {
  .ficha-layout.digitacao-layout, .ficha-layout.nota-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1440px) {
  .importar-xml { grid-template-columns:minmax(0,1fr) 260px; }
  .item-nota { grid-template-columns:26px minmax(0,1fr) 110px; }
  .item-nota-vinculo { grid-column:2 / -1; }
  .chave-dados { grid-template-columns:1fr 1fr; }
  .c-codigo { grid-column:span 6; } .c-descricao { grid-column:span 18; } .c-ncm { grid-column:span 6; } .c-cfop { grid-column:span 4; }
  .c-un { grid-column:span 4; } .c-num, .linha-extra .c-num { grid-column:span 5; } .c-total { grid-column:span 9; }
  .c-estoque { grid-column:span 14; } .c-fator { grid-column:span 10; }
}
@media (max-width:900px) {
  .importar-xml { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .etapas-nota { grid-template-columns:1fr; }
  .etapas-nota li + li { border-left:0; border-top:1px solid var(--line-soft); }
  .item-nota { grid-template-columns:22px minmax(0,1fr); }
  .item-nota-custo { grid-column:2; text-align:left; }
  .notas-busca { justify-content:stretch; }
  .notas-busca .campo-busca { max-width:none; }
  .linha-grade, .linha-extra { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .c-codigo, .c-ncm, .c-num, .linha-extra .c-num, .c-fator { grid-column:span 3; }
  .c-descricao, .c-estoque, .c-total { grid-column:span 6; }
  .c-cfop, .c-un { grid-column:span 3; }
  .abas-nota a { flex:1 1 100%; }
}

/* parcelas a pagar da nota, com o boleto de cada uma */
.texto-crit { color:var(--crit) !important; font-weight:600; }
.parcelas-nota { list-style:none; margin:0; padding:0; }
.parcela-nota { padding:14px 20px; border-bottom:1px solid var(--line-soft); display:grid; gap:10px; }
.parcela-nota:last-child { border-bottom:0; }
.parcela-cabeca { display:grid; grid-template-columns:minmax(170px,1.2fr) minmax(120px,1fr) auto 110px; gap:12px; align-items:center; }
.parcela-cabeca > .etiqueta { justify-self:end; }
.parcela-quando { display:flex; gap:12px; align-items:center; }
.parcela-quando > div { display:grid; line-height:1.3; }
.parcela-quando b { font-size:14.5px; color:var(--ink); }
.parcela-quando small { font-size:11.5px; color:var(--muted); }
.parcela-ordem { min-width:44px; padding:4px 8px; border-radius:var(--r-sm); background:var(--n100); color:var(--n700); font-size:11.5px; font-weight:700; text-align:center; font-family:var(--mono); }
.parcela-doc { display:grid; gap:1px; font-size:12.5px; color:var(--ink-2); }
.parcela-valor { display:grid; justify-items:end; line-height:1.3; }
.parcela-valor b { font-size:15px; color:var(--ink); }
.parcela-valor small { font-size:11px; color:var(--muted); }
.parcela-vencida { box-shadow:inset 3px 0 0 var(--crit); }
.parcela-vencida .parcela-ordem { background:var(--crit-bg); color:var(--crit); }
.parcela-paga .parcela-ordem { background:var(--ok-bg); color:var(--ok); }
.parcela-cancelada { opacity:.6; }
.parcela-cancelada .parcela-quando b, .parcela-cancelada .parcela-valor b { text-decoration:line-through; }
.parcela-corpo { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding-left:56px; }
.anexos-parcela { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.anexos-parcela li { display:flex; align-items:center; gap:8px; padding:3px 4px 3px 3px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); max-width:100%; }
.anexos-parcela .documento-sigla { width:28px; height:30px; padding-bottom:4px; font-size:8.5px; border-radius:4px 8px 4px 4px; }
.anexo-nome { font-size:12.5px; font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anexos-parcela small { font-size:11px; white-space:nowrap; }
.anexos-parcela form { display:inline; }
.anexos-parcela .botao-plano { padding:4px; color:var(--muted); }
.anexos-parcela .botao-plano:hover { color:var(--crit); }
.sem-boleto { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; color:var(--warn); }
.sem-boleto svg { width:14px; height:14px; }
.parcela-acoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto; }
.anexar-boleto { display:flex; gap:6px; align-items:center; }
.escolher-arquivo { cursor:pointer; }
.escolher-arquivo:focus-within { box-shadow:var(--ring); }
.categoria-anexo { width:auto; padding:5px 28px 5px 9px; font-size:12.5px; background-position:right 7px center; }
.ajustar-vencimento { position:relative; }
.ajustar-vencimento summary { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-sm); font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; list-style:none; }
.ajustar-vencimento summary::-webkit-details-marker { display:none; }
.ajustar-vencimento summary:hover { background:var(--n100); }
.ajustar-vencimento summary svg { width:14px; height:14px; }
.ajustar-vencimento form { position:absolute; right:0; top:calc(100% + 4px); z-index:5; display:flex; gap:6px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); }
.ajustar-vencimento input { width:auto; padding:5px 8px; font-size:13px; }
.parcelas-rodape { display:flex; justify-content:space-between; align-items:center; padding:11px 20px; border-top:1px solid var(--line); background:var(--n25); border-radius:0 0 var(--r-lg) var(--r-lg); font-size:13px; }
.parcelas-rodape b { font-size:15px; }
.cartao-lancar form { margin:0; }

@media (max-width:640px) {
  .parcela-cabeca { grid-template-columns:1fr auto; }
  .parcela-doc { display:none; }
  .parcela-cabeca > .etiqueta { grid-column:1 / -1; justify-self:start; }
  .parcela-corpo { padding-left:0; }
  .parcela-acoes { margin-left:0; }
}

/* nota: botão travado precisa parecer travado, e o resumo lateral sem o recuo padrão do <dd> */
.entrada-notas .botao:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.nota-layout .ficha-dados dd, .chave-dados dd { margin-left:0; }
.sem-cobranca { align-items:flex-start; }
.sem-cobranca span { font-size:13px; color:var(--ink-2); }
.observacoes-canceladas { display:block; white-space:pre-line; font-weight:600; }

/* -----------------------------------------------------------------------------
   Estoque: listagem com filtros por situação, item com consumo e razão
   -------------------------------------------------------------------------- */
.estoque input[type=search] {
  width:100%; min-width:0; padding:9px 11px 9px 34px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--n300); border-radius:var(--r);
  transition:border-color var(--t), box-shadow var(--t);
}
.estoque input[type=search]:focus { outline:none; border-color:var(--a500); box-shadow:var(--ring); }
.estoque-indicadores { margin-bottom:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.estoque-indicadores .indicador { display:grid; gap:4px; align-content:start; }
.estoque-indicadores .rotulo { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.estoque-indicadores b { font-size:24px; letter-spacing:-.02em; }
.estoque-indicadores .unidade { font-size:13px; color:var(--muted); font-weight:500; letter-spacing:0; }
.ponto-crit { background:var(--crit); }
.ponto-neutro { background:var(--n400); }

/* barra do saldo contra o mínimo */
.barra-minimo { display:block; height:5px; border-radius:var(--r-full); background:var(--n100); overflow:hidden; min-width:60px; }
.barra-minimo > span { display:block; height:100%; border-radius:inherit; background:var(--ok); }
.barra-minimo.barra-atencao > span { background:#e0a42b; }
.barra-minimo.barra-critica > span { background:var(--crit); }
.barra-larga { height:7px; margin:4px 0 2px; }

/* precisa comprar */
.repor { margin-bottom:16px; }
.repor-lista { list-style:none; margin:0; padding:8px 12px 12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:4px 16px; }
/* nome e números numa linha, a barra embaixo: com três colunas o nome era espremido até sumir */
.repor-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:end; padding:10px; border-radius:var(--r); color:inherit; text-decoration:none; }
.repor-item .barra-minimo { grid-column:1 / -1; }
.repor-item:hover { background:var(--n25); }
.repor-nome { display:grid; min-width:0; line-height:1.3; }
.repor-nome b { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.repor-nome small { font-size:11px; color:var(--muted); }
.repor-item .barra-minimo > span { background:#e0a42b; }
.repor-item .barra-critica > span { background:var(--crit); }
.repor-numeros { font-size:12px; white-space:nowrap; color:var(--ink-2); }
.repor-numeros b { color:var(--warn); }

/* listagem */
.estoque-filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.estoque-filtros .fila-filtros { margin:0; }
.estoque-filtros .fila-filtro { text-decoration:none; }
.estoque-busca { display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 420px; justify-content:flex-end; }
.estoque-busca .campo-busca { max-width:340px; }
.estoque-busca select { width:auto; min-width:170px; }
.tabela-estoque td { vertical-align:middle; }
.item-link { color:var(--ink); text-decoration:none; }
.item-link b { font-weight:600; }
.item-link:hover { color:var(--a600); text-decoration:underline; }
.celula-sub .local { margin-left:6px; padding:0 6px; border-radius:4px; background:var(--n100); color:var(--n700); font-family:var(--mono); font-size:10.5px; }
.saldo-celula { display:grid; justify-items:end; gap:3px; }
.saldo-celula .barra-minimo { width:90px; }
.estoque-rodape { margin:0; padding:12px 18px; border-top:1px solid var(--line-soft); }

/* razão */
.tabela-razao td { vertical-align:top; }
.mov-tipo { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.mov-tipo i { width:8px; height:8px; border-radius:50%; background:var(--n400); flex:none; }
.mov-tipo b { font-weight:600; }
.mov-entrada i { background:var(--ok); }
.mov-saida i { background:var(--crit); }
.mov-ajuste i { background:#e0a42b; }
.mov-motivo { max-width:320px; white-space:normal; }

/* painel de manutenção */
.grade-dupla { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bloco-recolhido > summary { cursor:pointer; list-style:none; margin:0; }
.bloco-recolhido > summary::-webkit-details-marker { display:none; }
.bloco-recolhido > summary::after { content:"+"; margin-left:auto; font-size:15px; color:var(--muted); }
.bloco-recolhido[open] > summary { margin-bottom:10px; }
.bloco-recolhido[open] > summary::after { content:"−"; }

@media (max-width:640px) {
  .estoque-busca { justify-content:stretch; }
  .estoque-busca .campo-busca { max-width:none; }
  .saldo-celula { justify-items:start; }
  .grade-dupla { grid-template-columns:1fr; }
}

/* estoque por categoria: abas, extrato e formulários de movimento */
.abas-estoque { display:flex; flex-wrap:wrap; gap:4px; margin:-4px 0 16px; border-bottom:1px solid var(--line); }
.abas-estoque a { padding:9px 14px; margin-bottom:-1px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; }
.abas-estoque a:hover { color:var(--ink); }
.abas-estoque a.ativa { color:var(--a600); border-bottom-color:var(--a500); }
.abas-estoque a:last-child { margin-left:auto; }
.filtro-extrato { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:16px 18px; margin-bottom:16px; align-items:end; }
.filtro-extrato .campo-largo { grid-column:span 2; }
.filtro-extrato .filtro-botoes { display:flex; gap:6px; align-items:center; }
.estoque-indicadores .periodo { font-size:17px; }
.tabela-extrato td { vertical-align:top; }
.unidade-celula { font-size:11px; margin-left:2px; }
.cartao-rodape-acoes { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:14px 24px; border-top:1px solid var(--line-soft); background:var(--n25); border-radius:0 0 var(--r-lg) var(--r-lg); }
.cartao-rodape-acoes .ajuda { font-size:12px; color:var(--muted); margin:0; }
@media (max-width:640px) {
  .filtro-extrato .campo-largo { grid-column:auto; }
  .abas-estoque a:last-child { margin-left:0; }
}
.filtro-extrato input[type=search] { padding-left:11px; }

/* -----------------------------------------------------------------------------
   Dialogo de confirmacao (comportamentos.js, data-confirmar e hx-confirm)
   No lugar do confirm() do navegador: titulo, texto e um botao que diz o que faz.
   Acao destrutiva (remover, cancelar…) ganha o botao vermelho e o foco em Voltar.
   -------------------------------------------------------------------------- */
dialog.confirmar {
  width:min(440px, calc(100vw - 32px)); padding:0; margin:auto;
  border:0; border-radius:16px; background:var(--surface); color:var(--ink);
  box-shadow:0 24px 60px -12px rgba(8,20,45,.35), 0 0 0 1px rgba(8,20,45,.06);
}
dialog.confirmar::backdrop { background:rgba(8,20,45,.42); backdrop-filter:blur(3px); }
dialog.confirmar[open] { animation:confirmar-entra .18s cubic-bezier(.2,.8,.2,1); }
dialog.confirmar[open]::backdrop { animation:confirmar-fundo .18s ease-out; }
@keyframes confirmar-entra { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes confirmar-fundo { from { opacity:0; } to { opacity:1; } }

.confirmar-caixa {
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 16px;
  padding:24px 24px 20px;
}
.confirmar-icone {
  grid-row:span 1; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; background:var(--a50); color:var(--a600);
}
.confirmar-icone svg { width:22px; height:22px; }
.confirmar-perigo .confirmar-icone { background:var(--crit-bg); color:var(--crit); }
.confirmar-titulo { margin:2px 0 6px; font-size:17px; font-weight:650; letter-spacing:-.01em; }
.confirmar-texto { margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
.confirmar-acoes {
  grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px;
  margin:18px -24px -20px; padding:14px 24px;
  background:var(--surface-alt); border-top:1px solid var(--line-soft);
  border-radius:0 0 16px 16px;
}
.confirmar-acoes .botao { min-width:110px; }
/* no dialogo o botao que apaga e cheio, nao contornado: e a decisao da tela */
.confirmar-ok.botao-perigo { background:var(--crit); border-color:var(--crit); color:#fff; }
.confirmar-ok.botao-perigo:hover { background:#8f251b; border-color:#8f251b; color:#fff; }
@media (max-width:480px) {
  .confirmar-caixa { grid-template-columns:1fr; }
  .confirmar-acoes { flex-direction:column-reverse; }
  .confirmar-acoes .botao { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  dialog.confirmar[open], dialog.confirmar[open]::backdrop { animation:none; }
}

/* -----------------------------------------------------------------------------
   Nota lancada: o que fazer agora (entrada de notas)
   A nota termina oferecendo o passo seguinte - a proxima nota, os boletos que
   faltam - em vez de virar beco sem saida.
   -------------------------------------------------------------------------- */
.proximos-passos {
  display:grid; gap:14px; margin-bottom:16px; padding:16px 18px;
  border:1px solid rgba(19,122,81,.22); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--ok-bg), var(--surface) 85%);
  box-shadow:var(--sh-1);
}
.proximos-passos-titulo { display:flex; align-items:center; gap:12px; }
.proximos-passos-selo {
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--ok); color:#fff;
}
.proximos-passos-selo svg { width:17px; height:17px; }
.proximos-passos-titulo b { display:block; font-size:15px; color:var(--ink); }
.proximos-passos-titulo span { font-size:13px; color:var(--ink-2); }
.proximos-passos-acoes { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; }
.proximos-passos-acoes form { display:contents; }
.passo {
  display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink-2); text-decoration:none;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.passo:hover { border-color:var(--a200); box-shadow:var(--sh-2); transform:translateY(-1px); text-decoration:none; }
.passo:focus-within, .passo:focus-visible { outline:none; box-shadow:var(--ring); }
.passo > svg { flex:none; width:20px; height:20px; color:var(--a600); }
.passo b { display:block; font-size:13.5px; font-weight:650; color:var(--ink); }
.passo small { display:block; font-size:12px; color:var(--muted); }
.passo-principal { background:var(--a500); border-color:var(--a500); }
.passo-principal > svg, .passo-principal b { color:#fff; }
.passo-principal small { color:var(--a100); }
.passo-principal:hover { background:var(--a600); border-color:var(--a600); }
.passo-atencao { border-color:rgba(154,100,16,.3); background:var(--warn-bg); }
.passo-atencao > svg, .passo-atencao b { color:var(--warn); }

/* notas que ja estavam no sistema: lista curta, cada uma com o link para a que existe */
.aviso-repetidas ul { margin:4px 0 0; padding-left:18px; }
.aviso-repetidas li { margin:2px 0; }
.aviso-repetidas a { color:inherit; font-weight:650; }

/* acao dentro de um aviso (o "desfazer" da importacao): na ponta direita, sem competir com o texto */
.aviso-acao { margin-left:auto; flex:none; align-self:center; }
.aviso-acao .botao { background:var(--surface); }

/* cadastro rapido: estoque e ferramental em dois grupos de tipo, lado a lado */
.cr-grupos-tipo { display:flex; flex-wrap:wrap; gap:10px 22px; }
.cr-tipos legend { float:none; display:block; margin:0 0 6px; }
.cr-tipos-ferramental .cr-tipo.marcado { background:var(--n700); border-color:var(--n700); }

/* linha da nota resolvida fora do estoque, e o desfazer de qualquer destino */
.vinculo-fora .vinculo-selo { background:var(--n100); color:var(--n600); }
.vinculo-fora.fora-ferramental .vinculo-selo { background:var(--a50); color:var(--a600); }
.vinculo-fora .vinculo-item { align-items:center; }
.desfazer-destino { margin-top:4px; }
.desfazer-destino .botao { padding:3px 8px; font-size:12px; }
.desfazer-destino svg { width:13px; height:13px; }
.sem-cadastro .botao { padding:3px 0; font-size:12px; color:var(--muted); }
.sem-cadastro .botao:hover { color:var(--ink-2); background:transparent; text-decoration:underline; }
.cadastro-rapido-caixa > summary small { margin-left:4px; color:var(--muted); font-size:11.5px; }

/* -----------------------------------------------------------------------------
   Dialogo de formulario (data-abrir-dialogo): a baixa do titulo e o primeiro.
   Mesmo desenho do dialogo de confirmacao, com topo, corpo e rodape.
   -------------------------------------------------------------------------- */
dialog.dialogo {
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; margin:auto;
  border:0; border-radius:18px; background:var(--surface); color:var(--ink); text-align:left;
  /* o dialogo mora dentro da celula de acoes, que e nowrap: sem isto o texto nao quebra e a janela ganha scroll */
  white-space:normal; overflow-x:hidden;
  box-shadow:0 24px 60px -12px rgba(8,20,45,.35), 0 0 0 1px rgba(8,20,45,.06);
  overflow:auto;
}
dialog.dialogo::backdrop { background:rgba(8,20,45,.42); backdrop-filter:blur(3px); }
dialog.dialogo[open] { animation:confirmar-entra .18s cubic-bezier(.2,.8,.2,1); }
dialog.dialogo[open]::backdrop { animation:confirmar-fundo .18s ease-out; }

.dialogo-topo {
  position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 56px 18px 24px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--a50), var(--surface));
  border-radius:18px 18px 0 0;
}
.dialogo-eyebrow { font-size:11.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--a600); }
.dialogo-topo h2 { margin:3px 0 4px; font-size:18px; font-weight:650; letter-spacing:-.01em; line-height:1.25; }
.dialogo-fechar {
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:0; background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer;
}
.dialogo-fechar:hover { background:var(--n100); color:var(--ink); }

.dialogo-corpo { display:grid; gap:16px; padding:20px 24px; }
.dialogo-grade { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.dialogo-grade-3 { grid-template-columns:repeat(3, 1fr); margin-top:10px; }
.dialogo-corpo .campo { margin:0; }
.dialogo-corpo label { font-size:12.5px; }
.campo-destaque { font-size:17px !important; font-weight:650; }

/* forma de pagamento: um toque, sem digitar */
.formas { border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.formas legend { width:100%; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.forma { position:relative; cursor:pointer; }
.forma input { position:absolute; opacity:0; pointer-events:none; }
.forma span {
  display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-weight:550; color:var(--ink-2); background:var(--surface);
  transition:border-color var(--t), background var(--t), color var(--t);
}
.forma:hover span { border-color:var(--a200); }
.forma input:checked + span { background:var(--a600); border-color:var(--a600); color:#fff; }
.forma input:focus-visible + span { box-shadow:var(--ring); }

.encargos > summary {
  cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--a600);
}
.encargos > summary::-webkit-details-marker { display:none; }
.encargos > summary::before { content:"+ "; }
.encargos[open] > summary::before { content:"− "; }

/* comprovante: area de anexo, com o seletor nativo estilizado (sem JS) */
.comprovante {
  display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px 10px; align-items:center;
  padding:12px 14px; border:1px dashed var(--n300); border-radius:12px; background:var(--surface-alt);
  cursor:pointer; margin:0;
}
.comprovante:hover { border-color:var(--a400); background:var(--a50); }
.comprovante > svg { width:18px; height:18px; color:var(--a600); }
.comprovante b { font-size:13px; }
.comprovante small { font-size:11.5px; color:var(--muted); }
.comprovante input[type=file] { grid-column:2; font-size:12px; color:var(--ink-2); }
.comprovante input[type=file]::file-selector-button {
  margin-right:10px; padding:5px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink-2); font:inherit; font-weight:600; cursor:pointer;
}

.dialogo-acoes {
  display:flex; justify-content:flex-end; gap:10px; padding:14px 24px;
  background:var(--surface-alt); border-top:1px solid var(--line-soft); border-radius:0 0 18px 18px;
}
.dialogo-acoes .botao { min-width:120px; }
@media (max-width:520px) {
  .dialogo-topo { flex-direction:column; }
  .dialogo-grade, .dialogo-grade-3 { grid-template-columns:1fr; }
  .dialogo-acoes { flex-direction:column-reverse; }
  .dialogo-acoes .botao { width:100%; }
}

/* baixa: vencimento, parcela e valor em tres blocos, antes dos campos */
.baixa-resumo { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.baixa-resumo-item {
  display:grid; gap:2px; padding:11px 13px; min-width:0;
  border:1px solid var(--line-soft); border-radius:12px; background:var(--surface-alt);
}
.baixa-resumo-item span { font-size:11.5px; color:var(--muted); }
.baixa-resumo-item b { font-size:17px; font-weight:700; color:var(--ink); white-space:nowrap; }
.baixa-resumo-item small { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resumo-vencido { background:var(--crit-bg); border-color:rgba(176,48,36,.2); }
.resumo-vencido b, .resumo-vencido small { color:var(--crit); }
.resumo-saldo { background:var(--a50); border-color:var(--a100); }
.resumo-saldo b { color:var(--a700); }
@media (max-width:520px) { .baixa-resumo { grid-template-columns:1fr; } }

/* cancelar titulo: lixeira discreta ao lado do Baixar, dialogo em tom de alerta */
td.acoes .botao-cancelar-titulo {
  display:inline-grid; width:30px; height:30px; margin-left:4px; vertical-align:middle; color:var(--n400);
}
td.acoes .botao-cancelar-titulo svg { width:16px; height:16px; }
td.acoes .botao-cancelar-titulo:hover { background:var(--crit-bg); color:var(--crit); }
.dialogo-topo-perigo { background:linear-gradient(180deg, var(--crit-bg), var(--surface)); }
.dialogo-topo-perigo .dialogo-eyebrow { color:var(--crit); }
.cancelar-aviso { margin:0; font-size:12.5px; }
.botao-perigo-cheio { background:var(--crit); border-color:var(--crit); color:#fff; }
.botao-perigo-cheio:hover { background:#8f251b; border-color:#8f251b; color:#fff; }

/* desfazer a nota: botao discreto no cabecalho, lista do que vai ser desfeito no dialogo */
.botao-desfazer-nota { color:var(--crit); }
.botao-desfazer-nota:hover { background:var(--crit-bg); border-color:rgba(176,48,36,.35); color:var(--crit); }
.desfazer-intro { margin:0; font-size:13.5px; color:var(--ink-2); }
.desfazer-lista { margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; color:var(--ink-2); }
.desfazer-lista ul { margin:4px 0 0; padding-left:16px; display:grid; gap:2px; font-size:12.5px; }
.desfazer-lista ul li { display:flex; gap:10px; }