/* Identidade visual (spec, seção 13). Cores da MARCA e cores de STATUS são separadas de propósito. */
:root {
  /* Marca */
  --azul: #0077c8;
  --link: #0069b4; /* azul de link: mesma família do azul da marca, com contraste AA sobre branco e sobre o fundo da página */
  --azul-escuro: #003b8e;
  --verde: #00c853;
  --prata: #c0c0c0;
  --fundo: #f4f8fc;

  /* Neutros de apoio */
  --superficie: #ffffff;
  --texto: #1d2733;
  --texto-suave: #52606d;
  --borda: #d9e2ec;
  --sombra: 0 2px 10px rgba(0, 59, 142, 0.08);

  /* Status dos documentos (NÃO usar as cores da marca para isto) */
  --status-em-dia: #2e7d32;
  --status-60-dias: #f9a825;
  --status-30-dias: #ef6c00;
  --status-vencido: #c62828;

  /* Feedback de formulário */
  --erro: #b71c1c;
  --erro-fundo: #fdecea;
  --ok-fundo: #e8f5e9;

  --raio: 14px;
  --alvo-toque: 48px;
  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

h1, h2 { color: var(--azul-escuro); line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.6rem; }
p { margin: 0 0 1rem; }
a { color: var(--link); }

/* Cartão */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}

/* Formulário */
.campo { display: block; margin-bottom: 1rem; }
.campo > span { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.campo input {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--texto);
  background: #fff;
  border: 1.5px solid #9fb3c8;
  border-radius: 10px;
}
.campo input:focus { outline: 3px solid rgba(0, 119, 200, 0.35); border-color: var(--azul); }

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--azul);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.botao:hover { background: var(--azul-escuro); }
.botao:focus-visible { outline: 3px solid rgba(0, 119, 200, 0.45); outline-offset: 2px; }
.botao[disabled] { opacity: 0.6; cursor: wait; }
.botao--secundario { color: var(--azul-escuro); background: #fff; border: 1.5px solid var(--prata); }
.botao--secundario:hover { background: var(--fundo); }

.link-botao {
  background: none; border: 0; padding: 0.5rem 0; min-height: var(--alvo-toque);
  font: inherit; color: var(--link); text-decoration: underline; cursor: pointer;
}

/* Mensagens */
.mensagem { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.mensagem[hidden] { display: none; }
.mensagem--erro { color: var(--erro); background: var(--erro-fundo); border: 1px solid #f5c6c0; }
.mensagem--ok { color: #1b5e20; background: var(--ok-fundo); border: 1px solid #b7dfb9; }

/* Tela de login */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  /* Placeholder neutro: a arte A1 entra na Fase 8 */
  background: linear-gradient(135deg, #eaf3fb 0%, var(--fundo) 55%, #e6f7ee 100%);
}
.login { width: 100%; max-width: 400px; }
.login__logo { display: block; width: 88px; height: auto; margin: 0 auto 1rem; }
.login__titulo { text-align: center; }
.login__sub { text-align: center; color: var(--texto-suave); }

/* Painel (provisório; o painel completo vem na Fase 3) */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.topo__marca { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--azul-escuro); }
.topo__marca img { width: 36px; height: 36px; }
.topo .botao { width: auto; }
.conteudo { max-width: 960px; margin: 0 auto; padding: 1rem; }
.etiqueta {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  color: var(--azul-escuro); background: #e3effa; border: 1px solid #b9d4ee;
}

@media (prefers-reduced-motion: no-preference) {
  .botao { transition: background 0.15s ease; }
}

/* ---------- Fase 2: menu, cartões, tabelas, janelas ---------- */
.topo__usuario { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.menu {
  display: flex; gap: 0.25rem; overflow-x: auto; padding: 0 0.5rem;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.menu__item {
  display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 0.9rem;
  color: var(--texto-suave); font-weight: 600; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menu__item:hover { color: var(--azul-escuro); }
.menu__item[aria-current='page'] { color: var(--azul-escuro); border-bottom-color: var(--verde); }

.botao--pequeno { width: auto; min-height: 44px; padding: 0.4rem 1rem; }
.botao--perigo { background: var(--erro); }
.botao--perigo:hover { background: #8e1616; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.barra h1, .barra h2 { margin: 0; }
.barra__acoes { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.grupo { margin-bottom: 1.5rem; }
.contagem { font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); background: #e3effa; border-radius: 999px; padding: 0 0.6rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.cartao--link { display: flex; flex-direction: column; gap: 0.35rem; color: inherit; text-decoration: none; min-height: var(--alvo-toque); padding: 1rem; }
.cartao--link:hover { border-color: var(--azul); }
.cartao--excluido { opacity: 0.6; border-style: dashed; }
.ficha__secao { margin-bottom: 1rem; }

.ajuda { color: var(--texto-suave); font-size: 0.9rem; }
.etiqueta--ok { background: #e6f4ea; border-color: #b7dfb9; color: #1b5e20; }
.etiqueta--aviso { background: #fff4d6; border-color: #f2d98a; color: #6b4e00; margin-left: 0.4rem; }

.dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.dados dt { font-weight: 600; color: var(--texto-suave); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .dados { grid-template-columns: 1fr; gap: 0; } .dados dd { margin-bottom: 0.6rem; } }

.tabela-rolavel { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabela th, .tabela td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--texto-suave); font-weight: 600; }
.linha--inativa { opacity: 0.55; }

.campo select, .campo textarea {
  width: 100%; min-height: var(--alvo-toque); padding: 0.6rem 0.8rem; font: inherit; color: var(--texto);
  background: #fff; border: 1.5px solid #9fb3c8; border-radius: 10px;
}
.campo label:first-child { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.campo--linha { display: flex; align-items: center; gap: 0.5rem; min-height: var(--alvo-toque); margin-bottom: 0.5rem; }
.campo--linha input[type='checkbox'], .multi__item input { width: 22px; height: 22px; flex: none; }
.multi { display: grid; gap: 0.25rem; }
.multi__item { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; font-weight: 400; }

.modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border: 0; border-radius: var(--raio); padding: 1.25rem; box-shadow: 0 10px 40px rgba(0, 25, 70, 0.3); color: var(--texto); }
.modal::backdrop { background: rgba(0, 25, 70, 0.45); }
.modal__acoes { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.modal__acoes .botao { width: auto; }

.toasts { position: fixed; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 0.5rem; justify-items: center; z-index: 50; pointer-events: none; }
.toast { pointer-events: auto; max-width: 480px; padding: 0.75rem 1rem; border-radius: 10px; color: #fff; background: #1d2733; box-shadow: var(--sombra); }
.toast--erro { background: var(--erro); }

.abas { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; overflow-x: auto; }
.aba { min-height: 44px; padding: 0 1rem; font: inherit; font-weight: 600; color: var(--texto-suave); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.aba[aria-selected='true'] { color: var(--azul-escuro); border-bottom-color: var(--verde); }

.usuario { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--borda); align-items: center; }
@media (min-width: 760px) { .usuario { grid-template-columns: 1.4fr 1fr auto auto auto; } .usuario .campo { margin: 0; } }

/* ---------- Fase 3: status de vencimento ---------- */
/* Cores de STATUS (semânticas). Separadas das cores da marca: o verde do "em dia" não é o verde da marca. */
:root {
  --status-em-dia-fundo: #e3f4e6;   --status-em-dia-texto: #17501c;
  --status-60-dias-fundo: #fff2c9;  --status-60-dias-texto: #5c4200;
  --status-30-dias-fundo: #ffe3c7;  --status-30-dias-texto: #7a3300;
  --status-vencido-fundo: #fbdcda;  --status-vencido-texto: #86120f;
}

.selo {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  line-height: 1.5; border: 1.5px solid transparent; white-space: nowrap; vertical-align: middle;
}
.selo--em_dia { background: var(--status-em-dia-fundo); color: var(--status-em-dia-texto); border-color: var(--status-em-dia); }
.selo--amarelo { background: var(--status-60-dias-fundo); color: var(--status-60-dias-texto); border-color: var(--status-60-dias); }
.selo--laranja { background: var(--status-30-dias-fundo); color: var(--status-30-dias-texto); border-color: var(--status-30-dias); }
.selo--vencido { background: var(--status-vencido-fundo); color: var(--status-vencido-texto); border-color: var(--status-vencido); }
.selo--nenhum { background: #eef1f4; color: var(--texto-suave); border-color: var(--borda); font-weight: 600; }
.selo--sem { background: #e3effa; color: var(--azul-escuro); border-color: #b9d4ee; font-weight: 600; }

.menu__selo {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
  margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1.5px solid transparent;
}

.totais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1rem 0; }
@media (min-width: 720px) { .totais { grid-template-columns: repeat(4, 1fr); } }
.total {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-height: 96px; padding: 0.9rem 1rem;
  font: inherit; text-align: left; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda); border-left-width: 8px; border-radius: var(--raio); box-shadow: var(--sombra); cursor: pointer;
}
.total:focus-visible { outline: 3px solid rgba(0, 119, 200, 0.45); outline-offset: 2px; }
.total[aria-pressed='true'] { box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.35), var(--sombra); }
.total__numero { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.total__rotulo { font-size: 0.95rem; font-weight: 600; color: var(--texto-suave); }
.total--em_dia { border-left-color: var(--status-em-dia); }
.total--amarelo { border-left-color: var(--status-60-dias); }
.total--laranja { border-left-color: var(--status-30-dias); }
.total--vencido { border-left-color: var(--status-vencido); }

.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 1.5rem; }
.vazio p { margin: 0.25rem 0 0; }
/* Placeholder neutro da ilustração de "tudo em dia" (arte A3 na Fase 8) */
.vazio__arte { width: 96px; height: 96px; margin-bottom: 0.5rem; border-radius: 50%; border: 3px dashed var(--prata); background: #fff; }

/* ---------- Fase 4: envio de documentos ---------- */
.mensagem--aviso { color: #5c4200; background: #fff4d6; border: 1px solid #f2d98a; }
.mensagem ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.dicas { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--texto-suave); }
.acoes-empilhadas { display: grid; gap: 0.75rem; }
.acoes-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.acoes-linha .botao { width: auto; }
.progresso { font-weight: 600; color: var(--azul-escuro); margin: 0; }
.confirmar { display: grid; gap: 1rem; }
@media (min-width: 860px) { .confirmar { grid-template-columns: minmax(260px, 1fr) 1.3fr; align-items: start; } }
.previa { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #eef1f4; border-radius: 10px; }
.previa--pdf { display: grid; place-items: center; gap: 0.25rem; min-height: 160px; font-size: 1.4rem; color: var(--azul-escuro); }
.frase { font-size: 1.1rem; margin: 0 0 0.75rem; }
.validade {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; margin: 0 0 1rem;
  background: #fffbe6; border: 3px solid #f2b705; border-radius: var(--raio); color: #3d2e00;
}
.validade--falta { background: #fdecea; border-color: var(--erro); color: var(--erro); }
.validade__rotulo { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.validade__data { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.destino { display: grid; gap: 0.5rem; margin: 1rem 0; padding: 0.75rem 1rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; overflow-wrap: anywhere; }
.correcao { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--prata); border-radius: 10px; }
.correcao .campo:last-child { margin-bottom: 0; }
.botao--secundario.botao--pequeno { min-height: 44px; }
a.botao { text-decoration: none; }

/* ---------- Fase 5: checklists ---------- */
.barra-progresso { display: inline-block; width: 120px; height: 10px; vertical-align: middle; background: #e1e8f0; border-radius: 999px; overflow: hidden; }
.barra-progresso__cheia { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0; border-bottom: 1px solid var(--borda); }
.lista-simples li:last-child { border-bottom: 0; }
.aba .contagem { margin-left: 0.4rem; }
.itens-checklist { list-style: none; margin: 0; padding: 0; }
.item-checklist { display: grid; grid-template-columns: 28px 1fr auto; gap: 0.75rem; align-items: start; padding: 0.8rem 0; border-bottom: 1px solid var(--borda); }
.item-checklist:last-child { border-bottom: 0; }
.item-checklist__marca { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; font-weight: 800; color: #fff; border: 2px solid var(--prata); border-radius: 8px; background: #fff; }
.item-checklist--feito .item-checklist__marca { background: var(--azul); border-color: var(--azul); }
.item-checklist--feito strong { color: var(--texto-suave); }
.item-checklist__texto .etiqueta { margin-left: 0.5rem; }
.item-checklist__acoes { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 560px) { .item-checklist { grid-template-columns: 28px 1fr; } .item-checklist__acoes { grid-column: 2; } }

/* ---------- Fase 6: Telegram ---------- */
.passos { margin: 0 0 1rem; padding-left: 1.3rem; }
.passos li { margin-bottom: 0.35rem; }
.codigo { display: flex; flex-direction: column; gap: 0.2rem; margin: 1rem 0; padding: 0.9rem 1rem; background: #e8f3fc; border: 2px solid var(--azul); border-radius: var(--raio); }
.codigo__rotulo { font-size: 0.8rem; font-weight: 700; color: var(--azul-escuro); }
.codigo__valor { font-size: 2rem; font-weight: 800; letter-spacing: 0.25em; font-family: ui-monospace, Consolas, monospace; color: var(--azul-escuro); }
.usuario--tg { grid-template-columns: 1fr auto auto; }
code { background: #eef1f4; padding: 0.1rem 0.4rem; border-radius: 6px; }

/* ---------- Fase 7: modo fiscalização e impressão ---------- */
.so-impressao, .so-impressao-bloco { display: none; }
.filtros-fisc { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.relatorio { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; }
.relatorio__cabeca p { margin: 0.2rem 0; }
.totais-fisc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem !important; }
.aviso-lgpd { padding: 0.4rem 0.6rem; font-size: 0.85rem; font-weight: 600; color: #5c4200; background: #fff4d6; border: 1px solid #f2d98a; border-radius: 8px; }
.fisc__secao h2 { margin-top: 1.25rem; padding-bottom: 0.25rem; border-bottom: 2px solid var(--borda); }
.fisc__item { margin: 0.9rem 0; }
.fisc__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin-bottom: 0.25rem; }
.fisc__sub { color: var(--texto-suave); font-size: 0.9rem; }
.fisc__sub--alerta { color: var(--status-vencido-texto); font-weight: 700; }
.tabela--fisc { font-size: 0.9rem; }
.sit { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 6px; font-weight: 700; font-size: 0.85rem; border: 1.5px solid transparent; }
.sit--vencido { background: var(--status-vencido-fundo); color: var(--status-vencido-texto); border-color: var(--status-vencido); }
.sit--sem_documento { background: #fff; color: var(--status-vencido-texto); border: 1.5px dashed var(--status-vencido); }
.sit--laranja { background: var(--status-30-dias-fundo); color: var(--status-30-dias-texto); border-color: var(--status-30-dias); }
.sit--amarelo { background: var(--status-60-dias-fundo); color: var(--status-60-dias-texto); border-color: var(--status-60-dias); }
.sit--em_dia { background: var(--status-em-dia-fundo); color: var(--status-em-dia-texto); border-color: var(--status-em-dia); }
.sit--enviado { background: #e3effa; color: var(--azul-escuro); border-color: #b9d4ee; }

@page { size: A4; margin: 12mm; }
@media print {
  #topo, .nao-imprimir, .so-tela, .toasts, dialog { display: none !important; }
  .so-impressao { display: inline !important; font-size: 0.8rem; }
  .so-impressao-bloco { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .conteudo { max-width: none; padding: 0; }
  .relatorio { border: 0; padding: 0; box-shadow: none; }
  .fisc__item { break-inside: avoid; }
  .fisc__secao h2 { break-after: avoid; }
  .tabela th, .tabela td { padding: 3px 5px; border-bottom: 1px solid #999; }
  .tabela th { color: #000; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Fase 8: ícones, arte, painel e acabamento ---------- */
:root { --icone-traco: 1.9; }
.icone { flex: none; vertical-align: -0.2em; }
.botao { gap: 0.5rem; }
.menu__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.menu__rotulo { white-space: nowrap; }

/* cabeçalho e menu fixos no alto (útil no celular, com a página longa) */
#topo { position: sticky; top: 0; z-index: 20; background: var(--superficie); }
.pular { position: absolute; left: -9999px; top: 0; }
.pular:focus { left: 8px; top: 8px; z-index: 100; padding: 0.7rem 1rem; background: #fff; color: var(--azul-escuro); font-weight: 700; border-radius: 10px; box-shadow: var(--sombra); }
main:focus { outline: none; }

/* ilustrações (A3, A4) com substituto neutro */
.arte { display: grid; place-items: center; flex: none; }
.arte img { display: block; width: 100%; height: 100%; object-fit: contain; }
.arte--substituto { border-radius: 50%; border: 3px dashed var(--prata); background: #fff; }
.arte--a4.arte--substituto { border-color: var(--status-30-dias); }

/* faixa de boas-vindas do painel (A2 entra por trás, com véu claro à esquerda para o texto sempre ler bem) */
.hero { margin: 0 0 1rem; padding: 1.25rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.hero__texto { max-width: 34rem; }
.hero h1 { margin: 0 0 0.25rem; }
.hero__frase { margin: 0 0 0.75rem; color: var(--texto-suave); }
.tem-arte-a2 .hero {
  min-height: 9.5rem;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0, rgba(255, 255, 255, 0.93) 45%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0) 100%), var(--arte-a2);
  background-size: cover;
  background-position: right center;
}
.banner-atencao { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 0.75rem 1rem; background: #fff7ed; border: 1.5px solid var(--status-30-dias); border-radius: var(--raio); color: var(--status-30-dias-texto); }
.banner-atencao p { margin: 0.1rem 0 0; }

/* fundo da tela de login (A1) */
.tem-arte-a1 .tela-login { background-color: #eaf3fb; background-image: var(--arte-a1); background-size: cover; background-position: center; }

/* padrão sutil (A5) atrás de cartões e do relatório de fiscalização; nunca por cima do texto */
.tem-arte-a5 .cartao, .tem-arte-a5 .relatorio { position: relative; isolation: isolate; }
.tem-arte-a5 .cartao::before, .tem-arte-a5 .relatorio::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: var(--arte-a5); background-size: 256px 256px; opacity: 0.35;
}
.relatorio__cabeca { position: relative; isolation: isolate; }
.tem-arte-a5 .relatorio__cabeca::before { content: ''; position: absolute; inset: -6px; z-index: -1; pointer-events: none; background-image: var(--arte-a5); background-size: 256px 256px; opacity: 0.28; }

@media (max-width: 640px) {
  .conteudo { padding: 0.75rem; }
  .hero { padding: 1rem; }
  .tem-arte-a2 .hero { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.55) 100%), var(--arte-a2); background-position: center bottom; }
  .menu__item { padding: 0 0.7rem; }
}

@media print {
  .pular { display: none !important; }
  .tem-arte-a5 .cartao::before, .tem-arte-a5 .relatorio::before { display: none; }
  .tem-arte-a5 .relatorio__cabeca::before { opacity: 0.2; }
}

/* tabelas largas rolam dentro do próprio bloco no celular (a página nunca ganha barra lateral) */
.fisc__item { overflow-x: auto; }
@media print { .fisc__item { overflow: visible; } }

.login__rodape { margin: 1rem 0 0; text-align: center; }