/* Identidade visual do Emitta.
   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. */

@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;
  --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;

  /* 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;
}

@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; }
html { -webkit-text-size-adjust: 100%; }
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; }
}

/* ---------- 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);
  background: linear-gradient(180deg, var(--lateral) 0%, var(--lateral-2) 100%);
}
.marca { display: flex; align-items: center; gap: var(--e3); color: var(--branco); text-decoration: none; padding: 0 var(--e2); }
.marca img { width: 2rem; height: 2rem; 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.25rem; padding: 0 var(--e3); border-radius: var(--raio-s);
  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; }
.lateral nav a svg { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lateral nav a:hover { background: var(--lateral-hover); color: var(--branco); }
.lateral nav a[aria-current="page"] { background: var(--lateral-ativo); color: var(--branco); font-weight: 600; }
.lateral nav a[aria-current="page"] svg { color: var(--marca); }
.lateral nav a[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--e3)); top: var(--e2); bottom: var(--e2); width: 3px; border-radius: 0 3px 3px 0; background: var(--marca); }
.lateral :focus-visible { outline-color: var(--marca); }

.lateral-usuario { margin-top: auto; padding-top: var(--e4); border-top: 1px solid var(--lateral-linha); }
.lateral-usuario form { margin: 0; }
.usuario { display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e2) var(--e3); min-width: 0; }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--marca); 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: 100%; 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); }

.conteudo { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.faixa { display: flex; justify-content: flex-end; align-items: center; padding: var(--e3) var(--e6); background: var(--superficie); border-bottom: 1px solid var(--borda); }
.ambiente { display: inline-flex; align-items: center; gap: var(--e2); padding: 2px var(--e3) 2px var(--e2); border-radius: var(--raio-pilula); background: var(--superficie-2); border: 1px solid var(--borda); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--sutil); }
.ambiente::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px var(--halo-marca); }
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-xs); line-height: var(--lh-xs); 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; }
.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-xs); line-height: var(--lh-xs); color: var(--sutil); }

/* ---------- 2c. Molde de documento: Termos e Privacidade ---------- */
.doc-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e3) var(--e6); background: linear-gradient(180deg, var(--lateral) 0%, var(--lateral-2) 100%); }
.doc-topo a.entrar { color: var(--marca); font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); text-decoration: none; }
.doc-topo a.entrar:hover { text-decoration: underline; }
main.documento { max-width: 44rem; padding: var(--e6) var(--e4) var(--e7); }
.leitura { line-height: var(--lh-md); }

/* ---------- 3. Componentes ---------- */
.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; }
.dica { margin: calc(-1 * var(--e2)) 0 var(--e4); font-size: var(--t-xs); line-height: var(--lh-xs); 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: transparent; }
.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); }
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; gap: var(--e4); margin-top: var(--e5); }
.etapa { 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 { 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-m); box-shadow: var(--sombra-1); padding: var(--e4) var(--e5); }
.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; }

/* 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 { content: "\2298"; width: 1rem; height: 1rem; margin: 0; background: none; font-size: var(--t-sm); line-height: 1rem; text-align: center; }
.selo.pausado::before { content: "\2759\2759"; width: 1rem; height: 1rem; margin: 0; background: none; font-size: 0.5rem; line-height: 1rem; letter-spacing: -1px; text-align: center; }

/* 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 { 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)); }
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.25rem; height: 1.25rem; border-radius: 50%;
  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; }

/* ---------- Telas de trabalho (etapa D): blocos recolhíveis, barra de ações, filtros, tabelas, resumo ---------- */
/* 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); }

/* tabelas: números com largura fixa e valores em destaque */
.tabela td { font-variant-numeric: tabular-nums; }
.tabela td.destaque { font-weight: 600; color: var(--texto); }

/* resumo da empresa: situação em selos no topo do cartão */
.selos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.selos-topo { margin: calc(-1 * var(--e3)) 0 var(--e5); }

/* cabeçalho da tabela fixo ao rolar listas longas (no celular a tabela vira blocos, sem cabeçalho) */
@media (min-width: 861px) {
  .tabela-envolta { max-height: calc(100vh - 12rem); overflow: auto; }
  .tabela thead th { position: sticky; top: 0; z-index: 1; }
}

/* ---------- Detalhe e acompanhamento (etapa E) ---------- */
/* 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); }
.indicador.erro .valor { color: var(--erro); }
.indicador.erro::before { background: var(--erro); }
.indicador.aviso .valor { color: var(--aviso); }
.indicador.aviso::before { background: var(--aviso); }

/* 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; }
.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(13rem, 100%), 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.peca { display: flex; 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); }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .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; }
  .lateral nav a[aria-current="page"]::before { display: 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; }
  .faixa { padding: var(--e2) var(--e4); }
  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; }
  .doc-topo { padding: var(--e3) var(--e4); }
}

/* 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); }

/* ---------- 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); }
}

/* ---------- 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); }