/* ==========================================================================
   Tabelas, formulários e blocos de dados
   ========================================================================== */

.pilha            { display: flex; flex-direction: column; gap: var(--e-5); }
.pilha--compacta  { gap: var(--e-2); }
/* `.mono` = NÚMERO alinhado (quantidade, valor, data): Montserrat com
   algarismos tabulares — alinha coluna como monospace, sem cara de terminal.
   Monospace de verdade só para código técnico (chave de configuração, hash,
   payload, ID de evento): `.codigo-tecnico`. */
.mono             { font-family: var(--fonte); font-variant-numeric: tabular-nums; }
.codigo-tecnico   { font-family: var(--fonte-mono); font-size: .92em; }
.ta-direita       { text-align: right; }
.sub              { display: block; font-size: var(--txt-xs); color: var(--texto-3); }

/* Eyebrow de categoria acima da chave técnica (Configurações) — a lista de
   parâmetros é longa e plana; isto dá um ponto de varredura sem precisar
   de seção/cabeçalho de grupo dentro da tabela. */
.parametro__categoria {
  display: block;
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 1px;
}

/* --- filtros --------------------------------------------------------------- */
.filtros {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  /* auto-fit em vez de "2fr 1fr 1fr" fixo: página com 2 filtros não fica
     com uma coluna vazia esticada, página com 5 não estoura a largura —
     mesma técnica que só `.filtros--largo` (dashboard) usava antes. */
  .filtros { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
}
/* Os chips de período (Central de Auditoria) entram como mais um campo de
   `.filtros`, mas são uma fileira de botões, não um `<select>`/`<input>` —
   espremê-los numa única célula de ~12.5rem cortaria a fileira pela metade.
   Ocupam a largura toda do grid, como uma faixa própria acima dos demais.
   `wrap` em vez do `overflow-x: auto` padrão de `.chips-periodo`: dentro do
   drawer (estreito, mas com altura sobrando) quebrar em duas fileiras lê
   melhor que forçar rolagem horizontal numa lista de 8 opções. */
.filtros > .chips-periodo {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Envolve `.filtros` com a contagem de filtros ativos + "Limpar" — ver
   components/ui/filtros.js. Compacta o conjunto todo num único bloco em vez
   de filtro solto ocupando a largura da página como um formulário. */
.filtros-barra {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--e-3) var(--e-4);
}
.filtros-barra__rodape {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.filtros-barra__rodape:has(:not([hidden])) { margin-top: var(--e-3); }
.filtros-barra__contagem {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--azul-700);
  background: var(--azul-100);
  padding: 2px var(--e-2);
  border-radius: 999px;
}

/* Preferência de VISUALIZAÇÃO (ex. "Ordenar por"), não um filtro que
   restringe os dados — dentro do mesmo cartão, mas visualmente mais
   discreta: sem a largura mínima de 12.5rem do grid principal, fonte e
   rótulo menores (mesmo padrão de "ação secundária" que o rodapé de
   exportação do Dashboard já usava, antes de virar ação de cabeçalho). */
.filtros-barra__secundario {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linha);
  max-width: 16rem;
}
.filtros-barra__secundario .rotulo { font-size: var(--txt-xs); }
.filtros-barra__secundario .campo { min-height: 36px; font-size: var(--txt-sm); }

/* --- tabela ---------------------------------------------------------------- */
.tabela-wrapper {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

/* Conteúdo largo rola dentro do próprio container, nunca a página. */
.tabela__scroll { overflow-x: auto; }

.tabela { width: 100%; font-size: var(--txt-sm); }

/* Cabeçalho discreto: caixa alta pequena, sem faixa colorida — o dado é o
   protagonista, não a moldura. Fundo branco com filete inferior mais forte. */
.tabela th {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  background: var(--surface);
  border-bottom: 1px solid var(--linha-2);
  font-family: var(--fonte);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
}

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

.tabela tbody tr:last-child td { border-bottom: 0; }
/* Data/hora, códigos e IDs técnicos não quebram no meio. */
.tabela td.mono { white-space: nowrap; font-size: 0.8125rem; }
/* Número em coluna à direita (quantidade, valor): Montserrat com algarismos
   tabulares — alinha igual ao monospace sem a "cara de terminal". Monospace
   fica para código/ID (coluna à esquerda). */
.tabela :is(td, th).ta-direita.mono,
.tabela td.ta-direita .mono { font-family: var(--fonte); font-size: var(--txt-sm); font-variant-numeric: tabular-nums; }
.tabela tbody tr { transition: background-color .12s ease; }
.tabela tbody tr:hover td { background: var(--linha-hover); }

.tabela__linha--clicavel { cursor: pointer; }
.tabela__linha--clicavel:hover td { background: var(--azul-50); }
.tabela__linha--clicavel:focus-visible { outline: 2px solid var(--azul-500); outline-offset: -2px; }

.tabela__erro { color: var(--falta); padding: var(--e-5); text-align: center; }

.tabela__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linha);
  background: var(--surface-2);
}
.tabela__status { font-size: var(--txt-xs); color: var(--texto-2); }
.estado-vazio-inline { font-size: var(--txt-sm); color: var(--texto-2); margin: 0; }

/*
  Celular: cada linha vira um cartão com rótulo por campo.
  Tabela rolando de lado é inutilizável para quem consulta em pé no estoque.
*/
@media (max-width: 767px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }

  .tabela tr {
    border-bottom: 1px solid var(--linha);
    padding: var(--e-2) 0;
  }

  .tabela td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
    border: 0;
    padding: var(--e-1) var(--e-4);
    text-align: left;
  }

  .tabela td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--txt-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-3);
    font-weight: 600;
  }

  .tabela td.ta-direita { text-align: left; }
}

/* --- selos e chips --------------------------------------------------------- */
/* Selos semânticos: fundo tingido + texto escuro da mesma família (AA).
   Verde = ok, âmbar = atenção, vermelho = erro, azul = info, cinza = neutro.
   O laranja da marca NUNCA é status. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--e-2);
  border-radius: 999px;
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--texto-2);
  background: var(--surface-2);
}
.selo--ok      { color: var(--conforme-texto); background: var(--conforme-100); }
.selo--erro    { color: var(--falta-texto); background: var(--falta-100); }
.selo--atencao { color: var(--atencao-texto); background: var(--atencao-100); }
.selo--info    { color: var(--azul-700); background: var(--azul-100); }
.selo--ativo   { color: var(--azul-700); background: var(--azul-100); }
.selo--neutro  { color: var(--texto-2); background: var(--surface-2); border-color: var(--linha); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.chip {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  background: var(--surface-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 1px var(--e-2);
}
.chip--destaque { border-color: var(--azul-300); background: var(--azul-100); }
.chip__fator { color: var(--texto-3); font-style: normal; }

/* --- métricas -------------------------------------------------------------- */
.metricas {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .metricas { grid-template-columns: repeat(4, 1fr); }
}

.metrica {
  background: var(--surface);
  border: 1px solid var(--linha);
  /* Barra de 3px em vez de recolorir a borda inteira (1px de cor quase não
     se nota numa varredura rápida) — leitura mais rápida sem "pintar" o
     card inteiro, mantendo a interface corporativa, não colorida demais. */
  border-left: 3px solid var(--linha-2);
  border-radius: var(--raio);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: box-shadow .15s ease;
}
/* Só existe quando a métrica tem `ajuda` (Metricas.js): o cabeçalho sai do
   elemento clicável (um <details> de popover dentro de <button> é inválido),
   então o "resto" do card (valor/tendência/detalhe, opcionalmente o próprio
   link) vira este wrapper — mesmo `display:flex; column; gap:2px` que
   `.metrica` já tinha, só que escopado a partir do cabeçalho pra baixo. */
.metrica__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 100%;
}
.metrica__corpo--link { cursor: pointer; position: relative; }
/* Mesmo efeito de hover/foco que `.metrica--link` já tem (ver
   styles/pages/central.css) — aqui disparado por `:has()` porque o elemento
   clicável é o CORPO, não o `.metrica` inteiro (o cabeçalho, com o botão de
   ajuda, fica fora dele). */
.metrica:has(.metrica__corpo--link:hover),
.metrica:has(.metrica__corpo--link:focus-visible) { box-shadow: var(--sombra); border-color: var(--linha-2); }
.metrica:has(.metrica__corpo--link:hover) .metrica__icone,
.metrica:has(.metrica__corpo--link:focus-visible) .metrica__icone { color: var(--azul-700); }
.metrica__corpo--link:focus-visible { outline: none; }
.metrica__corpo--link .metrica__seta {
  position: absolute;
  bottom: 0;
  right: 0;
  color: var(--texto-3);
  opacity: 0;
  transition: opacity .15s ease;
}
.metrica__corpo--link:hover .metrica__seta,
.metrica__corpo--link:focus-visible .metrica__seta { opacity: 1; color: var(--azul-700); }
/* Padrão único de KPI no sistema: ÍCONE + RÓTULO / VALOR / contexto.
   O ícone vem depois do rótulo no DOM (Metricas.js) e o `row-reverse` o põe
   à esquerda — uma regra só, em vez de cada tela (Central, Indicadores,
   Auditorias, Agenda) posicionar o ícone de um jeito. */
.metrica__cabecalho {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  min-width: 0;
}
.metrica__cabecalho .metrica__icone { flex: 0 0 auto; color: var(--texto-3); }
.metrica__rotulo {
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--texto-2);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.grafico-arco { flex: 0 0 auto; }
.metrica__valor {
  margin-top: var(--e-1);
  font-size: var(--txt-xl);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--texto);
}
/* Só a barra lateral carrega a cor semântica — o valor grande fica na cor
   de texto padrão nos 3 estados (antes só "erro" pintava o número inteiro
   de vermelho, o que deixava metade do dashboard "gritando" em qualquer
   recorte com acuracidade abaixo de 90%, mesmo sem ser um erro de fato). */
.metrica--ok      { border-left-color: var(--conforme); }
.metrica--erro    { border-left-color: var(--falta); }
.metrica--atencao { border-left-color: var(--sobra); }

/* Grupo "manchete" (os 4 KPIs de maior destaque) ganha peso de cartão
   principal — fundo branco + sombra — o grupo `--compactas` (detalhe)
   continua discreto por padding/fonte menor (pages/divergencias.css), sem
   sombra. É a hierarquia entre os dois grupos que o dashboard pedia. */
.metricas--principal .metrica {
  background: var(--surface);
  padding: var(--e-3) var(--e-4);
}
/* Número legível de relance, sem virar manchete: 26px, não 36px. */
.metricas--principal .metrica__valor { font-size: 1.625rem; }
/* prefers-reduced-motion já é tratado globalmente (reset.css) — zera a
   duração de qualquer animação, inclusive esta, sem precisar repetir a
   media query aqui. */
.metrica--entra { animation: metrica-entra .2s ease-out both; }
@keyframes metrica-entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- resumo (dl) ----------------------------------------------------------- */
.resumo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-4);
  margin: 0;
  font-size: var(--txt-sm);
}
.resumo dt { color: var(--texto-3); }
.resumo dd { margin: 0; font-weight: 600; }

/* --- linha de item --------------------------------------------------------- */
.linha-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linha);
}
.linha-item:last-child { border-bottom: 0; }
.linha-item > div:first-child { flex: 1; min-width: 0; }

/* --- linha do tempo -------------------------------------------------------- */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.linha-tempo__item {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) 0 var(--e-3) var(--e-3);
  border-left: 2px solid var(--linha);
  align-items: flex-start;
}
.linha-tempo__item > span { flex: 0 0 auto; }
.linha-tempo__motivo { font-size: var(--txt-sm); margin: var(--e-1) 0 0; }

/* --- avisos ---------------------------------------------------------------- */
.aviso {
  padding: var(--e-3);
  border-radius: var(--raio);
  border-left: 3px solid var(--info);
  background: var(--surface-2);
  font-size: var(--txt-sm);
  margin: var(--e-3) 0;
}
.aviso--ok      { border-left-color: var(--conforme); }
.aviso--erro    { border-left-color: var(--falta); }
.aviso--atencao { border-left-color: var(--sobra); }
.aviso--neutro  { border-left-color: var(--linha-2); }

/* --- formulários ----------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: var(--e-4); }

.formulario--pagina {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra);
}

.formulario__grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .formulario__grade { grid-template-columns: repeat(2, 1fr); }
}

.formulario__linha { display: flex; gap: var(--e-2); align-items: flex-end; flex-wrap: wrap; }
.formulario__linha .campo { flex: 1; min-width: 8rem; }

.formulario__secao {
  border-top: 1px solid var(--linha);
  padding-top: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.formulario__titulo { font-size: var(--txt-md); font-weight: 600; }

.formulario__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.campo--area { min-height: 5rem; padding: var(--e-2) var(--e-3); resize: vertical; }
.campo-grupo--inline { flex-direction: row; align-items: flex-start; gap: var(--e-3); }
.campo-check { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.rotulo--inline { display: block; }
.rotulo__obrigatorio { color: var(--falta); }

.barra-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* --- passos (wizard) ------------------------------------------------------- */
/* Stepper único do sistema (Nova auditoria, ciclo da auditoria, importação
   de saldo/lojas/usuários, encerramento): círculo numerado pequeno + rótulo,
   ligados por um fio — sem pílula nem "bolha". Atual = azul cheio;
   concluído = verde com ✓; pendente = contorno neutro. */
.passos {
  list-style: none;
  margin: 0;
  padding: var(--e-1) 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.passos::-webkit-scrollbar { display: none; }

.passos__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: 0 0 auto;
  font-size: var(--txt-sm);
  white-space: nowrap;
  color: var(--texto-3);
}
/* Fio entre etapas: verde quando a etapa da esquerda já foi concluída. */
.passos__item + .passos__item::before {
  content: "";
  width: clamp(1rem, 3vw, 2.5rem);
  height: 1px;
  margin: 0 var(--e-3) 0 var(--e-2);
  background: var(--linha-2);
}
.passos__item[data-estado="concluido"] + .passos__item::before { background: var(--conforme); }

.passos__item[data-estado="atual"] { color: var(--azul-900); font-weight: 600; }
.passos__item[data-estado="concluido"] { color: var(--texto-2); }

.passos__numero {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--linha-2);
  color: var(--texto-3);
  font-size: var(--txt-xs);
  font-weight: 700;
  line-height: 1;
}
.passos__item[data-estado="atual"] .passos__numero {
  background: var(--azul-900);
  border-color: var(--azul-900);
  color: var(--neutro-0);
}
.passos__item[data-estado="concluido"] .passos__numero {
  background: var(--conforme-100);
  border-color: var(--conforme);
  color: var(--conforme-texto);
}
/* Itens clicáveis (Nova auditoria, ciclo): sem cara de botão, só foco/hover. */
.passos__item:is(a, button),
.passos__item > :is(a, button) { color: inherit; text-decoration: none; border-radius: var(--raio-sm); }
.passos__item:is(a, button):hover .passos__numero,
.passos__item > :is(a, button):hover .passos__numero { border-color: var(--azul-700); }

/* --- detalhes -------------------------------------------------------------- */
.detalhes { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.detalhes > summary {
  padding: var(--e-3) var(--e-4);
  background: var(--surface-2);
  cursor: pointer;
  font-size: var(--txt-sm);
  font-weight: 600;
}

/* --- modal ----------------------------------------------------------------- */
.modal {
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* rgba(7,72,102,…) = --azul-900 (não é cor solta fora da paleta — já era
   assim antes do rebrand, só que com o hex antigo #0B2545; corrigido aqui). */
.modal::backdrop { background: rgba(7, 72, 102, .45); }
/* Mesma técnica de entrada que Toast.js já usa (ver .toast/@keyframes
   toast-entra abaixo) — reduced-motion já é zerado globalmente (reset.css). */
.modal[open] { animation: modal-entra .18s ease-out; }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__topo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
}
.modal__titulo { flex: 1; font-size: var(--txt-lg); font-weight: 700; color: var(--azul-900); line-height: 1.3; }
/* Botão só com ícone: alvo de 40px, não o tamanho do desenho. */
.modal__fechar,
.drawer__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  margin-right: calc(var(--e-2) * -1);
  border-radius: var(--raio);
  color: var(--texto-3);
}
.modal__fechar:hover,
.drawer__fechar:hover { color: var(--texto); background: var(--surface-2); }
.modal__fechar:focus-visible,
.drawer__fechar:focus-visible { outline: none; box-shadow: var(--foco-anel); }

.modal__corpo { padding: var(--e-5); overflow-y: auto; }
.modal__mensagem { font-size: var(--txt-sm); color: var(--texto-2); }

.modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--linha);
  background: var(--surface-2);
  flex-wrap: wrap;
}

/* --- drawer (painel lateral) ------------------------------------------------ */
/* Mesma base acessível do `.modal` (é o mesmo `<dialog>`), só a geometria e a
   entrada mudam: desliza da direita, ocupa a altura inteira, para fechar não
   custar o contexto de quem abriu (ex.: o mês do calendário atrás dele). */
.drawer {
  margin: 0 0 0 auto;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: none;
  border-left: 1px solid var(--linha);
  border-radius: 0;
  background: var(--surface);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drawer::backdrop { background: rgba(7, 72, 102, .45); }
.drawer[open] { animation: drawer-entra .2s ease-out; }
@keyframes drawer-entra {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.drawer__topo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
  flex: 0 0 auto;
}
.drawer__titulo { flex: 1; font-size: var(--txt-lg); font-weight: 700; color: var(--azul-900); line-height: 1.3; }

.drawer__corpo { padding: var(--e-5); overflow-y: auto; flex: 1 1 auto; }

.drawer__rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--linha);
  background: var(--surface-2);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

@media (min-width: 480px) {
  .drawer { width: 26rem; }
}

/* --- cabeçalho de modal/drawer: título + descrição opcional ----------------- */
.modal__cabecalho,
.drawer__cabecalho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modal__descricao,
.drawer__descricao { font-size: var(--txt-sm); color: var(--texto-3); line-height: 1.45; }
.modal__topo, .drawer__topo { align-items: flex-start; }
.modal__rodape, .drawer__rodape { background: var(--surface); }

/* Celular: modal vira folha ancorada embaixo (alcance do polegar), largura
   total, cantos superiores arredondados. Desktop segue centralizado. */
@media (max-width: 639px) {
  .modal {
    width: 100vw;
    max-width: 100vw !important; /* vence o max-width inline por modal */
    margin: auto 0 0;
    max-height: calc(100vh - 2rem);
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    border-bottom: 0;
  }
  .modal[open] { animation: folha-entra .2s ease-out; }
  .modal__rodape { padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
  .modal__rodape .btn { flex: 1 1 auto; }
}
@keyframes folha-entra {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Criticidade com cor parametrizada no banco (`cor_hex`): a cor vem inline
   (texto + borda); aqui só a forma do selo — contorno sobre branco, que lê
   bem com qualquer tom que o administrador escolher. */
.selo--criticidade { background: var(--surface); border-color: currentColor; }