/* ════════════════════════════════════════════════════════════════════════════════════════════════
   design.css — CAMADA FINAL DE DESIGN DO CONSOLE RENAJUD (27/10/2026)

   POR QUE ESTE ARQUIVO EXISTE
   ---------------------------
   O `style-all.css` cresceu por camadas ao longo de meses e acabou com regras concorrentes: dois
   `:root`, dois `::selection`, duas famílias de regra de `input` e dois `body`. Numa dessas camadas
   sobreviveu esta linha:

       input:focus, select:focus, textarea:focus { ... background: #fff; }   [style-all.css, linha 2317]

   Num console de fundo ESCURO, isso pinta o campo de BRANCO no instante em que o operador clica para
   digitar. Era o defeito que o operador descreveu: "quando aperto pra digitar em algum campo ele fica
   branco, ficando extremamente feio".

   Este arquivo é carregado DEPOIS do `style-all.css` e passa a ser a autoridade única sobre:
     1. tokens de cor do tema escuro;
     2. aparência de TODO controle de formulário (repouso, hover, foco, inválido, somente-leitura,
        desabilitado, placeholder e autofill do navegador);
     3. `color-scheme`, que decide como o navegador pinta select nativo, calendário, barra de rolagem
        e o próprio autofill;
     4. foco visível e seleção de texto.

   REGRA DE OURO DAQUI PRA BAIXO: nenhuma regra de campo pode declarar `background` sem que a cor do
   texto seja declarada junto. Campo com fundo claro e texto claro (ou o contrário) é ilegível — foi
   esse par quebrado que produziu o bug.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superfícies (mesmos valores do tema atual; a mudança é a CONSISTÊNCIA) ─────────────────── */
  --fundo:          #14181d;
  --fundo-2:        #1a2027;
  --superficie:     #1b2129;
  --superficie-2:   #202731;
  --superficie-3:   #262e39;

  /* ── Tinta (texto) — os três degraus agora existem de fato ─────────────────────────────────── */
  --tinta:          #e8edf2;  /* principal        — ~15:1 sobre --fundo */
  --tinta-2:        #b9c5d1;  /* secundário       — ~10:1 sobre --fundo */
  --tinta-3:        #8b99a7;  /* ajuda/placeholder — ~5:1 sobre --fundo */

  /* ── Linhas ─────────────────────────────────────────────────────────────────────────────────── */
  --linha:          #2c3540;
  --linha-forte:    #3a4552;

  /* ── CAMPO: os quatro estados, todos escuros ────────────────────────────────────────────────── */
  --campo-fundo:        #1e252e;
  --campo-fundo-hover:  #232b35;
  --campo-fundo-foco:   #232b35;
  --campo-borda:        #3a4552;
  --campo-borda-foco:   #5b9be0;
  --campo-texto:        var(--tinta);
  --campo-invalido:     #d9706a;

  /* ── Ação ───────────────────────────────────────────────────────────────────────────────────── */
  --acao:           #2f6fbf;
  --acao-hover:     #3a80d6;
  --acao-texto:     #ffffff;
  --perigo:         #b4453f;
  --perigo-hover:   #c4514a;
  --ok:             #3f9b72;
  --alerta:         #c08a34;

  /* ── Foco: anel de 2 px, visível sobre TODAS as superfícies escuras ─────────────────────────── */
  --foco-anel:      #7fb4f0;

  /* O navegador precisa saber que a página é escura — sem isto ele pinta select nativo,
     calendário, barra de rolagem e autofill no esquema CLARO, por cima do nosso fundo. */
  color-scheme: dark;
  accent-color: var(--acao);
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   1. CONTROLES DE FORMULÁRIO — a correção do campo branco
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Repouso. `:where()` mantém a especificidade baixa o suficiente para não atropelar componentes
   específicos (ex.: `.placa-input`), mas alta o bastante para vencer o `style-all.css`. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
select,
textarea {
  background: var(--campo-fundo) !important;
  color: var(--campo-texto) !important;
  border: 1px solid var(--campo-borda);
  caret-color: var(--tinta);
  -webkit-text-fill-color: var(--campo-texto);
}

/* Hover: clareia um degrau, nunca vira claro. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  background: var(--campo-fundo-hover) !important;
  border-color: var(--linha-forte);
}

/* FOCO: a regra que faltava. Fundo escuro, borda azul, anel de 2 px — e ZERO `#fff`. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  background: var(--campo-fundo-foco) !important;
  color: var(--campo-texto) !important;
  -webkit-text-fill-color: var(--campo-texto);
  border-color: var(--campo-borda-foco);
  outline: 2px solid var(--foco-anel);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(127, 180, 240, .18);
}

/* AUTOFILL do Chrome/Edge: sem estas linhas o navegador repinta o campo com o amarelo/branco dele
   no primeiro caractere digitado — o mesmo defeito, por outro caminho. O truque do
   `box-shadow ... inset` + `transition` longa é o único que sobrevive ao `!important` do browser. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--campo-texto) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--campo-fundo-foco) inset !important;
  box-shadow: 0 0 0 1000px var(--campo-fundo-foco) inset !important;
  caret-color: var(--tinta);
  transition: background-color 9999s ease-out 0s;
}

/* Placeholder: legível, mas nunca confundível com valor digitado. */
input::placeholder,
textarea::placeholder {
  color: var(--tinta-3) !important;
  opacity: 1;
}

/* Somente leitura: mesma família escura, um degrau acima — não é campo editável e não deve parecer. */
input[readonly],
textarea[readonly],
select[readonly] {
  background: var(--superficie-2) !important;
  color: var(--tinta-2) !important;
  -webkit-text-fill-color: var(--tinta-2);
  border-color: var(--linha);
}

/* Desabilitado: visivelmente apagado, ainda legível. */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--superficie-2) !important;
  color: var(--tinta-3) !important;
  -webkit-text-fill-color: var(--tinta-3);
  border-color: var(--linha);
  cursor: not-allowed;
  opacity: .85;
}

/* Inválido: borda vermelha + halo — a cor nunca é o único sinal (o texto do erro acompanha). */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--campo-invalido) !important;
  box-shadow: 0 0 0 3px rgba(217, 112, 106, .16);
}

/* O menu do `<select>` é desenhado pelo SISTEMA, não pelo CSS da página: sem esta regra, no Windows
   ele abre branco. `color-scheme: dark` no :root já resolve; `option` garante o par. */
select option {
  background: var(--superficie-2);
  color: var(--tinta);
}
select option:checked {
  background: var(--acao);
  color: var(--acao-texto);
}

/* Checkbox/radio: `accent-color` no :root já pinta; aqui só o tamanho de alvo. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--acao);
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   2. BOTÕES — hierarquia única, estados completos
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

.btn-primario,
button.btn-primario,
input.btn-primario {
  background: var(--acao);
  color: var(--acao-texto);
  border: 1px solid var(--acao);
}
.btn-primario:hover,
button.btn-primario:hover {
  background: var(--acao-hover);
  border-color: var(--acao-hover);
  color: var(--acao-texto);
}
.btn-primario:active { transform: translateY(1px); }
.btn-primario:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Foco de botão: anel visível, sem depender só da cor de fundo. */
button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--foco-anel);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   3. SELEÇÃO, ROLAGEM E DETALHES FINOS
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

::selection {
  background: var(--acao);
  color: var(--acao-texto);
}

/* Barra de rolagem escura (Chromium/WebKit). O Firefox já segue o `color-scheme`. */
* {
  scrollbar-color: var(--linha-forte) var(--fundo-2);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fundo-2); }
::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border: 3px solid var(--fundo-2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #4a5765; }

/* Legibilidade de tabela densa: numerais alinhados e valores em reais com largura fixa. */
.forum-table td,
.tabela-retirada td,
.tabela-valor,
.num {
  font-variant-numeric: tabular-nums;
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   4. INTERAÇÃO (design.js) — busca global, tabelas, máscaras, avisos e envio
   ════════════════════════════════════════════════════════════════════════════════════════════════
   Este bloco só descreve o que o JavaScript acrescenta. Nenhuma regra aqui é necessária para a
   página funcionar: sem `design.js`, o console continua idêntico ao que era. */

/* Texto só para leitor de tela — nunca some do fluxo de acessibilidade, só da tela. */
.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ── Botão de busca no cabeçalho ─────────────────────────────────────────────────────────────── */
.topo-busca {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 10px 0 9px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--tinta-2);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.topo-busca:hover { background: var(--superficie-3); border-color: var(--campo-borda-foco); color: var(--tinta); }
.topo-busca .ico { width: 15px; height: 15px; color: var(--tinta-3); }
.topo-busca:hover .ico { color: var(--tinta); }
.topo-busca kbd,
.paleta-tecla {
  font-family: inherit; font-size: 10.5px; line-height: 1;
  padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--linha-forte);
  background: var(--fundo); color: var(--tinta-3);
}

/* ── Paleta de busca (Ctrl+K) ─────────────────────────────────────────────────────────────────── */
.paleta[hidden] { display: none; }
.paleta {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: start center;
  padding: 12vh 16px 16px;
}
.paleta-fundo {
  position: absolute; inset: 0;
  background: rgba(8, 10, 13, .72);
  backdrop-filter: blur(2px);
}
.paleta-painel {
  position: relative;
  width: min(620px, 100%);
  max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03);
  overflow: hidden;
  animation: paleta-entra .12s ease-out;
}
@keyframes paleta-entra {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.paleta-entrada {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
}
.paleta-entrada .ico { width: 17px; height: 17px; color: var(--tinta-3); flex: 0 0 auto; }
.paleta-entrada input {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important; background: transparent !important;
  padding: 6px 0 !important; font-size: 15px;
  box-shadow: none !important; outline: none !important;
}
.paleta-entrada input:focus { box-shadow: none !important; outline: none !important; }
.paleta-lista {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; min-height: 0;
}
.paleta-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--tinta); cursor: pointer;
  border: 1px solid transparent;
}
.paleta-item .ico { width: 14px; height: 14px; color: var(--tinta-3); flex: 0 0 auto; }
.paleta-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paleta-item-txt b { font-weight: 500; font-size: 13.5px; }
.paleta-item-txt small { color: var(--tinta-3); font-size: 11.5px; }
.paleta-item-ativo {
  background: var(--superficie-3);
  border-color: var(--campo-borda-foco);
}
.paleta-item-atalho .paleta-item-txt b { color: var(--foco-anel); }
.paleta-dica {
  margin: 0; padding: 9px 14px;
  border-top: 1px solid var(--linha);
  background: var(--fundo-2);
  color: var(--tinta-3); font-size: 11px;
}
.paleta-dica kbd {
  font-family: inherit; font-size: 10px;
  padding: 1px 4px; margin: 0 1px;
  border: 1px solid var(--linha-forte); border-radius: 3px;
  background: var(--superficie-2); color: var(--tinta-2);
}
body.paleta-aberta { overflow: hidden; }

/* ── Tabelas: filtro, ordenação e estado vazio ───────────────────────────────────────────────── */
.tabela-filtro {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.tabela-filtro-rotulo {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tabela-filtro-campo {
  flex: 1 1 220px; min-width: 0;
  max-width: 420px;
  min-height: 34px; padding: 6px 10px;
  font-size: 13px;
}
.tabela-filtro-contador {
  font-size: 12px; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-filtro-contador.tabela-filtro-vazio { color: var(--alerta); }

th.th-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.th-ordenavel:hover { color: var(--tinta); }
th.th-ordenavel:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: -2px; }
th.th-ordenavel::after {
  content: "↕";
  margin-left: 6px;
  font-size: 10px;
  opacity: .35;
}
th.th-asc::after  { content: "↑"; opacity: 1; color: var(--foco-anel); }
th.th-desc::after { content: "↓"; opacity: 1; color: var(--foco-anel); }

td.tabela-vazia {
  text-align: center;
  padding: 22px 12px !important;
  color: var(--tinta-3);
  font-style: italic;
}

/* ── Localizador na página (achado destacado) ───────────────────────────────────────────────── */
.localizador-seta {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--superficie-2);
  color: var(--tinta-2);
  font-size: 13px; line-height: 1;
  cursor: pointer;
}
.localizador-seta:hover { background: var(--superficie-3); border-color: var(--campo-borda-foco); color: var(--tinta); }
.localizador-seta:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 1px; }

/* Destaque do achado: âmbar sobre o escuro, com o atual mais forte que os demais.
   `mark` já é amarelo por padrão do navegador — aqui a cor é nossa, e o texto continua legível
   porque o par fundo/texto é declarado junto. */
mark.achado {
  background: rgba(192, 138, 52, .34);
  color: var(--tinta);
  border-radius: 2px;
  padding: 0 1px;
}
mark.achado.achado-atual {
  background: #c08a34;
  color: #14181d;
  box-shadow: 0 0 0 2px rgba(192, 138, 52, .35);
}

/* ── Descrição / anotação da retirada (26/10/2026) ───────────────────────────────────────────
   Pedido do operador: registrar de qual funcionário a restrição saiu. A anotação precisa ser
   LIDA sem competir com o valor cobrado nem com os selos de estado, e o campo de edição precisa
   caber ao lado do botão sem quebrar no celular. */
.retirada-descricao {
  margin: 6px 0 4px;
  padding: 8px 12px;
  border-left: 3px solid var(--campo-borda-foco, #5b9be0);
  border-radius: 0 6px 6px 0;
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: var(--fs-sm, 13px);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.retirada-descricao-rotulo {
  display: block;
  margin-bottom: 2px;
  color: var(--tinta-3, #8b99a7);
  font-size: var(--fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.retirada-descricao-curta {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-2, #b9c5d1);
  font-style: italic;
}
.form-descricao {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.form-descricao input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 560px;
}
@media (max-width: 640px) {
  .form-descricao input[type="text"] { flex-basis: 100%; }
  .form-descricao .btn { width: 100%; }
}

/* ── Validação de campo ──────────────────────────────────────────────────────────────────────── */
.campo-aviso {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #e58b84;
  display: none;
}
.campo-aviso.campo-aviso-visivel { display: block; }
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--perigo) !important;
  box-shadow: 0 0 0 3px rgba(180, 69, 63, .16) !important;
}
.campo-maiusculo { text-transform: uppercase; letter-spacing: .04em; }
.campo-restaurado {
  border-left: 3px solid var(--alerta) !important;
}

/* ── Aviso dispensável ───────────────────────────────────────────────────────────────────────── */
.alert { position: relative; padding-right: 38px; }
.alert-fechar {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: inherit;
  font-size: 18px; line-height: 1;
  cursor: pointer; opacity: .6;
}
.alert-fechar:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.alert-saindo { opacity: 0; transition: opacity .18s ease-out; }

/* ── Envio em andamento ──────────────────────────────────────────────────────────────────────── */
.botao-enviando { cursor: progress !important; }
.botao-enviando:disabled { opacity: .7; }

/* ── Rodapé: placa da marca gov.br e títulos uniformes ──────────────────────────────────────── */
/* O PNG do gov.br é desenhado sobre fundo branco. Em vez de inverter a cor da marca (o manual
   não permite), ele vive numa PLACA clara — o mesmo recurso já usado na marca do RENAJUD no topo.
   A placa é intencional e consistente; o que não se aceita é um retângulo branco solto no escuro. */
.rodape-marca {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  background: #f2f5f8;
  border-radius: 4px;
  line-height: 0;
}
.rodape-marca .marca-logo-gov { display: block; height: 22px; width: auto; }
.site-footer .footer-col h2,
.site-footer .footer-col-navegacao h2 {
  color: var(--tinta) !important;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer .footer-col p,
.site-footer .footer-col li,
.site-footer .footer-col a { color: var(--tinta-2); }
.site-footer .footer-col a:hover { color: var(--tinta); }

/* ── Densidade: menos buraco entre blocos do painel ─────────────────────────────────────────── */
.area-trabalho .painel-grade,
.area-trabalho .grade-painel { row-gap: 14px; }
.area-trabalho .cartao + .cartao { margin-top: 0; }

/* Em telas estreitas a paleta ocupa a largura toda e sobe um pouco. */
@media (max-width: 560px) {
  .paleta { padding: 5vh 10px 10px; }
  .paleta-painel { max-height: 82vh; }
  .topo-busca .topo-busca-rotulo { display: none; }
}