/*
 * Design system do Gestika SPED — segue o brand book do Gestika (v0.3, "Claro sereno" no app).
 * Referência completa: docs/DESIGN.md. Tokens em 3 camadas:
 *   1. PRIMITIVOS  (--p-*)   — as cores da marca; nenhuma tela usa direto.
 *   2. SEMÂNTICOS  (--cor-*, --raio-*, --fonte-*) — o papel de cada cor; é o que os componentes consomem.
 *   3. COMPONENTES (classes abaixo).
 * Regras: verde/âmbar/vermelho são SÓ status (nunca marca); o dourado é parcimonioso (CTA principal da página de
 * vendas, destaque de plano); status nunca só pela cor (sempre com rótulo). Contraste AA medido (ver DESIGN.md).
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fontes/inter.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fontes/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("/static/fontes/fraunces-italico.woff2") format("woff2"); }

/* ── 1 · primitivos (marca Gestika) ─────────────────────────────────────── */
:root {
  --p-teal-500: #1e7a86; --p-teal-700: #0b5563; --p-teal-900: #08323b; --p-petroleo-950: #05141a;
  --p-ouro-400: #d9b64a; --p-ouro-500: #c9a227;
  --p-tinta-900: #1c2430; --p-ardosia-500: #5b6573; --p-cinza-200: #d9dee2;
  --p-gelo-100: #eef2f5; --p-gelo-300: #e2e9ed; --p-branco: #ffffff;
  --p-nevoa-100: #e9f1f2; --p-nevoa-300: #b8cfd4; --p-ciano-300: #63cfdf;
  --p-verde-600: #2e7d5b; --p-verde-700: #24664a; --p-ambar-600: #c9852a; --p-ambar-700: #8a5a12;
  --p-vermelho-600: #c0392b;
}

/* ── 2 · semânticos ─────────────────────────────────────────────────────── */
:root {
  --cor-fundo: var(--p-gelo-100);
  --cor-superficie: var(--p-branco);
  --cor-superficie-2: #f6f8fa;
  --cor-texto: var(--p-tinta-900);
  --cor-texto-suave: var(--p-ardosia-500);
  --cor-borda: var(--p-gelo-300);
  --cor-borda-forte: var(--p-cinza-200);

  --cor-acao: var(--p-teal-700);            /* botão primário, link, foco */
  --cor-acao-hover: var(--p-teal-900);
  --cor-acao-suave: color-mix(in srgb, var(--p-teal-700) 8%, transparent);
  --cor-texto-sobre-acao: var(--p-branco);
  --cor-destaque: var(--p-ouro-500);        /* dourado: usar pouco */
  --cor-texto-sobre-destaque: var(--p-tinta-900);
  --cor-marca-fundo: var(--p-teal-900);     /* superfícies de marca (topo da página de vendas) */

  --cor-ok: var(--p-verde-700);       --cor-ok-fundo: #e9f4ee;
  --cor-aviso: var(--p-ambar-700);    --cor-aviso-fundo: #fbf3e6;   --cor-aviso-barra: var(--p-ambar-600);
  --cor-erro: var(--p-vermelho-600);  --cor-erro-fundo: #fbecea;

  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-codigo: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --raio-cartao: 14px; --raio-controle: 10px; --raio-pilula: 999px;
  --sombra-cartao: 0 1px 2px rgb(8 50 59 / .05), 0 4px 14px rgb(8 50 59 / .05);
  --sombra-elevada: 0 10px 30px rgb(8 50 59 / .12);
  --largura: 1180px;
}

/* nomes antigos (compatibilidade com trechos existentes) */
:root {
  --fundo: var(--cor-fundo); --papel: var(--cor-superficie); --texto: var(--cor-texto); --suave: var(--cor-texto-suave);
  --borda: var(--cor-borda); --primaria: var(--cor-acao); --primaria-escura: var(--cor-acao-hover);
  --ok: var(--cor-ok); --erro: var(--cor-erro); --aviso: var(--cor-aviso);
  --ok-fundo: var(--cor-ok-fundo); --erro-fundo: var(--cor-erro-fundo); --aviso-fundo: var(--cor-aviso-fundo);
  --info-fundo: var(--cor-acao-suave);
}

/* ── 3 · base e componentes ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* botões são inline-flex: sem isto, "hidden" não esconde */
body { margin: 0; font: 15px/1.5 var(--fonte-corpo); color: var(--cor-texto); background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--cor-acao); }
:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }

/* marca (wordmark tipográfico, brand book: sem símbolo) */
.marca { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; color: var(--cor-acao);
  text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.marca span { font-family: var(--fonte-corpo); font-weight: 600; font-size: .62em; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cor-texto-sobre-destaque); background: var(--cor-destaque);
  border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 3px; }

/* app: topo e navegação */
header { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
header .conteudo { display: flex; align-items: center; gap: 32px; height: 60px; }
header h1 { margin: 0; font-size: inherit; }
nav { display: flex; gap: 4px; }
nav a { color: var(--cor-texto-suave); text-decoration: none; padding: 7px 12px; border-radius: var(--raio-controle); font-weight: 500; }
nav a:hover { background: var(--cor-fundo); color: var(--cor-texto); }
nav a.ativa { background: var(--cor-acao-suave); color: var(--cor-acao); font-weight: 600; }
header .usuario { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--cor-texto-suave); font-size: 14px; }
header .usuario form { margin: 0; }
.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
main.conteudo { padding-top: 28px; padding-bottom: 56px; }
h2 { font-size: 24px; margin: 0 0 4px; }
.sub { color: var(--cor-texto-suave); margin: 0 0 20px; }

/* cartões */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao);
  padding: 22px; margin-bottom: 20px; box-shadow: var(--sombra-cartao); }
.cartao h3 { margin: 0 0 12px; font-size: 18px; }
.dica { color: var(--cor-texto-suave); font-size: 13px; }
.vazio { color: var(--cor-texto-suave); text-align: center; padding: 24px; }

/* botões */
button, .botao { background: var(--cor-acao); color: var(--cor-texto-sobre-acao); border: 1px solid transparent;
  border-radius: var(--raio-controle); padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.4; transition: background .15s, box-shadow .15s; }
button:hover, .botao:hover { background: var(--cor-acao-hover); }
.botao.destaque, button.destaque { background: var(--cor-destaque); color: var(--cor-texto-sobre-destaque); }
.botao.destaque:hover, button.destaque:hover { background: var(--p-ouro-400); }
.botao.contorno, button.contorno { background: transparent; color: var(--cor-acao); border-color: var(--cor-acao); }
.botao.contorno:hover, button.contorno:hover { background: var(--cor-acao-suave); }
.botao.grande { padding: 13px 24px; font-size: 16px; }
button.secundario { background: transparent; color: var(--cor-acao); padding: 2px 6px; font-weight: 500; font-size: 13px; border: 0; }
button.secundario:hover { background: var(--cor-acao-suave); }
button.perigo { background: transparent; color: var(--cor-erro); border: 1px solid var(--cor-erro); padding: 6px 14px; }
button.perigo:hover { background: var(--cor-erro-fundo); }
button.secundario.perigo { border: 0; padding: 2px 6px; }
button:disabled { background: var(--cor-borda-forte); color: var(--cor-texto-suave); cursor: not-allowed; }
.htmx-request button[type=submit], button.htmx-request { opacity: .6; pointer-events: none; }

/* formulários */
label { font-weight: 600; font-size: 13px; color: var(--cor-texto-suave); display: block; margin-bottom: 4px; }
input[type=month], select, .formulario input { font: inherit; padding: 9px 11px; border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle); background: var(--cor-superficie); color: var(--cor-texto); }
input:focus, select:focus { outline: none; border-color: var(--cor-acao); box-shadow: 0 0 0 3px var(--cor-acao-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.formatos { display: flex; gap: 16px; }
.formatos label { font-weight: 500; color: var(--cor-texto); display: flex; gap: 6px; align-items: center; }
.formulario { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.formulario input { width: 100%; }
.formulario .dica { margin: 4px 0 0; }
.formulario-linha { margin-top: 10px; }
.rodape-form { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }

/* tabelas (números sempre tabulares) */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave);
  border-bottom: 1px solid var(--cor-borda-forte); padding: 8px; font-weight: 600; }
td { border-bottom: 1px solid var(--cor-borda); padding: 8px; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.acoes { white-space: nowrap; }
table.ficha { width: auto; margin-bottom: 12px; }
table.ficha th { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 6px 24px 6px 0; border: 0; }
table.ficha td { border: 0; padding: 6px 0; }

/* selos (status: cor + rótulo) */
.selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--raio-pilula); white-space: nowrap; }
.selo.concluida, .selo.vigente { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.selo.erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.selo.executando, .selo.pendente { background: var(--cor-acao-suave); color: var(--cor-acao); }
.selo.substituida { background: var(--cor-fundo); color: var(--cor-texto-suave); }

/* avisos */
.avisos { background: var(--cor-aviso-fundo); color: var(--cor-aviso); border-radius: var(--raio-controle); padding: 10px 14px;
  margin-bottom: 12px; font-size: 14px; }
.avisos p { margin: 2px 0; }
.avisos.erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.avisos.ok { background: var(--cor-ok-fundo); color: var(--cor-ok); }
.msg { white-space: pre-wrap; font-size: 13px; color: var(--cor-texto-suave); margin: 4px 0 0; }
#aviso-xlsx { color: var(--cor-aviso); font-size: 13px; }

/* progresso e medidores */
.barra { height: 6px; background: var(--cor-fundo); border-radius: 3px; overflow: hidden; margin-top: 6px; min-width: 140px; }
.barra div { height: 100%; background: var(--cor-acao); transition: width .4s; }
.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.medidor-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.medidor-cab strong { font-variant-numeric: tabular-nums; }
.medidor.alto .barra div, .medidor.cheio .barra div { background: var(--cor-aviso-barra); }
.medidor .limite { color: var(--cor-aviso); font-size: 12px; margin-top: 4px; }

/* importar e relatórios */
.soltar { border: 2px dashed var(--cor-borda-forte); border-radius: var(--raio-cartao); padding: 28px; text-align: center; background: var(--cor-superficie-2); }
.soltar input[type=file] { margin: 8px 0 12px; }
.soltar .escolhas { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; text-align: left; }
.soltar .escolhas label { margin-bottom: 0; }
.bloco { border: 1px solid var(--cor-borda); border-radius: var(--raio-controle); margin-bottom: 12px; }
.bloco-cab { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--cor-superficie-2);
  border-radius: var(--raio-controle) var(--raio-controle) 0 0; }
.bloco-cab strong { font-size: 14px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 2px 16px; padding: 8px 12px; }
.grade label { font-weight: 400; color: var(--cor-texto); display: flex; gap: 8px; align-items: baseline; font-size: 14px; margin: 0; padding: 3px 0; cursor: pointer; }
.grade .cod { font-weight: 600; font-family: var(--fonte-codigo); }
.grade .qtd { color: var(--cor-texto-suave); font-size: 12px; margin-left: auto; white-space: nowrap; }
.grade .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); }
.empresa-cab { display: flex; justify-content: space-between; align-items: baseline; }
.zona-perigo { border-color: var(--cor-erro-fundo); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.acoes form { margin: 0; }

/* páginas de acesso (entrar, cadastro, senha) */
body.publica { min-height: 100vh; background:
  radial-gradient(70% 45% at 50% -10%, color-mix(in srgb, var(--p-teal-500) 16%, transparent), transparent 70%), var(--cor-fundo); }
.acesso { width: 100%; max-width: 440px; margin: 0 auto; padding: 56px 16px; }
.acesso .marca { display: block; text-align: center; margin: 0 0 24px; font-size: 24px; }
.acesso .cartao { padding: 28px; }
.acesso h2 { margin-bottom: 8px; }
.links { text-align: center; font-size: 14px; color: var(--cor-texto-suave); }
.links a { color: var(--cor-acao); }
.rodape-legal { text-align: center; font-size: 13px; color: var(--cor-texto-suave); margin-top: 24px; }
.rodape-legal a { color: var(--cor-texto-suave); }

/* documentos (termos, privacidade) */
.documento { max-width: 780px; margin: 0 auto; padding: 40px 20px 72px; }
.documento h1 { font-size: 36px; margin: 16px 0 4px; }
.documento h2 { font-size: 22px; margin: 32px 0 8px; }
.documento p, .documento li { line-height: 1.65; }
.documento .rascunho { background: var(--cor-aviso-fundo); color: var(--cor-aviso); border-radius: var(--raio-controle);
  padding: 12px 16px; font-size: 14px; }

/* ── casca do app: menu lateral petróleo (protótipo "A", escolhido em 24/09/2026) ─────────── */
.casca { display: flex; min-height: 100vh; }
/* a faixa (aside) vai do topo ao fim da página; só o conteúdo do menu fica preso no topo ao rolar */
.lateral { width: 256px; flex: none; background: var(--p-teal-900); position: relative; z-index: 20; }
.lateral-fixa { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px;
  padding: 24px 16px; box-sizing: border-box; background: var(--p-teal-900); }
.lateral .marca { color: var(--p-nevoa-100); padding: 0 8px; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--raio-controle);
  color: #8ba4ab; font-weight: 500; text-decoration: none; }
.menu a svg, .ico svg, svg.ico { width: 18px; height: 18px; flex: none; }
.menu a:hover { background: rgb(233 241 242 / .06); color: var(--p-nevoa-100); }
.menu a.ativa { background: rgb(63 193 212 / .14); color: var(--p-nevoa-100); font-weight: 600; }
.menu a.ativa svg { color: var(--p-ciano-300); }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.lateral-plano { display: flex; flex-direction: column; gap: 6px; background: #0d2b34; border: 1px solid rgb(233 241 242 / .08);
  border-radius: 12px; padding: 14px; color: #8ba4ab; font-size: 12px; text-decoration: none; }
.lateral-plano:hover { border-color: rgb(233 241 242 / .2); }
.lateral-plano-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.lateral-plano-cab strong { color: var(--p-nevoa-100); font-size: 14px; }
.lateral-plano .selo.vigente { background: rgb(76 199 147 / .14); color: #4cc793; }
.lateral-plano .selo.substituida { background: rgb(233 241 242 / .08); color: var(--p-nevoa-300); }
.lateral-medida { display: flex; justify-content: space-between; margin-top: 6px; }
.lateral-medida b { color: var(--p-nevoa-100); font-weight: 500; }
.lateral-plano .barra { display: block; margin: 0; background: rgb(233 241 242 / .1); min-width: 0; }
.lateral-plano .barra span { display: block; height: 100%; background: #3fc1d4; border-radius: 3px; }
.lateral-usuario { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--p-teal-500); color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: 13px; flex: none; }
.lateral-usuario-nome { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.lateral-usuario-nome b { color: var(--p-nevoa-100); font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario-nome small { color: #8ba4ab; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario form { margin: 0; }
button.sair { background: transparent; color: #8ba4ab; padding: 6px; border-radius: 8px; }
button.sair:hover { background: rgb(233 241 242 / .08); color: var(--p-nevoa-100); }
button.sair svg { width: 18px; height: 18px; display: block; }
main.area { flex-grow: 1; min-width: 0; padding: clamp(24px, 2.4vw, 44px) clamp(16px, 2.8vw, 56px) 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
main.area > * { margin: 0; }
main.area .cartao { margin-bottom: 0; }

.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cabecalho-pagina h2 { font-size: 30px; margin: 0 0 6px; }
.cabecalho-pagina p { margin: 0; color: var(--cor-texto-suave); font-size: 15px; max-width: 80ch; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-acao); }
/* telas ocupam toda a largura: coluna lateral cresce com a tela; texto corrido limitado a ~80 caracteres */
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 440px); gap: clamp(16px, 1.6vw, 28px); align-items: stretch; }
.lado-a-lado > .principal { min-width: 0; }
.lado-a-lado > .coluna { display: flex; flex-direction: column; gap: 16px; }
main.area > p.dica, .cartao > p.dica, .avisos p { max-width: 80ch; }
.ico-chip { width: 42px; height: 42px; border-radius: 12px; background: var(--cor-acao-suave); color: var(--cor-acao);
  display: grid; place-items: center; flex: none; }
.ico-chip svg { width: 20px; height: 20px; }
.botao svg, button svg { width: 17px; height: 17px; flex: none; }
.botao, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* importar */
.envio { border: 2px dashed #b9cdd2; border-radius: var(--raio-cartao); background: #f6fafa; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transition: background .15s, border-color .15s; }
.envio.arrastando { background: var(--cor-acao-suave); border-color: var(--cor-acao); }
.envio-icone { width: 64px; height: 64px; border-radius: 18px; background: var(--cor-acao); color: #fff; display: grid; place-items: center; }
.envio-icone svg { width: 28px; height: 28px; }
.envio h3 { font-size: 22px; margin: 0; }
.envio p { margin: 0; color: var(--cor-texto-suave); max-width: 60ch; }
.envio input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.envio .escolher { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.envio .selecionados { font-size: 14px; font-weight: 600; color: var(--cor-acao); min-height: 20px; }
.envio .tipos { display: flex; gap: 6px; }
.envio .tipos span { font-family: var(--fonte-codigo); font-size: 12px; background: var(--cor-fundo); border-radius: 999px; padding: 2px 10px; color: var(--cor-texto-suave); }
.medida { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.medida strong { font-variant-numeric: tabular-nums; }
.dica-cartao { display: flex; gap: 12px; font-size: 13px; }
.dica-cartao svg { width: 20px; height: 20px; color: var(--cor-acao); flex: none; }
.lista-envios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); align-items: start; gap: 12px; }
.envio-item { border: 1px solid var(--cor-borda); border-radius: 12px; padding: 14px 16px; }
.envio-item-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.envio-item-cab .quando { margin-left: auto; color: var(--cor-texto-suave); font-size: 13px; }
.envio-item .barra { margin-top: 12px; }
.linhas-envio { margin-top: 8px; display: flex; flex-direction: column; }
.linha-envio { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14px; }
.linha-envio svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.linha-envio.ok svg { color: var(--cor-ok); } .linha-envio.erro svg { color: var(--cor-erro); } .linha-envio.erro { color: var(--cor-erro); }
.linha-envio.neutra svg { color: var(--cor-texto-suave); } .linha-envio.neutra { color: var(--cor-texto-suave); }

/* escriturações: régua de meses */
.empresa { padding: 22px 24px; }
.empresa-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.empresa-topo .nome { flex-grow: 1; min-width: 0; }
.empresa-topo h3 { margin: 0; font-size: 19px; }
.regua-ano { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.regua-ano > strong { width: 44px; font-size: 13px; }
.regua { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; flex-grow: 1; }
.mes { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--cor-texto-suave); }
.mes i { display: block; width: 100%; height: 24px; border-radius: 7px; box-sizing: border-box; }
.mes.v i { background: var(--cor-acao); }
.mes.r i { background: var(--p-teal-500); box-shadow: inset 0 0 0 2px var(--cor-destaque); }
.mes.n i { background: var(--cor-superficie); border: 1.5px dashed #c5d0d6; }
.mes.f i { background: var(--cor-fundo); }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--cor-texto-suave); }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; box-sizing: border-box; }
.empresa details { margin-top: 16px; overflow-x: auto; }
.empresa table td, .empresa table th { white-space: nowrap; }
.empresa table td.periodo { white-space: normal; }
/* uma empresa por linha; duas lado a lado em monitores muito largos */
.lista-empresas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 900px), 1fr)); gap: 16px; align-items: start; }
.lista-empresas > :not(.empresa) { grid-column: 1 / -1; }
.empresa summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cor-acao); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.empresa summary::-webkit-details-marker { display: none; }
.empresa summary svg { width: 16px; height: 16px; transition: transform .15s; }
.empresa details[open] summary svg { transform: rotate(180deg); }
.empresa table { margin-top: 10px; }
td.periodo strong { font-variant-numeric: tabular-nums; }

/* relatórios (R2) */
.passo { display: flex; gap: 16px; }
.passo-num { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.passo-num b { font-family: var(--fonte-titulo); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-acao); color: #fff; font-size: 15px; font-weight: 600; }
.passo-num i { flex-grow: 1; width: 2px; background: var(--cor-borda); }
.passo-corpo { flex-grow: 1; min-width: 0; padding-bottom: 22px; }
.passo-corpo > h3 { font-family: var(--fonte-corpo); font-size: 15px; font-weight: 600; margin: 4px 0 12px; }
.passo:last-child .passo-corpo { padding-bottom: 0; } .passo:last-child .passo-num i { display: none; }
.abas { display: inline-flex; background: var(--cor-fundo); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.abas button { background: transparent; color: var(--cor-texto-suave); font-weight: 500; font-size: 13px; padding: 6px 14px; border-radius: 8px; }
.abas button:hover { background: rgb(255 255 255 / .6); }
.abas button[aria-selected=true] { background: #fff; color: var(--cor-texto); font-weight: 600; box-shadow: 0 1px 2px rgb(8 50 59 / .1); }
.modelos { display: flex; flex-direction: column; gap: 4px; }
.grupo-modelos { margin: 14px 0 2px; padding: 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); }
.grupo-modelos:first-child { margin-top: 0; }
.modelo { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; cursor: pointer; margin: 0;
  font-weight: 400; color: var(--cor-texto); font-size: 14px; }
.modelo:hover { background: var(--cor-superficie-2); }
.modelo:has(input:checked) { background: #f6fafa; box-shadow: inset 0 0 0 1.5px var(--cor-acao); }
.modelo.sem-dados { opacity: .55; cursor: not-allowed; }
.modelo input { accent-color: var(--cor-acao); width: 16px; height: 16px; margin: 0; }
.modelo .txt { flex-grow: 1; min-width: 0; } .modelo .txt b { display: block; font-weight: 600; }
.modelo .regs { font-family: var(--fonte-codigo); font-size: 12px; color: var(--cor-texto-suave); width: clamp(110px, 16%, 240px); }
.modelo .qtd { width: 80px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.formatos-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.formato { display: flex; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--cor-borda); cursor: pointer; margin: 0;
  font-weight: 400; color: var(--cor-texto); }
.formato:has(input:checked) { border: 2px solid var(--cor-acao); background: #f6fafa; padding: 13px; }
.formato input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formato svg { width: 20px; height: 20px; color: var(--cor-acao); flex: none; }
.formato b { display: block; font-size: 14px; } .formato small { color: var(--cor-texto-suave); font-size: 12px; }
.resumo { border: 2px solid var(--cor-acao); display: flex; flex-direction: column; gap: 14px; }  /* fixo no topo da coluna: sticky cobria a lista "Gerados" (print do usuário, 24/09/2026) */
.resumo h3 { margin: 0; font-size: 20px; }
.resumo .regs-escolhidos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.reg-chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 10px; border-radius: 9px; background: #e7eff1;
  border: 1px solid #b9cdd2; font-size: 13px; }
.reg-chip b { font-family: var(--fonte-codigo); color: var(--p-teal-900); } .reg-chip small { color: var(--cor-texto-suave); }
.resumo table td { padding: 7px 0; font-size: 14px; } .resumo table td:last-child { text-align: right; }
.resumo .total { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; color: var(--cor-acao); }
.gerado { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.gerado:last-child { border-bottom: 0; }
.gerado .ico-chip { width: 36px; height: 36px; border-radius: 10px; }
.gerado .ico-chip svg { width: 17px; height: 17px; }
.gerado .txt { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--cor-texto-suave); }
.gerado .txt b { display: block; font-family: var(--fonte-codigo); font-size: 13px; color: var(--cor-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gerado .txt b.titulo { font-family: inherit; font-size: 14px; font-weight: 600; white-space: normal; }
.gerado .barra { width: 80px; min-width: 0; margin: 0; }
.gerado .botao { padding: 6px 12px; font-size: 13px; }

/* meu plano (C na casca A) */
.faixa-assinatura { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.faixa-assinatura .ico-chip { width: 48px; height: 48px; background: var(--cor-acao); color: #fff; border-radius: 14px; }
.faixa-assinatura .dados { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.faixa-assinatura .dados small { display: block; color: var(--cor-texto-suave); font-size: 12px; }
.faixa-assinatura .acoes { margin: 0 0 0 auto; }
.grade-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; padding-top: 10px; }
.plano-cartao { position: relative; display: flex; flex-direction: column; gap: 12px; }
.plano-cartao.atual { border: 2px solid var(--cor-acao); }
.plano-cartao.recomendado { border: 2px solid var(--cor-destaque); }
.plano-cartao .fita { position: absolute; top: -12px; left: 20px; background: var(--cor-destaque); color: var(--cor-texto-sobre-destaque);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plano-cartao h3 { margin: 0; font-size: 20px; }
.plano-cartao .preco strong { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plano-cartao .caber { border-top: 1px solid var(--cor-borda); padding-top: 12px; font-size: 12px; color: var(--cor-texto-suave); }
.plano-cartao .caber .barra { height: 8px; margin: 6px 0; min-width: 0; }
.plano-cartao .caber.nao-cabe { color: var(--cor-aviso); } .plano-cartao .caber.nao-cabe .barra div { background: var(--cor-aviso-barra); }
.plano-cartao .fim { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.plano-cartao .fim form, .plano-cartao .fim button { width: 100%; }

/* notebooks: o menu vira uma faixa de ícones (76 px) e abre por cima ao passar o mouse ou navegar pelo teclado */
@media (min-width: 761px) and (max-width: 1439px) {
  .lateral { width: 76px; }
  .lateral-fixa { width: 76px; padding: 22px 14px; overflow: hidden; transition: width .18s, box-shadow .18s; }
  .lateral .marca { font-size: 0; padding: 0; text-align: center; }
  .lateral .marca::before { content: "G"; font-size: 24px; color: var(--p-nevoa-100); }
  .lateral .marca span { display: none; }
  .menu a { font-size: 0; justify-content: center; padding: 12px 0; gap: 0; }
  .menu a svg { width: 20px; height: 20px; }
  .lateral-plano, .lateral-usuario-nome, .lateral-usuario form { display: none; }
  .lateral-usuario { justify-content: center; padding: 0; }
  .lateral:hover .lateral-fixa, .lateral:focus-within .lateral-fixa { width: 256px; box-shadow: 8px 0 30px rgb(5 20 26 / .35); }
  .lateral:hover .marca, .lateral:focus-within .marca { font-size: 20px; text-align: left; padding: 0 8px; }
  .lateral:hover .marca::before, .lateral:focus-within .marca::before { content: none; }
  .lateral:hover .marca span, .lateral:focus-within .marca span { display: inline; }
  .lateral:hover .menu a, .lateral:focus-within .menu a { font-size: 15px; justify-content: flex-start; padding: 11px 14px; gap: 12px; }
  .lateral:hover .lateral-plano, .lateral:focus-within .lateral-plano { display: flex; }
  .lateral:hover .lateral-usuario-nome, .lateral:focus-within .lateral-usuario-nome { display: flex; }
  .lateral:hover .lateral-usuario form, .lateral:focus-within .lateral-usuario form { display: block; }
  .lateral:hover .lateral-usuario, .lateral:focus-within .lateral-usuario { justify-content: flex-start; padding: 0 6px; }
}
@media (max-width: 1100px) {
  .lado-a-lado { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .casca { flex-direction: column; }
  .lateral { width: auto; }
  .lateral-fixa { height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
  .menu { flex-direction: row; overflow-x: auto; max-width: 100%; }
  .menu a { padding: 8px 10px; white-space: nowrap; }
  .lateral-rodape { display: none; }
  main.area { padding: 20px 16px 48px; }
  .cabecalho-pagina { flex-wrap: wrap; align-items: flex-start; }
  .envio { padding: 28px 16px; }
  .empresa { padding: 18px 16px; }
  .regua-ano { gap: 8px; } .regua-ano > strong { width: 34px; } .regua { gap: 3px; }
  .faixa-assinatura .acoes { margin-left: 0; }
  .grade-planos { grid-template-columns: 1fr; }
  .modelo .regs { display: none; }
  header .conteudo { height: auto; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
  nav { overflow-x: auto; max-width: 100%; }
  .grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }