/* ==========================================================================
   Sistema visual — Guias Médicas FAS/FASC (CAMPREV)

   Base para todas as telas do projeto. Ao criar uma página nova, use os
   tokens e componentes daqui; não invente valor solto. A tela /padroes/
   mostra tudo o que existe, renderizado.

   Três decisões que valem por muitas linhas de código:

   1. Superfície é definida por BORDA de 1px, nunca por sombra. Sombra fica
      reservada ao que de fato flutua (gaveta do menu no celular) e ao anel
      de foco. Sombra em tudo achata a hierarquia em vez de criá-la.

   2. Algarismos tabulares em todo dado numérico. Número de guia, CPF, CRM,
      data e valor precisam alinhar em coluna e ser lidos em voz alta ao
      telefone; largura variável atrapalha as duas coisas.

   3. A identidade do fundo (FAS/FASC) nunca depende só de cor. A guia vai
      ser impressa, possivelmente em impressora monocromática na clínica, e
      "identificação FAS/FASC" é item obrigatório do checklist da POC. Por
      isso o selo carrega o monograma e o nome da instituição por extenso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografia — Public Sans, desenhada para serviços públicos digitais.
   Auto-hospedada de propósito: a demonstração da POC é por videoconferência
   e não pode depender de CDN.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-var.9a63da24d2fd.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tinta ---------------------------------------------------------------- */
  --tinta: #0f1d33;
  --tinta-media: #46587a;
  --tinta-fraca: #6b7c99;

  /* Superfícies ---------------------------------------------------------- */
  --papel: #ffffff;
  --canvas: #eef2f7;
  --canvas-fundo: #e4ebf3;
  --realce: #f5f8fc;

  /* Linhas --------------------------------------------------------------- */
  --linha: #d7e0ea;
  --linha-forte: #b6c4d6;

  /* Navy institucional — menu lateral e marca ----------------------------- */
  --navy: #0e2a4d;
  --navy-fundo: #0a1f3a;
  --navy-claro: #1c4275;
  --navy-texto: #b8cbe4;

  /* Azul de ação — links, botões, foco ------------------------------------ */
  --acao: #0b5cad;
  --acao-forte: #084883;
  --acao-tenue: #e8f1fb;

  /* Fundos — identidade das duas instituições ----------------------------- */
  --fas: #0e4c8a;
  --fas-tenue: #e7effa;
  --fasc: #6d3f9e;
  --fasc-tenue: #f1ebfa;

  /* Estados -------------------------------------------------------------- */
  --ok: #14714a;
  --ok-tenue: #e4f3ec;
  --atencao: #8a5300;
  --atencao-tenue: #fbf0dd;
  --erro: #b3261e;
  --erro-tenue: #fbeae9;

  /* Medidas -------------------------------------------------------------- */
  --lateral: 248px;
  --raio: 6px;
  --raio-g: 10px;

  /* Escala tipográfica --------------------------------------------------- */
  --t-micro: 0.75rem;   /* 12px — só para o que é realmente acessório */
  --t-meta: 0.8125rem;  /* 13px — metadados, rótulos de grupo */
  --t-dado: 0.9375rem;  /* 15px — células de tabela */
  --t-corpo: 1rem;      /* 16px — corpo e campos de formulário */
  --t-sub: 1.125rem;    /* 18px — título de seção */
  --t-titulo: 1.375rem; /* 22px — título de página */
  --t-tela: 1.75rem;    /* 28px — título de tela de entrada */
  --t-numero: 2.125rem; /* 34px — número da guia em destaque */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.011em;
}

h1 { font-size: var(--t-titulo); }
h2 { font-size: var(--t-sub); }
h3 { font-size: var(--t-corpo); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acao);
  text-decoration-color: color-mix(in srgb, var(--acao) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--acao-forte); text-decoration-color: currentColor; }

/* Foco visível e consistente em tudo que recebe teclado. Nunca remover: a
   plataforma é operada no teclado, com um beneficiário esperando no balcão. */
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: 3px;
}

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Estrutura — menu lateral fixo sobre conteúdo claro
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Menu lateral --------------------------------------------------------- */

.lateral {
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--navy-texto);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 1.125rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lateral__marca:hover { color: #fff; }

.lateral__marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.lateral__marca-nome {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lateral__marca-org {
  font-size: var(--t-micro);
  font-weight: 400;
  color: var(--navy-texto);
}

.lateral__nav {
  flex: 1;
  padding: 1rem 0.625rem;
}

/* Rótulo de grupo em caixa normal, não versalete: o agrupamento já é
   informação (ele desenha a fronteira de permissão entre os perfis) e não
   precisa de ênfase tipográfica para ser percebido. */
.lateral__grupo {
  margin: 0 0 0.375rem;
  padding: 0 0.625rem;
  font-size: var(--t-meta);
  font-weight: 500;
  color: #7f9bc0;
}

.lateral__grupo:not(:first-child) { margin-top: 1.5rem; }

.lateral__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lateral__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--raio);
  border-left: 3px solid transparent;
  color: #dbe6f4;
  font-size: var(--t-dado);
  text-decoration: none;
}

.lateral__item:hover {
  background: var(--navy-claro);
  color: #fff;
}

.lateral__item[aria-current="page"] {
  background: var(--navy-claro);
  border-left-color: #4a9bf0;
  color: #fff;
  font-weight: 600;
}

.lateral__item svg {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.lateral__rodape {
  padding: 0.875rem 1.125rem 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lateral__usuario-nome {
  font-size: var(--t-dado);
  font-weight: 600;
  color: #fff;
}

.lateral__usuario-perfil {
  font-size: var(--t-micro);
  color: var(--navy-texto);
}

.lateral__sair {
  margin-top: 0.625rem;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--t-meta);
  color: #9fc0e8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lateral__sair:hover { color: #fff; }

/* --- Barra superior e conteúdo -------------------------------------------- */

.principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.75rem;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.barra__titulo { margin: 0; }

.barra__contexto {
  margin: 0.125rem 0 0;
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
}

/* A ação primária mora sempre aqui, no canto superior direito do conteúdo.
   Posição fixa é o que permite operar sem procurar. */
.barra__acoes {
  margin-left: auto;
  display: flex;
  gap: 0.625rem;
}

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  padding: 1.75rem;
}

.conteudo--estreito { max-width: 640px; }

/* Botão que abre a gaveta no celular; escondido no desktop. */
.abrir-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-right: 0.25rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--tinta);
  cursor: pointer;
}

.lateral__fechar { display: none; }
.veu { display: none; }

/* ==========================================================================
   Superfícies
   ========================================================================== */

.painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}

.painel__cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--linha);
}

.painel__titulo { margin: 0; font-size: var(--t-corpo); font-weight: 600; }
.painel__corpo { padding: 1.25rem; }

.pilha > * + * { margin-top: 1.25rem; }

/* ==========================================================================
   Selo do fundo — FAS (Prefeitura) e FASC (Câmara)

   O monograma e o nome por extenso fazem o trabalho; a cor apenas reforça.
   Em impressão monocromática o selo continua identificável, que é o que o
   item CK-5 do checklist exige.
   ========================================================================== */

.fundo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

.fundo__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.875rem;
  padding: 0.125rem 0.4375rem;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.fundo__nome {
  font-size: var(--t-meta);
  color: var(--tinta-media);
}

.fundo--fas { color: var(--fas); }
.fundo--fas .fundo__selo { background: var(--fas-tenue); }
.fundo--fasc { color: var(--fasc); }
.fundo--fasc .fundo__selo { background: var(--fasc-tenue); }

/* ==========================================================================
   Situação — ponto + palavra. Nunca só cor: daltonismo e impressão
   monocromática precisam da palavra para distinguir.
   ========================================================================== */

/* O texto fica na cor normal e só o ponto recebe cor. Situação escrita em azul
   se confundiria com link, já que azul é a cor de ação em toda a interface. */
.situacao {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--t-dado);
  white-space: nowrap;
  color: var(--tinta);
}

.situacao::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--ponto, var(--tinta-fraca));
  flex: none;
}

.situacao--ativa,
.situacao--utilizada { --ponto: var(--ok); }
.situacao--emitida { --ponto: var(--acao); }
.situacao--vencendo { --ponto: var(--atencao); }
.situacao--cancelada,
.situacao--inativa { --ponto: var(--erro); }

/* ==========================================================================
   Botões
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.9375rem;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--acao);
  color: #fff;
  font: inherit;
  font-size: var(--t-dado);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.botao:hover { background: var(--acao-forte); color: #fff; }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }

.botao--secundario {
  background: var(--papel);
  border-color: var(--linha-forte);
  color: var(--tinta);
}
.botao--secundario:hover { background: var(--realce); color: var(--tinta); }

.botao--discreto {
  background: none;
  border-color: transparent;
  color: var(--acao);
}
.botao--discreto:hover { background: var(--acao-tenue); color: var(--acao-forte); }

.botao--perigo { background: var(--erro); }
.botao--perigo:hover { background: #8c1c16; }

.acoes {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   Formulários

   A largura do campo anuncia o tamanho esperado da resposta. Um campo de CPF
   com 40rem de largura mente sobre o que se espera ali; um com 11 caracteres
   dispensa explicação. Por isso as larguras abaixo são nominais, não
   decorativas.
   ========================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-bottom: 1.125rem;
}

.campo__rotulo {
  font-size: var(--t-dado);
  font-weight: 600;
}

.campo__obrigatorio {
  margin-left: 0.1875rem;
  color: var(--erro);
}

.campo__ajuda {
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
}

.campo__erro {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--erro);
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.625rem;
  min-height: 2.5rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-corpo);
}

input:hover, select:hover, textarea:hover { border-color: #92a5bd; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--acao);
  outline: 2px solid var(--acao);
  outline-offset: -1px;
}

input[aria-invalid="true"] { border-color: var(--erro); }

input::placeholder { color: #93a3b9; }

input[type="checkbox"] { width: 1.0625rem; height: 1.0625rem; accent-color: var(--acao); }

.campo--caixa {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.campo--caixa .campo__rotulo { font-weight: 400; }

/* Larguras nominais: o campo tem o tamanho do dado que recebe. */
.campo--cpf input,
.campo--cnpj input { max-width: 11rem; }
.campo--crm input,
.campo--numero input { max-width: 9rem; }
.campo--data input { max-width: 10rem; }
.campo--curto input,
.campo--curto select { max-width: 14rem; }
.campo--medio input,
.campo--medio select { max-width: 22rem; }

fieldset.campo {
  border: none;
  margin-inline: 0;
  padding: 0;
}

fieldset.campo legend { padding: 0; }

.lista-opcoes {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
}

.lista-opcoes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.lista-opcoes label { font-size: var(--t-corpo); }

code {
  padding: 0.0625rem 0.3125rem;
  border-radius: 4px;
  background: var(--canvas-fundo);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.875em;
}

/* Barra de filtros sobre uma listagem. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.filtros .campo { margin-bottom: 0; }
.filtros input, .filtros select { min-width: 9rem; }
.filtros__busca input { min-width: 17rem; }

/* ==========================================================================
   Tabelas — a superfície de trabalho principal
   ========================================================================== */

.tabela-envolve {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--papel);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-dado);
}

.tabela th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--tinta-media);
  background: var(--realce);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela td {
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--realce); }

.tabela__acoes {
  text-align: right;
  white-space: nowrap;
  width: 1%;  /* encolhe até o conteúdo, sobrando largura para os dados */
}

/* O flex vive num elemento interno, nunca no <td>: dar display:flex à célula
   a tira do layout de tabela e quebra o alinhamento e as bordas da linha. */
.acoes-linha {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}

/* Copiar cria um registro, então precisa ser POST — mas tem que parecer com
   os links vizinhos, porque para quem usa é a mesma natureza de ação. */
.acoes-linha form { margin: 0; display: inline-flex; }

.ligacao-acao {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--acao);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ligacao-acao:hover { color: var(--acao-forte); }

.marca-vencida {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.3125rem;
  border: 1px solid var(--erro);
  border-radius: 3px;
  color: var(--erro);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: normal;
}

.marca-editada {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.3125rem;
  border: 1px solid var(--atencao);
  border-radius: 3px;
  color: var(--atencao);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: normal;
}

/* Lista de dados em par rótulo/valor, usada nas telas de detalhe. */
.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.875rem 1.5rem;
  margin: 0;
}

.dados > div { min-width: 0; }
.dados__largo { grid-column: 1 / -1; }
.dados dt { font-size: var(--t-meta); color: var(--tinta-media); }
.dados dd { margin: 0; font-weight: 600; }
.tabela__vazio {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tinta-fraca);
}

/* Algarismos tabulares: alinham em coluna e se leem em voz alta sem erro.
   Não quebram linha: um número de guia partido em duas linhas deixa de ser
   legível de relance, que é justamente o uso. */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.num--destaque {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.avisos { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.avisos li + li { margin-top: 0.5rem; }

.aviso {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--tinta-fraca);
  border-radius: var(--raio);
  background: var(--papel);
  font-size: var(--t-dado);
}

.aviso--success { border-left-color: var(--ok); background: var(--ok-tenue); color: #0c4d32; }
.aviso--error   { border-left-color: var(--erro); background: var(--erro-tenue); color: #8c1c16; }
.aviso--warning { border-left-color: var(--atencao); background: var(--atencao-tenue); color: #6b4000; }
.aviso--info    { border-left-color: var(--acao); background: var(--acao-tenue); color: var(--acao-forte); }

/* ==========================================================================
   Tela de entrada e páginas de erro — sem menu lateral
   ========================================================================== */

/* --- Porta de entrada ------------------------------------------------------
   Duas faces: à esquerda a identidade institucional, à direita o trabalho.
   O painel da esquerda existe para declarar, logo na primeira tela, o fato
   que organiza o sistema inteiro — são dois fundos, de duas instituições.
   -------------------------------------------------------------------------- */

.entrada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.entrada__identidade {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem;
  background: var(--navy);
  color: #fff;
}

.entrada__marca {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.entrada__marca-nome {
  font-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entrada__frase {
  max-width: 22rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.entrada__fundos {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.entrada__fundo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entrada__fundo-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: 0.25rem 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  font-size: var(--t-meta);
  font-weight: 700;
}

.entrada__fundo--fas { color: #7db4f0; }
.entrada__fundo--fasc { color: #b79aea; }

.entrada__fundo-nome {
  font-size: var(--t-dado);
  color: var(--navy-texto);
}

.entrada__formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--papel);
}

.entrada__caixa { width: 100%; max-width: 21rem; }

.entrada__titulo { font-size: var(--t-tela); margin-bottom: 0.375rem; }

.entrada__instrucao {
  margin-bottom: 1.75rem;
  color: var(--tinta-media);
}

.entrada .botao { width: 100%; }

.entrada__rodape {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
}

@media (max-width: 800px) {
  .entrada { grid-template-columns: 1fr; min-height: 0; }
  .entrada__identidade { padding: 2rem 1.5rem; gap: 1.75rem; }
  .entrada__frase { display: none; }
  .entrada__formulario { padding: 2rem 1.5rem 3rem; }
}

/* --- Páginas de erro autônomas --------------------------------------------- */

.avulsa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: var(--navy);
}

.avulsa__cartao {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  background: var(--papel);
  border-radius: var(--raio-g);
}

.avulsa__marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.avulsa__titulo { font-size: var(--t-tela); margin-bottom: 0.25rem; }

.avulsa__org {
  margin-bottom: 1.75rem;
  font-size: var(--t-dado);
  color: var(--tinta-fraca);
}

.erro-codigo {
  margin-top: 1rem;
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Atalhos da tela inicial
   ========================================================================== */

.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.atalho {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 1.125rem 1.25rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  text-decoration: none;
  color: var(--tinta);
}

.atalho:hover { border-color: var(--acao); color: var(--tinta); }
.atalho__titulo { font-weight: 600; color: var(--acao); }
.atalho__descricao { font-size: var(--t-meta); color: var(--tinta-fraca); }

/* ==========================================================================
   Diff do log de auditoria
   ========================================================================== */

.diff { margin: 0; padding: 0; list-style: none; font-size: var(--t-meta); }
.diff li + li { margin-top: 0.1875rem; }
.diff__campo { font-weight: 600; }
.diff__antes { color: var(--erro); text-decoration: line-through; }
.diff__depois { color: var(--ok); }

.paginacao {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: var(--t-dado);
  color: var(--tinta-media);
}

/* ==========================================================================
   Celular — o menu vira gaveta
   ========================================================================== */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: 17rem;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 2rem rgba(10, 31, 58, 0.35);
  }

  .app[data-menu="aberto"] .lateral { transform: translateX(0); }

  .app[data-menu="aberto"] .veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(10, 31, 58, 0.5);
    border: none;
  }

  .abrir-menu { display: inline-flex; }

  .lateral__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem; right: 0.875rem;
    width: 2rem; height: 2rem;
    background: none;
    border: none;
    color: var(--navy-texto);
    cursor: pointer;
  }

  .barra, .conteudo { padding: 1rem; }
}

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

/* ==========================================================================
   Impressão

   Tokens base para a guia impressa do Épico C. O avaliador confere o
   checklist olhando o papel: legibilidade vence estética, sem exceção.
   ========================================================================== */

@media print {
  .lateral, .barra__acoes, .abrir-menu, .veu, .filtros, .avisos, .paginacao {
    display: none !important;
  }

  .app { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .conteudo { max-width: none; padding: 0; }

  .painel, .tabela-envolve { border: 1px solid #000; }

  /* O selo do fundo precisa sobreviver a uma impressora monocromática. */
  .fundo__selo { color: #000; background: transparent; border-color: #000; }
  .fundo__nome { color: #000; }

  a { color: #000; text-decoration: none; }
  .tabela th { background: transparent; border-bottom: 1px solid #000; }
  tr, .painel { break-inside: avoid; }
}