/* ============================================================================
   Tema "MeuSEI" — a terceira camada, sobre `styles.css` e `tema.css`.
   ============================================================================

   O modelo veio pronto (MeuSEI, 01/10/2026): institucional e plano. Fundo
   quase branco, cartões brancos com um contorno fino e escuro, sem sombra;
   vermelho e âmbar reservados ao que cobra prazo; Nunito no texto, JetBrains
   Mono nos números de processo. O cabeçalho tem quatro faixas: a azul
   (prefeitura, usuário e unidade), a cinza (o logo), a branca das seções com
   fio escuro embaixo, e a das abas da seção, sublinhadas.

   As cores são as do logo (02/10/2026). Medidas no PNG enviado na
   Administração: azul `#018eda` (79% dos pixels) e verde-limão `#96ad1c`
   (10%). O azul do logo tem só 3,8:1 contra o branco, então ele é
   `--acento-vivo` (barra, decoração) e o acento que leva texto branco e vira
   link é um degrau mais escuro no mesmo tom, `#0a78be` (4,7:1). O verde do
   logo, que não serve de texto (2,5:1), fica em `--marca-verde`, no
   sublinhado da aba atual; o `--ok` que escreve é o mesmo verde fechado
   (`#5c7a0a`). Os neutros levam um pingo de azul, pela regra de `tema.css`:
   cinza puro lê como esquecido.

   O título "MeuSEI" ao lado do logo some quando há logo enviado (o logo já
   diz o nome): `aplicarLogo` põe `.com-logo` em `.marca`, e o `h1` fica só
   para o leitor de tela. Sem logo, a caixa com o "M" e o título voltam.

   Substitui o tema "alegre" (creme pontilhado, contorno roxo, sombra dura),
   que fica em `alegre.css` sem ser carregado. A regra das camadas continua:
   **para voltar atrás, basta trocar o <link>** — nenhuma tela foi reescrita.
   O que muda aqui são os tokens e o desenho dos componentes que todas as telas
   dividem (cartão, botão, campo, tabela, diálogo, navegação). Tela nova herda
   o tema sem ninguém lembrar dele.

   Duas regras da casa que o modelo não quebra:

   - **urgência é palavra antes de ser cor.** A tarja na margem da ficha e a
     cor da etiqueta reforçam o que já está escrito; o relatório impresso em
     preto e branco continua legível.
   - **contraste.** Branco sobre o azul do acento passa (4,7:1); sobre o
     âmbar do "Pedir à IA" não passa, e lá o texto é a tinta.

   As fontes são servidas daqui (`/fontes/`, licença SIL OFL): a política de
   conteúdo do painel só aceita o que vem da própria origem, e o Google Fonts
   seria bloqueado em silêncio — a tela cairia na fonte do sistema sem dizer. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fontes/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fontes/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fontes/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fontes/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  --fundo: #f4f7fa;
  --papel: #ffffff;
  --elevado: #ffffff;
  --afundado: #e9eef3;
  /* `--borda` é o fio de dentro (entre linhas, entre itens); `--borda-2` o fio
     de campo e de etiqueta neutra; `--tinta` é o contorno dos objetos. */
  --borda: #e1e6ec;
  --borda-2: #87919b;
  --fio: #c7ced6;
  --tinta: #182028;

  --texto: #182028;
  --texto-2: #3d4650;
  --suave: #535c66;

  /* O azul do logo é `--acento-vivo`; o acento é o mesmo tom, mais fechado,
     para o branco passar por cima e o link ler contra o papel. */
  --acento: #0a78be;
  --acento-forte: #075a90;
  --acento-suave: #e3f1fb;
  --acento-vivo: #018eda;
  --barra: #018eda;
  --realce-novo: #fbf2dc;

  /* As duas cores do logo, exatas. Só decoração: nenhuma delas é texto. */
  --marca-azul: #018eda;
  --marca-verde: #96ad1c;

  --perigo: #a8261b;
  --perigo-fundo: #fbe9e6;
  --ok: #5c7a0a;
  --ok-fundo: #eef4d6;
  --alerta: #7a5200;
  --alerta-borda: #b07a12;
  --alerta-fundo: #fbf2dc;
  --delegado: #4a4f9c;
  --delegado-fundo: #ebecf7;

  /* O âmbar dos botões de IA. É fundo, nunca texto. */
  --ambar: #e8b53a;

  --raio: 6px;
  --raio-p: 5px;
  --contorno: 1.5px;

  /* O modelo não tem sombra: o objeto é dito pelo contorno. Os tokens ficam
     definidos porque `tema.css` os usa — valem "nada". */
  --sombra: none;
  --sombra-alta: 0 12px 32px rgba(24, 32, 40, 0.14);
  --sombra-acento: none;

  /* A largura do `main` (contorno a contorno, margem incluída), que as faixas
     do cabeçalho também respeitam: o texto da faixa alinha com o do cartão. */
  --largura: 1240px;
  --margem: 24px;

  --serif: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* O escuro não veio no modelo; é o mesmo desenho com a luz apagada: fundo
   azul-noite, papel um tom acima, e o contorno clareia para o objeto não se
   dissolver no fundo. O azul e o verde sobem de luminosidade para continuar
   lidos. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f161d;
    --papel: #161e27;
    --elevado: #161e27;
    --afundado: #1f2932;
    --borda: #2a3540;
    --borda-2: #5c6a78;
    --fio: #37454f;
    --tinta: #7f8d9a;

    --texto: #e8edf2;
    --texto-2: #c2cbd4;
    --suave: #96a3af;

    --acento: #5bb9f0;
    --acento-forte: #8fd0f8;
    --acento-suave: #163049;
    --acento-vivo: #4db3f3;
    --barra: #4db3f3;
    --realce-novo: #3a3015;

    --marca-azul: #4db3f3;
    --marca-verde: #b7d24d;

    --perigo: #f08a7e;
    --perigo-fundo: #3a1f1c;
    --ok: #b7d24d;
    --ok-fundo: #27300f;
    --alerta: #e8b53a;
    --alerta-borda: #b07a12;
    --alerta-fundo: #352a12;
    --delegado: #a5a9e6;
    --delegado-fundo: #262a45;

    --ambar: #e8b53a;

    --sombra: none;
    --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.5);
    --sombra-acento: none;
  }
}

/* ----------------------------------------------------------------- página */

body {
  font-family: var(--serif);
  font-weight: 400;
  font-feature-settings: normal;
  color: var(--texto);
}
/* Sem textura: o véu (`body::after`, de `tema.css`) fica liso. */
body::after { background-image: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.015em; }
code, kbd, samp { font-family: var(--mono); }
a { color: var(--acento); font-weight: 700; }
a:hover { color: var(--acento-forte); }
strong, b { font-weight: 800; }

/* O título de cada tela. O HTML o escreve com tamanho no `style` (20px), por
   isso o `!important`: é a única regra do tema que precisa gritar. */
main > section > .cabecalho-resultado h2,
.turbo-titulo {
  font-size: clamp(24px, 3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
main > section > .cabecalho-resultado .ajuda,
.turbo-topo .ajuda {
  font-size: 14px;
  color: var(--suave);
}

.ajuda { color: var(--suave); font-weight: 400; font-size: 14px; }
.erro { color: var(--perigo); font-weight: 700; }
.vazio { font-style: normal; color: var(--suave); }

/* ------------------------------------------------------------- cabeçalho
   Quatro faixas de borda a borda, cada uma com o conteúdo centrado na mesma
   largura do `main`. O `.topo` deixa de ser uma linha e vira coluna; a ordem
   do DOM é marca → navegação → ações, e a faixa verde (as ações) sobe para
   o alto pelo `order`. Nada no HTML mudou de lugar.

   Deixa de grudar no alto: com quatro faixas o cabeçalho tem ~170px, e grudado
   comeria um quarto da tela em toda rolagem. */
.topo {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--papel);
  border-bottom: 0;
  backdrop-filter: none;
}
.topo > * {
  padding-left: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)), env(safe-area-inset-left));
  padding-right: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)), env(safe-area-inset-right));
}

/* Faixa 1: azul. Quem é a casa, quem está no painel, onde a sessão está. */
.topo-acoes {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--acento);
  color: #fff;
  font-size: 14px;
  min-height: 48px;
}
.topo-orgao {
  font-weight: 800;
  font-size: 15px;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.conta-topo { color: #fff; font-size: 14px; margin: 0; }
/* A pílula da unidade: branca sobre o azul, em letra de máquina. */
.pilula {
  background: #fff;
  color: #1a1d1b;
  border: 1.5px solid #fff;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 10px;
}
.pilula-botao:hover { background: var(--afundado); border-color: var(--afundado); color: #1a1d1b; }
.pilula-botao[aria-expanded='true'] { border-color: var(--acento-suave); background: var(--acento-suave); }
.pilula-botao::after { opacity: 0.7; }
.menu-unidades {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  background: var(--papel);
  color: var(--texto);
}
/* "Sair" é um link na faixa, como no modelo — não um botão. */
#btn-sair.botao {
  background: transparent;
  border-color: transparent;
  color: #fff;
  padding: 4px 2px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
#btn-sair.botao:hover:not(:disabled) { background: transparent; color: #fff; text-decoration-thickness: 2px; }

/* Faixa 2: cinza. O logo — e o título, só enquanto não há logo enviado. */
.marca {
  order: 0;
  gap: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: var(--afundado);
  border-bottom: 1px solid var(--fio);
}
/* O logo do modelo é a inicial numa caixa azul. O ícone 🗂️ do HTML vira a
   letra: ele some (fonte zero) e o `::before` escreve o "M". O logo enviado na
   Administração continua valendo por cima — ele esconde este. */
.logo {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0;
  border-radius: var(--raio);
  background: var(--acento);
  color: #fff;
  border: 0;
  box-shadow: none;
}
.logo::before {
  content: 'M';
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.topo h1 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--acento);
}
.sub { font-size: 14px; font-weight: 400; color: var(--texto-2); }
/* Com o logo enviado, o nome já está na imagem: o `h1` sai da vista e fica
   só para o leitor de tela. A linha de baixo (`.sub`) continua. */
.marca.com-logo h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Faixas 3 e 4: a navegação. As duas fileiras deixam de ser pílulas e viram
   barras de borda a borda, uma sobre a outra. */
#abas.navegacao {
  order: 1;
  align-items: stretch;
  gap: 0;
  width: 100%;
  flex: none;
  padding: 0;
}
#abas.navegacao > * {
  padding-left: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)), env(safe-area-inset-left));
  padding-right: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)), env(safe-area-inset-right));
}
/* As seções: blocos quadrados; a atual é azul com texto branco; a barra
   inteira fecha com o fio escuro. */
.secoes {
  justify-content: flex-start;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--papel);
  border: 0;
  border-bottom: 2px solid var(--tinta);
  border-radius: 0;
  box-shadow: none;
}
.secao {
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--texto);
}
.secao:hover { background: var(--afundado); color: var(--texto); }
.secao[aria-current='page'] {
  background: var(--acento);
  color: #fff;
  box-shadow: none;
  font-weight: 800;
}
.secao-turbo { color: var(--texto); background: transparent; }
.secao-turbo:hover { color: var(--texto); background: var(--afundado); }
.secao-turbo[aria-current='page'] { color: #fff; background: var(--acento); }
.secao:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* A fileira de baixo: a aba atual leva um sublinhado de 3px — é o `::after`
   deslizante de `tema.css`, mais grosso e de ponta a ponta. O sublinhado é o
   verde do logo: a palavra da aba já está em azul, e é o par das duas cores
   que faz o cabeçalho parecer da mesma família que a imagem. */
#abas .abas {
  justify-content: flex-start;
  gap: 4px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--papel);
  border-bottom: 1px solid var(--fio);
  border-radius: 0;
}
#abas .abas .aba {
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-2);
  background: transparent;
  border: 0;
  border-radius: 0;
}
#abas .abas .aba:hover { background: transparent; color: var(--texto); }
#abas .abas .aba[aria-current='page'] {
  background: transparent;
  color: var(--acento);
  box-shadow: none;
  font-weight: 800;
}
#abas .aba::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 0;
  background: var(--marca-verde);
}
.aba-turbo { color: var(--texto-2); }
.aba-turbo:hover { color: var(--texto); }

/* A bolinha de pendência: o número em vermelho, quadrado de canto pequeno. */
.aba-bolinha {
  background: var(--perigo);
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
}
.secao[aria-current='page'] .aba-bolinha { background: #fff; color: var(--perigo); }

/* --------------------------------------------------------------- cartões */

main { max-width: var(--largura); padding: 32px var(--margem) 72px; }

.cartao {
  background: var(--papel);
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: none;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.cartao h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.cartao h3 { font-weight: 800; }

/* O cabeçalho do cartão é uma faixa cinza, só onde o cartão ABRE com ele. As
   margens negativas levam a faixa até o contorno. Sem `overflow: hidden` no
   cartão: a janelinha das marcas de estado e os menus precisam sair dele. */
.cartao > .cabecalho-bloco:first-child {
  margin: -22px -24px 18px;
  padding: 14px 24px;
  background: var(--afundado);
  border-bottom: 1px solid var(--fio);
  border-radius: calc(var(--raio) - var(--contorno)) calc(var(--raio) - var(--contorno)) 0 0;
  align-items: center;
}
.cartao > .cabecalho-bloco:first-child h2 { font-size: 17px; }
.cabecalho-bloco .fonte {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  padding: 0;
  background: transparent;
  color: var(--suave);
  border: 0;
}
.cabecalho-bloco .fonte:empty { display: none; }

/* ---------------------------------------------------------- formulários */

label {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
}
.check-inline,
.lista-escopos label,
label.check-inline,
label.interruptor,
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
}

input[type='text'], input[type='password'], input[type='search'], input[type='number'],
input[type='date'], input[type='email'], input[type='url'], input:not([type]),
select, textarea {
  background: var(--papel);
  color: var(--texto);
  border: var(--contorno) solid var(--borda-2);
  border-radius: var(--raio-p);
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--suave); opacity: 0.9; }
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--acento);
  width: 16px;
  height: 16px;
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; }
input[type='file'] { font-family: var(--serif); color: var(--suave); }
input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--papel);
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------------- botões
   Plano: contorno fino, canto pequeno, sem sombra. O primário é azul com
   texto branco; o comum é branco com o contorno da tinta. */
.botao {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  padding: 9px 18px;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--serif);
  font-weight: 800;
  box-shadow: none;
}
.botao:hover:not(:disabled) { background: var(--afundado); transform: none; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled, .botao[disabled] {
  opacity: 1;
  background: var(--borda);
  color: var(--suave);
  border-color: var(--fio);
}
.botao.pequeno { padding: 5px 12px; font-size: 13px; font-weight: 700; }
.botao.primario { background: var(--acento); color: #fff; border-color: var(--acento); }
.botao.primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao.fantasma { background: var(--papel); color: var(--texto); border-color: var(--tinta); }
.botao.fantasma:hover:not(:disabled) { background: var(--afundado); color: var(--texto); }
.botao.perigo { background: var(--perigo); color: #fff; border-color: var(--perigo); }
.botao.perigo:hover:not(:disabled) { background: var(--perigo); filter: brightness(0.9); }

/* Pedir à IA é âmbar, como no modelo. Texto em tinta: branco sobre o âmbar
   não passa na conta de contraste. A cor sai do `id` do botão. */
.botao[id$='-sugerir'], .botao[id*='-propor'], .botao[id*='-redigir'], .botao[id*='-analisar'] {
  background: var(--ambar);
  color: #1a1d1b;
  border-color: var(--alerta-borda);
}
.botao[id$='-sugerir']:hover:not(:disabled), .botao[id*='-propor']:hover:not(:disabled),
.botao[id*='-redigir']:hover:not(:disabled), .botao[id*='-analisar']:hover:not(:disabled) {
  background: var(--ambar);
  filter: brightness(0.95);
}
/* Atualizar e carregar são o primário da tela. */
.botao[id$='-atualizar'], .botao[id$='-carregar'], .botao[id^='btn-atualizar'] {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
}
.botao[id$='-atualizar']:hover:not(:disabled), .botao[id$='-carregar']:hover:not(:disabled),
.botao[id^='btn-atualizar']:hover:not(:disabled) {
  background: var(--acento-forte);
  border-color: var(--acento-forte);
}

.botao-icone {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio-p);
  background: var(--papel);
}

/* O primário de `styles.css` nasce com `margin-top: 18px` (era o botão de
   fim de formulário). Numa fileira de ações ele descia sozinho. */
.linha-acoes .botao,
.cabecalho-resultado .botao,
.turbo-topo .botao,
.periodo .botao,
.filtros .botao { margin-top: 0; }

/* ------------------------------------------- os outros objetos que flutuam
   Tudo o que `tema.css` desenhava como superfície elevada (fio fino e sombra
   difusa) ganha o contorno do modelo, sem sombra. */
.adm-indice,
.adm-cabeca,
.turbo-ficha,
.turbo-expresso-linha,
.marca-estado .popup,
.exp-autos,
.exp-mesa,
.dsp-desfecho,
.ini-trilha {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: none;
}
.marca-estado .popup { box-shadow: var(--sombra-alta); }
.turbo-expresso-linha { background: var(--papel); }

/* A Administração: índice com cabeçalho azul na seção aberta. O `overflow`
   só no computador: no celular o índice é uma tira que ROLA (`styles.css`),
   e escondê-lo aqui deixaria a quinta seção fora de alcance. */
.adm-indice { padding: 0; background: var(--papel); }
@media (min-width: 821px) { .adm-indice { overflow: hidden; } }
@media (max-width: 820px) {
  .adm-item { border-top: 0; border-left: 1px solid var(--borda); }
  .adm-item:first-child { border-left: 0; }
}
.adm-item {
  border-radius: 0;
  border-top: 1px solid var(--borda);
  padding: 12px 16px;
  box-shadow: none;
}
.adm-item:first-child { border-top: 0; }
.adm-titulo { font-weight: 800; font-size: 22px; }
.adm-nome { font-weight: 800; }
.adm-desc { font-size: 12.5px; color: var(--suave); }
.adm-item[aria-current='page'] {
  background: var(--acento);
  color: #fff;
  box-shadow: none;
}
.adm-item[aria-current='page'] .adm-nome,
.adm-item[aria-current='page'] .adm-desc { color: #fff; }
.adm-item:hover:not([aria-current='page']) { background: var(--afundado); }

input[type='date'],
#tela-fisicos input[type='date'] {
  border: var(--contorno) solid var(--borda-2);
  border-radius: var(--raio-p);
  background: var(--papel);
  font-family: var(--serif);
}
.turbo-sugestao {
  border: 1px solid var(--fio);
  border-radius: var(--raio-p);
}

/* ---------------------------------------------------------------- tabelas */

.tabela-rolagem {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  background: var(--papel);
}
.tabela thead th {
  background: var(--afundado);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 18px;
  border-bottom: 1px solid var(--fio);
}
.tabela tbody td { padding: 12px 18px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.tabela tbody tr:hover td { background: var(--fundo); }
.tabela a, .link-processo { font-family: var(--mono); font-weight: 500; color: var(--acento); }
.tabela .desc { color: var(--suave); }
.contador { font-family: var(--mono); color: var(--suave); }
.filtros {
  padding: 0;
  margin: 0 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ---------------------------------------------------------------- diálogos */

dialog {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  background: var(--papel);
  color: var(--texto);
}
dialog::backdrop { background: rgba(26, 29, 27, 0.5); backdrop-filter: blur(2px); }

/* -------------------------------------------------------------- progresso */

.barra {
  height: 8px;
  background: var(--borda);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.barra-fill { background: var(--acento); border-radius: 0; }

/* ------------------------------------------------ o Início: números e listas */

.tiles { gap: 16px; }
.tile {
  border: var(--contorno) solid var(--tinta);
  border-radius: var(--raio);
  box-shadow: none;
  background: var(--papel);
  padding: 20px 22px;
  gap: 6px;
}
.tile .v {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--texto);
}
.tile .k { font-size: 14px; font-weight: 400; color: var(--texto-2); }
/* Crítico e atenção continuam ditos pela palavra do bloco; a cor só reforça. */
.tiles > .tile.critico { background: var(--perigo-fundo); border-color: var(--perigo); }
.tiles > .tile.atencao { background: var(--alerta-fundo); border-color: var(--alerta-borda); }
.tile.critico .v { color: var(--perigo); }
.tile.atencao .v { color: var(--alerta); }
button.tile:hover { border-color: var(--acento); transform: none; }

.exige {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  margin: 0;
  padding: 14px 0;
}
.exige:last-child { border-bottom: 0; }
.exige:hover { background: transparent; }
.exige .n { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.exige .n:hover { text-decoration: underline; }
.exige .t { font-size: 13.5px; }
.exige .d { font-family: var(--serif); font-weight: 800; font-size: 13.5px; }
.exige .d.crit { color: var(--perigo); }
.exige .d.warn { color: var(--alerta); }

.barra-dado .trilho {
  height: 8px;
  background: var(--borda);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.barra-dado .trilho i { border-right: 0; border-radius: 0; background: var(--acento); }
.barra-dado .nome { font-weight: 400; color: var(--texto); }
.barra-dado .val { font-family: var(--serif); font-weight: 800; }

/* ----------------------------------------------------------- modo turbo
   A ficha: contorno fino e a tarja da margem mais larga (6px), colorida só
   pelo motivo escrito na etiqueta. */
.turbo-ficha { padding: 16px 20px 16px 24px; }
.turbo-ficha::before { width: 6px; background: var(--borda-2); }
.turbo-ficha.grave::before { background: var(--perigo); }
.turbo-ficha.atencao::before { background: var(--alerta-borda); }
.turbo-ficha.sozinho::before { background: var(--fio); }
.turbo-ficha.atual { border-color: var(--acento); box-shadow: none; }
.turbo-ficha.marcada { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.turbo-numero { font-family: var(--mono); font-weight: 500; }
.turbo-tipo strong { font-weight: 800; }
.turbo-motivo {
  border-radius: 3px;
  border: 1px solid var(--borda-2);
  background: var(--papel);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 700;
  padding: 1px 8px;
}
.turbo-motivo.grave { border-color: var(--perigo); background: var(--perigo-fundo); color: var(--perigo); }
.turbo-motivo.aviso { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta); }
.turbo-motivo.calmo { border-style: solid; border-color: var(--fio); color: var(--suave); background: transparent; }
.turbo-despacho { border-left: 3px solid var(--fio); border-radius: 0; }
.turbo-lote { border: var(--contorno) solid var(--tinta); border-radius: var(--raio); }

/* ------------------------------------------------------------ miudezas */

.avisos li { border-top-color: var(--borda); }
.etiqueta-judicial {
  border: 1px solid var(--borda-2);
  border-radius: 3px;
  font-weight: 700;
}
details > summary { font-weight: 700; }
.texto-ia { border: 1px solid var(--fio); border-radius: var(--raio-p); }
.pergunta-p { border-radius: var(--raio-p); }
.pergunta-r { border-radius: var(--raio-p); }

/* ------------------------------------------------------------- celular */

@media (max-width: 760px) {
  :root { --margem: 12px; }
  .topo-acoes { padding-top: 8px; padding-bottom: 8px; gap: 6px 12px; font-size: 13px; }
  .topo-orgao { font-size: 13.5px; }
  .marca { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .logo { width: 36px; height: 36px; }
  .logo::before { font-size: 17px; }
  .topo h1 { font-size: 19px; }
  .sub { font-size: 12.5px; }
  /* As duas fileiras continuam tiras que rolam (regra de `tema.css`); aqui só
     o tamanho dos alvos. */
  .secao { padding: 11px 14px; font-size: 14.5px; min-height: 42px; }
  #abas .abas .aba { padding: 9px 12px; font-size: 13.5px; }
  .cartao { padding: 16px; border-radius: var(--raio); }
  .cartao > .cabecalho-bloco:first-child {
    margin: -16px -16px 14px;
    padding: 12px 16px;
  }
  .tile .v { font-size: 28px; }
  .tabela thead th, .tabela tbody td { padding: 10px 12px; }
}

@media (max-width: 430px) {
  /* Em tela muito estreita a faixa azul fica com a pílula e o Sair; o nome
     da prefeitura iria para uma segunda linha e o cabeçalho cresceria. */
  .topo-orgao { display: none; }
  .topo-acoes { justify-content: space-between; }
}

/* O afundar do botão é movimento; quem pediu menos movimento recebe só a
   mudança de cor. */
@media (prefers-reduced-motion: reduce) {
  .botao:active:not(:disabled) { transform: none; }
}