/* Identidade visual do Kinota.
   Camada 1: tokens (único lugar com cores, tamanhos e espaços literais).
   Camada 2: moldes de página (acesso, app com barra lateral, documento).
   Camada 3: componentes. Tela nova usa só estas classes e estes tokens.

   Índice
     1.  Tokens e base
     2a. Molde do app (barra lateral) · 2b. Molde de acesso · 2c. Molde de documento
     3a. Componentes básicos: formulários, botões, avisos, indicadores, tabelas, selos, grades, ajuda
     3b. Formulários longos, filtros de listagem e cabeçalho fixo de tabela
     3c. Painel, cotas, detalhe da nota, certificado e saúde
     3d. Confirmações, estado de resultado, segredos e filas
     4.  Celular (até 860 px)
     5a. Voltar e botão de linha de tabela · 5b. Revisão e prévia em modal · 5c. Emissão em massa
     5d. Assistente de configuração da empresa (uma pergunta por tela)
     6.  Impressão (só o conteúdo, sem menu nem botões)

   A ordem importa: o bloco do celular (4) vem depois dos componentes para sobrescrevê-los, e a
   seção 5 vem depois dele de propósito (as telas dela têm o próprio ajuste de celular).
   Guia visual de todos os componentes: /admin/estilo (só plataforma). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fontes/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fontes/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fontes/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fontes/Inter-Bold.woff2") format("woff2"); }

/* ---------- 1. Tokens ---------- */
:root {
  /* paleta da marca (verde, amarelo e azul do logotipo NFS-e) */
  --base-950: #07170f;
  --base-900: #0a2016;
  --base-800: #134228;
  --base-700: #1a4a2e;
  --marca: #7cc487;
  --marca-forte: #6bb577;
  --marca-clara: #8fd29a;   /* início do degradê da marca (avatar) */
  --marca-escura: #5a9262;  /* fim do degradê */
  --azul: #313b8f;
  --azul-claro: #6c78d6;
  --amarelo: #e9c03a;
  --branco: #ffffff;

  /* papéis: área de trabalho clara */
  --fundo: #f5f9f4;
  --superficie: #ffffff;
  --superficie-2: #edf4ec;
  --texto: #10231a;
  --sutil: #52665a;
  --borda: #d9e5d9;
  --borda-campo: #7b9182;
  --link: #2c6b3a;
  --foco: #2c6b3a;

  /* ação primária: verde da marca com texto escuro (o verde claro sobre branco não passa em AA) */
  --acao: var(--marca);
  --acao-hover: var(--marca-forte);
  --acao-texto: var(--base-950);

  /* barra lateral e destaque escuro */
  --lateral: var(--base-950);
  --lateral-2: var(--base-900);
  --lateral-texto: #cbdacd;
  --lateral-sutil: #94a89a;
  --lateral-ativo: rgba(124, 196, 135, 0.14);
  --lateral-hover: rgba(255, 255, 255, 0.07);
  --lateral-linha: rgba(255, 255, 255, 0.1);
  --destaque-texto: #b8c9bb;
  --lateral-brilho: rgba(29, 82, 51, 0.85);
  --lateral-grade: rgba(124, 196, 135, 0.05);
  --lateral-azul: #aab4f2;
  --lateral-aviso: #f1d174;
  --tom-marca-fundo: rgba(124, 196, 135, 0.12);
  --tom-azul-fundo: rgba(108, 120, 214, 0.18);
  --tom-amarelo-fundo: rgba(233, 192, 58, 0.14);

  /* estados: cor do texto + fundo */
  --perigo: #a3262a;
  --perigo-texto: #ffffff;
  --erro: #a3262a;
  --erro-fundo: #fbeaea;
  --ok: #0e6a42;
  --ok-fundo: #e1f4ea;
  --aviso: #7a5600;
  --aviso-fundo: #fdf3d6;
  --info: #313b8f;
  --info-fundo: #eaecf8;
  /* falha de comunicação (laranja, derivado de --aviso) e neutro (cancelada) */
  --falha: #9a3b00;
  --falha-fundo: #fdebdc;
  --neutro: #4a5a50;
  --neutro-fundo: #e8ece8;

  /* escalas */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Grade de 4 px: todo espaço, altura e raio é múltiplo de 4 (0,25 rem).
     Texto: escala de razão ~1,25 sobre 16 px; cada tamanho tem altura de linha
     própria, também múltipla de 4 (sm 14/20, base 16/24, xl 24/32). */
  --t-xs: 0.75rem;   --lh-xs: 1rem;
  --t-sm: 0.875rem;  --lh-sm: 1.25rem;
  --t-base: 1rem;    --lh-base: 1.5rem;
  --t-md: 1.125rem;  --lh-md: 1.75rem;
  --t-lg: 1.25rem;   --lh-lg: 1.75rem;
  --t-xl: 1.5rem;    --lh-xl: 2rem;
  --t-2xl: 2rem;     --lh-2xl: 2.5rem;
  --t-3xl: 2.5rem;
  --t-h1: 1.75rem;   --lh-h1: 2.25rem;
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --controle: 2.5rem;
  --raio-s: 8px;
  --raio-m: 12px;
  --raio-g: 16px;
  --sombra-1: 0 1px 2px rgba(7, 23, 15, 0.06), 0 1px 1px rgba(7, 23, 15, 0.04);
  --sombra-2: 0 10px 30px rgba(7, 23, 15, 0.14);
  --sobreposicao: rgba(7, 23, 15, 0.6);
  --realce-1: rgba(7, 23, 15, 0.14);
  --halo-marca: rgba(124, 196, 135, 0.25);
  --anel: 0 0 0 3px rgba(44, 107, 58, 0.28);
  --raio-pilula: 999px;
  --largura-util: 96rem;
  --largura-lateral: 16rem;
  --largura-lateral-recolhida: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #07130c;
    --superficie: #0d2216;
    --superficie-2: #133021;
    --texto: #e6efe6;
    --sutil: #96ab9a;
    --borda: #1f3d2b;
    --borda-campo: #5f8468;
    --link: #7cc487;
    --foco: #7cc487;
    --lateral: #040f09;
    --lateral-2: #06150d;
    --perigo: #b42328;
    --erro: #f59a9d;
    --erro-fundo: #3a1d20;
    --ok: #7fdcab;
    --ok-fundo: #14331f;
    --aviso: #f1d174;
    --aviso-fundo: #392f14;
    --info: #aab4f2;
    --info-fundo: #1f2650;
    --falha: #f6b27a;
    --falha-fundo: #3a2412;
    --neutro: #aab8ae;
    --neutro-fundo: #1b2b22;
    --anel: 0 0 0 3px rgba(124, 196, 135, 0.35);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* color-scheme: calendário, lista do select e barra de rolagem seguem o tema. scroll-padding: o campo focado não fica
   escondido atrás da barra fixa de ações (.acoes.fixas), WCAG 2.4.11. */
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; scroll-padding-bottom: 6rem; }
body {
  margin: 0;
  font: 400 var(--t-base)/var(--lh-base) var(--fonte);
  font-feature-settings: "calt", "kern";
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: 0.18em; }
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--e5); }
h2 { font-size: var(--t-md); line-height: var(--lh-md); font-weight: 600; letter-spacing: -0.005em; margin: var(--e5) 0 var(--e2); }
h3 { font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; margin: 0 0 var(--e1); }
p { margin: 0 0 var(--e4); }
code { font-size: 0.875em; word-break: break-all; background: var(--superficie-2); padding: 0.1em 0.35em; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.sutil { color: var(--sutil); }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  a, button, .botao, input, select, textarea, .lateral nav a { transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; }
}

/* "Pular para o conteúdo": primeiro item do Tab, aparece só com foco */
.pular { position: absolute; left: var(--e3); top: -10rem; z-index: 100; padding: var(--e2) var(--e4); background: var(--acao); color: var(--acao-texto); border-radius: var(--raio-s); font-weight: 600; text-decoration: none; }
.pular:focus { top: var(--e3); }
/* Botão padrão do formulário (Enter) quando há outro botão de envio antes do principal: fica fora da vista,
   mas não usa display:none, que faz o Safari ignorar o Enter. Fora da ordem do Tab e do leitor de tela. */
.envio-padrao { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---------- 2a. Molde do app: barra lateral escura + área clara ---------- */
.estrutura { display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--e5) var(--e3) var(--e4);
  color: var(--lateral-texto);
  /* brilho no canto e grade fina, como o destaque da tela de entrada */
  background-color: var(--lateral);
  background-image:
    radial-gradient(120% 45% at 100% 0%, var(--lateral-brilho) 0%, transparent 60%),
    linear-gradient(var(--lateral-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--lateral-grade) 1px, transparent 1px),
    linear-gradient(180deg, var(--lateral) 0%, var(--lateral-2) 100%);
  background-size: 100% 100%, 2rem 2rem, 2rem 2rem, 100% 100%;
}
.marca { display: flex; align-items: center; gap: var(--e3); color: var(--branco); text-decoration: none; padding: 0 var(--e2); }
.marca img { width: 2.25rem; height: 2.25rem; flex: none; }
.marca-produto { font-weight: 700; font-size: var(--t-md); line-height: var(--lh-md); letter-spacing: -0.01em; }

.lateral nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e6); }
.nav-grupo { margin: var(--e4) 0 var(--e1) var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lateral-sutil); }
.lateral nav a {
  display: flex; align-items: center; gap: var(--e3);
  position: relative; min-height: 2.5rem; padding: 0 var(--e2); border-radius: 10px;
  color: var(--lateral-texto); text-decoration: none; font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm);
}
.nav-grupo:first-child { margin-top: 0; }
/* ícone num quadrado com o tom do grupo: verde (operação), azul (cadastro, fiscal), amarelo (conta, segurança) */
.nav-icone { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--raio-s); background: var(--tom-marca-fundo); color: var(--marca); }
.lateral nav a.tom-azul .nav-icone { background: var(--tom-azul-fundo); color: var(--lateral-azul); }
.lateral nav a.tom-amarelo .nav-icone { background: var(--tom-amarelo-fundo); color: var(--amarelo); }
.lateral nav a svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lateral nav a:hover { background: var(--lateral-hover); color: var(--branco); }
.lateral nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(124, 196, 135, 0.22), rgba(124, 196, 135, 0.06)); box-shadow: inset 0 0 0 1px var(--halo-marca); color: var(--branco); font-weight: 600; }
.lateral nav a[aria-current="page"] .nav-icone { background: var(--marca); color: var(--base-950); }
.lateral :focus-visible { outline-color: var(--marca); }

.lateral-ambiente { display: grid; gap: 2px; margin: auto 0 var(--e3); padding: var(--e2) var(--e3) var(--e2) var(--e6); position: relative; border-radius: 10px; background: var(--tom-amarelo-fundo); box-shadow: inset 0 0 0 1px rgba(233, 192, 58, 0.25); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--destaque-texto); }
.lateral-ambiente strong { color: var(--lateral-aviso); font-weight: 600; }
.lateral-ambiente::before { content: ""; position: absolute; left: var(--e3); top: 0.875rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amarelo); box-shadow: 0 0 0 3px rgba(233, 192, 58, 0.2); }
.lateral-ambiente + .lateral-usuario { margin-top: 0; }
.lateral-usuario { margin-top: auto; display: flex; align-items: center; gap: var(--e2); padding: var(--e2); border-radius: var(--raio-m); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--lateral-linha); }
.lateral-usuario form { margin: 0; flex: none; }
.usuario { display: flex; align-items: center; gap: var(--e3); flex: 1; min-width: 0; padding: 0 var(--e1); }
.avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--marca-clara), var(--marca-escura)); color: var(--acao-texto); font-weight: 700; font-size: var(--t-sm); line-height: var(--lh-sm); }
.usuario-nome { display: flex; flex-direction: column; min-width: 0; }
.usuario-nome strong { color: var(--branco); font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-nome span { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--lateral-sutil); }
.lateral button.sair {
  width: auto; display: flex; align-items: center; justify-content: flex-start; gap: var(--e3); box-shadow: none;
  min-height: var(--controle); padding: 0 var(--e3); background: transparent; border: 0; border-radius: var(--raio-s);
  color: var(--lateral-texto); font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm); cursor: pointer;
}
.lateral button.sair svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lateral button.sair:hover { background: var(--lateral-hover); color: var(--branco); }

/* Recolher o menu: botão no topo (formulário, sem JS; preferência em cookie, lida em base.html). */
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.alternar-menu { margin: 0; flex: none; }
.alternar-menu button {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; box-shadow: none;
  background: transparent; border: 0; border-radius: var(--raio-s); color: var(--lateral-sutil); cursor: pointer;
}
.alternar-menu button:hover { background: var(--lateral-hover); color: var(--branco); }
.alternar-menu svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
@media (min-width: 861px) {
  .estrutura.recolhida { grid-template-columns: var(--largura-lateral-recolhida) minmax(0, 1fr); }
  .recolhida .lateral { padding-left: var(--e2); padding-right: var(--e2); align-items: center; }
  .recolhida .lateral-topo { flex-direction: column; gap: var(--e3); }
  .recolhida .marca { padding: 0; }
  .recolhida .alternar-menu svg { transform: none; }
  .recolhida .marca-produto, .recolhida .lateral nav a > span:not(.nav-icone), .recolhida .usuario-nome,
  .recolhida .lateral button.sair span, .recolhida .lateral-ambiente span { display: none; }
  .recolhida .lateral nav { width: 100%; align-items: center; }
  .recolhida .lateral nav a { justify-content: center; width: 2.75rem; padding: 0; }
  /* o nome do grupo vira um traço fino entre os grupos */
  .recolhida .nav-grupo { width: 1.75rem; height: 1px; margin: var(--e3) auto; overflow: hidden; color: transparent; background: var(--lateral-linha); }
  .recolhida .nav-grupo:first-child { display: none; }
  .recolhida .lateral-ambiente { width: 2.75rem; height: 2.75rem; padding: 0; }
  .recolhida .lateral-ambiente strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .recolhida .lateral-ambiente::before { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .recolhida .lateral-usuario { flex-direction: column; padding: var(--e2) var(--e1); }
  .recolhida .usuario { justify-content: center; padding: 0; }
  .recolhida .lateral button.sair { padding: 0 var(--e2); }
}

.conteudo { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
main { flex: 1; width: 100%; max-width: var(--largura-util); margin: 0 auto; padding: var(--e6) var(--e6) var(--e7); }
.rodape { padding: var(--e4) var(--e6) var(--e5); color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); text-align: center; }

.pagina-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); margin-bottom: var(--e5); }
.pagina-topo h1 { margin: 0; }
.acoes-topo { display: flex; flex-wrap: wrap; gap: var(--e2); }
.secao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); margin-bottom: var(--e4); }
.secao-topo h2 { margin: 0; }
.par-de-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); gap: 0 var(--e5); align-items: stretch; }
main p, .cartao p { max-width: 80ch; }

/* ---------- 2b. Molde de acesso: destaque escuro + formulário claro ---------- */
.acesso { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.acesso-destaque {
  position: relative; overflow: hidden; color: var(--branco);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e6);
  padding: var(--e7) clamp(2rem, 5vw, 5rem);
  background: var(--base-950) url("/static/marca/fundo-acesso.svg") center / cover no-repeat;
}
.acesso-destaque .marca { padding: 0; }
.acesso-destaque .marca img { width: 2.5rem; height: 2.5rem; }
.rotulo-caixa { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marca); }
.rotulo-caixa::before { content: ""; width: 2rem; height: 1px; background: var(--marca); }
.acesso-titulo { margin: 0 0 var(--e4); font-size: clamp(2rem, 3.4vw, var(--t-3xl)); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: var(--branco); }
.acesso-titulo span { color: var(--marca); }
.acesso-texto p.subtitulo { max-width: 30rem; margin: 0; font-size: var(--t-md); line-height: var(--lh-md); color: var(--destaque-texto); }
.beneficios { display: grid; gap: var(--e3); margin: var(--e5) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--destaque-texto); }
.beneficios li { display: flex; gap: var(--e3); align-items: center; }
.beneficios li::before { content: "\2713"; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--lateral-ativo); color: var(--marca); font-size: var(--t-xs); font-weight: 700; }
.acesso-rodape { margin: 0; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--destaque-texto); }
.acesso-rodape a { color: var(--destaque-texto); }

.acesso-formulario { display: flex; flex-direction: column; justify-content: center; padding: var(--e7) clamp(1.5rem, 5vw, 5rem); background: var(--fundo); }
.acesso-caixa { width: 100%; max-width: 26rem; margin: 0 auto; }
.acesso-caixa.larga { max-width: 40rem; }
.acesso-caixa .cartao { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.acesso-caixa .estreito { max-width: none; margin: 0; }
.acesso-caixa h1 { font-size: var(--t-xl); line-height: var(--lh-xl); }
.acesso-links { margin: var(--e5) auto 0; width: 100%; max-width: 26rem; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }
.links-acesso { display: grid; gap: var(--e2); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borda); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }
.links-acesso p { margin: 0; }
.links-acesso > a { font-weight: 600; }
.saida { margin-top: var(--e4); text-align: center; }
.saida button.link { color: var(--sutil); font-size: var(--t-sm); }
.saida button.link:hover { color: var(--link); }
.saida .sutil { margin: var(--e2) 0 0; font-size: var(--t-xs); line-height: var(--lh-xs); }
.regras-senha { margin: 0 0 var(--e4); padding: var(--e3) var(--e4) var(--e3) var(--e6); background: var(--info-fundo); color: var(--info); border-radius: var(--raio-s); font-size: var(--t-sm); line-height: var(--lh-sm); }
.regras-senha li + li { margin-top: var(--e1); }
.botao.largo { display: flex; width: 100%; }

/* ---------- 2c. Molde de documento: Integração, Termos, Privacidade e Suporte ----------
   Mesmo padrão do site institucional (Site_Kinota/docs/regras-de-design.md): topo claro com menu e
   "Entrar" verde, rótulo em caixa alta com traço, título grande, rodapé escuro com a empresa. */
.doc-topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.doc-topo-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); max-width: 72rem; margin: 0 auto; padding: var(--e3) var(--e4); }
.doc-topo .marca, .doc-rodape .marca { padding: 0; }
.doc-topo .marca { color: var(--texto); }
.doc-topo .marca img, .doc-rodape .marca img { width: 2rem; height: 2rem; }
.doc-menu { flex: 1 0 100%; }
.doc-menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); margin: 0 calc(-1 * var(--e3)); padding: 0; list-style: none; }
.doc-menu a:not(.botao) { display: inline-flex; align-items: center; min-height: var(--controle); padding: 0 var(--e3); border-radius: var(--raio-s); color: var(--sutil); font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm); text-decoration: none; }
.doc-menu a:not(.botao):hover { background: var(--superficie-2); color: var(--texto); }
.doc-menu a[aria-current="page"] { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; }
.doc-menu .entrar { margin-left: auto; }
.doc-menu .entrar .botao { gap: var(--e2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.doc-menu .entrar svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main.documento { max-width: 52rem; padding: var(--e6) var(--e4) var(--e7); }
main.documento > .doc-cabeca { grid-column: 1 / -1; }
/* Documento com índice "Nesta página" (Termos, Privacidade): índice fixo ao lado no desktop, no topo no celular. */
main.documento.com-indice, main.documento.larga { max-width: 72rem; }
main.documento.com-indice { display: grid; gap: var(--e5); }
.indice { padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); }
.indice-titulo { margin: 0 0 var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sutil); }
.indice ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.indice a { display: block; padding: var(--e1) var(--e2); border-radius: var(--raio-s); color: var(--texto); text-decoration: none; font-size: var(--t-sm); line-height: var(--lh-sm); }
.indice a:hover { background: var(--superficie-2); color: var(--link); }
.leitura [id] { scroll-margin-top: var(--e5); }
/* Cabeçalho dos documentos públicos (macro _doc_cabeca.html). */
.doc-cabeca { margin: 0 0 var(--e5); }
/* Rótulo igual ao .rotulo-caixa do site (traço + caixa alta), em --link: sobre fundo claro o --marca não passa em AA. */
.doc-tipo { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.doc-tipo::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.doc-cabeca h1, .leitura .doc-cabeca h1 { margin: 0 0 var(--e3); font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.02em; }
.doc-meta { margin: 0; color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
/* Rodapé escuro, como o do site. */
.doc-rodape { padding: var(--e6) 0; background: var(--lateral); color: var(--lateral-sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
/* Mesma largura e recuo do main.documento: marca, texto e rodapé alinhados na mesma coluna. */
.doc-rodape-dentro { max-width: 72rem; margin: 0 auto; padding: 0 var(--e4); }
.doc-rodape .marca { color: var(--branco); margin-bottom: var(--e4); }
.doc-rodape p { margin: 0 0 var(--e2); }
.doc-rodape ul { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.doc-rodape nav a { display: inline-flex; align-items: center; min-height: var(--controle); color: var(--lateral-texto); }
.doc-rodape nav a:hover { color: var(--branco); }
.doc-rodape :focus-visible { outline-color: var(--marca); }
.tabela.dados-tratados td:first-child { font-weight: 600; }
/* Seções numeradas dentro do cartão do documento: a 1ª não ganha a linha de título de cartão. */
.leitura .cartao > h2[id]:first-child { padding-bottom: 0; margin-bottom: var(--e3); border-bottom: 0; }
/* Suporte: canais e golpes lado a lado; temas de ajuda em grade. */
.suporte-intro { margin: calc(-1 * var(--e3)) 0 var(--e5); }
.suporte-topo, .ajuda-grade { display: grid; gap: var(--e4); align-items: start; }
.suporte-topo { margin-bottom: var(--e6); }
.suporte-coluna { display: grid; gap: var(--e4); }
.suporte-coluna .alerta { margin: 0; }
.leitura h2.suporte-titulo { margin: 0 0 var(--e4); padding-top: 0; border-top: 0; }
.leitura .canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e4); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.canais li { display: flex; gap: var(--e3); align-items: flex-start; }
.canais li:first-child { grid-column: 1 / -1; }
.suporte-coluna > .cartao, .ajuda-grade > .cartao { margin: 0; }
.canais svg, .ajuda-grade summary svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--link); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canais svg { margin-top: var(--e1); }
.canal-rotulo { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sutil); }
dl.perguntas { margin: 0; }
dl.perguntas dt { font-weight: 600; }
dl.perguntas dd { margin: var(--e1) 0 var(--e4); color: var(--sutil); }
dl.perguntas dd:last-child { margin-bottom: 0; }
.recolhivel > summary h3 { margin: 0; }
.recolhivel > summary:hover h3 { color: var(--link); }
.leitura { line-height: var(--lh-md); }
.leitura h1 { margin-top: var(--e5); }
.leitura h2 { margin: var(--e6) 0 var(--e3); padding-top: var(--e4); border-top: 1px solid var(--borda); }
/* Cartão dentro do molde de documento (ex.: /suporte sem login): o título do cartão já tem a linha dele. */
.leitura .cartao > h2:first-child, .leitura .recolhivel > summary h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.leitura p, .leitura li { max-width: 68ch; }
.leitura ul, .leitura ol { margin: 0 0 var(--e4); padding-left: var(--e5); }
.leitura li + li { margin-top: var(--e2); }
/* Guia de integração (/integracao): blocos de código e tabelas vindos do Markdown, sem classe. */
.leitura pre { overflow-x: auto; margin: 0 0 var(--e4); padding: var(--e3) var(--e4); background: var(--superficie-2); border-radius: var(--raio-s); font-size: var(--t-sm); }
.leitura pre code { padding: 0; background: none; word-break: normal; }
.leitura table { display: block; overflow-x: auto; margin: 0 0 var(--e4); border-collapse: collapse; font-size: var(--t-sm); }
.leitura th, .leitura td { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }

/* ---------- 3a. Componentes básicos ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); box-shadow: var(--sombra-1); padding: var(--e5); margin-bottom: var(--e5); }
.estreito { max-width: 28rem; margin: var(--e6) auto; }

/* formulários */
form label { display: block; margin-bottom: var(--e4); font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); }
form + p { margin-top: var(--e4); }
form label small { font-weight: 400; color: var(--sutil); }
input, select, textarea {
  display: block; width: 100%; margin-top: var(--e1); height: var(--controle); padding: 0 var(--e3);
  font: inherit; font-weight: 400; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: var(--raio-s);
}
textarea { height: auto; min-height: 6rem; padding: var(--e2) var(--e3); }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; padding: 0; }
input::placeholder, textarea::placeholder { color: var(--sutil); }
input:hover, select:hover, textarea:hover { border-color: var(--sutil); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); box-shadow: var(--anel); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { outline-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); }
input:disabled, select:disabled, textarea:disabled { color: var(--sutil); cursor: not-allowed; }
label.opcao { display: flex; gap: var(--e2); align-items: flex-start; font-weight: 400; font-size: var(--t-base); line-height: var(--lh-base); }
label.opcao input { margin-top: var(--e1); flex: none; }
/* Linha de orientação sob o campo, escrita por static/mascaras.js (nome da cidade, descrição do serviço, erro). */
.campo-aviso { display: block; margin-top: var(--e1); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }
.campo-aviso[hidden] { display: none; }
.campo-aviso.erro { color: var(--erro); font-weight: 600; }
.dica { margin: calc(-1 * var(--e2)) 0 var(--e4); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }

input.codigo { height: 3.5rem; text-align: center; font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 600; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

/* alternador sem JavaScript: radios reais (teclado e leitor de tela), só o visual é de botão */
fieldset.segmentado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); padding: 0; border: 0; }
.segmentado legend { float: left; padding: 0; margin-right: var(--e3); font-weight: 600; font-size: var(--t-sm); line-height: var(--controle); }
.segmentado label { position: relative; display: block; margin: 0; }
.segmentado input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmentado span { display: inline-flex; align-items: center; min-height: var(--controle); padding: 0 var(--e4); border: 1px solid var(--borda-campo); border-radius: var(--raio-s); background: var(--superficie); color: var(--texto); font-weight: 600; font-size: var(--t-sm); }
.segmentado input:checked + span { background: var(--acao); color: var(--acao-texto); border-color: var(--link); }  /* borda: 3:1 contra o branco (1.4.11) */
.segmentado input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }

/* botões */
button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--controle); padding: 0 var(--e4); font: inherit; font-weight: 600; line-height: var(--lh-base);
  color: var(--acao-texto); background: var(--acao); border: 1px solid transparent; border-radius: var(--raio-s);
  box-shadow: inset 0 -1px 0 var(--realce-1); cursor: pointer; text-decoration: none;
}
button:hover, .botao:hover { background: var(--acao-hover); }
.botao svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
button:active, .botao:active { box-shadow: none; transform: translateY(1px); }
button:disabled, .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
button.secundario, .botao.secundario { background: transparent; color: var(--link); border-color: var(--borda-campo); box-shadow: none; }
button.secundario:hover, .botao.secundario:hover { background: var(--superficie-2); }
button.perigo { background: var(--perigo); color: var(--perigo-texto); }
button.perigo:hover { background: var(--perigo); filter: brightness(1.12); }
button.link { background: none; color: var(--link); padding: 0; min-height: 0; font-weight: 500; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 0.18em; }
button.link:hover { background: none; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e4); }
.acoes form { margin: 0; }
.acesso-caixa form > button[type="submit"]:only-of-type { width: 100%; }

/* passos numerados (emissão em massa) */
.etapas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); margin-top: var(--e5); }
.etapa { min-width: 0; display: flex; gap: var(--e4); align-items: flex-start; margin: 0; padding: var(--e4); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-m); }
.etapa-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--acao); color: var(--acao-texto); font-weight: 700; font-size: var(--t-sm); }
.etapa-corpo { flex: 1; min-width: 0; }
.etapa-corpo h3 { margin: 0 0 var(--e1); font-size: var(--t-base); line-height: var(--lh-base); }
.etapa-corpo h3 label { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.etapa-corpo > p { margin: 0 0 var(--e3); }
.etapa-corpo .acoes { margin-top: 0; }
.envio { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
input.arquivo { max-width: 100%; min-width: 0; padding: 0 var(--e3) 0 0; height: var(--controle); line-height: calc(var(--controle) - 2px); cursor: pointer; }
.envio .arquivo { flex: 1 1 16rem; width: auto; min-width: 0; margin: 0; }
input.arquivo::file-selector-button { height: calc(var(--controle) - 2px); margin: 0 var(--e3) 0 0; padding: 0 var(--e4); font: inherit; font-weight: 600; color: var(--link); background: var(--superficie-2); border: 0; border-right: 1px solid var(--borda-campo); border-radius: var(--raio-s) 0 0 var(--raio-s); cursor: pointer; }
input.arquivo::file-selector-button:hover { background: var(--borda); }

/* alertas */
.alerta { padding: var(--e3) var(--e4); border-radius: var(--raio-s); border-left: 4px solid currentColor; margin: 0 0 var(--e4); font-size: var(--t-sm); line-height: var(--lh-sm); }
.alerta.erro { background: var(--erro-fundo); color: var(--erro); }
.alerta.ok { background: var(--ok-fundo); color: var(--ok); }
.alerta.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.alerta.info { background: var(--info-fundo); color: var(--info); }

.qrcode { display: flex; justify-content: center; margin: var(--e4) 0; }
.qrcode svg { background: var(--branco); padding: var(--e2); border-radius: var(--raio-s); }
.chave-manual { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e1) var(--e3); margin: 0 0 var(--e4); padding: var(--e3); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-s); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.chave-manual span { white-space: nowrap; }

/* indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.indicador { position: relative; overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); padding: var(--e4) var(--e5); }
/* versão com ícone (painel): quadrado na cor do estado, número, rótulo e ação */
.indicador:has(.indicador-icone) { display: flex; flex-direction: column; padding: var(--e5); --tom: var(--neutro); --tom-fundo: var(--neutro-fundo); }
.indicador.tom-info { --tom: var(--info); --tom-fundo: var(--info-fundo); }
.indicador.tom-ok { --tom: var(--ok); --tom-fundo: var(--ok-fundo); }
.indicador.tom-erro { --tom: var(--erro); --tom-fundo: var(--erro-fundo); }
.indicador.tom-falha { --tom: var(--falha); --tom-fundo: var(--falha-fundo); }
.indicador-icone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--e4); border-radius: var(--raio-m); background: var(--tom-fundo); color: var(--tom); }
.indicador-icone svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.indicador-selo { position: absolute; top: var(--e5); right: var(--e5); display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--e3); border-radius: var(--raio-pilula); background: var(--superficie); box-shadow: inset 0 0 0 1px currentColor; color: var(--tom); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; }
.indicador-acao { margin-top: var(--e4); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--tom); }
.indicador.erro:has(.indicador-icone), .indicador.aviso:has(.indicador-icone) { background: linear-gradient(180deg, var(--tom-fundo) 0%, var(--superficie) 60%); border-color: var(--tom); }
.indicador.erro .indicador-icone, .indicador.aviso .indicador-icone { background: var(--tom); color: var(--superficie); }
.indicador .valor { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.indicador .rotulo { color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }

/* tabelas */
.cartao > h2:first-child { margin-top: 0; padding-bottom: var(--e3); margin-bottom: var(--e4); border-bottom: 1px solid var(--borda); }
.tabela-envolta { margin-bottom: var(--e4); overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); box-shadow: var(--sombra-1); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: var(--lh-sm); }
.tabela th, .tabela td { padding: var(--e3) var(--e3); text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--e4); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--e4); }
.tabela td:last-child, .tabela td.numero { white-space: nowrap; }
.tabela th { vertical-align: bottom; background: var(--superficie-2); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sutil); }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .numero { text-align: right; }
.tabela td code { white-space: normal; }
.tabela.densa th, .tabela.densa td { padding: var(--e3) var(--e2); }
.tabela.densa th { letter-spacing: 0.02em; }
.tabela td { font-variant-numeric: tabular-nums; }  /* números alinham */
.tabela td.destaque { font-weight: 600; color: var(--texto); }

/* selos de situação: cor e forma do ícone (o estado nunca depende só da cor) */
.selo { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e1); min-height: 1.5rem; padding: 0 var(--e3) 0 var(--e2); border-radius: var(--raio-pilula); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; background: var(--neutro-fundo); color: var(--neutro); border: 0; }
.selo::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: 0.25rem; border-radius: 50%; background: currentColor; }
.selo.autorizada, .selo.ativa, .selo.ok, .selo.concluido { color: var(--ok); background: var(--ok-fundo); }
.selo.rejeitada, .selo.suspensa, .selo.falha, .selo.erro_validacao, .selo.falhou { color: var(--erro); background: var(--erro-fundo); }
.selo.erro_comunicacao { color: var(--falha); background: var(--falha-fundo); }
.selo.em_analise, .selo.pendente, .selo.atencao, .selo.emitindo, .selo.em_andamento, .selo.pausado { color: var(--aviso); background: var(--aviso-fundo); }
.selo.info { color: var(--info); background: var(--info-fundo); }
.selo.cancelada { color: var(--neutro); background: var(--neutro-fundo); }
.selo.autorizada::before, .selo.concluido::before { content: "\2713"; width: 1rem; height: 1rem; margin: 0; background: none; font-size: var(--t-xs); line-height: 1rem; text-align: center; }
.selo.rejeitada::before, .selo.falhou::before, .selo.erro_validacao::before { content: "\2715"; width: 1rem; height: 1rem; margin: 0; background: none; font-size: var(--t-xs); line-height: 1rem; text-align: center; }
.selo.erro_comunicacao::before { content: "!"; width: 0.875rem; height: 0.875rem; margin: 0.0625rem; background: none; border: 1.5px solid currentColor; font-size: 0.625rem; line-height: 0.75rem; text-align: center; }
.selo.pendente::before, .selo.em_analise::before { background: none; border: 2px solid currentColor; }
.selo.cancelada::before { width: 0.625rem; height: 0.625rem; margin: 0.1875rem; box-sizing: border-box; border: 1.5px solid currentColor; background: linear-gradient(135deg, transparent 44%, currentColor 44% 58%, transparent 58%); }
.selo.pausado::before { width: 0.5rem; height: 0.625rem; border-radius: 1px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }

/* grupo de selos (resumo no topo de empresa e conta, contagem do lote) */
.selos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.selos-topo { margin: calc(-1 * var(--e3)) 0 var(--e5); }

/* filtros, passos, grades, listas de dados */
.paginacao { justify-content: space-between; margin-top: var(--e4); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; margin-bottom: var(--e4); }
.filtros label, .filtros .campo { margin: 0; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e2); margin: 0 0 var(--e5); padding: 0; list-style: none; counter-reset: passo; }
.passos li { counter-increment: passo; display: flex; align-items: center; gap: var(--e3); min-height: var(--controle); padding: var(--e2) var(--e4); border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--superficie); color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; }
.passos li::before { content: counter(passo); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--sutil); font-size: var(--t-xs); font-weight: 700; }
.passos li.feito { color: var(--texto); }
.passos li.feito::before { content: "\2713"; background: var(--ok-fundo); border-color: transparent; color: var(--ok); }
.passos li.atual { border-color: var(--foco); color: var(--texto); font-weight: 600; box-shadow: var(--anel); }
.passos li.atual::before { background: var(--acao); border-color: transparent; color: var(--acao-texto); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--e4); }
.grade.larga { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
/* Grade alinhada (Configurações): rótulo, campo e mensagem em trilhas comuns a toda a linha. Um erro abaixo de um
   campo não tira os vizinhos do alinhamento, e rótulos de alturas diferentes não desalinham os campos. */
.grade.alinhada { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
/* Freios de emergência: estado + formulário em coluna; no celular, um freio abaixo do outro com respiro. */
.freio { display: grid; gap: var(--e3); align-content: start; }
.freio > .estado, .freio > .confirmacao { margin: 0; }
.par-de-cartoes.freios { row-gap: var(--e5); }
.grade.alinhada > .campo { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.grade.alinhada > .campo > .rotulo { align-self: end; }
.grade.alinhada > .campo > .campo-aviso { margin-top: var(--e1); }
dl.dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e2) var(--e4); margin: 0; }
dl.dados dt { color: var(--sutil); }
dl.dados dd { margin: 0; overflow-wrap: anywhere; }

.vazio h3 { margin: 0 0 var(--e1); color: var(--texto); }
.vazio p { margin: 0 auto var(--e4); max-width: 44ch; }
.vazio .botao { margin-top: var(--e1); }
.vazio { padding: var(--e6) var(--e5); text-align: center; color: var(--sutil); background: var(--superficie); border: 1px dashed var(--borda-campo); border-radius: var(--raio-m); }

/* campo com "?" de orientação (sem JavaScript: <details>) */
.campo { display: flex; flex-direction: column; margin-bottom: var(--e4); position: relative; }
.campo .rotulo { display: flex; flex: 1; align-items: flex-start; justify-content: space-between; gap: var(--e2); }
.campo .rotulo label { margin-bottom: var(--e1); }
.campo > input, .campo > select { width: 100%; }
details.ajuda { display: inline-block; }
details.ajuda summary {
  list-style: none; cursor: pointer; width: 1.5rem; height: 1.5rem; border-radius: 50%;  /* alvo de 24 px (2.5.8) */
  border: 1px solid var(--sutil); color: var(--sutil); font-size: var(--t-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
details.ajuda summary::-webkit-details-marker { display: none; }
details.ajuda[open] summary { background: var(--sutil); color: var(--superficie); }
details.ajuda .ajuda-texto {
  position: absolute; left: 0; right: 0; top: 1.75rem; z-index: 10;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-s); padding: var(--e3);
  box-shadow: var(--sombra-2); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 400; min-width: 16rem;
}
details.ajuda .ajuda-texto p { margin: 0 0 var(--e2); }
details.ajuda .ajuda-texto p:last-child { margin-bottom: 0; }

/* ---------- 3b. Formulários longos, filtros de listagem e cabeçalho fixo de tabela ---------- */
/* bloco opcional recolhível (<details class="cartao recolhivel">): o título é o próprio h2 */
.recolhivel > summary { display: flex; align-items: center; gap: var(--e2); cursor: pointer; list-style: none; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary::before { content: "\25B8"; flex: none; color: var(--sutil); font-size: var(--t-sm); transition: transform 0.15s; }
.recolhivel[open] > summary::before { transform: rotate(90deg); }
.recolhivel > summary h2 { margin: 0; }
.recolhivel > summary:hover h2 { color: var(--link); }
.recolhivel[open] > summary { padding-bottom: var(--e3); margin-bottom: var(--e4); border-bottom: 1px solid var(--borda); }

/* barra de ações presa ao pé da tela em formulários longos */
.acoes.fixas { position: sticky; bottom: var(--e3); z-index: 5; margin-top: var(--e5); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); box-shadow: var(--sombra-2); }
.acoes.fixas .sutil { font-size: var(--t-sm); line-height: var(--lh-sm); }

/* filtros de listagem num cartão, numa barra só */
.filtros.barra-filtros { padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); box-shadow: var(--sombra-1); }
.barra-filtros .limpar { align-self: center; min-height: var(--controle); display: inline-flex; align-items: center; font-size: var(--t-sm); font-weight: 600; }
.barra-filtros .dica-filtros { flex-basis: 100%; margin: 0; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sutil); }

/* cabeçalho da tabela fixo ao rolar listas longas (no celular a tabela vira blocos, sem cabeçalho) */
@media (min-width: 861px) {
  main.documento.com-indice { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; gap: var(--e6); }
  /* Molde de documento: menu na mesma linha da marca e título no tamanho dos títulos de seção do site. */
  .doc-menu { flex: 0 1 auto; }
  .doc-menu ul { margin: 0; }
  .doc-menu .entrar { margin-left: var(--e3); }
  .doc-cabeca h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  main.documento.com-indice > .alerta { grid-column: 1 / -1; }
  .indice { position: sticky; top: var(--e5); }
  .suporte-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ajuda-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabela-envolta { max-height: calc(100vh - 12rem); overflow: auto; }
  .tabela thead th { position: sticky; top: 0; z-index: 1; }
}

/* ---------- 3c. Painel, cotas, detalhe da nota, certificado e saúde ---------- */
/* indicadores clicáveis do painel, com cor quando pedem atenção */
a.indicador { display: block; color: var(--texto); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.indicador:hover { border-color: var(--borda-campo); box-shadow: var(--sombra-2); }
a.indicador:hover .rotulo { color: var(--link); }
a.indicador:hover .indicador-acao { text-decoration: underline; }
.indicador.erro .valor { color: var(--erro); }
.indicador.aviso .valor { color: var(--aviso); }
.indicador.tom-falha.aviso .valor { color: var(--falha); }

/* gráfico de barras do faturamento (SVG desenhado no servidor) */
.grafico { margin: 0; }
.grafico svg { display: block; width: 100%; height: auto; max-height: 16rem; }
.grafico-base { stroke: var(--borda); stroke-width: 1; }
.grafico-barra { fill: var(--link); }
.grafico-barra.atual { fill: var(--link); stroke: var(--texto); stroke-width: 2; }  /* destaque do mês sem depender só da cor */
.grafico-valor, .grafico-mes { font-family: var(--fonte); font-size: 12px; text-anchor: middle; fill: var(--sutil); }
.grafico-valor { fill: var(--texto); font-weight: 600; }
.grafico figcaption { margin-top: var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); }

/* barras de cota */
.cotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--e3) var(--e6); }
.cota-topo { display: flex; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }
.cota-topo strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.cota .progresso { margin: 0; height: 0.625rem; }
.cota .progresso:not(.alto)::-webkit-progress-value { background: var(--link); }
.cota .progresso:not(.alto)::-moz-progress-bar { background: var(--link); }
.cota-resto { display: block; margin-top: var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sutil); }
/* título de cartão com ícone */
.cartao > h2.titulo-icone { display: flex; align-items: center; gap: var(--e3); }
.titulo-icone-marca { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--superficie-2); color: var(--link); }
.titulo-icone-marca svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* empresa com iniciais e dica abaixo do selo */
.empresa-nome { display: inline-flex; align-items: center; gap: var(--e3); }
.iniciais { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--base-950); color: var(--marca); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; }
.dica-celula { display: block; margin-top: var(--e1); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sutil); }
.progresso.alto { accent-color: var(--aviso); }
.progresso.alto::-webkit-progress-value { background: var(--aviso); }
.progresso.alto::-moz-progress-bar { background: var(--aviso); }

/* tela da nota: valor em destaque, erros, ações separadas por risco, linha do tempo */
.valor-destaque { margin: 0; text-align: right; font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.valor-destaque small { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--sutil); letter-spacing: 0.04em; text-transform: uppercase; }
.lista-erros { margin: var(--e2) 0 0; padding-left: var(--e5); }
.lista-erros li + li { margin-top: var(--e1); }
.codigo-erro { font-weight: 700; background: var(--superficie); color: var(--erro); }
.acoes-divididas { justify-content: space-between; }
.acoes-grupo { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.acoes-grupo form { margin: 0; }
.botao.atencao, button.atencao { background: transparent; color: var(--erro); border-color: var(--erro); box-shadow: none; }
.botao.atencao:hover, button.atencao:hover { background: var(--erro-fundo); }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo li { position: relative; display: flex; flex-wrap: wrap; gap: 0 var(--e3); padding: 0 0 var(--e4) var(--e6); }
.linha-do-tempo li:last-child { padding-bottom: 0; }
.linha-do-tempo li::before { content: ""; position: absolute; left: var(--e1); top: 0.375rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--neutro); box-shadow: 0 0 0 3px var(--superficie); }
.linha-do-tempo li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--e1) + 0.3125rem); top: 1.25rem; bottom: 0.25rem; width: 2px; background: var(--borda); }
.linha-do-tempo li.ok::before { background: var(--ok); }
.linha-do-tempo li.erro::before { background: var(--erro); }
.linha-do-tempo li.aviso::before { background: var(--aviso); }
.linha-do-tempo .quando { color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-base); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* lista do que é conferido (certificado) */
.lista-ok { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-ok li { position: relative; padding-left: var(--e5); }
.lista-ok li + li { margin-top: var(--e1); }
.lista-ok li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* saúde do sistema: uma peça por cartão */
.pecas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.peca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--neutro); border-radius: var(--raio-m); box-shadow: var(--sombra-1); }
.peca.ok { border-left-color: var(--ok); }
.peca.atencao { border-left-color: var(--aviso); }
.peca.falha { border-left-color: var(--erro); }
.peca-nome { font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); }
/* Faixa de manutenção programada (Configurações > Operação), no topo de todas as telas. */
.faixa-manutencao { margin: 0; padding: var(--e2) var(--e4); background: var(--aviso-fundo); color: var(--aviso); border-bottom: 1px solid var(--borda); text-align: center; font-size: var(--t-sm); line-height: var(--lh-sm); }
/* Peças com detalhe (Configurações): nome e detalhe à esquerda, selo sempre à direita, alinhado ao topo. */
.pecas.detalhadas { margin: 0 0 var(--e4); padding: 0; list-style: none; }
.pecas.detalhadas .peca { flex-wrap: nowrap; align-items: flex-start; }
.pecas.detalhadas .peca-nome { flex: 1 1 auto; min-width: 0; }
.pecas.detalhadas .selo { flex: none; }
.peca-nome small { display: block; margin-top: var(--e1); color: var(--sutil); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 400; }
/* Placar (ex.: "6 de 12 itens prontos") e a origem de cada valor da configuração. */
.placar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e4); margin: 0 0 var(--e4); }
.placar strong { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: 700; letter-spacing: -0.02em; }
.origem { display: inline-block; margin-left: var(--e1); padding: 0 var(--e2); border: 1px solid var(--borda); border-radius: var(--raio-pilula); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--sutil); vertical-align: middle; white-space: nowrap; }
.origem.painel { color: var(--link); border-color: var(--borda-campo); }
/* Abas da aba Configurações: a atual em destaque (mesmas pílulas do .indice-pagina). */
.abas-config a[aria-current="page"] { background: var(--acao); color: var(--acao-texto); border-color: transparent; }
/* "Voltar ao anterior" do histórico: o formulário abre dentro da própria linha. */
.voltar-ajuste > summary { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--link); }
.voltar-ajuste form { display: grid; gap: var(--e2); margin-top: var(--e2); min-width: 14rem; }

/* ---------- 3d. Confirmações, estado de resultado, segredos e filas ---------- */
/* bloco de estado no topo do resultado da emissão */
.estado { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); padding: var(--e4); border-radius: var(--raio-m); background: var(--superficie-2); }
.estado h1 { margin: 0; }
.estado-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; font-size: var(--t-xl); font-weight: 700; color: var(--superficie); background: var(--neutro); }
.estado-sub { margin: var(--e1) 0 0; color: var(--sutil); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.estado.ok { background: var(--ok-fundo); }
.estado.ok .estado-icone { background: var(--ok); }
.estado.erro { background: var(--erro-fundo); }
.estado.erro .estado-icone { background: var(--erro); }
.estado.aviso { background: var(--aviso-fundo); }
.estado.aviso .estado-icone { background: var(--aviso); }

/* caixa de confirmação de ação sem volta (emitir, emitir lote, cancelar) */
.confirmacao { margin-top: var(--e4); padding: var(--e4); background: var(--aviso-fundo); border: 1px solid var(--aviso); border-left-width: 4px; border-radius: var(--raio-m); }
.confirmacao > p { color: var(--aviso); font-size: var(--t-sm); line-height: var(--lh-sm); }
.confirmacao .opcao { font-weight: 600; }
.confirmacao .acoes { margin-top: var(--e3); }
.confirmacao.perigo { background: var(--erro-fundo); border-color: var(--erro); }
.confirmacao.perigo > p { color: var(--erro); }
.zona-perigo { border-top: 4px solid var(--erro); }

/* segredo mostrado uma única vez (chave de API) */
.segredo { margin: 0 0 var(--e5); padding: var(--e4); background: var(--superficie-2); border: 1px dashed var(--borda-campo); border-radius: var(--raio-m); }
.segredo-rotulo { margin: 0 0 var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sutil); }
.segredo-valor { margin: 0 0 var(--e3); }
.segredo-valor code { display: inline-block; padding: var(--e2) var(--e3); font-size: var(--t-base); background: var(--superficie); border: 1px solid var(--borda); user-select: all; }
.segredo-aviso { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--aviso); }

/* contagem ao lado do título de uma fila */
.contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--e2); margin-left: var(--e1); border-radius: var(--raio-pilula); background: var(--erro-fundo); color: var(--erro); font-size: var(--t-xs); line-height: 1; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; }

/* vazio positivo: fila sem pendências */
.vazio.ok { color: var(--ok); background: var(--ok-fundo); border-style: solid; border-color: transparent; font-weight: 600; }
.vazio.ok::before { content: "\2713"; display: block; margin-bottom: var(--e1); font-size: var(--t-xl); line-height: var(--lh-xl); }

/* índice de seções no topo de páginas longas (conta no admin, empresa): âncoras, sem JavaScript */
.indice-pagina { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e5); }
.indice-pagina a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--e3); border: 1px solid var(--borda); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--link); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; text-decoration: none; }
.indice-pagina a:hover { background: var(--superficie-2); border-color: var(--borda-campo); }
section.cartao[id] { scroll-margin-top: var(--e5); }
section.cartao:target { box-shadow: var(--anel); }

/* "Como corrigir" junto da mensagem de rejeição (app/web/dicas_erros.py) */
.como-corrigir { display: block; margin-top: var(--e1); font-weight: 600; }

/* ---------- 4. Celular (até 860 px) ---------- */
@media (max-width: 860px) {
  .indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estado { align-items: flex-start; }
  .confirmacao .acoes > * { flex: 1 1 100%; }
  .valor-destaque { text-align: left; }
  .acoes-grupo { width: 100%; }
  .acoes.fixas { bottom: 0; border-radius: var(--raio-m) var(--raio-m) 0 0; }
  .acoes.fixas button { flex: 1; }
  .barra-filtros label { flex: 1 1 100%; }
  .barra-filtros button { width: 100%; }
  .estrutura { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; overflow: visible; padding: var(--e4); }
  .lateral nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; margin-top: var(--e4); }
  .lateral nav a { flex: none; }
  .nav-grupo { display: none; }
  .lateral-usuario { display: flex; align-items: center; justify-content: space-between; margin-top: var(--e3); padding-top: var(--e3); }
  .usuario { padding-bottom: 0; }
  .lateral button.sair { width: auto; }
  .lateral-ambiente { margin: var(--e3) 0 0; }
  .alternar-menu { display: none; }  /* no celular o menu já é uma barra no topo */
  main { padding: var(--e5) var(--e4) var(--e6); }

  .acesso { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .acesso-destaque { padding: var(--e4) var(--e5); }
  dl.dados { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .etapa { padding: var(--e3); gap: var(--e3); }
  .envio button, .etapa-corpo .acoes .botao { width: 100%; }
  dl.dados dd { margin-bottom: var(--e3); }
  .tabela th, .tabela td { padding: var(--e3) var(--e2); }
  .tabela th:first-child, .tabela td:first-child { padding-left: var(--e3); }
  .tabela th:last-child, .tabela td:last-child { padding-right: var(--e3); }
  .tabela th { letter-spacing: 0.02em; }
  .tabela td code { white-space: nowrap; }
  .tabela td:last-child:has(.botao), .tabela th:last-child:empty { position: sticky; right: 0; border-left: 1px solid var(--borda); }
  .tabela td:last-child:has(.botao) { background: var(--superficie); }
  .tabela th:last-child:empty { background: var(--superficie-2); }
  .tabela.empilhada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela.empilhada, .tabela.empilhada tbody, .tabela.empilhada tfoot, .tabela.empilhada tr { display: block; }
  .tabela.empilhada tr { padding: var(--e3); border-bottom: 1px solid var(--borda); }
  .tabela.empilhada tr:last-child { border-bottom: 0; }
  .tabela.empilhada td, .tabela.empilhada tfoot th { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); padding: var(--e1) 0; border: 0; background: none; text-align: right; white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); line-height: var(--lh-sm); }
  .tabela.empilhada td:first-child, .tabela.empilhada td:last-child, .tabela.empilhada tfoot th:first-child, .tabela.empilhada tfoot th:last-child { padding-left: 0; padding-right: 0; }
  .tabela.empilhada td[data-rotulo]::before, .tabela.empilhada tfoot th[data-rotulo]::before { content: attr(data-rotulo); flex: none; font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sutil); text-align: left; }
  .tabela.empilhada td:not([data-rotulo]) { justify-content: flex-start; font-weight: 600; }
  .tabela.empilhada tfoot th:empty { display: none; }
  .tabela.empilhada tbody tr:hover td { background: none; }
  .tabela.empilhada td code { white-space: normal; }
  .tabela.empilhada td { overflow-wrap: anywhere; }
  .tabela.empilhada th:last-child:empty { position: static; border-left: 0; }
  .tabela.empilhada td:empty { display: none; }
  .tabela.empilhada td:last-child:has(.botao) { position: static; display: block; border-left: 0; background: none; padding-top: var(--e2); }
  .tabela.empilhada td:last-child .botao { display: flex; width: 100%; min-height: var(--controle); }
  .acesso-texto, .acesso-rodape { display: none; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .acesso-formulario { padding: var(--e6) var(--e5); justify-content: flex-start; }
}

/* ---------- 5a. Voltar e botão de linha de tabela ---------- */
.voltar { display: inline-flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--link); text-decoration: none; }
.voltar::before { content: "\2190"; }
.voltar:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.tabela .botao { min-height: 2rem; padding: 0 var(--e3); font-size: var(--t-sm); }

/* ---------- 5b. Revisão da nota e prévia em modal (sem JavaScript: o modal abre por :target) ---------- */
.revisao-topo { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--e4); }
.revisao-topo h1 { margin-bottom: var(--e1); }
.revisao-topo .dica { margin: 0; }
.revisao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.bloco-revisao { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-m); padding: var(--e4); }
.bloco-revisao h2 { margin: 0 0 var(--e3); font-size: var(--t-md); line-height: var(--lh-md); }
.modal { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: var(--e4); background: var(--sobreposicao); }
.modal:target { display: flex; }
.modal-fundo { position: absolute; inset: 0; }
.modal-caixa { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 52rem; max-height: 100%; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-2); }
@media (prefers-reduced-motion: no-preference) { .modal:target .modal-caixa { animation: entra-modal 0.18s ease-out; } }
@keyframes entra-modal { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-topo { display: flex; gap: var(--e4); align-items: flex-start; justify-content: space-between; padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borda); }
.modal-topo h2 { margin: 0; }
.modal-topo .dica { margin: 0; }
.modal-corpo { overflow: auto; padding: var(--e5); background: var(--superficie-2); }
.modal-corpo img { display: block; width: 100%; height: auto; background: var(--branco); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
.modal-rodape { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: flex-end; margin: 0; padding: var(--e4) var(--e5); border-top: 1px solid var(--borda); }
@media (max-width: 860px) {
  .modal { padding: 0; }
  .modal-caixa { max-width: none; border-radius: 0; height: 100%; }
  .modal-topo, .modal-corpo, .modal-rodape { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ---------- 5c. Emissão em massa ---------- */
.progresso { display: block; width: 100%; height: var(--e3); margin: 0 0 var(--e2); border: 0; border-radius: var(--raio-pilula); overflow: hidden; background: var(--superficie-2); accent-color: var(--ok); }
.progresso::-webkit-progress-bar { background: var(--superficie-2); }
.progresso::-webkit-progress-value { background: var(--ok); border-radius: var(--raio-pilula); }
.progresso::-moz-progress-bar { background: var(--ok); border-radius: var(--raio-pilula); }

/* ---------- 5d. Assistente de configuração da empresa (/configurar): uma pergunta por tela, sem barra lateral ----------
   Protótipo aprovado: docs/prototipos/2026-10-07-cadastro-guiado/. Tem o próprio ajuste de celular no fim. */
.assistente { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--fundo); }

/* Topo: marca, progresso e saída. */
.assistente-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e6); padding: var(--e4) clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--borda); background: var(--superficie); }
.assistente-topo .marca { padding: 0; color: var(--texto); }
.assistente-progresso { max-width: 28rem; width: 100%; justify-self: center; }
.assistente-progresso p { margin: 0 0 var(--e1); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sutil); }
.assistente-progresso strong { color: var(--texto); }
.barra-progresso { height: 0.5rem; border-radius: var(--raio-pilula); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); overflow: hidden; }
.barra-progresso span { display: block; height: 100%; border-radius: inherit; background: var(--link); }
.barra-progresso .etapa-1 { width: 20%; } .barra-progresso .etapa-2 { width: 40%; } .barra-progresso .etapa-3 { width: 60%; }
.barra-progresso .etapa-4 { width: 80%; } .barra-progresso .etapa-5 { width: 100%; }
.barra-progresso .conta-1 { width: 50%; } .barra-progresso .conta-2 { width: 100%; }
.plano-escolhido { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e4) var(--e5); border: 1px solid var(--foco); border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--anel); }
.plano-escolhido strong { font-size: var(--t-md); line-height: var(--lh-md); }
.plano-escolhido small { display: block; color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
.bloco { margin-top: var(--e5); }
.bloco-curto { margin-top: var(--e3); }
/* Duas colunas na coluna da pergunta (quando cabem); no celular, uma. */
.grade.par { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.grade.par > .inteira { grid-column: 1 / -1; }
/* 2FA no assistente: passos e QR lado a lado, código e botão na mesma linha (cabe numa tela). */
.dois-fatores { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: start; margin-bottom: var(--e4); }
.passos-curtos { display: grid; gap: var(--e3); margin: 0; padding-left: var(--e5); }
.passos-curtos strong { display: block; }
.passos-curtos small { display: block; color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
.qr-e-chave { display: grid; justify-items: center; gap: var(--e1); max-width: 13rem; }
.qr-e-chave .qrcode { margin: 0; }
.qr-e-chave .qrcode svg { display: block; width: 10rem; height: 10rem; box-sizing: border-box; }
.qr-e-chave .sutil { margin: 0; font-size: var(--t-xs); line-height: var(--lh-xs); }
.qr-e-chave .chave-manual { margin: 0; padding: var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); gap: var(--e1) var(--e2); }
.codigo-e-botao { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.codigo-e-botao input { flex: 0 1 14rem; min-width: 0; }
.codigo-e-botao button { min-height: 3.25rem; padding: 0 var(--e6); font-size: var(--t-md); }
.documento-em-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.documento-em-linha fieldset.segmentado { margin: 0; flex-wrap: nowrap; }
.documento-em-linha input { flex: 1 1 12rem; min-width: 0; }
/* Lista de troca de plano: cartões baixos. */
.trocar-plano { flex-basis: 100%; margin: 0; }
fieldset.escolhas.compactas { gap: var(--e2); margin-top: var(--e2); }
.escolhas.compactas label.escolha { padding: var(--e2) var(--e4); }
.escolhas.compactas label.escolha strong { font-size: var(--t-base); line-height: var(--lh-base); }
.escolhas.compactas label.escolha small { margin-top: 0; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.assistente-acoes { display: flex; gap: var(--e4); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; }
.assistente-acoes form, .acoes-assistente form { margin: 0; }
.assistente-acoes { align-items: center; }
.assistente-acoes button.link { font-size: inherit; line-height: inherit; font-weight: 600; text-decoration: underline; }

/* Corpo: a pergunta à esquerda, o painel da marca à direita (só desktop). */
.assistente-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.assistente-pergunta { width: 100%; max-width: 44rem; padding: var(--e6) clamp(1rem, 5vw, 5rem) var(--e7); justify-self: center; }
.assistente-pergunta .voltar { display: inline-block; margin-bottom: var(--e5); }
.rotulo-etapa { margin: 0 0 var(--e3); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.assistente-pergunta h1, .pergunta-titulo { margin: 0 0 var(--e2); font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; }
.pergunta-titulo label { font: inherit; display: block; margin: 0; }
.assistente-pergunta .apoio { margin: 0 0 var(--e5); font-size: var(--t-md); line-height: var(--lh-md); color: var(--sutil); }
.assistente-apoio { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--e5); padding: var(--e7) clamp(2rem, 4vw, 4rem); color: var(--destaque-texto); background: var(--base-950) url("/static/marca/fundo-acesso.svg") center / cover no-repeat; }
.assistente-apoio p { max-width: 24rem; margin: 0; font-size: var(--t-md); line-height: var(--lh-md); }

/* Campo grande, para uma resposta só: borda inteira (3:1), fonte grande, ajuda logo abaixo. */
input.grande { height: 3.25rem; padding: 0 var(--e4); font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 600; letter-spacing: 0.01em; border-width: 2px; }
.ajuda-campo { margin: var(--e2) 0 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }
.com-sufixo { display: flex; align-items: center; gap: var(--e3); max-width: 14rem; }
.com-sufixo span { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 600; color: var(--sutil); }

/* Ações: principal grande, à largura do conteúdo. */
.acoes-assistente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); margin-top: var(--e5); }
.acoes-assistente button, .acoes-assistente .botao { min-height: 3.25rem; padding: 0 var(--e6); font-size: var(--t-md); }
.acoes-assistente .link-saida { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; }

/* Escolha em cartões grandes (rádio com título e explicação). */
fieldset.escolhas { display: grid; gap: var(--e2); margin: 0; padding: 0; border: 0; min-width: 0; }
.escolhas legend { padding: 0; }
label.escolha { display: flex; gap: var(--e3); align-items: flex-start; margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--borda-campo); border-radius: var(--raio-m); background: var(--superficie); font-weight: 400; cursor: pointer; }
label.escolha:hover { border-color: var(--sutil); }
label.escolha:has(input:checked) { border-color: var(--foco); box-shadow: var(--anel); }
label.escolha:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
label.escolha input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 2px; }
label.escolha strong { display: block; font-size: var(--t-base); line-height: var(--lh-base); }
label.escolha small { display: block; margin-top: 0; color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
label.escolha .selo { margin-top: var(--e2); }
label.escolha.servico strong { font-size: var(--t-base); line-height: var(--lh-base); }
label.escolha.servico small { color: var(--texto); }

/* "Não sabe? Veja onde encontrar". */
details.onde { margin: var(--e3) 0 0; font-size: var(--t-sm); line-height: var(--lh-sm); }
details.onde summary { color: var(--link); font-weight: 600; cursor: pointer; }
details.onde[open] summary { margin-bottom: var(--e2); }
details.onde ul { margin: 0; padding-left: var(--e5); }
ul.dica { margin: var(--e4) 0 0; padding-left: var(--e5); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sutil); }

/* O que ter em mãos (abertura) e o resumo final. */
.lista-maos { display: grid; gap: var(--e3); margin: 0 0 var(--e5); padding: 0; list-style: none; }
.lista-maos li { display: flex; gap: var(--e3); align-items: flex-start; }
.lista-maos .numero { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--superficie-2); font-size: var(--t-sm); font-weight: 700; }
.lista-maos strong { display: block; }
.lista-maos small { display: block; color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
.resumo { margin: 0; border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--superficie); }
.resumo div { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: var(--e4); padding: var(--e3) var(--e4); align-items: baseline; }
.resumo div + div { border-top: 1px solid var(--borda); }
.resumo dt { color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
.resumo dd { margin: 0; }

/* Ilustração do painel. */
.ilustracao { width: 100%; max-width: 20rem; height: auto; }
.il-folha { fill: var(--base-700); stroke: var(--base-800); stroke-width: 2; }
.il-linha-marca { fill: var(--marca); }
.il-linha-azul { fill: var(--azul-claro); }
.il-linha-fraca { fill: var(--base-800); }
.il-seta { fill: none; stroke: var(--azul-claro); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.il-selo { fill: var(--marca); }
.il-check { fill: none; stroke: var(--base-950); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.il-ponto { fill: var(--amarelo); }

/* Celular: sem painel (é decorativo), topo em duas linhas. */
@media (max-width: 860px) {
  .assistente-corpo { grid-template-columns: minmax(0, 1fr); }
  .assistente-apoio { display: none; }
  .assistente-topo { grid-template-columns: auto auto; gap: var(--e3); }
  .assistente-progresso { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; }
  .assistente-pergunta { padding-top: var(--e5); }
  .resumo div { grid-template-columns: minmax(0, 1fr) auto; }
  .resumo dt { grid-column: 1 / -1; }
  .acoes-assistente button, .acoes-assistente .botao { width: 100%; justify-content: center; }
  .dois-fatores { grid-template-columns: minmax(0, 1fr); }
  .qr-e-chave { justify-self: center; }
  .codigo-e-botao input, .codigo-e-botao button { flex: 1 1 100%; }
}
span.apoio { display: block; margin: 0 0 var(--e4); font-weight: 400; }
.escolhas legend .pergunta-titulo { margin-bottom: var(--e2); }
.com-busca { display: flex; gap: var(--e3); }
.com-busca input { flex: 1; min-width: 0; }
.com-busca button { min-height: 3.25rem; }
fieldset.escolhas.resultados { margin-top: var(--e5); }
.resultados legend h2 { margin: 0 0 var(--e3); }

/* ---------- 6. Impressão: só o conteúdo, sem menu nem botões ---------- */
/* Alto contraste do sistema (Windows): fundo e sombra somem, então o estado marcado ganha contorno. */
@media (forced-colors: active) {
  .segmentado input:checked + span, label.escolha:has(input:checked), .passos li.atual { outline: 2px solid Highlight; outline-offset: -2px; }
  .barra-progresso span { forced-color-adjust: none; background: Highlight; }
}

@media print {
  /* papel é sempre claro: os tokens que o tema escuro troca voltam aos valores claros
     (mesmo seletor do tema escuro, :root; vem depois no arquivo, por isso vence) */
  :root {
    color-scheme: light;
    --fundo: #f5f9f4;
    --superficie: #ffffff;
    --superficie-2: #edf4ec;
    --texto: #10231a;
    --sutil: #52665a;
    --borda: #d9e5d9;
    --borda-campo: #7b9182;
    --link: #2c6b3a;
    --foco: #2c6b3a;
    --lateral: var(--base-950);
    --lateral-2: var(--base-900);
    --perigo: #a3262a;
    --erro: #a3262a;
    --erro-fundo: #fbeaea;
    --ok: #0e6a42;
    --ok-fundo: #e1f4ea;
    --aviso: #7a5600;
    --aviso-fundo: #fdf3d6;
    --info: #313b8f;
    --info-fundo: #eaecf8;
    --falha: #9a3b00;
    --falha-fundo: #fdebdc;
    --neutro: #4a5a50;
    --neutro-fundo: #e8ece8;
    --anel: 0 0 0 3px rgba(44, 107, 58, 0.28);
    --sombra-1: 0 1px 2px rgba(7, 23, 15, 0.06), 0 1px 1px rgba(7, 23, 15, 0.04);
    --sombra-2: 0 10px 30px rgba(7, 23, 15, 0.14);
  }
  body { background: #fff; color: #000; }
  .lateral, .rodape, .voltar, .pular, .acoes, .modal, .passos, form, .doc-topo, .doc-rodape, .acesso-destaque { display: none !important; }
  .estrutura, .conteudo { display: block; }
  main { max-width: none; padding: 0; }
  .cartao, .tabela-envolta, .indicador, .peca { box-shadow: none; border-color: #999; break-inside: avoid; }
  .selo, .estado, .alerta, .linha-do-tempo li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
}