/*
 * Sistema de design do Vicejo.
 *
 * As regras que sustentam este arquivo estão em doc/interface.md. O resumo:
 * uma grade de espaçamento só (8px), uma cor por intenção (confirmar sempre
 * verde, cancelar sempre neutro, destruir sempre vermelho), alvo de toque de
 * 44px e nenhuma tabela encolhida no celular.
 */

:root {
  /* cor | Intenção | Uma cor, um significado, no sistema inteiro. Confirmar é verde, cancelar é neutro, destruir é vermelho, e isso não muda de tela para tela. */
  --confirmar: #4a6741; /* Botão que salva, cria, abre, fecha ou confirma (btn-confirmar). */
  --confirmar-escura: #38502f; /* Confirmar com o ponteiro em cima. */
  --cancelar: #ffffff; /* Botão que desiste, volta ou fecha sem salvar (btn-cancelar). */
  --destruir: #b3403c; /* Só exclusão, erro de campo e o asterisco de obrigatório. Nunca alerta comum. */
  --destruir-escura: #96322f; /* Destruir com o ponteiro em cima, e texto sobre o vermelho claro. */
  --destruir-clara: #fbecec; /* Fundo do aviso de erro e do selo negativo. */

  /* cor | Marca | A cor do Vicejo fora dos botões: link, item ativo do menu, foco, página atual da paginação. */
  --primaria: #4a6741; /* Link, foco, barra de progresso e página atual da paginação. */
  --primaria-escura: #38502f; /* Texto sobre o verde claro: item ativo do menu e aviso de sucesso. */
  --primaria-clara: #eef3ea; /* Fundo do item ativo do menu, do aviso de sucesso e do anel de foco. */

  /* cor | Estado | Atenção e informação têm cor própria e não competem com as três intenções. */
  --atencao: #b8860b; /* Borda do aviso de atenção. */
  --atencao-escura: #6b4e06; /* Texto do aviso e do selo de atenção. */
  --atencao-clara: #fdf6e3; /* Fundo do aviso e do selo de atenção. */
  --informacao: #2f6f8f; /* Borda do aviso de informação. */
  --informacao-escura: #1f4d63; /* Texto do aviso de informação. */
  --informacao-clara: #eef5f8; /* Fundo do aviso de informação. */

  /* cor | Texto | Três pesos de texto. O fraco é só para o que se pode não ler. */
  --texto: #23282b; /* Texto de corpo, título e fundo da barra do topo. */
  --texto-suave: #5f6b6f; /* Texto de apoio, rótulo de campo e cabeçalho de tabela. */
  --texto-fraco: #8b959a; /* Ajuda de campo, título de grupo do menu e ícone de busca. */
  --sobre-cor: #ffffff; /* Texto e ícone sobre cor forte: botão, topo, página atual. */
  --topo-texto: #cfd6d0; /* Texto secundário na barra do topo. */

  /* cor | Superfície | Do fundo da página para cima: fundo, cartão, e o realce dentro do cartão. */
  --fundo: #f2f4f0; /* Fundo da página, atrás dos cartões. */
  --superficie: #ffffff; /* Cartão, campo, diálogo e menu lateral. */
  --superficie-alt: #f7f8f6; /* Cabeçalho de tabela, rodapé, linha com o ponteiro em cima. */
  --borda: #dde1da; /* Divisória entre partes de um cartão e entre linhas. */
  --borda-forte: #c3cbbe; /* Borda de campo e do botão de cancelar. */
  --realce-escuro: rgba(255, 255, 255, .12); /* Ponteiro em cima de botão na barra escura do topo. */
  --veu: rgba(35, 40, 43, .45); /* O fundo escurecido atrás de um diálogo aberto. */

  /* fonte | Família | Uma família só. O Inter é usado se estiver instalado, e senão vale a fonte do sistema. */
  --fonte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Todo texto do sistema. */

  /* fonte | Escala de texto | Tamanho de fonte não se escolhe no olho: cada papel tem o seu, e fora desta lista não existe tamanho. */
  --t-numero: 28px; /* Número grande do painel e ícone do estado vazio. */
  --t-titulo: 22px; /* h1, o nome da tela. Um por tela. */
  --t-icone: 18px; /* Ícone de destaque: abrir o menu e o alerta do diálogo. */
  --t-secao: 17px; /* h2, que secciona a tela. */
  --t-marca: 16px; /* O nome Vicejo na barra do topo. */
  --t-corpo: 15px; /* Texto de corpo e h3. */
  --t-controle: 14px; /* Botão, tabela, aviso e ícone de botão e de menu. */
  --t-apoio: 13px; /* Texto de apoio, rótulo de campo, trilha e rodapé de relatório. */
  --t-legenda: 12px; /* Cabeçalho de tabela, selo, ajuda e erro de campo. */
  --t-micro: 11px; /* Título de grupo do menu lateral, em caixa alta. */
  --t-minimo: 9px; /* Só a seta entre os itens da trilha. */

  /* espaco | Espaçamento | Grade de 8px. Não existe padding de 13px no sistema: número solto nunca combina com o vizinho. */
  --e1: 4px; /* Entre rótulo e campo, entre ações de uma linha. */
  --e2: 8px; /* Entre ícone e texto, entre botões. */
  --e3: 16px; /* Respiro de cartão, entre campos, entre cartões. */
  --e4: 24px; /* Margem lateral da página e entre grupos do menu. */
  --e5: 32px; /* Separação maior entre blocos. */
  --e6: 48px; /* Estado vazio e o fim da página. */

  /* forma | Forma | Raio e sombra. O cartão é mais redondo que o controle de dentro dele. */
  --raio: 10px; /* Cartão e diálogo. */
  --raio-pequeno: 6px; /* Botão, campo, aviso e paginação. */
  --sombra: 0 1px 2px rgba(35, 40, 43, .06), 0 2px 8px rgba(35, 40, 43, .05); /* Cartão. */
  --sombra-alta: 0 8px 32px rgba(35, 40, 43, .18); /* Diálogo e menu aberto no celular. */

  /* medida | Medidas | As medidas fixas da estrutura. */
  --toque: 44px; /* Altura mínima de todo alvo clicável. É o tamanho do polegar. */
  --topo: 60px; /* Altura da barra do topo. */
  --lateral: 248px; /* Largura do menu lateral. */

  /* movimento | Movimento | Transição curta, só para hover e foco. Quem pediu menos animação não recebe nenhuma. */
  --transicao: 140ms ease; /* Hover e foco de botão, campo, linha e menu. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Hierarquia de texto ────────────────────────────────────────
   Um nível por papel: h1 nomeia a tela, h2 secciona, h3 agrupa dentro
   da seção. Tamanho nunca é escolhido no olho. */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--t-titulo); line-height: 1.25; }
h2 { font-size: var(--t-secao); }
h3 { font-size: var(--t-corpo); color: var(--texto-suave); }
p { margin: 0 0 var(--e2); }
small, .texto-suave { color: var(--texto-suave); font-size: var(--t-apoio); }
.texto-fraco { color: var(--texto-fraco); }
.numero { font-variant-numeric: tabular-nums; }

a { color: var(--primaria); }

/* ─── Estrutura ─────────────────────────────────────────────── */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0 var(--e3);
  background: var(--texto);
  color: var(--sobre-cor);
  z-index: 40;
}

.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--sobre-cor);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--t-marca);
}

.topo-acoes { display: flex; align-items: center; gap: var(--e2); }
.topo-usuario { color: var(--topo-texto); font-size: var(--t-apoio); }

.abrir-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--sobre-cor);
  font-size: var(--t-icone);
  cursor: pointer;
}
.abrir-menu:hover { background: var(--realce-escuro); }

.lateral {
  position: fixed;
  top: var(--topo);
  bottom: 0;
  left: 0;
  width: var(--lateral);
  padding: var(--e3) var(--e2);
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  overflow-y: auto;
  z-index: 30;
}

.lateral-grupo { margin-bottom: var(--e4); }
.lateral-titulo {
  padding: 0 var(--e2) var(--e2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.lateral-item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.lateral-item i { width: 18px; text-align: center; font-size: var(--t-controle); }
.lateral-item:hover { background: var(--superficie-alt); }
.lateral-item[aria-current="page"] {
  background: var(--primaria-clara);
  color: var(--primaria-escura);
  font-weight: 600;
}

.conteudo {
  margin-left: var(--lateral);
  padding-top: var(--topo);
  min-height: 100vh;
}

.pagina { padding: var(--e3) var(--e4) var(--e6); max-width: 1200px; }

/* ─── Cabeçalho da página ───────────────────────────────────── */
.pagina-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e3);
  flex-wrap: wrap;
}
.pagina-titulo { display: flex; flex-direction: column; gap: var(--e1); }
.pagina-acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* ─── Trilha ────────────────────────────────────────────────── */
.trilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e3) var(--e4) 0;
  font-size: var(--t-apoio);
  color: var(--texto-suave);
}
.trilha ol { display: contents; list-style: none; margin: 0; padding: 0; }
.trilha li { display: inline-flex; align-items: center; gap: var(--e2); }
.trilha a { color: var(--primaria); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.trilha i { font-size: var(--t-minimo); color: var(--texto-fraco); }
.trilha [aria-current="page"] { color: var(--texto); font-weight: 600; }

/* ─── Botões ────────────────────────────────────────────────────
   A cor diz a intenção e ela é a mesma no sistema inteiro:
   confirmar é verde, cancelar é neutro, destruir é vermelho. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font: inherit;
  font-size: var(--t-controle);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn i { font-size: var(--t-controle); line-height: 1; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primaria), transparent 62%); outline-offset: 2px; }

.btn-confirmar { background: var(--confirmar); color: var(--sobre-cor); border-color: var(--confirmar); }
.btn-confirmar:hover:not(:disabled) { background: var(--confirmar-escura); border-color: var(--confirmar-escura); }

.btn-cancelar { background: var(--cancelar); color: var(--texto); border-color: var(--borda-forte); }
.btn-cancelar:hover:not(:disabled) { background: var(--superficie-alt); border-color: var(--texto-fraco); }

.btn-destruir { background: var(--destruir); color: var(--sobre-cor); border-color: var(--destruir); }
.btn-destruir:hover:not(:disabled) { background: var(--destruir-escura); border-color: var(--destruir-escura); }

.btn-icone {
  width: var(--toque);
  min-height: var(--toque);
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
}
.btn-icone:hover { background: var(--superficie-alt); color: var(--texto); }
.btn-icone.btn-destruir { color: var(--destruir); background: transparent; border-color: transparent; }
.btn-icone.btn-destruir:hover { background: var(--destruir-clara); color: var(--destruir-escura); }

.btn-pequeno { min-height: 36px; padding: var(--e1) var(--e2); font-size: var(--t-apoio); }

/* ─── Cartão ────────────────────────────────────────────────── */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cartao + .cartao { margin-top: var(--e3); }
.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.cartao-corpo { padding: var(--e3); }

/* O texto que vai para o grupo do WhatsApp. Fonte e quebra iguais as do
   celular, para quem le aqui ver o que o grupo vai ver. */
.texto-para-o-grupo {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font: inherit;
  color: var(--texto);
  background: var(--fundo, var(--superficie));
  white-space: pre-wrap;
  resize: vertical;
}

/* ─── Relatório ─────────────────────────────────────────────────
   Todo relatório tem a mesma anatomia: ferramentas com busca, tabela,
   rodapé com contagem e paginação. */
.relatorio-ferramentas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}

.relatorio-busca { position: relative; display: flex; align-items: center; width: min(340px, 100%); }
.relatorio-busca i { position: absolute; left: var(--e3); color: var(--texto-fraco); pointer-events: none; }
.relatorio-busca input {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e3) var(--e2) 38px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font: inherit;
  background: var(--superficie);
}
.relatorio-busca input:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }

.tabela-rolagem { overflow-x: auto; }

table.relatorio { width: 100%; border-collapse: collapse; font-size: var(--t-controle); }
table.relatorio th, table.relatorio td {
  padding: var(--e2) var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
table.relatorio th {
  font-size: var(--t-legenda);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--superficie-alt);
  white-space: nowrap;
}
table.relatorio tbody tr { transition: background var(--transicao); }
table.relatorio tbody tr:hover { background: var(--superficie-alt); }
table.relatorio tbody tr:last-child td { border-bottom: 0; }
.col-numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-acoes { width: 1%; white-space: nowrap; }
.acoes-linha { display: flex; align-items: center; justify-content: flex-end; gap: var(--e1); }

.relatorio-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--borda);
  background: var(--superficie-alt);
  font-size: var(--t-apoio);
  color: var(--texto-suave);
  flex-wrap: wrap;
}

.paginacao { display: flex; align-items: center; gap: var(--e1); }
.paginacao a, .paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao);
}
.paginacao a:hover { background: var(--primaria-clara); border-color: var(--primaria); }
.paginacao [aria-current="page"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-cor); font-weight: 600; }
.paginacao .desabilitado { opacity: .45; }

/* ─── Vazio ─────────────────────────────────────────────────────
   Centralizado por flex e não por text-align: o <i> do Font Awesome
   desenha por pseudo-elemento e não herda alinhamento de forma
   confiável. Com flex o ícone fica no eixo em qualquer largura. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  padding: var(--e6) var(--e3);
  text-align: center;
  color: var(--texto-suave);
}
.vazio i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--e2);
  font-size: var(--t-numero);
  line-height: 1;
  color: var(--borda-forte);
}
.vazio p { margin: 0; max-width: 42ch; }

/* ─── Formulário ────────────────────────────────────────────────
   Todo formulário tem a mesma anatomia: campos em grade, rodapé com
   confirmar à direita e cancelar ao lado. */
.formulario { display: grid; gap: var(--e3); }
.campos { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos.uma-coluna { grid-template-columns: minmax(0, 1fr); }
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo.largo { grid-column: 1 / -1; }
.campo label { display: inline-flex; align-items: baseline; gap: var(--e1); font-size: var(--t-apoio); font-weight: 600; color: var(--texto-suave); }

/* O asterisco marca o campo obrigatório. Ele é decorativo: quem anuncia a
   obrigatoriedade para o leitor de tela é o `required` do próprio campo mais o
   texto escondido no rótulo. */
.obrigatorio { color: var(--destruir); font-weight: 700; }

/* A legenda explica o asterisco. Sem ela o símbolo é convenção presumida, e
   quem nunca viu não sabe o que significa. */
.legenda-obrigatorios {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--t-legenda);
  color: var(--texto-suave);
}
.campo input, .campo select, .campo textarea {
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-fraco); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-clara);
}
.campo .ajuda { font-size: var(--t-legenda); color: var(--texto-fraco); }
.campo .erro-campo { font-size: var(--t-legenda); color: var(--destruir); }
.campo.invalido input, .campo.invalido select { border-color: var(--destruir); }

.formulario-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}

/* ─── Avisos ────────────────────────────────────────────────── */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  margin-bottom: var(--e3);
  font-size: var(--t-controle);
}
/* O ícone alinha pelo flex, e nunca por `margin` (é o que `doc/interface.md`
   manda). Ele vira uma caixa da altura de uma linha de texto e centraliza o
   glifo dentro dela: assim ele fica no meio quando o aviso tem uma linha, e no
   meio da PRIMEIRA linha quando tem várias, que é o que se espera nos dois
   casos. Com `margin-top` fixo ele acertava um caso e errava o outro. */
.aviso i { display: flex; align-items: center; min-height: 1.5em; flex: none; }
.aviso-sucesso { background: var(--primaria-clara); border-color: var(--primaria); color: var(--primaria-escura); }
.aviso-erro { background: var(--destruir-clara); border-color: var(--destruir); color: var(--destruir-escura); }
.aviso-atencao { background: var(--atencao-clara); border-color: var(--atencao); color: var(--atencao-escura); }
.aviso-informacao { background: var(--informacao-clara); border-color: var(--informacao); color: var(--informacao-escura); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: 999px;
  font-size: var(--t-legenda);
  font-weight: 600;
  line-height: 20px;
}
.selo-neutro { background: var(--superficie-alt); color: var(--texto-suave); border: 1px solid var(--borda); }
.selo-positivo { background: var(--primaria-clara); color: var(--primaria-escura); }
.selo-atencao { background: var(--atencao-clara); color: var(--atencao-escura); }
.selo-negativo { background: var(--destruir-clara); color: var(--destruir-escura); }

/* ─── Diálogo ───────────────────────────────────────────────── */
dialog.dialogo {
  width: min(460px, calc(100vw - var(--e4)));
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  color: var(--texto);
}
dialog.dialogo::backdrop { background: var(--veu); }

/* Modal de formulário é mais largo que o de confirmação, e rola por dentro
   quando o formulário é maior que a tela. No celular ele ocupa a tela inteira,
   porque meia tela com rolagem dupla é pior que página. */
dialog.dialogo-formulario { width: min(640px, calc(100vw - var(--e4))); max-height: 90vh; overflow: auto; }
@media (max-width: 900px) {
  dialog.dialogo-formulario {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}
.dialogo-topo { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--borda); }
.dialogo-corpo { padding: var(--e3); }
.dialogo-rodape { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e3); border-top: 1px solid var(--borda); background: var(--superficie-alt); }
.dialogo-icone { color: var(--destruir); font-size: var(--t-icone); }

/* ─── Carregando ────────────────────────────────────────────── */
.carregando { display: inline-flex; align-items: center; gap: var(--e2); color: var(--texto-suave); font-size: var(--t-apoio); }
.girando { animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .girando { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* O Turbo já sinaliza navegação em andamento. A barra usa esse sinal em vez de
   um spinner por tela, que é o que produz loading demais. */
.barra-progresso {
  position: fixed;
  top: var(--topo);
  left: 0;
  height: 3px;
  width: 0;
  background: var(--primaria);
  z-index: 60;
  transition: width 180ms ease;
}
html.turbo-progress-bar-visible .barra-progresso { width: 70%; }

.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Acesso ────────────────────────────────────────────────── */
.acesso { display: grid; place-items: center; min-height: 100vh; padding: var(--e3); }
.acesso .cartao { width: min(380px, 100%); }
.acesso h1 { text-align: center; margin-bottom: var(--e1); }
.acesso .logotipo { display: block; margin: 0 auto var(--e2); }
.acesso .btn { width: 100%; }
.acesso-subtitulo { text-align: center; margin-bottom: var(--e4); }
.acesso-codigo input { text-align: center; font-variant-numeric: tabular-nums; }
.acesso-rodape { text-align: center; margin-top: var(--e3); }

/* ─── Celular ───────────────────────────────────────────────────
   A tabela não encolhe: ela vira cartão. Cada célula passa a ser uma
   linha de rótulo e valor, legível no polegar. */
@media (max-width: 900px) {
  .abrir-menu { display: inline-flex; }

  .lateral {
    transform: translateX(-100%);
    transition: transform var(--transicao);
    width: min(84vw, var(--lateral));
    box-shadow: var(--sombra-alta);
  }
  .lateral[data-aberta="true"] { transform: translateX(0); }

  .conteudo { margin-left: 0; }
  .pagina { padding: var(--e3) var(--e3) var(--e6); }
  .trilha { padding: var(--e3) var(--e3) 0; }

  .campos { grid-template-columns: minmax(0, 1fr); }
  .formulario-rodape { flex-direction: column-reverse; align-items: stretch; }
  .formulario-rodape .btn { width: 100%; }

  table.relatorio thead { display: none; }
  table.relatorio, table.relatorio tbody, table.relatorio tr, table.relatorio td { display: block; width: 100%; }
  table.relatorio tr { padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
  table.relatorio td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e1) var(--e3);
    border: 0;
    text-align: right;
  }
  table.relatorio td::before {
    content: attr(data-rotulo);
    font-size: var(--t-legenda);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    text-align: left;
  }
  table.relatorio td.col-acoes { justify-content: flex-end; padding-top: var(--e2); }
  table.relatorio td.col-acoes::before { content: ""; }

  .relatorio-rodape { justify-content: center; }
}

/* Painel: os avisos primeiro, os números depois. A ordem na tela é a ordem da
   urgência, e não a do que é mais bonito de mostrar. */
.painel-avisos { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e3); }

/* O `.aviso` base alinha pelo topo, porque mensagem de flash quebra em várias
   linhas e o ícone precisa ficar na primeira. No painel o aviso é de uma linha
   com ação à direita, então ele centraliza. O `margin-top` do ícone sai junto:
   com `align-items: center` ele desalinha em vez de alinhar. */
.painel-avisos .aviso { justify-content: space-between; gap: var(--e2); }
.painel-avisos .aviso span { flex: 1; }
.painel-avisos .aviso .btn { flex: none; }

/* `.cartao + .cartao` empurra todo cartão que não é o primeiro para baixo, o que
   é certo numa pilha e errado numa grade: dentro dela os cartões são irmãos na
   mesma linha, e a margem os deixa com alturas diferentes. */
.painel-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e3);
  align-items: stretch;
}
.painel-numeros .cartao + .cartao { margin-top: 0; }
.cartao-numero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e1);
  padding: var(--e3);
}
.cartao-numero .rotulo { color: var(--texto-suave); font-size: var(--t-controle); }
.cartao-numero .numero-grande { font-size: var(--t-numero); line-height: 1.2; }

/* No modo `static` o flatpickr embrulha o campo, e o invólucro é inline-block
   por padrão: sem isto o campo de data encolhe e para de acompanhar a largura
   dos outros campos do formulário. */
.flatpickr-wrapper { display: block; width: 100%; }

/* ─── Sistema de design ─────────────────────────────────────────
   A vitrine em /sistema-de-design. A amostra recebe só a variável
   (`--amostra: var(--confirmar)`) e a classe decide o que fazer com ela,
   para nenhum valor ser copiado para o HTML. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-legenda);
  padding: 0 var(--e1);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-alt);
  color: var(--texto);
  white-space: nowrap;
}

.ds-indice { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-bottom: var(--e4); }
.ds-indice a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; text-decoration: none; }
.ds-indice a:hover { text-decoration: underline; }

.ds-secao { margin-bottom: var(--e5); scroll-margin-top: calc(var(--topo) + var(--e3)); }
.ds-secao > h2 { margin-bottom: var(--e3); }
.ds-grupo-topo { flex-direction: column; align-items: flex-start; gap: var(--e1); }
.ds-grupo-topo p, .ds-anatomia p { margin: 0; }
.ds-anatomia { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); border-bottom: 1px solid var(--borda); }

.ds-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ds-tokens-fonte, .ds-tokens-espaco, .ds-tokens-medida { grid-template-columns: minmax(0, 1fr); }
.ds-token {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
}
.ds-token-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); min-width: 0; }
.ds-token-nome { font-weight: 600; }
.ds-token-valor { background: transparent; padding: 0; color: var(--texto-suave); white-space: normal; overflow-wrap: anywhere; }

/* Texto, espaço e medida mostram a amostra numa coluna de largura fixa, para
   o nome do token não andar de lugar conforme o tamanho da amostra. */
.ds-tokens-fonte .ds-token, .ds-tokens-espaco .ds-token, .ds-tokens-medida .ds-token {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* A maior medida é a do menu lateral (248px), e a coluna cabe ela. */
.ds-tokens-espaco .ds-token, .ds-tokens-medida .ds-token { grid-template-columns: 264px minmax(0, 1fr); }

.amostra { flex: none; }
.amostra-cor {
  width: var(--toque);
  height: var(--toque);
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--borda);
  background: var(--amostra);
}
.amostra-familia, .amostra-fonte { min-width: 0; font-size: var(--t-secao); line-height: 1.25; overflow-wrap: anywhere; }
.amostra-familia { font-family: var(--amostra); }
.amostra-fonte { font-size: var(--amostra); }
.amostra-largura { width: var(--amostra); max-width: 100%; height: var(--e3); border-radius: var(--raio-pequeno); background: var(--primaria); }
.amostra-raio, .amostra-sombra, .amostra-movimento {
  width: var(--toque);
  height: var(--toque);
  border: 1px solid var(--borda);
  background: var(--superficie);
}
.amostra-raio { border: 2px solid var(--primaria); border-radius: var(--amostra); }
.amostra-sombra { border-radius: var(--raio); box-shadow: var(--amostra); }
.amostra-movimento { border-radius: var(--raio-pequeno); transition: background var(--amostra), transform var(--amostra); }
.amostra-movimento:hover { background: var(--primaria-clara); transform: scale(1.1); }

.ds-hierarquia p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.ds-exemplo-titulo { font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.01em; }
.ds-exemplo-secao { font-size: var(--t-secao); font-weight: 600; }
.ds-exemplo-grupo { font-weight: 600; color: var(--texto-suave); }

.ds-par {
  display: inline-flex;
  align-items: center;
  padding: var(--e1) var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  color: var(--amostra-texto);
  background: var(--amostra-fundo);
  font-weight: 600;
  white-space: nowrap;
}

.ds-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ds-icone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e1);
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
}
.ds-icone i { display: flex; align-items: center; min-height: var(--toque); font-size: var(--t-icone); color: var(--texto); }
.ds-icone code.texto-fraco { background: transparent; padding: 0; color: var(--texto-suave); white-space: normal; overflow-wrap: anywhere; }

.ds-vitrine { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3); }
.ds-exemplo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); }
[data-contraste] .selo { white-space: nowrap; }
.ds-dialogo-titulo { margin: 0; font-size: var(--t-secao); font-weight: 600; }

@media (max-width: 900px) {
  .ds-tokens-fonte .ds-token, .ds-tokens-espaco .ds-token, .ds-tokens-medida .ds-token { grid-template-columns: minmax(0, 1fr); }
}