/* Vigia CNPJ — CSS à mão, sem build. Painel de trabalho: denso, legível, com o estado em cor e forma. */

/* Fontes servidas pelo próprio app (licença OFL), sem depender de CDN. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --tinta: #0d1630;
  --texto: #232c42;
  --suave: #5d6781;
  --linha: #e2e6ef;
  --fundo: #f4f6fb;
  --papel: #ffffff;
  --marca: #1f3fbf;
  --marca-forte: #172f8f;
  --marca-clara: #e8edfc;
  --noite: #0f1b3d;
  --critica: #c0262d;
  --critica-clara: #fdecec;
  --atencao: #a85d00;
  --atencao-clara: #fff3dc;
  --info: #3b5bdb;
  --info-clara: #edf1fe;
  --ok: #18794e;
  --ok-clara: #e6f6ee;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(13, 22, 48, .06), 0 6px 20px rgba(13, 22, 48, .05);
  --sombra-forte: 0 24px 48px -16px rgba(13, 22, 48, .3);
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #eef1f8; --texto: #d7dceb; --suave: #97a0b8; --linha: #26304a; --fundo: #0a1020; --papel: #111a2e;
    --marca: #7b93ff; --marca-forte: #a9b8ff; --marca-clara: #18224a; --noite: #070d1c;
    --critica: #ff8a8f; --critica-clara: #3a1418; --atencao: #ffbe5c; --atencao-clara: #352409;
    --info: #9cb0ff; --info-clara: #19214a; --ok: #6ee0a6; --ok-clara: #0d2a1e;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #eef1f8; --texto: #d7dceb; --suave: #97a0b8; --linha: #26304a; --fundo: #0a1020; --papel: #111a2e;
  --marca: #7b93ff; --marca-forte: #a9b8ff; --marca-clara: #18224a; --noite: #070d1c;
  --critica: #ff8a8f; --critica-clara: #3a1418; --atencao: #ffbe5c; --atencao-clara: #352409;
  --info: #9cb0ff; --info-clara: #19214a; --ok: #6ee0a6; --ok-clara: #0d2a1e;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--fonte); color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
/* Coluna de altura cheia: em página curta (entrar, descadastro, 404) o rodapé desce até o pé da janela; em página longa rola junto. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.coluna { flex: 1 0 auto; display: flex; flex-direction: column; }
/* width: com as margens automáticas do .miolo, o item flex encolheria até o conteúdo. */
.coluna > main, body > main { flex: 1 0 auto; width: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: var(--marca); text-underline-offset: 3px; }
h1, h2, h3 { color: var(--tinta); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
.suave { color: var(--suave); }
.pequeno { font-size: .86rem; }
.centro { text-align: center; }
.num, td.num, .numero b { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Estrutura ---------------------------------------------------------- */

/* Cabeçalho das páginas públicas; quem está logado usa a sidebar (bloco "Sidebar" no fim). */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--noite); color: #dfe5f7; }
.topo-dentro { display: flex; align-items: center; gap: 6px; max-width: 1180px; min-height: 58px; margin: 0 auto; padding: 10px 16px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -.01em; margin-right: 10px; line-height: 1; white-space: nowrap; }
.logo-marca { width: 30px; height: 30px; border-radius: 9px; background: #2a49d6; display: grid; place-items: center; color: #fff; position: relative; }
.logo-marca::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 2px #2a49d6; }
.topo-acoes { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.miolo { max-width: 1180px; margin: 0 auto; padding: 22px 16px 64px; }
.estreito { max-width: 520px; margin-inline: auto; }
.medio { max-width: 780px; margin-inline: auto; }
.cabeca-pagina { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.cabeca-pagina h1 { margin: 0; }
.cabeca-pagina p { margin: 4px 0 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Componentes -------------------------------------------------------- */

.btn { --c: var(--marca); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--c); color: #fff; font: 600 .95rem/1 var(--fonte); text-decoration: none; cursor: pointer; transition: filter .15s, transform .08s; white-space: nowrap; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.98); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 2px; }
.btn-grande { min-height: 52px; padding: 0 22px; font-size: 1.02rem; border-radius: 12px; }
.btn-largo { width: 100%; }
.btn-borda { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha); }
.btn-claro { background: var(--marca-clara); color: var(--marca-forte); }
.btn-fantasma { background: transparent; color: var(--suave); padding: 0 10px; }
.btn-pequeno { min-height: 34px; padding: 0 12px; font-size: .86rem; border-radius: 9px; }
.btn-perigo { --c: var(--critica); }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Cabeçalho público: "Entrar" e "Começar grátis" são um par, mesma altura e fonte; o primeiro só com a borda.
   Prefixo .topo-acoes: estas regras vêm depois do .btn e ainda assim precisam ganhar dele. */
.topo-acoes .btn-topo { min-height: 38px; padding: 0 14px; font-size: .88rem; border-radius: 10px; gap: 6px; flex: none; white-space: nowrap; }
.topo-acoes .btn-topo-borda { background: transparent; color: #dfe5f7; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.topo-acoes .btn-topo-borda:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); filter: none; }
.topo-acoes .btn-topo-borda svg { display: none; }
/* Celular: os dois continuam na linha do logo; "Entrar" encolhe, ganha o ícone e perde a borda, mas nunca some. */
@media (max-width: 480px) {
  .topo-dentro { padding-inline: 12px; }
  .topo .logo { margin-right: 4px; gap: 8px; }
  .topo-acoes { gap: 6px; }
  .topo-acoes .btn-topo { padding: 0 11px; font-size: .84rem; }
}
@media (max-width: 374px) {
  .topo-acoes .btn-topo { padding: 0 9px; font-size: .8rem; }
  .topo-acoes .btn-topo-borda { padding: 0 4px; box-shadow: none; gap: 4px; }
  .topo-acoes .btn-topo-borda svg { display: block; }
}
/* Tela muito estreita (320 px): o nome sai e fica a marca; os dois botões continuam inteiros. */
@media (max-width: 340px) { .topo .logo-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }
.caixa > h2:first-child, .caixa > h3:first-child { margin-top: 0; }
.caixa-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.caixa-cabeca h2, .caixa-cabeca h3 { margin: 0; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-weight: 600; font-size: .9rem; color: var(--tinta); margin-bottom: 6px; }
.campo small { display: block; color: var(--suave); margin-top: 6px; font-size: .82rem; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=time], textarea, select { width: 100%; min-height: 44px; padding: 10px 12px; font: .98rem/1.4 var(--fonte); color: var(--tinta); background: var(--papel); border: 1.5px solid var(--linha); border-radius: 10px; }
textarea { min-height: 160px; resize: vertical; font-family: var(--mono); font-size: .9rem; }
input:focus, textarea:focus, select:focus { border-color: var(--marca); outline: none; }
input[type=file] { max-width: 100%; font: .9rem var(--fonte); }
.campo-erro input, .campo-erro textarea { border-color: var(--critica); }
.erro { color: var(--critica); font-size: .86rem; margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.grande-input { font-size: 1.3rem !important; letter-spacing: .1em; text-align: center; min-height: 56px !important; font-variant-numeric: tabular-nums; }

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--info-clara); color: var(--info); margin-bottom: 14px; }
.aviso svg { flex: none; margin-top: 2px; }
.aviso p:last-child { margin: 0; }
.aviso-critica { background: var(--critica-clara); color: var(--critica); }
.aviso-atencao { background: var(--atencao-clara); color: var(--atencao); }
.aviso-ok { background: var(--ok-clara); color: var(--ok); }

.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--fundo); color: var(--suave); }
.pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pilula-ok { background: var(--ok-clara); color: var(--ok); }
.pilula-critica { background: var(--critica-clara); color: var(--critica); }
.pilula-atencao { background: var(--atencao-clara); color: var(--atencao); }
.pilula-info { background: var(--info-clara); color: var(--info); }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 600; background: var(--fundo); color: var(--suave); border: 1px solid var(--linha); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; background: var(--marca-clara); color: var(--marca-forte); }

.toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: 12px; box-shadow: var(--sombra-forte); font-weight: 600; display: flex; gap: 10px; align-items: center; animation: sobe .25s ease, some .3s ease 4.5s forwards; max-width: calc(100% - 32px); }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes some { to { opacity: 0; visibility: hidden; } }

.grade { display: grid; gap: 16px; }
.grade > * { min-width: 0; }
@media (min-width: 980px) { .grade-painel { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .grade-ficha { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }
.lista-limpa { list-style: none; padding: 0; margin: 0; }

/* ---- Números do topo ---------------------------------------------------- */

.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numero { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; display: grid; gap: 2px; position: relative; overflow: hidden; }
.numero b { font-size: 1.7rem; color: var(--tinta); letter-spacing: -.02em; line-height: 1.1; }
.numero span { font-size: .82rem; color: var(--suave); }
.numero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--linha); }
.numero-critica::before { background: var(--critica); }
.numero-critica b { color: var(--critica); }
.numero-atencao::before { background: var(--atencao); }
.numero-ok::before { background: var(--ok); }
.numero[aria-current] { outline: 2px solid var(--marca); outline-offset: -2px; }

/* ---- Tabela da carteira ------------------------------------------------- */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtros input[type=search] { flex: 1 1 220px; min-height: 38px; }
.filtros select { width: auto; max-width: 100%; min-height: 38px; }
/* position: o .sr (absoluto) dentro de uma tabela larga estourava a página inteira, não só a caixa que rola. */
.rolagem { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th { color: var(--suave); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--marca-clara) 45%, transparent); }
.tabela .linha-problema td:first-child { box-shadow: inset 3px 0 0 var(--critica); }
.tabela a.nome { color: var(--tinta); font-weight: 600; text-decoration: none; }
.tabela a.nome:hover { text-decoration: underline; }
.tabela .sub { display: block; color: var(--suave); font-size: .8rem; }
.paginacao { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* No celular a tabela vira lista de cartões. */
@media (max-width: 720px) {
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
  .tabela-cartoes td { border: 0; padding: 0; }
  .tabela-cartoes td.so-largo { display: none; }
  .tabela-cartoes td:nth-child(2) { grid-row: 1; grid-column: 2; }
  .tabela-cartoes .linha-problema { box-shadow: inset 3px 0 0 var(--critica); padding-left: 12px; }
  .tabela-cartoes .linha-problema td:first-child { box-shadow: none; }
}

/* ---- Alertas ------------------------------------------------------------ */

.alerta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.alerta:first-child { border-top: 0; }
.alerta-icone { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; grid-row: span 2; }
.alerta-critica .alerta-icone { background: var(--critica-clara); color: var(--critica); }
.alerta-atencao .alerta-icone { background: var(--atencao-clara); color: var(--atencao); }
.alerta-info .alerta-icone { background: var(--info-clara); color: var(--info); }
.alerta-titulo { font-weight: 700; color: var(--tinta); line-height: 1.3; }
.alerta-titulo a { color: inherit; text-decoration: none; }
.alerta-titulo a:hover { text-decoration: underline; }
.alerta-detalhe { color: var(--suave); font-size: .84rem; }
.alerta-de-para { font-size: .84rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.alerta-de-para s { color: var(--suave); }
.alerta-de-para b { color: var(--tinta); }
.alerta-dica { grid-column: 2; font-size: .84rem; background: var(--fundo); border-radius: 8px; padding: 8px 10px; margin-top: 4px; }

.status-verificacao { display: grid; gap: 8px; font-size: .88rem; }
.status-verificacao div { display: flex; justify-content: space-between; gap: 10px; }
.status-verificacao dt { color: var(--suave); }
.status-verificacao dd { margin: 0; min-width: 0; font-weight: 600; color: var(--tinta); text-align: right; overflow-wrap: anywhere; }

/* ---- Ficha do CNPJ ------------------------------------------------------ */

.ficha-topo { display: grid; gap: 6px; }
.ficha-topo h1 { font-size: 1.5rem; margin: 0; }
.dados { display: grid; gap: 0; margin: 0; }
.dados div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: .9rem; }
.dados div:first-child { border-top: 0; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--linha); display: grid; gap: 16px; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--papel); border: 3px solid var(--info); }
.linha-tempo li.g-critica::before { border-color: var(--critica); }
.linha-tempo li.g-atencao::before { border-color: var(--atencao); }
.linha-tempo time { display: block; font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ---- Importação (Adicionar e Conferir, no app e no admin) --------------- */

/* Volta para a tela anterior, alinhada com o texto (o padding do btn-fantasma ficaria sobrando). */
.link-volta { padding-left: 0; margin-bottom: 8px; }
.link-volta:hover { color: var(--tinta); }

/* Etapas: rótulo em cima, barras curtas embaixo (largas, pareciam uma barra de carregamento). */
.etapas { margin: 4px 0 14px; }
.etapas p { margin: 0 0 8px; font-size: .82rem; color: var(--suave); font-weight: 600; }
.etapas b { color: var(--marca); font-weight: 700; }
.passos { display: flex; gap: 6px; max-width: 200px; }
.passos i { flex: 1; height: 4px; border-radius: 4px; background: var(--linha); }
.passos i.feito { background: var(--marca); }
.apoio { max-width: 62ch; margin-bottom: 20px; }

/* Blocos de um formulário dentro de uma caixa só: cabeça com ícone, separados por linha. */
.blocos { padding: 0; }
.bloco { padding: 20px; min-width: 0; }
.bloco + .bloco { border-top: 1px solid var(--linha); }
.bloco-cabeca { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bloco-cabeca h2 { margin: 0; font-size: 1.05rem; }
.bloco-cabeca h2 label { cursor: pointer; }
.bloco-cabeca .chip { margin-left: auto; font-variant-numeric: tabular-nums; }
.bloco-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--marca-clara); color: var(--marca-forte); }
.bloco .campo { margin-bottom: 0; }
.bloco textarea { min-height: 150px; }
.chip-atencao { background: var(--atencao-clara); color: var(--atencao); }

/* Área de envio: tracejada, aceita arrastar e soltar; com arquivo, mostra o nome e o tamanho. */
.envio { position: relative; border: 1.5px dashed color-mix(in srgb, var(--suave) 50%, transparent); border-radius: 12px; background: var(--fundo); padding: 22px 16px; transition: border-color .15s, background .15s; }
.envio:hover, .envio.envio-sobre { border-color: var(--marca); background: color-mix(in srgb, var(--marca-clara) 60%, var(--fundo)); }
.envio:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 2px; }
.envio [hidden] { display: none !important; }
.envio-vazio { display: grid; justify-items: center; gap: 10px; text-align: center; }
.envio-vazio p { margin: 0; color: var(--texto); font-weight: 600; }
.envio-vazio .btn { cursor: pointer; }
.envio-tocar { display: none; }
@media (hover: none) and (pointer: coarse) { .envio-arrastar { display: none; } .envio-tocar { display: inline; } }
.envio-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--papel); color: var(--marca); box-shadow: var(--sombra); }
.envio-sobre .envio-icone { transform: translateY(-2px); transition: transform .15s; }
.envio.envio-com-arquivo { border-style: solid; border-color: color-mix(in srgb, var(--ok) 55%, var(--linha)); background: var(--ok-clara); padding: 14px 12px 14px 16px; }
.envio-com-arquivo .envio-icone { color: var(--ok); }
.envio-arquivo { display: flex; align-items: center; gap: 12px; }
.envio-texto { display: grid; min-width: 0; }
.envio-texto b { color: var(--tinta); overflow-wrap: anywhere; line-height: 1.3; }
.envio-texto small { color: var(--suave); font-size: .82rem; }
.envio-tirar { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--suave); display: grid; place-items: center; cursor: pointer; }
.envio-tirar:hover { background: var(--papel); color: var(--critica); }
.envio-ajuda { margin: 8px 0 0; color: var(--suave); font-size: .82rem; }
.envio-campo.campo-erro .envio { border-color: var(--critica); }
.envio-campo .erro[hidden] { display: none; }

/* Rodapé do formulário: botão largo e a frase de apoio. */
.importar-fim { margin-top: 18px; }
.importar-fim p { margin: 10px 0 0; text-align: center; color: var(--suave); font-size: .86rem; }

/* Conferir: CNPJs em colunas (2 no computador, 1 no celular), com o nome que veio da planilha ao lado. */
.lista-caixa { margin-bottom: 12px; }
.lista-cnpjs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 640px) { .lista-cnpjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lista-cnpjs li { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.lista-cnpjs .mono { flex: none; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--suave); font-size: .88rem; }
.lista-mais { margin: 10px 0 0; color: var(--suave); font-size: .86rem; }

/* Listas que não entram ("já estavam", "dígito errado"): fechadas, abrem no toque. */
.detalhe { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 18px; margin-bottom: 10px; box-shadow: var(--sombra); }
.detalhe summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--tinta); }
.detalhe summary::-webkit-details-marker { display: none; }
.detalhe summary small { color: var(--suave); font-weight: 500; font-size: .84rem; }
.detalhe summary::after { content: "+"; margin-left: auto; color: var(--suave); font-size: 1.2rem; line-height: 1; }
.detalhe[open] summary::after { content: "–"; }
.detalhe[open] summary { border-bottom: 1px solid var(--linha); }
.detalhe .lista-cnpjs { padding-bottom: 6px; }
.detalhe .lista-cnpjs li:last-child { border-bottom: 0; }
.detalhe .lista-mais { margin: 0 0 14px; }
.detalhe-ok { color: var(--ok); flex: none; }
.detalhe-critica { color: var(--critica); flex: none; }
.bloco .segmentos span { padding: 9px 14px; }
@media (max-width: 560px) {
  .bloco { padding: 16px; }
  .bloco .segmentos { display: flex; }
  .bloco .segmentos label { flex: 1 1 auto; }
  .bloco .segmentos span { text-align: center; }
  .detalhe { padding: 0 14px; }
}

/* Interruptor e segmentos (formulários em geral). */
.interruptor { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.interruptor input { appearance: none; width: 42px; height: 24px; border-radius: 24px; background: var(--linha); position: relative; flex: none; cursor: pointer; margin: 0; transition: background .15s; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.interruptor input:checked { background: var(--marca); }
.interruptor input:checked::after { transform: translateX(18px); }
.segmentos { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentos label { cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos span { display: block; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--suave); }
.segmentos input:checked + span { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
.segmentos input:focus-visible + span { outline: 2px solid var(--marca); }

/* ---- Início ------------------------------------------------------------- */

.heroi { background: var(--noite); color: #dfe5f7; }
.heroi-dentro { max-width: 1180px; margin: 0 auto; padding: 40px 16px 48px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .heroi-dentro { grid-template-columns: 1fr 1fr; padding: 64px 16px 72px; } }
.heroi h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.025em; }
.heroi h1 em { font-style: normal; color: #ffc04d; }
.heroi p.sub { font-size: 1.12rem; color: #b9c3e3; max-width: 36ch; }
.heroi .btn-borda { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
/* Celular: os dois botões do herói com a mesma largura, um embaixo do outro. */
@media (max-width: 480px) { .heroi .acoes .btn { flex: 1 1 100%; } }
.heroi-provas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: .9rem; color: #9fabd3; }
.heroi-provas span { display: inline-flex; align-items: center; gap: 6px; }
.email-exemplo { background: var(--papel); color: var(--texto); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); overflow: hidden; max-width: 520px; width: 100%; justify-self: center; }
.email-exemplo header { padding: 12px 16px; border-bottom: 1px solid var(--linha); display: grid; gap: 2px; font-size: .84rem; color: var(--suave); }
.email-exemplo header b { color: var(--tinta); font-size: .95rem; }
.email-exemplo .corpo { padding: 6px 16px 14px; }
.secao { max-width: 1180px; margin: 0 auto; padding: 48px 16px 8px; }
.secao-titulo { max-width: 680px; margin: 0 0 22px; }
.tres { display: grid; gap: 14px; }
@media (min-width: 780px) { .tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tres .caixa h3 { display: flex; gap: 10px; align-items: center; }
.icone-quadro { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--marca-clara); color: var(--marca-forte); flex: none; }
.planos { display: grid; gap: 14px; }
@media (min-width: 860px) { .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plano { display: grid; align-content: start; gap: 6px; position: relative; }
.plano-destaque { border: 2px solid var(--marca); }
.plano-preco { font-size: 2rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plano-preco small { font-size: .95rem; color: var(--suave); font-weight: 500; }
.plano ul { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.plano li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.plano li svg { color: var(--ok); flex: none; margin-top: 3px; }
.plano-faixa { position: absolute; top: -11px; right: 14px; }
.secao.faq { padding-bottom: 64px; }
.faq details { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 2px 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--tinta); padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--suave); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--suave); }

/* ---- Pix ---------------------------------------------------------------- */

.pix-qr { background: #fff; border-radius: 16px; padding: 12px; width: min(100%, 260px); margin: 0 auto 14px; border: 1px solid var(--linha); }
.pix-codigo { width: 100%; font: .78rem/1.4 var(--mono); padding: 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta); word-break: break-all; max-height: 84px; overflow: auto; }
.esperando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--suave); margin-top: 12px; }
.esperando i { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); animation: pulsa 1.2s infinite ease-in-out; }
@keyframes pulsa { 50% { transform: scale(.5); opacity: .4; } }
.token { display: flex; gap: 8px; align-items: center; background: var(--fundo); border: 1px dashed var(--linha); border-radius: 10px; padding: 8px 8px 8px 12px; }
.token code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: .86rem; color: var(--tinta); }
pre.codigo { background: var(--noite); color: #dfe5f7; padding: 14px; border-radius: 12px; overflow-x: auto; font: .84rem/1.5 var(--mono); }

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

/* ---- Vitrine do produto (início) ---------------------------------------- */

.heroi { position: relative; overflow: hidden; isolation: isolate; }
.heroi-radar { position: absolute; z-index: -1; width: min(760px, 120vw); right: -160px; top: 50%; transform: translateY(-50%); opacity: .9; }
.heroi-feixe { transform-origin: 300px 300px; animation: gira 9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 959px) { .heroi-radar { top: auto; bottom: -260px; transform: none; right: -220px; opacity: .6; } }

.vitrine-produto { overflow-x: clip; background: linear-gradient(180deg, var(--noite) 0, var(--noite) 38%, var(--fundo) 38%); padding: 0 16px 24px; }
.vitrine-dentro { max-width: 1180px; margin: 0 auto; position: relative; display: grid; gap: 22px; }
.notebook { margin: 0; max-width: 980px; width: 100%; }
.notebook-tela { background: #0b1226; border-radius: 16px 16px 4px 4px; padding: 12px 12px 14px; box-shadow: 0 40px 80px -30px rgba(13, 22, 48, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.notebook-tela img { width: 100%; height: auto; border-radius: 6px; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--fundo); }
.notebook-base { height: 16px; margin: 0 -4%; background: linear-gradient(180deg, #cdd3e2, #9aa3b8); border-radius: 0 0 18px 18px; position: relative; }
.notebook-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); background: #8a93a8; border-radius: 0 0 8px 8px; }
.celular { margin: 0; width: 230px; max-width: 46vw; }
.celular-tela { background: #0b1226; border-radius: 38px; padding: 9px; box-shadow: 0 30px 60px -20px rgba(13, 22, 48, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); position: relative; }
.celular-tela::before { content: ""; position: absolute; top: 16px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%); background: #0b1226; border-radius: 12px; z-index: 1; }
.celular-tela img { width: 100%; height: auto; display: block; border-radius: 30px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: var(--fundo); }
.vitrine-produto .celular { position: absolute; right: 0; bottom: 70px; }
.vitrine-notas { display: grid; gap: 10px; max-width: 980px; }
@media (min-width: 760px) { .vitrine-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitrine-notas li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--texto); }
.vitrine-notas .pilula { flex: none; }
@media (max-width: 759px) {
  .vitrine-produto .celular { position: static; justify-self: center; margin-top: -40px; width: 200px; }
  .notebook-tela { padding: 6px 6px 8px; border-radius: 10px 10px 3px 3px; }
  .notebook-base { height: 10px; }
}

.destaque-ficha { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .destaque-ficha { grid-template-columns: minmax(0, 1fr) auto; } }
.destaque-texto { max-width: 560px; }
.destaque-texto h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.lista-check { display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check svg { color: var(--ok); flex: none; margin-top: 2px; }
.celular-solto { justify-self: center; width: 260px; transform: rotate(2deg); }

/* ---- Admin -------------------------------------------------------------- */

/* Filtros em link (período, situação, nível...) no mesmo desenho dos segmentos de rádio. */
.segmentos a { display: block; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--suave); text-decoration: none; }
.segmentos a[aria-current] { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
/* Busca ao lado dos segmentos: sem espaço, desce inteira para a linha de baixo em vez de espremer os campos. */
.filtros > form[role=search] { min-width: min(100%, 320px); flex-wrap: wrap; }
.filtros > form[role=search]:has(select) { min-width: min(100%, 600px); }
/* Celular: os campos da busca (alguns com flex fixo no próprio HTML) esticam e fecham a linha, sem sobra torta. */
@media (max-width: 480px) { .filtros > form[role=search] > :is(select, input) { flex-grow: 1 !important; min-width: 0; } }
.numero small { font-size: .76rem; color: var(--suave); }
.faixa-suporte { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--atencao-clara); color: var(--atencao); font-size: .88rem; text-align: center; }
/* O texto corre em linha com o ícone: em flex, cada pedaço do texto virava uma coluna espremida no celular. */
.faixa-suporte > span { display: block; }
.faixa-suporte > span svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.zona-perigo { border-color: color-mix(in srgb, var(--critica) 35%, var(--linha)); }
.form-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.form-linha .campo { flex: 1 1 160px; margin: 0; }
.interruptor input[type=radio] { width: 22px; height: 22px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--linha); }
.interruptor input[type=radio]::after { display: none; }
.interruptor input[type=radio]:checked { background: var(--papel); box-shadow: inset 0 0 0 6px var(--marca); }

/* ---- Relatórios --------------------------------------------------------- */

@media (min-width: 720px) { .numeros-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Gráfico: as barras num SVG esticado (altura fixa, largura da caixa); eixo e meses em HTML para o texto não deformar. */
.grafico { --eixo: 4.6rem; margin: 4px 0 14px; }
.grafico-corpo { display: flex; gap: 8px; height: var(--altura, 180px); }
.grafico-eixo { position: relative; flex: none; width: var(--eixo); font-size: .72rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.grafico-eixo span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; line-height: 1; }
.grafico svg { display: block; flex: 1; min-width: 0; width: 100%; height: 100%; overflow: visible; }
.grafico-grade { stroke: var(--linha); stroke-width: 1; }
.grafico rect:hover { opacity: .75; }
.grafico-meses { display: flex; margin: 6px 0 0 calc(var(--eixo) + 8px); font-size: .72rem; color: var(--suave); }
.grafico-meses span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .8rem; color: var(--suave); }
.grafico-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Muitos meses: só alguns rótulos aparecem (os escondidos seguram o lugar para os outros não saírem do alinhamento). */
.grafico-muito-denso .grafico-meses span:nth-child(even) { visibility: hidden; }
@media (max-width: 720px) {
  .grafico { --eixo: 3.6rem; }
  .grafico-denso .grafico-meses span:nth-child(even) { visibility: hidden; }
  .grafico-muito-denso .grafico-meses span:not(:nth-child(4n+1)) { visibility: hidden; }
}
.tabela-meses th[scope=row], .tabela-relatorio th[scope=row] { color: var(--texto); font-size: .86rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.tabela-meses td, .tabela-relatorio td { white-space: nowrap; }
.relatorio-destaque { color: var(--critica); font-weight: 700; }

@media (max-width: 720px) { .tabela-cartoes .col-mudanca::before { content: "Última mudança: "; } }

/* ---- Sidebar (quem está logado) ----------------------------------------- */
/* Coluna fixa à esquerda no computador (240 px, ou 64 px recolhida) e gaveta no celular.
   A largura mora em --sidebar: a coluna de conteúdo e o toast acompanham sem repetir números. */

.com-sidebar { --sidebar: 240px; --sidebar-texto: #b9c3e3; --sidebar-apagado: #7884ab; --sidebar-linha: rgba(255, 255, 255, .08); --sidebar-destaque: #8ea2ff; }
.bolha { display: inline-grid; place-items: center; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: #e5484d; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; text-decoration: none; }

.sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--sidebar); display: flex; flex-direction: column; overflow: hidden; background: var(--noite); color: var(--sidebar-texto); border-right: 1px solid rgba(255, 255, 255, .06); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); transition: width .15s ease; }
.sidebar-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; padding: 0 10px 0 17px; }
.sidebar .logo { margin: 0; white-space: nowrap; min-width: 0; }
.sidebar-fechar { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--sidebar-texto); cursor: pointer; }
.sidebar-fechar:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.sidebar-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sidebar-rolagem { flex: 1; min-height: 0; overflow: hidden auto; padding: 2px 0 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }
.sidebar-saida { flex: none; padding-bottom: 10px; }
.sidebar-grupo { margin: 14px 0 4px; padding: 0 22px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-apagado); white-space: nowrap; }
.sidebar-rolagem > .sidebar-grupo:first-child { margin-top: 6px; }
.sidebar-lista { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 2px; }
/* O ícone fica no centro dos 64 px da versão recolhida (10 + 12 + 10): logo, itens e rodapé alinhados nas duas larguras. */
.sidebar-lista a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 9px; color: var(--sidebar-texto); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.sidebar-lista a svg { flex: none; }
.sidebar-lista a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sidebar-lista a[aria-current] { color: #fff; background: rgba(255, 255, 255, .1); }
.sidebar-lista a[aria-current]::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sidebar-destaque); }
.sidebar-lista .bolha { margin-left: auto; }
.sidebar-separador { border: 0; height: 1px; background: var(--sidebar-linha); margin: 0 20px 10px; }
.sidebar :focus-visible { outline-color: var(--sidebar-destaque); outline-offset: -2px; }

.sidebar-pe { flex: none; display: grid; gap: 4px; padding: 10px; border-top: 1px solid var(--sidebar-linha); }
.sidebar-quem { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 7px; color: #dfe5f7; font-weight: 600; font-size: .86rem; }
.sidebar-quem .sidebar-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #2a49d6; color: #fff; font-size: .8rem; font-weight: 800; }
.sidebar-botoes { display: flex; gap: 4px; }
.sidebar-botoes form { flex: 1; display: flex; min-width: 0; }
.sidebar-botao { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--sidebar-texto); font: 600 .9rem var(--fonte); white-space: nowrap; cursor: pointer; }
.sidebar-botao svg { flex: none; }
.sidebar-botao:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sidebar-recolher { flex: none; }
.sidebar-recolher svg { transition: transform .15s ease; }

.barra-celular, .sidebar-fundo { display: none; }

@media (min-width: 900px) {
  .com-sidebar .coluna { margin-left: var(--sidebar); transition: margin-left .15s ease; }
  .com-sidebar .toast { left: calc(50% + var(--sidebar) / 2); }

  /* Recolhida: só os ícones. Os rótulos saem da tela, mas o leitor de tela continua lendo (e o title mostra no mouse). */
  .sidebar-recolhida { --sidebar: 64px; }
  .sidebar-recolhida .sidebar-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sidebar-recolhida .sidebar-grupo { height: 1px; margin: 12px 14px; padding: 0; background: var(--sidebar-linha); }
  .sidebar-recolhida .sidebar-rolagem > .sidebar-grupo:first-child { margin-top: 6px; }
  .sidebar-recolhida .sidebar-separador { margin: 0 14px 10px; }
  .sidebar-recolhida .sidebar-lista .bolha { position: absolute; top: 3px; right: 2px; min-width: 18px; padding: 0 5px; font-size: .64rem; box-shadow: 0 0 0 2px var(--noite); }
  .sidebar-recolhida .sidebar-quem { padding-right: 0; }
  .sidebar-recolhida .sidebar-botoes { flex-direction: column; }
  .sidebar-recolhida .sidebar-recolher svg { transform: rotate(180deg); }
}

/* Celular: barra fina no topo e a sidebar vira gaveta por cima do conteúdo. */
@media (max-width: 899.98px) {
  .barra-celular { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px)); background: var(--noite); color: #fff; }
  .barra-menu { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #dfe5f7; cursor: pointer; }
  .barra-menu:hover { background: rgba(255, 255, 255, .06); }
  .barra-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; }
  .barra-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .barra-contexto { flex: none; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: var(--sidebar-texto); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .barra-bolha { flex: none; min-width: 24px; padding: 2px 8px; font-size: .78rem; }

  .sidebar { width: 280px; max-width: calc(100vw - 40px); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .gaveta-aberta .sidebar { transform: none; visibility: visible; box-shadow: 0 0 60px rgba(0, 0, 0, .35); transition: transform .2s ease; }
  .sidebar-fechar { display: grid; }
  .sidebar-recolher { display: none; }
  .sidebar-fundo { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(7, 13, 28, .55); animation: aparece .2s ease; }
  .sidebar-fundo[hidden] { display: none; }
  .gaveta-aberta, .gaveta-aberta body { overflow: hidden; }
}
@keyframes aparece { from { opacity: 0; } }

@media print {
  .sidebar, .barra-celular, .sidebar-fundo { display: none !important; }
  .com-sidebar .coluna { margin-left: 0; }
}

/* ---- Páginas de texto (Termos de uso, Privacidade) ------------------------ */

.prosa { line-height: 1.6; }
.prosa h2 { margin-top: 2em; padding-top: .6em; border-top: 1px solid var(--linha); }
.prosa h3 { margin-top: 1.4em; }
.prosa ol, .prosa ul { padding-left: 1.3em; margin: 0 0 1em; }
.prosa li { margin-bottom: .35em; }
.prosa .indice { columns: 2; column-gap: 24px; font-size: .92rem; }
.prosa .indice ol { padding-left: 1.2em; }
.prosa .indice a { text-decoration: none; }
.prosa .indice a:hover { text-decoration: underline; }
.prosa .tabela td { vertical-align: top; }
.prosa .tabela td:first-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 720px) { .prosa .indice { columns: 1; } }

/* ---- Rodapé ------------------------------------------------------------- */
/* Escuro como o cabeçalho e a sidebar: fecha a página clara sem parecer colado, e continua a inicial (que já é escura no topo). */

.rodape { --rodape-texto: #b9c3e3; --rodape-apagado: #8b97c2; background: var(--noite); color: var(--rodape-texto); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; padding: 48px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
/* Mesma caixa do cabeçalho e do miolo (1180 px com 16 px por dentro): logo e colunas alinham com o resto da página. */
.rodape-dentro { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.rodape a { color: #dfe5f7; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape :focus-visible { outline-color: #8ea2ff; }
.rodape-grade { display: grid; gap: 32px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rodape-grade { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 32px; } }
.rodape-marca p { margin: 14px 0 0; max-width: 34ch; line-height: 1.55; }
.rodape-marca .logo { margin: 0; }
.rodape-marca .rodape-fonte { margin-top: 10px; color: var(--rodape-apagado); font-size: .84rem; }
.rodape-titulo { margin: 0 0 14px; color: var(--rodape-apagado); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rodape-coluna ul { display: grid; gap: 10px; }
.rodape-coluna li { line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.rodape-icone { display: inline-flex; align-items: flex-start; gap: 8px; }
.rodape-icone svg { flex: none; margin-top: 2px; color: var(--rodape-apagado); }
.rodape-dado { color: var(--rodape-apagado); font-size: .84rem; }
.rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--rodape-apagado); font-size: .82rem; }
.rodape-base p { margin: 0; }
.rodape-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.rodape-selos li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .1); color: var(--rodape-texto); font-size: .76rem; font-weight: 600; }
@media (max-width: 599.98px) { .rodape { padding-top: 32px; } .rodape-base { margin-top: 28px; } }
/* Painel e admin: a mesma estrutura, mais baixa, para não competir com a tela de trabalho. */
.rodape-compacto { padding-top: 32px; font-size: .86rem; }
.rodape-compacto .rodape-grade { gap: 24px; }
.rodape-compacto .rodape-base { margin-top: 24px; padding-top: 16px; }

/* ---- Página de erro ----------------------------------------------------- */

.pagina-erro { padding-top: clamp(24px, 10vh, 96px); }
.pagina-erro-codigo { margin: 0 0 6px; font: 800 clamp(3rem, 12vw, 4.5rem)/1 var(--fonte); letter-spacing: -.04em; color: var(--marca); }

/* ---- Celular: campos e botões -------------------------------------------- */

@media (max-width: 480px) {
  /* Abaixo de 16 px o Safari do iPhone dá zoom ao tocar no campo. */
  input:not([type]), input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=time], textarea, select { font-size: 16px; }
  /* Botão com texto longo quebra a linha dentro dele em vez de estourar a tela. */
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; }
}

/* Equipe: caixas das áreas do cargo (só valem no Personalizado). */
.cargo-areas { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.cargo-areas label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; white-space: nowrap; }
.cargo-areas label:has(input:disabled) { opacity: .65; }