/* ═══════════════════════════════════════════════════════════════════════
   NDG REGULA — SISTEMA DE INTERFACE
   ═══════════════════════════════════════════════════════════════════════

   Ferramenta operacional: quem usa isto passa o dia conferindo prazo.
   Densidade de informação acima de ornamento — mas densidade sem hierarquia
   vira ruído, e era esse o defeito da versão anterior: dezesseis
   espaçamentos, onze raios e nenhuma elevação, então nada se destacava.

   Tudo aqui deriva dos tokens do bloco :root. Regra da casa: nenhuma tela
   nova inventa valor cru — se falta um degrau, ele entra na escala.

   Duas restrições de CSP que moldam o arquivo:
     · style-src 'self' — atributo style= inline é descartado em silêncio.
       Larguras proporcionais entram por element.style no JS.
     · Todo seletor .classe com display:flex/grid precisa de
       .classe[hidden] { display: none } — senão o atributo hidden perde e
       o elemento nasce visível.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────────────── */

:root {
  /* ── Marca ──
     Verde amostrado da arte oficial. Um token só para a cor da marca:
     dois "primários" convivendo fazem a próxima tela derivar para a
     paleta errada. */
  --marca: #04763f;
  --marca-clara: #0b9d53;
  --marca-escura: #01361f;
  --marca-suave: #e4f4ea;

  /* ── Rampa neutra ──
     Um único eixo azulado. Cinza puro ao lado de verde parece sujo. */
  --n0:  #ffffff;
  --n50: #f7f9fb;
  --n100:#eef1f5;
  --n150:#e4e9ef;
  --n200:#d7dee7;
  --n300:#bcc7d4;
  --n400:#8d9cb0;
  --n500:#66788f;
  --n600:#52627a;
  --n700:#3b4a5f;
  --n800:#26323f;
  --n900:#16202e;

  /* ── Superfícies ──
     Três profundidades. Sem elas tudo é caixa branca com borda cinza e a
     tela fica plana: painel, tabela e menu com o mesmo peso visual. */
  --fundo: var(--n50);
  --superficie: var(--n0);
  --superficie-elevada: var(--n0);
  --superficie-afundada: var(--n100);
  --superficie-inversa: var(--n900);

  --borda: var(--n200);
  --borda-suave: var(--n150);
  --borda-forte: var(--n300);

  --texto: var(--n900);
  --texto-fraco: var(--n600);
  --texto-tenue: var(--n500);
  --texto-inverso: #ffffff;

  /* ── Semântica de risco ──
     Pares texto/fundo verificados em contraste: todos ≥ 5.7:1, com folga
     para a etiqueta de 12.5px. A versão anterior reprovava em AA nas
     etiquetas de status — o elemento mais repetido da interface. */
  --ok: #0b5f35;
  --ok-fundo: #e4f4ea;
  --ok-borda: #a9dcc0;
  --atencao: #6f4700;
  --atencao-fundo: #fbf0d5;
  --atencao-borda: #e8cd8a;
  --risco: #8f1a1a;
  --risco-fundo: #fbe7e7;
  --risco-borda: #eeb4b4;
  --info: #0a5296;
  --info-fundo: #e4eefb;
  --info-borda: #a9c9ee;
  --neutro: #42536b;
  --neutro-fundo: var(--n100);
  --neutro-borda: var(--n200);

  /* ── Tipografia ──
     Seis degraus com propósito. A versão anterior tinha sete tamanhos, três
     deles a menos de 0,5px de distância — ruído, não hierarquia. */
  --fonte: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas,
                "Liberation Mono", monospace;

  --txt-titulo: 22px;      /* h1 de página */
  --txt-secao: 16px;       /* h2 de painel, título de modal */
  --txt-sub: 14px;         /* subtítulo, botão grande */
  --txt-corpo: 13.5px;     /* corpo, célula de tabela, campo */
  --txt-apoio: 12.5px;     /* legenda, ajuda, resumo */
  --txt-micro: 11.5px;     /* cabeçalho de tabela, atalho de teclado */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-destaque: 700;

  --linha-densa: 1.35;
  --linha-normal: 1.55;

  /* ── Espaçamento ──
     Base 4. Substitui os dezesseis valores soltos da versão anterior, um
     dos quais era 17,43px — resultado de cálculo acidental. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  /* ── Raios ──
     Três degraus por função, no lugar dos onze anteriores. */
  --raio-controle: 7px;    /* botão, campo, chip retangular */
  --raio-superficie: 11px; /* cartão, painel, tabela, menu */
  --raio-pilula: 999px;    /* chip de atalho, etiqueta, contador */

  /* ── Elevação ──
     Sombra dupla: contorno curto para definir a borda, difusa longa para a
     distância. Sombra única e larga borra em vez de levantar. */
  --sombra-0: 0 1px 2px rgba(22, 32, 46, .05);
  --sombra-1: 0 1px 2px rgba(22, 32, 46, .06), 0 2px 8px -2px rgba(22, 32, 46, .08);
  --sombra-2: 0 2px 4px rgba(22, 32, 46, .06), 0 12px 24px -8px rgba(22, 32, 46, .14);
  --sombra-3: 0 4px 8px rgba(22, 32, 46, .08), 0 24px 56px -16px rgba(22, 32, 46, .24);

  /* ── Foco ──
     Anel duplo: halo da marca por fora, contorno da superfície por dentro,
     para o foco continuar visível sobre fundo colorido. */
  --anel-foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca-clara);
  --anel-foco-simples: 0 0 0 3px rgba(11, 157, 83, .28);

  /* ── Movimento ── */
  --t-rapido: 120ms;
  --t-normal: 200ms;
  --t-lento: 320ms;
  --curva: cubic-bezier(.2, .7, .3, 1);

  /* ── Camadas ──
     Declaradas em um lugar só: z-index disperso pelo arquivo é como se
     descobre, tarde, que o modal fica atrás do cabeçalho. */
  --z-base: 1;
  --z-cabecalho-tabela: 5;
  --z-lateral: 40;
  --z-topo: 45;
  --z-veu: 50;
  --z-modal: 55;
  --z-paleta: 60;
  --z-aviso: 70;
  --z-fab: 65;

  /* ── Geometria do casco ── */
  --larg-lateral: 244px;
  --larg-lateral-icones: 64px;
  --alt-topo: 60px;
  --alt-linha: 44px;        /* densidade confortável */
  --pad-celula: 11px 14px;
}

/* Densidade compacta: mais linhas sem rolar, para quem confere prazo em
   lote. Preferência do usuário, guardada em localStorage. */
[data-densidade="compacta"] {
  --alt-linha: 34px;
  --pad-celula: 6px 12px;
  --txt-corpo: 13px;
}

/* ── Tema escuro ──
   Derivado dos mesmos tokens, não uma segunda folha de estilo: uma tela
   nova herda o tema sem trabalho extra. As superfícies sobem de luminância
   com a elevação (convenção de material escuro); inverter as sombras não
   funciona porque sombra preta sobre fundo preto não existe. */
[data-tema="escuro"] {
  --fundo: #0e141c;
  --superficie: #161f2b;
  --superficie-elevada: #1c2733;
  --superficie-afundada: #111925;
  --superficie-inversa: #e6ecf4;

  --borda: #2a3746;
  --borda-suave: #212d3a;
  --borda-forte: #3a4a5d;

  --texto: #e6ecf4;
  --texto-fraco: #9fb0c4;
  --texto-tenue: #7c8ea5;
  --texto-inverso: #0e141c;

  --marca: #16a35c;
  --marca-clara: #35c47a;
  --marca-escura: #0c2e1d;
  --marca-suave: #12291d;

  --ok: #6ee7a5;
  --ok-fundo: #12291d;
  --ok-borda: #1f4d33;
  --atencao: #f6c964;
  --atencao-fundo: #2a2113;
  --atencao-borda: #533f1a;
  --risco: #f8a2a2;
  --risco-fundo: #2c1717;
  --risco-borda: #562727;
  --info: #7dd3fc;
  --info-fundo: #12222e;
  --info-borda: #1e4257;
  --neutro: #9fb0c4;
  --neutro-fundo: #1e2836;
  --neutro-borda: #2a3746;

  --sombra-0: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 24px -8px rgba(0, 0, 0, .6);
  --sombra-3: 0 4px 8px rgba(0, 0, 0, .6), 0 24px 56px -16px rgba(0, 0, 0, .7);

  --anel-foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca-clara);
  color-scheme: dark;
}

/* Quem nunca escolheu tema segue o sistema operacional. O atributo explícito
   no <html> vence esta regra, então a escolha manual continua valendo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0e141c;
    --superficie: #161f2b;
    --superficie-elevada: #1c2733;
    --superficie-afundada: #111925;
    --superficie-inversa: #e6ecf4;
    --borda: #2a3746;
    --borda-suave: #212d3a;
    --borda-forte: #3a4a5d;
    --texto: #e6ecf4;
    --texto-fraco: #9fb0c4;
    --texto-tenue: #7c8ea5;
    --texto-inverso: #0e141c;
    --marca: #16a35c;
    --marca-clara: #35c47a;
    --marca-escura: #0c2e1d;
    --marca-suave: #12291d;
    --ok: #6ee7a5;
    --ok-fundo: #12291d;
    --ok-borda: #1f4d33;
    --atencao: #f6c964;
    --atencao-fundo: #2a2113;
    --atencao-borda: #533f1a;
    --risco: #f8a2a2;
    --risco-fundo: #2c1717;
    --risco-borda: #562727;
    --info: #7dd3fc;
    --info-fundo: #12222e;
    --info-borda: #1e4257;
    --neutro: #9fb0c4;
    --neutro-fundo: #1e2836;
    --neutro-borda: #2a3746;
    --sombra-0: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px -2px rgba(0, 0, 0, .5);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 24px -8px rgba(0, 0, 0, .6);
    --sombra-3: 0 4px 8px rgba(0, 0, 0, .6), 0 24px 56px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* ─── BASE ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Scroll suave para âncoras internas, mas respeitando prefers-reduced-motion. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--txt-corpo);
  line-height: var(--linha-normal);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Números tabulares em toda a interface: sem isso, colunas de data,
     contagem e dias desalinham a cada linha e o olho perde a varredura
     vertical, que é o gesto principal desta ferramenta. */
  font-variant-numeric: tabular-nums;
  /* ── Mobile: elimina o destaque azul/cinza ao tocar em elementos ──
     Causa confusão quando já há hover/active desenhados. */
  -webkit-tap-highlight-color: transparent;
  /* Respeita safe area de dispositivos com notch (iPhone X+). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Impede overscroll bounce que puxa o fundo branco do navegador. */
  overscroll-behavior-y: contain;
}

/* Rolagem travada enquanto há modal ou gaveta aberta. Sem isto o fundo
   rola atrás do diálogo e o usuário perde a posição da lista. */
body.travado { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-forte); line-height: var(--linha-densa); }

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

/* ── Foco visível universal ──
   A versão anterior tinha quatro regras de :focus-visible em 225 — botão
   primário, aba, linha e item de menu não mostravam foco nenhum, e quem
   navega por teclado não sabia onde estava. Uma regra base cobre tudo o
   que entrar depois; :focus-visible (e não :focus) não pisca no clique de
   mouse. */
:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: var(--raio-controle);
}
/* Elementos com raio próprio não podem herdar o do anel. */
.chip:focus-visible, .etiqueta:focus-visible { border-radius: var(--raio-pilula); }
.cartao:focus-visible, .painel:focus-visible { border-radius: var(--raio-superficie); }

/* Ícones: o traço é sempre currentColor, então um ícone dentro de um botão
   verde fica verde sem regra extra. */
svg { flex: none; }
.ico {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--p { width: 15px; height: 15px; }
.ico--g { width: 22px; height: 22px; }

/* Barra de rolagem discreta: a padrão do Chrome no Linux é larga e cinza,
   e rouba atenção numa tela cheia de tabela. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--raio-pilula);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--n400); background-clip: content-box; }

/* Só para leitor de tela. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo: sem isto o teclado atravessa a navegação inteira
   antes de chegar à tabela, em toda troca de tela. */
.pular {
  position: fixed;
  top: var(--e2);
  left: var(--e2);
  z-index: var(--z-aviso);
  transform: translateY(-200%);
  background: var(--marca);
  color: #fff;
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-controle);
  font-weight: var(--peso-forte);
  text-decoration: none;
  box-shadow: var(--sombra-2);
  transition: transform var(--t-normal) var(--curva);
}
.pular:focus { transform: translateY(0); }

/* ─── CASCO DA APLICAÇÃO ─────────────────────────────────────────────── */

/* Lateral fixa + topo fixo + conteúdo rolável. Grid em vez de posição
   absoluta: a coluna some sozinha nos pontos de quebra sem recalcular
   margem em três regras. */
#app {
  display: grid;
  grid-template-columns: var(--larg-lateral) 1fr;
  grid-template-rows: var(--alt-topo) 1fr;
  grid-template-areas:
    "lateral topo"
    "lateral conteudo";
  min-height: 100vh;
}
#app[hidden] { display: none; }

[data-lateral="icones"] #app { grid-template-columns: var(--larg-lateral-icones) 1fr; }

/* ── Lateral ── */

.lateral {
  grid-area: lateral;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--marca-escura);
  color: rgba(255, 255, 255, .82);
  z-index: var(--z-lateral);
  overflow: hidden;
}
/* Tema escuro: o verde profundo da marca vira quase preto e some contra o
   fundo. Superfície neutra elevada mantém a separação. */
[data-tema="escuro"] .lateral { background: #101821; border-right: 1px solid var(--borda); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .lateral { background: #101821; border-right: 1px solid var(--borda); }
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--alt-topo);
  padding: 0 var(--e4);
  flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  overflow: hidden;
}
.lateral__marca img { display: block; flex: none; width: 30px; height: 30px; object-fit: contain; }
.lateral__marca-texto { min-width: 0; }
.lateral__marca-nome {
  display: block;
  font-size: var(--txt-sub);
  font-weight: var(--peso-forte);
  color: #fff;
  letter-spacing: .01em;
  white-space: nowrap;
}
.lateral__marca-sub {
  display: block;
  font-size: var(--txt-micro);
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}
.lateral__marca-versao {
  display: block;
  font-size: var(--txt-micro);
  color: rgba(255, 255, 255, .32);
  white-space: nowrap;
}
.lateral__marca-versao:empty { display: none; }

.lateral__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e3) var(--e2) var(--e4);
}

.lateral__grupo + .lateral__grupo { margin-top: var(--e4); }

.lateral__grupo-titulo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .38);
  padding: 0 var(--e3) var(--e2);
  white-space: nowrap;
}

.lateral__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  /* 40px de altura: alvo confortável, e o mínimo para o ícone respirar. */
  min-height: 40px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.lateral__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral__item:focus-visible { box-shadow: 0 0 0 2px var(--marca-escura), 0 0 0 4px var(--marca-clara); }
.lateral__item[aria-current="page"] {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-weight: var(--peso-forte);
}
/* Marca da seleção: barra à esquerda. O fundo sozinho é fraco demais para
   distinguir "selecionado" de "sob o ponteiro". */
.lateral__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0;
  background: var(--marca-clara);
}
.lateral__item .ico { opacity: .85; }
.lateral__item[aria-current="page"] .ico { opacity: 1; color: var(--marca-clara); }
.lateral__rotulo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Contador de pendências ao lado do item (alertas, prazos vencidos). */
.lateral__contador {
  flex: none;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--risco);
  color: #fff;
  font-size: var(--txt-micro);
  font-weight: var(--peso-destaque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-tema="escuro"] .lateral__contador { color: #2c1717; }
.lateral__contador[hidden] { display: none; }

.lateral__rodape {
  flex: none;
  padding: var(--e2);
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.lateral__colapsar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font: inherit;
  font-size: var(--txt-apoio);
  cursor: pointer;
}
.lateral__colapsar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral__colapsar .ico { transition: transform var(--t-normal) var(--curva); }

/* ── Lateral colapsada em ícones ──
   Rótulos somem, o item vira quadrado e o nome aparece como dica ao pousar
   o ponteiro. Sem a dica, um menu só de ícones obriga a adivinhar. */
[data-lateral="icones"] .lateral__marca { justify-content: center; padding: 0; }
[data-lateral="icones"] .lateral__marca-texto,
[data-lateral="icones"] .lateral__grupo-titulo,
[data-lateral="icones"] .lateral__rotulo,
[data-lateral="icones"] .lateral__colapsar span { display: none; }
[data-lateral="icones"] .lateral__item,
[data-lateral="icones"] .lateral__colapsar { justify-content: center; padding: 0; }
[data-lateral="icones"] .lateral__grupo + .lateral__grupo {
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
[data-lateral="icones"] .lateral__colapsar .ico { transform: rotate(180deg); }
[data-lateral="icones"] .lateral__contador {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}

[data-lateral="icones"] .lateral__item::after {
  content: attr(data-dica);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--superficie-inversa);
  color: var(--superficie);
  padding: 5px 10px;
  border-radius: var(--raio-controle);
  font-size: var(--txt-apoio);
  white-space: nowrap;
  box-shadow: var(--sombra-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-rapido);
  z-index: var(--z-topo);
}
[data-lateral="icones"] .lateral__item:hover::after,
[data-lateral="icones"] .lateral__item:focus-visible::after { opacity: 1; }

/* ── Topo ── */

.topo {
  grid-area: topo;
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--alt-topo);
  padding: 0 var(--e5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

/* Especificidade casada com .botao-icone, que vem depois neste arquivo e
   venceria por ordem no empate 0-1-0 — o botão de gaveta aparecia no
   desktop, ao lado de uma lateral já visível. */
.topo .topo__menu { display: none; }

/* Busca global: atravessa licença, condicionante, ação e unidade. Cada tela
   tinha a sua caixa e nenhuma cruzava entidades — quem não sabe em qual
   licença está o prazo não tinha por onde começar. */
.busca-global {
  flex: 0 1 420px;
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: 36px;
  padding: 0 var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-corpo);
  cursor: pointer;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.busca-global:hover { border-color: var(--borda-forte); background: var(--superficie); }
.busca-global__texto { flex: 1 1 auto; text-align: left; }
.tecla {
  font-family: var(--fonte-mono);
  font-size: var(--txt-micro);
  padding: 2px 6px;
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--superficie);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.topo__espaco { flex: 1 1 auto; }

/* Seletor de cliente do responsável técnico: fica no topo, ao lado do botão
   de relatório, só para o perfil RT (hidden por padrão no HTML). */
.seletor-cliente-rt {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.seletor-cliente-rt[hidden] { display: none; }
.seletor-cliente-rt select { min-width: 180px; }
.seletor-cliente-rt .rotulo-visivel {
  font-size: var(--txt-micro);
  color: var(--texto-fraco);
  white-space: nowrap;
}

.topo__acoes { display: flex; align-items: center; gap: var(--e1); }
/* Logotipo do cliente no topo, à esquerda do usuário: altura fixa para não
   mexer na barra, largura livre até um limite, separado por um filete. */
.topo__logo-cliente {
  display: block; height: 32px; width: auto; max-width: 140px; object-fit: contain;
  margin: 0 var(--e2) 0 var(--e1); padding-right: var(--e3);
  border-right: 1px solid var(--borda);
}
.topo__logo-cliente[hidden] { display: none; }
@media (max-width: 640px) {
  .topo__logo-cliente { max-width: 90px; height: 26px; }
}
/* Seletor de cliente da carteira (parceiro): compacto, à esquerda do
   logotipo do cliente, para a troca ser um clique de qualquer tela. */
.topo__cliente {
  display: inline-flex; align-items: center; gap: var(--e1);
  margin-right: var(--e2); padding-right: var(--e3);
  border-right: 1px solid var(--borda);
}
.topo__cliente[hidden] { display: none; }
.topo__cliente-rotulo { font-size: var(--txt-apoio); color: var(--texto-fraco); white-space: nowrap; }
.topo__cliente select { min-width: 160px; max-width: 260px; font-size: var(--txt-apoio); padding: 4px 28px 4px 8px; }
/* Destaque quando o servidor devolve 409 selecione_cliente: a pessoa tentou
   gravar em "Carteira (todos)" e o seletor é a saída — ele pulsa em verde. */
.topo__cliente--destaque select { animation: pulsar-cliente 1s ease-in-out 4; border-color: var(--marca); }
@keyframes pulsar-cliente {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4, 118, 63, .55); }
  50% { box-shadow: 0 0 0 6px rgba(4, 118, 63, 0); }
}
@media (max-width: 640px) {
  .topo__cliente-rotulo { display: none; }
  .topo__cliente select { min-width: 120px; max-width: 160px; }
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  position: relative;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.botao-icone:hover { background: var(--superficie-afundada); color: var(--texto); }
.botao-icone[aria-expanded="true"] { background: var(--superficie-afundada); color: var(--texto); }

/* Ponto de notificação no sino: ancorado no canto do ícone (não do botão),
   deslocado para fora com translate para não cobrir o ícone quando o
   número tem 2+ dígitos. */
.botao-icone__ponto {
  position: absolute;
  top: 4px;
  right: 4px;
  transform: translate(45%, -45%);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--raio-pilula);
  background: var(--risco);
  color: #fff;
  font-size: 10px;
  font-weight: var(--peso-destaque);
  line-height: 16px;
  border: 2px solid var(--superficie);
  box-sizing: content-box;
}
[data-tema="escuro"] .botao-icone__ponto { color: #2c1717; }
.botao-icone__ponto[hidden] { display: none; }

/* Menu do usuário e do sino. */
.usuario-menu, .alertas-menu { position: relative; }
.usuario-gatilho {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: transparent;
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  max-width: 200px;
}
.usuario-gatilho:hover { background: var(--superficie-afundada); }
.avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-pilula);
  background: var(--marca);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-destaque);
  letter-spacing: .02em;
}
.usuario-gatilho__nome {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Menu suspenso genérico ──
   Serve ao usuário, ao seletor de colunas e ao de densidade. */
.suspenso {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  padding: var(--e1);
  background: var(--superficie-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-3);
  z-index: var(--z-topo);
  animation: surgir var(--t-rapido) var(--curva);
}
.suspenso[hidden] { display: none; }
@keyframes surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.suspenso__cabecalho {
  padding: var(--e3) var(--e3) var(--e2);
  border-bottom: 1px solid var(--borda-suave);
  margin-bottom: var(--e1);
}
.suspenso__nome { display: block; font-weight: var(--peso-forte); font-size: var(--txt-corpo); }
.suspenso__email {
  display: block;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suspenso__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.suspenso__item:hover { background: var(--superficie-afundada); }
.suspenso__item .ico { color: var(--texto-fraco); }
.suspenso__item--perigo { color: var(--risco); }
.suspenso__item--perigo .ico { color: var(--risco); }
.suspenso__separador { height: 1px; background: var(--borda-suave); margin: var(--e1) 0; }
.suspenso__grupo-titulo {
  padding: var(--e2) var(--e3) var(--e1);
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-tenue);
}

/* ── Conteúdo ── */

main {
  grid-area: conteudo;
  min-width: 0;
  padding: var(--e5);
  padding-bottom: var(--e8);
}

.vista { display: none; }
.vista.ativa { display: block; animation: entrar var(--t-normal) var(--curva); }
@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Cabeçalho de página ──
   Sete das dez vistas anteriores não tinham cabeçalho nenhum: nem título,
   nem contagem, nem contexto. O h1 também conserta a estrutura de
   cabeçalhos, que começava em h2 solto. */
.pagina-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}
.pagina-topo__texto { flex: 1 1 320px; min-width: 0; }
.trilha {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--txt-apoio);
  color: var(--texto-tenue);
  margin-bottom: var(--e1);
  flex-wrap: wrap;
}
.trilha button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--texto-fraco);
  cursor: pointer;
  border-radius: 4px;
}
.trilha button:hover { color: var(--marca); text-decoration: underline; }
.trilha .ico { width: 13px; height: 13px; opacity: .5; }

.pagina-titulo {
  font-size: var(--txt-titulo);
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.pagina-sub {
  margin: var(--e1) 0 0;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
}
.pagina-acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* ── Mobile: elimina delay de 300ms no toque ──
   Sem touch-action:manipulation, o navegador espera para distinguir toque
   simples de duplo-toque (zoom). Em app SPA isso é puro atraso. */
button, a, .chip, .cartao, .lateral__item, .aba-detalhe,
.barra-linha, .calendario-evento, .paleta__item, .pag-btn {
  touch-action: manipulation;
}

/* ─── BOTÕES ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  /* 36px de altura: alvo confortável de clique. Os botões da versão
     anterior tinham 31px e reprovavam no mínimo de toque. */
  min-height: 36px;
  padding: 0 var(--e4);
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido), border-color var(--t-rapido),
              box-shadow var(--t-rapido), transform var(--t-rapido);
}
.btn:hover { background: var(--marca-clara); }
/* Estado :active existia zero vezes nas 225 regras anteriores — nada
   respondia ao clique pressionado, e a interface parecia inerte. */
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
[data-tema="escuro"] .btn { color: #06170e; }

.btn--secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda);
}
.btn--secundario:hover { background: var(--superficie-afundada); border-color: var(--borda-forte); }
[data-tema="escuro"] .btn--secundario { color: var(--texto); }

.btn--fantasma {
  background: transparent;
  color: var(--texto-fraco);
  border-color: transparent;
}
.btn--fantasma:hover { background: var(--superficie-afundada); color: var(--texto); }
[data-tema="escuro"] .btn--fantasma { color: var(--texto-fraco); }

.btn--perigo { background: var(--risco); }
.btn--perigo:hover { background: #a52424; }
.btn--aviso {
  background: #e59837;
  color: #fff;
  border-color: #d97706;
}
.btn--aviso:hover {
  background: #d97706;
  color: #fff;
}
[data-tema="escuro"] .btn--aviso {
  background: #d97706;
  color: #fff;
  border-color: #b45309;
}

.bloco-copia-licenca {
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-afundada);
}
.bloco-copia-licenca__sucesso {
  padding: 8px 12px;
  background: rgba(46, 133, 64, 0.12);
  border: 1px solid var(--verde-marca, #2e8540);
  border-radius: var(--raio);
  color: var(--verde-marca, #2e8540);
  font-size: var(--txt-apoio);
  margin-bottom: var(--e3);
}

.btn--p { min-height: 30px; padding: 0 var(--e3); font-size: var(--txt-apoio); }
.btn--g { min-height: 42px; padding: 0 var(--e5); font-size: var(--txt-sub); }
.btn--bloco { width: 100%; }

/* Botão dentro de célula de tabela. Menor que os demais por necessidade —
   a linha tem 34–44px — mas nunca abaixo de 26px de altura. */
.btn-linha {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 var(--e2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-apoio);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.btn-linha:hover { background: var(--superficie-afundada); border-color: var(--borda-forte); color: var(--texto); }
.btn-linha:disabled { opacity: .45; cursor: not-allowed; }
.btn-linha:disabled:hover { background: var(--superficie); border-color: var(--borda); color: var(--texto-fraco); }
.btn-linha--perigo { color: var(--risco); }
.btn-linha--perigo:hover { background: var(--risco-fundo); border-color: var(--risco-borda); color: var(--risco); }
.btn-linha .ico { width: 13px; height: 13px; }

/* Botão de ação só com ícone: quadrado, e o rótulo vira dica no hover/foco. */
.btn-linha--icone {
  position: relative;
  width: 30px;
  min-width: 30px;
  padding: 0;
  justify-content: center;
}
.btn-linha--icone .ico { width: 15px; height: 15px; }
.btn-linha--icone[data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--texto);
  color: var(--superficie);
  font-size: var(--txt-apoio);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: opacity var(--t-rapido), transform var(--t-rapido);
}
.btn-linha--icone[data-dica]:hover::after,
.btn-linha--icone[data-dica]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Na primeira linha da tabela a dica não pode sair por cima do cabeçalho. */
.tabela-cartoes tbody tr:first-child .btn-linha--icone[data-dica]::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
.tabela-cartoes tbody tr:first-child .btn-linha--icone[data-dica]:hover::after,
.tabela-cartoes tbody tr:first-child .btn-linha--icone[data-dica]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
a.btn-linha { display: inline-flex; }

/* ─── CAMPOS ─────────────────────────────────────────────────────────── */

/* Seletor por exclusão, nunca por lista de tipos: a lista esquece o próximo
   tipo que entrar — foi assim que email e password ficaram sem estilo
   nenhum na tela de login. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  font: inherit;
  font-size: var(--txt-corpo);
  min-height: 36px;
  padding: 0 var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
textarea {
  padding: var(--e2) var(--e3);
  min-height: 84px;
  line-height: var(--linha-normal);
  resize: vertical;
  width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca-clara);
  box-shadow: var(--anel-foco-simples);
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--superficie-afundada);
  color: var(--texto-tenue);
  cursor: not-allowed;
}
/* Campo reprovado na validação: a borda vermelha diz onde, a mensagem diz
   o quê. Só uma das duas não basta. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--risco);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(143, 26, 26, .18); }

select {
  /* A seta nativa some quando se define appearance; desenhamos a nossa em
     SVG embutido — dado (data:) é permitido por img-src na CSP. */
  appearance: none;
  padding-right: var(--e6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  background-size: 15px;
}
[data-tema="escuro"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E");
}

.campo { margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }
.campo-com-botao { display: flex; gap: var(--e3); }
.campo-com-botao input, .campo-com-botao select { flex: 1 1 auto; min-width: 0; }
.campo-com-botao .btn-icone { flex: 0 0 auto; font-size: 18px; font-weight: 700; line-height: 1; }

/* Cadastro rápido inline (tela de revisão de importação): some por padrão,
   abre abaixo do select quando alguém clica no "+" ao lado dele. */
.cadastro-rapido-inline { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e2); }
.cadastro-rapido-inline[hidden] { display: none; }
.cadastro-rapido-inline input { flex: 1 1 12rem; min-width: 0; }
/* Pedido de e-mail do RT sem login, logo abaixo do select: um bloco à parte
   dentro do mesmo .campo, com respiro para não parecer parte do select. */
.campo--convite-rt { margin-top: var(--e2); padding-top: var(--e2); border-top: 1px dashed var(--borda); }

/* Campo que precisa da largura toda do modal (hoje: senha de certificado e
   as camadas de alerta) — sem isso ele fica espremido na coluna da direita
   de .campos-2 e, sendo mais alto que o campo vizinho, deixa um vão vazio
   enorme do lado dele. */
.campo--largo { grid-column: 1 / -1; }

/* Checkboxes consecutivos de um cadastro (ex.: "Exige taxa anual", "Ativo",
   "Básica obrigatória") ficam juntos numa linha só, em vez de um por célula
   do grid — três deles um por célula sobravam numa terceira linha com
   metade vazia. */
.campo-checkboxes {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--e6);
  row-gap: var(--e2);
  align-items: center;
}

/* Camadas de alerta (dias) — campo "lista_num": só círculos para marcar/
   desmarcar (sem cor = fora da lista, colorido = dentro). Em Tipos de
   licença, o gerador recalcula sozinho ao sair da antecedência/preparação,
   já entregando uma sugestão marcada — o círculo continua sendo a única
   forma de ajustar depois. */
.campo-lista-num .lista-num__circulos {
  display: flex; flex-wrap: wrap; gap: var(--e2);
}
.circulo-dia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1.5px solid var(--borda);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.circulo-dia:hover { border-color: var(--marca-clara); color: var(--marca); }
.circulo-dia[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
[data-tema="escuro"] .circulo-dia[aria-pressed="true"] { color: #06170e; }
.campo-lista-num .lista-num__gerador {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px dashed var(--borda-suave);
}
.campo-lista-num .lista-num__campo-inline {
  display: flex; align-items: center; gap: var(--e1);
  font-size: var(--txt-apoio); color: var(--texto-fraco);
}
.campo-lista-num .lista-num__campo-inline select { width: auto; min-width: 70px; }
.texto-extraido {
  width: 100%;
  min-height: 160px;
  font-family: var(--fonte-mono);
  font-size: var(--txt-micro);
  color: var(--texto-fraco);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  padding: var(--e3);
  resize: vertical;
}
.campo > label {
  display: block;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  color: var(--texto-fraco);
  margin-bottom: 5px;
}
/* Dentro do grid de 2/3 colunas dos formulários de cadastro, dois campos
   lado a lado às vezes têm rótulos de tamanhos bem diferentes — um cabe
   numa linha, o vizinho quebra em duas ("Antecedência para renovar" x
   "Preparação da documentação de renovação"). Isso empurra só o campo do
   rótulo maior pra baixo, e as caixas de entrada da mesma linha ficam
   desalinhadas. Reservar sempre a altura de duas linhas no rótulo, com o
   texto encostado embaixo, resolve para qualquer par — rótulo curto ou
   longo — sem mudar nada quando os dois já cabem numa linha só. */
.campos-2 .campo > label,
.campos-3 .campo > label {
  min-height: calc(2em * var(--linha-normal));
  display: flex;
  align-items: flex-end;
}
/* Campo obrigatório se anuncia antes de o usuário preencher tudo e
   descobrir pelo erro. */
.campo > label .obrig { color: var(--risco); margin-left: 2px; }
.campo input, .campo select, .campo textarea { width: 100%; }
/* Campo com formato inválido (CNPJ, e-mail, telefone… — ver Valida em
   app.js) depois que a pessoa mexeu nele: borda em cor de risco, sem balão
   até tentar enviar. :user-invalid não marca o required vazio ao abrir. */
.campo input:user-invalid, .campo textarea:user-invalid, .campo select:user-invalid,
.cadastro-rapido-inline input:user-invalid {
  border-color: var(--risco);
  box-shadow: 0 0 0 1px var(--risco);
}
.campo .dica {
  margin: 5px 0 0;
  font-size: var(--txt-apoio);
  color: var(--texto-tenue);
  line-height: var(--linha-normal);
}
.campo .erro-campo {
  margin: 5px 0 0;
  font-size: var(--txt-apoio);
  color: var(--risco);
  display: flex;
  align-items: center;
  gap: 5px;
}

.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.campos-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
.campos-3[hidden] { display: none; }
@media (max-width: 640px) {
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
}

/* Caixa de marcação desenhada: a nativa tem 13×13px e reprova no alvo
   mínimo de toque (24px na WCAG 2.2). */
.checkbox, .campo label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  font-size: var(--txt-corpo);
  font-weight: var(--peso-normal);
  color: var(--texto);
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  cursor: pointer;
  position: relative;
  transition: background var(--t-rapido), border-color var(--t-rapido);
}
.checkbox input[type="radio"] { border-radius: var(--raio-pilula); }
.checkbox input:checked {
  background: var(--marca);
  border-color: var(--marca);
}
.checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.checkbox input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--raio-pilula);
  background: #fff;
}
.checkbox input:focus-visible { box-shadow: var(--anel-foco); }
.checkbox--inline { margin-right: var(--e3); }

fieldset {
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  padding: var(--e3) var(--e4) var(--e4);
  margin: 0;
}
legend {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  color: var(--texto-fraco);
  padding: 0 var(--e2);
}

/* ─── ETIQUETAS E INDICADORES ────────────────────────────────────────── */

/* O elemento mais repetido da interface. Sobe de 11.5 para 12.5px e ganha
   borda: só o par cor/fundo não distingue bem as faixas de risco em
   monitor de baixo contraste. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--neutro-borda);
  border-radius: var(--raio-pilula);
  background: var(--neutro-fundo);
  color: var(--neutro);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  line-height: 1.4;
  white-space: nowrap;
}
.etiqueta.ok      { background: var(--ok-fundo);      color: var(--ok);      border-color: var(--ok-borda); }
.etiqueta.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.etiqueta.risco   { background: var(--risco-fundo);   color: var(--risco);   border-color: var(--risco-borda); }
.etiqueta.info    { background: var(--info-fundo);    color: var(--info);    border-color: var(--info-borda); }

/* Ponto colorido antes do texto: distingue as faixas sem depender só da cor
   de fundo, o que ajuda quem tem daltonismo a ler pela posição. */
.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--raio-pilula);
  background: currentColor;
  flex: none;
}
.etiqueta--sem-ponto::before { display: none; }

/* Causa da falha da IA logo abaixo da etiqueta na fila de importação: cabe
   em duas linhas e não força a coluna a alargar. */
.ajuda--detalhe-ia { margin-top: 3px; max-width: 32ch; white-space: normal; line-height: 1.35; }

/* Contador de dias: o dado mais consultado da tela. */
.dias {
  font-weight: var(--peso-forte);
  white-space: nowrap;
}
.dias.ok      { color: var(--ok); }
.dias.atencao { color: var(--atencao); }
.dias.risco   { color: var(--risco); }

.progresso {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.progresso-trilho {
  flex: none;
  width: 64px;
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--neutro-fundo);
  overflow: hidden;
}
.progresso-preenchido {
  /* display:block é obrigatório: filho inline de container inline-block
     ignora width, e a barra mostrava 100% para quem tinha 0%. */
  display: block;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--marca-clara);
  transition: width var(--t-lento) var(--curva);
}
.progresso-preenchido.completo { background: var(--ok); }
.progresso-valor {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  min-width: 34px;
}

/* ─── SUPERFÍCIES ────────────────────────────────────────────────────── */

.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e4);
}
.painel--estreito { max-width: 640px; }
.painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
  flex-wrap: wrap;
}
.painel h2, .painel__titulo {
  font-size: var(--txt-sub);
  font-weight: var(--peso-forte);
  color: var(--texto);
  letter-spacing: -.005em;
}
.painel__sub { font-size: var(--txt-apoio); color: var(--texto-fraco); margin: 2px 0 0; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-bottom: var(--e4); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); margin-bottom: var(--e4); }
@media (max-width: 1100px) { .grade-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }

/* ─── QUADRANTES DE INTEGRAÇÃO ───────────────────────────────────────────
   Agrupa os cartões de integração por quem pode usá-los (todo cliente vs.
   exclusiva de um ERP específico) — cada grupo é uma faixa com título e uma
   grade responsiva de cartões, para achar uma integração existente pelo tipo
   em vez de rolar uma lista longa sem hierarquia. */
.integracoes-grupo { margin-bottom: var(--e6); }
.integracoes-grupo__cabecalho { margin-bottom: var(--e3); }
.integracoes-grupo__cabecalho h2 {
  font-size: var(--txt-sub);
  font-weight: var(--peso-forte);
  color: var(--texto);
  letter-spacing: -.005em;
  margin: 0 0 4px;
}
.integracoes-grupo__cabecalho .ajuda { margin: 0; max-width: 720px; }
/* Quadradinhos: um atalho por integração, ícone em cima, rótulo embaixo —
   clicar troca para a tela de detalhe (ver #integracoes-detalhe-tela). */
.integracoes-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--e3);
}
.integracao-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  position: relative;
  padding: var(--e4) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  text-align: center;
  min-height: 128px;
  transition: border-color .12s ease, transform .12s ease;
}
.integracao-tile:hover { border-color: var(--marca-clara); transform: translateY(-1px); }
.integracao-tile:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.integracao-tile__ico { width: 28px; height: 28px; color: var(--marca); }
.integracao-tile__rotulo { font-weight: var(--peso-forte); color: var(--texto); font-size: var(--txt-corpo); }
.integracao-tile__sub { font-size: var(--txt-apoio); color: var(--texto-fraco); }
.integracao-tile__selo { position: absolute; top: 8px; right: 8px; }

/* Tela de detalhe: um painel visível por vez (ver abrirIntegracao/app.js). */
#integracoes-detalhe-tela .integracao-painel { margin-top: var(--e4); }

/* ─── TABELA ─────────────────────────────────────────────────────────── */

.tabela-envolucro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.tabela-rolagem { overflow-x: auto; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--txt-corpo); }

thead th {
  text-align: left;
  font-size: var(--txt-micro);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-fraco);
  font-weight: var(--peso-forte);
  padding: var(--e2) var(--e4);
  background: var(--superficie-afundada);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  /* Fica colado no topo da área rolável da tabela. O sticky anterior
     ancorava no documento, então o cabeçalho sumia junto com o resto. */
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho-tabela);
}

tbody td {
  padding: var(--pad-celula);
  border-bottom: 1px solid var(--borda-suave);
  vertical-align: middle;
  height: var(--alt-linha);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-rapido); }
tbody tr:hover { background: var(--superficie-afundada); }
tbody tr.selecionada { background: var(--marca-suave); }
[data-tema="escuro"] tbody tr.selecionada { background: var(--marca-suave); }

/* Linha inteira clicável quando leva a um detalhe. O cursor precisa dizer
   isso antes do clique. */
tbody tr.clicavel { cursor: pointer; }

.col-descricao { min-width: 220px; max-width: 420px; }
.col-descricao strong { font-weight: var(--peso-forte); }
.col-acoes { white-space: nowrap; text-align: right; }
.col-acoes .btn-linha + .btn-linha { margin-left: var(--e1); }
.col-selecao { width: 40px; text-align: center; }
/* Na coluna de seleção o rótulo não tem texto ao lado, então sem isto ele
   encolhe para a largura do próprio checkbox (24px) e fica descentrado. */
.col-selecao .checkbox {
  min-width: 32px;
  justify-content: center;
}
.col-item { white-space: nowrap; }
.num { text-align: right; }

/* Segunda linha da célula: contexto (base legal, número da licença) sem
   competir com o dado principal. */
td .sub {
  display: block;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cabeçalho ordenável. */
th.ordenavel { padding: 0; }
th.ordenavel button {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: var(--e2) var(--e4);
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
th.ordenavel button:hover { color: var(--marca); }
th.ordenavel .ico { width: 13px; height: 13px; opacity: .3; }
th.ordenavel[aria-sort] .ico { opacity: 1; color: var(--marca); }
th.ordenavel[aria-sort] button { color: var(--texto); }

/* Cabeçalho arrastável para reordenar colunas (Licenças) — cursor de
   "segurar" já indica a affordance antes do primeiro arrasto. */
th.coluna-arrastavel { cursor: grab; user-select: none; }
th.coluna-arrastavel.arrastando { cursor: grabbing; opacity: .4; }
th.coluna-arrastavel:hover { background: var(--superficie-hover, rgba(127,127,127,.12)); }

/* Rodapé da tabela: paginação e resumo dentro da mesma superfície. */
.tabela-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e4);
  border-top: 1px solid var(--borda);
  background: var(--superficie-afundada);
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  flex-wrap: wrap;
}
.paginacao { display: flex; align-items: center; gap: var(--e1); }
.paginacao__info { font-size: var(--txt-apoio); color: var(--texto-fraco); }
.paginacao__info strong { color: var(--texto); font-weight: var(--peso-forte); }
.pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--e2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-apoio);
  cursor: pointer;
}
.pag-btn:hover:not(:disabled) { border-color: var(--marca-clara); color: var(--marca); }
.pag-btn:disabled { opacity: .4; cursor: default; }
.pag-btn[aria-current="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: var(--peso-forte);
}
/* --texto-tenue mede 3.99:1 aqui, abaixo do AA — --texto-fraco é o par mais
   escuro já calibrado em contraste para texto de apoio. */
.pag-reticencias { padding: 0 4px; color: var(--texto-fraco); }

/* Barra de seleção múltipla: aparece só quando há linha marcada, sobre a
   tabela, para as ações em lote ficarem à mão sem ocupar espaço fixo. */
.barra-selecao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e4);
  background: var(--marca-suave);
  border-bottom: 1px solid var(--ok-borda);
  font-size: var(--txt-apoio);
  color: var(--ok);
  flex-wrap: wrap;
}
.barra-selecao[hidden] { display: none; }
.barra-selecao strong { font-weight: var(--peso-destaque); }
.barra-selecao__espaco { flex: 1 1 auto; }
.barra-selecao__linha {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding-left: var(--e3); margin-left: var(--e2);
  border-left: 1px solid var(--ok-borda);
}

/* ─── ESTADOS ────────────────────────────────────────────────────────── */

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--e7) var(--e5);
  color: var(--texto-fraco);
}
.vazio .ico {
  width: 44px;
  height: 44px;
  stroke-width: 1.3;
  opacity: .35;
  margin-bottom: var(--e3);
}
.vazio__titulo {
  font-size: var(--txt-sub);
  font-weight: var(--peso-forte);
  color: var(--texto);
  margin: 0 0 var(--e1);
}
.vazio__texto { font-size: var(--txt-apoio); margin: 0; max-width: 46ch; }
.vazio__acoes { display: flex; gap: var(--e2); margin-top: var(--e4); flex-wrap: wrap; justify-content: center; }

/* Erro é distinto de vazio: vazio é resposta legítima, erro é falha que
   pede uma segunda tentativa. Antes, falha de API deixava a tabela vazia
   sem explicação nem botão de repetir. */
.estado-erro .ico { color: var(--risco); opacity: .7; }
.estado-erro .vazio__titulo { color: var(--risco); }
.estado-erro code {
  display: block;
  margin-top: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--superficie-afundada);
  border-radius: 6px;
  font-family: var(--fonte-mono);
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  max-width: 60ch;
  word-break: break-word;
}

/* Esqueleto no formato do conteúdo que vai chegar: sem ele a página salta
   quando o dado entra. */
.esqueleto { padding: var(--e3) var(--e4); }
.esqueleto__linha {
  height: 18px;
  border-radius: 5px;
  margin: var(--e3) 0;
  background: linear-gradient(90deg,
    var(--superficie-afundada) 25%, var(--borda-suave) 37%, var(--superficie-afundada) 63%);
  background-size: 400% 100%;
  animation: brilho 1.4s ease-in-out infinite;
}
.esqueleto__linha:nth-child(3n) { width: 78%; }
.esqueleto__linha:nth-child(3n+1) { width: 92%; }
@keyframes brilho {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ─── FILTROS ────────────────────────────────────────────────────────── */

.filtros {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
}
.filtros__linha {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
}

.campo-busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  min-width: 200px;
}
.campo-busca .ico {
  position: absolute;
  left: var(--e3);
  width: 16px;
  height: 16px;
  color: var(--texto-tenue);
  pointer-events: none;
}
/* Especificidade casada com o seletor base (três :not = 0-4-0). Sem os :not
   aqui, a regra base vence, o padding-left some e o ícone sobrepõe o texto
   digitado. */
.campo-busca input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  padding-left: 38px;
  padding-right: var(--e6);
}
.campo-busca__limpar {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
}
.campo-busca__limpar:hover { background: var(--superficie-afundada); color: var(--texto); }
.campo-busca__limpar[hidden] { display: none; }

/* Atalhos de consulta. Cada um é uma pergunta inteira da operação, não uma
   combinação arbitrária de campos. */
.chips { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 32px: mínimo de alvo. Os chips anteriores tinham 31px e havia 80 deles
     abaixo do mínimo só na tela de Ações. */
  min-height: 32px;
  padding: 0 var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-apoio);
  cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.chip:hover { border-color: var(--marca-clara); color: var(--marca); }
.chip[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: var(--peso-forte);
}
[data-tema="escuro"] .chip[aria-pressed="true"] { color: #06170e; }
.chip__contagem {
  font-size: var(--txt-micro);
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

.filtros__avancados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda-suave);
}
.filtros__avancados[hidden] { display: none; }
.filtros__avancados .campo { margin-bottom: 0; }
.campo--marcadores {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  justify-content: flex-end;
}
.filtros__acoes { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--e2); }

/* Fichas de filtro ativo: removíveis uma a uma. O contador anterior dizia
   "3 filtros" sem dizer quais — para descobrir era preciso abrir o painel
   e ler campo a campo. */
.fichas { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); align-items: center; }
.fichas[hidden] { display: none; }
.fichas__rotulo { font-size: var(--txt-apoio); color: var(--texto-tenue); }
.ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 6px 0 var(--e3);
  border: 1px solid var(--info-borda);
  border-radius: var(--raio-pilula);
  background: var(--info-fundo);
  color: var(--info);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
}
.ficha__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.ficha__x:hover { background: rgba(10, 82, 150, .16); }
.ficha__x .ico { width: 11px; height: 11px; stroke-width: 2.4; }

.contador-filtros {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raio-pilula);
  background: var(--marca);
  color: #fff;
  font-size: var(--txt-micro);
  font-weight: var(--peso-destaque);
}
[data-tema="escuro"] .contador-filtros { color: #06170e; }
.contador-filtros[hidden] { display: none; }

.resumo, .filtros__resumo {
  margin: var(--e3) 0 0;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
}
.resumo strong, .filtros__resumo strong { color: var(--texto); font-weight: var(--peso-forte); }

.ajuda { font-size: var(--txt-apoio); color: var(--texto-fraco); margin: 0; }

.barra-filtros {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}

/* ─── MODAL ──────────────────────────────────────────────────────────── */

.modal-fundo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5) var(--e4);
  background: rgba(12, 18, 26, .55);
  backdrop-filter: blur(3px);
  z-index: var(--z-veu);
  animation: velar var(--t-normal) var(--curva);
}
/* O atributo hidden precisa vencer o display:flex acima; sem isto o modal
   nasce aberto e vazio no carregamento da página. */
.modal-fundo[hidden] { display: none; }
@keyframes velar { from { opacity: 0; } to { opacity: 1; } }

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  /* O modal anterior media 665px numa viewport de 577px: os botões de
     Cancelar/Criar ficavam fora da tela, sem rolagem própria. O teto em
     88vh mais o corpo rolável garantem que o rodapé sempre apareça. */
  max-height: 88vh;
  background: var(--superficie-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-3);
  z-index: var(--z-modal);
  animation: subir var(--t-normal) var(--curva);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal--largo { max-width: 900px; }
.modal--estreito { max-width: 440px; }

.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.modal-topo h2 { font-size: var(--txt-secao); letter-spacing: -.01em; }
.modal-topo .modal-sub { margin: 2px 0 0; font-size: var(--txt-apoio); color: var(--texto-fraco); }

.fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
}
.fechar:hover { background: var(--superficie-afundada); color: var(--texto); }

/* Só o corpo rola; topo e rodapé ficam. */
.modal-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e5);
}

/* Rodapé fixo do diálogo: as ações não podem depender de rolar até o fim. */
.modal-rodape, .acoes-modal, .form-cadastro__acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borda);
  background: var(--superficie-afundada);
  flex: none;
  flex-wrap: wrap;
}
/* Quando as ações vêm dentro do corpo (formulários montados por string),
   elas viram rodapé fixo por posição pegajosa — sem reescrever cada form. */
.modal-corpo .acoes-modal,
.modal-corpo .form-cadastro__acoes {
  position: sticky;
  bottom: calc(var(--e5) * -1);
  margin: var(--e5) calc(var(--e5) * -1) calc(var(--e5) * -1);
  border-radius: 0 0 var(--raio-superficie) var(--raio-superficie);
}
.modal-rodape__espaco { flex: 1 1 auto; }

.erro-form {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--e2);
  background: var(--risco-fundo);
  border: 1px solid var(--risco-borda);
  color: var(--risco);
  padding: var(--e3);
  border-radius: var(--raio-controle);
  font-size: var(--txt-apoio);
  margin-bottom: var(--e4);
}
.erro-form .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }

.subtitulo-modal {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-fraco);
  margin: var(--e5) 0 var(--e3);
}
.subtitulo-modal:first-child { margin-top: 0; }

/* Diálogo de confirmação destrutiva: nomeia o registro e diz a
   consequência. "Tem certeza?" não informa o que se está prestes a perder. */
.confirmar { text-align: center; padding: var(--e2) 0 var(--e3); }
.confirmar__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--raio-pilula);
  background: var(--risco-fundo);
  color: var(--risco);
  margin-bottom: var(--e3);
}
.confirmar__icone .ico { width: 24px; height: 24px; }
.confirmar__alvo {
  display: block;
  margin: var(--e3) 0;
  padding: var(--e2) var(--e3);
  background: var(--superficie-afundada);
  border-radius: var(--raio-controle);
  font-weight: var(--peso-forte);
  word-break: break-word;
}
.confirmar p { margin: 0; color: var(--texto-fraco); font-size: var(--txt-corpo); }

/* ─── FILTROS DO PAINEL ──────────────────────────────────────────────── */

.filtros-painel {
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.filtros-painel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  min-width: 200px;
}
.filtros-painel select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--fundo);
  color: var(--texto);
}

/* ─── CARTÕES DO PAINEL ──────────────────────────────────────────────── */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* Cartão é botão: leva à lista já filtrada. Antes o número era um beco sem
   saída — via-se "8 vencendo" e não havia como chegar às oito. */
.cartao {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  padding: var(--e4);
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-normal) var(--curva),
              transform var(--t-normal) var(--curva),
              border-color var(--t-rapido);
}
.cartao:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); border-color: var(--borda-forte); }
.cartao:active { transform: translateY(0); }
.cartao.ativa { border-color: var(--borda-forte); box-shadow: var(--anel-foco), var(--sombra-1); }
/* box-shadow próprio do cartão tem a mesma especificidade do anel de foco
   universal (§315) e vem depois na cascata — sem isto o anel desaparecia
   atrás da sombra e quem navega por teclado perdia a posição. */
.cartao:focus-visible { box-shadow: var(--anel-foco), var(--sombra-1); }
/* Faixa de cor à esquerda em vez de borda grossa: não desloca o conteúdo
   e some no tema escuro sem virar barra preta. */
.cartao::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--neutro);
}
.cartao.ok::before      { background: var(--ok); }
.cartao.atencao::before { background: var(--atencao); }
.cartao.risco::before   { background: var(--risco); }
.cartao.info::before    { background: var(--info); }

.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.cartao__rotulo {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  font-weight: var(--peso-medio);
}
.cartao__valor {
  font-size: 30px;
  font-weight: var(--peso-destaque);
  line-height: 1.1;
  margin-top: var(--e2);
  letter-spacing: -.02em;
}
.cartao.risco .cartao__valor { color: var(--risco); }
.cartao.atencao .cartao__valor { color: var(--atencao); }
.cartao__rodape {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--e2);
  font-size: var(--txt-apoio);
  color: var(--texto-tenue);
}
.cartao__variacao { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--peso-forte); }
.cartao__variacao.sobe { color: var(--risco); }
.cartao__variacao.desce { color: var(--ok); }
.cartao__variacao .ico { width: 13px; height: 13px; }
.cartao__seta { margin-left: auto; color: var(--texto-tenue); opacity: 0; transition: opacity var(--t-rapido); }
.cartao:hover .cartao__seta { opacity: 1; }

/* ─── GRÁFICO DE BARRAS ──────────────────────────────────────────────── */

.barras { display: flex; flex-direction: column; gap: var(--e2); }
.barra-linha {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr 52px;
  align-items: center;
  gap: var(--e3);
  padding: 3px 6px;
  margin: 0 -6px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-rapido);
}
.barra-linha:hover { background: var(--superficie-afundada); }
.barra-rotulo {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-trilho {
  background: var(--superficie-afundada);
  border-radius: var(--raio-pilula);
  height: 18px;
  overflow: hidden;
}
.barra-preenchida {
  display: block;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--marca-clara);
  min-width: 3px;
  transition: width var(--t-lento) var(--curva);
}
.barra-preenchida.ok { background: var(--ok); }
.barra-preenchida.atencao { background: var(--atencao); }
.barra-preenchida.risco { background: var(--risco); }
.barra-valor { font-size: var(--txt-apoio); font-weight: var(--peso-forte); text-align: right; }

/* ─── ESCALA DE STATUS (bom → crítico) ───────────────────────────────────
   Escala fixa e reservada — nunca reaproveitada para identidade de série.
   Mesmos tons em claro/escuro: contraste é resolvido por rótulo, não por
   variar o tom (ver ícone/rótulo obrigatório ao lado de cada uso). */
:root {
  --status-bom: #0ca30c;
  --status-alerta: #fab219;
  --status-grave: #ec835a;
  --status-critico: #d03b3b;
  --status-neutro: #898781;
}

.status-pilha { margin-top: var(--e3); }
.status-pilha__barra {
  display: flex;
  align-items: stretch;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--borda);
}
/* A largura do segmento é a proporção que ele representa — alargar o
   segmento fino para 24px de alvo mentiria sobre o dado. A legenda abaixo
   (.status-pilha__item, com 24px de altura) filtra a mesma categoria e é o
   alvo equivalente que a WCAG 2.5.8 aceita nesse caso. */
.status-pilha__seg {
  flex: none;
  height: 100%;
  min-width: 3px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: filter var(--t-rapido, .15s);
}
.status-pilha__seg:not(:first-child) { margin-left: 2px; }
.status-pilha__seg:hover, .status-pilha__seg:focus-visible { filter: brightness(1.1); }
.status-pilha__seg:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.status-pilha__seg.bom { background: var(--status-bom); }
.status-pilha__seg.alerta { background: var(--status-alerta); }
.status-pilha__seg.grave { background: var(--status-grave); }
.status-pilha__seg.critico { background: var(--status-critico); }
.status-pilha__seg.neutro { background: var(--status-neutro); }

.status-pilha__legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin: var(--e3) 0 0;
  padding: 0;
}
.status-pilha__legenda li { padding: 0; }
.status-pilha__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  cursor: pointer;
}
.status-pilha__item:hover, .status-pilha__item:focus-visible { background: var(--superficie-hover, rgba(127,127,127,.12)); }
.status-pilha__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.status-pilha__dot.bom { background: var(--status-bom); }
.status-pilha__dot.alerta { background: var(--status-alerta); }
.status-pilha__dot.grave { background: var(--status-grave); }
.status-pilha__dot.critico { background: var(--status-critico); }
.status-pilha__dot.neutro { background: var(--status-neutro); }
.status-pilha__item strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.lista-opcoes-exportar { list-style: none; margin: var(--e3) 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-opcoes-exportar__item {
  width: 100%;
  text-align: left;
  padding: var(--e3);
  border-radius: var(--raio-superficie);
  font-weight: var(--peso-forte);
}
.lista-opcoes-exportar__item:hover, .lista-opcoes-exportar__item:focus-visible { background: var(--fundo); }

/* ─── PÁGINA DE DETALHE ──────────────────────────────────────────────── */

/* Licença, condicionante e ação deixam de caber num modal: identidade no
   topo, abas internas, e a linha do tempo que a auditoria pede. */
.detalhe-cabecalho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  padding: var(--e5);
  margin-bottom: var(--e4);
}
.detalhe-cabecalho__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.detalhe-cabecalho__texto { flex: 1 1 320px; min-width: 0; }
.detalhe-titulo { font-size: var(--txt-titulo); letter-spacing: -.015em; margin-bottom: var(--e2); }
.detalhe-meta { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* Destaque visual para ação vencida no detalhe */
.detalhe-cabecalho--vencida {
  border-left: 5px solid var(--risco);
  background: var(--risco-fundo);
}
[data-tema="escuro"] .detalhe-cabecalho--vencida {
  background: var(--risco-fundo);
}

/* Etiqueta grande para status crítico */
.etiqueta--grande {
  font-size: var(--txt-sub);
  padding: 4px 12px;
  letter-spacing: .02em;
}

/* Badge clicável no detalhe: feedback de teclado */
.badge[role="button"] {
  cursor: pointer;
}
.badge[role="button"]:hover {
  background: var(--n100);
  border-color: var(--borda-forte);
}
.badge[role="button"]:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* Faixa de fatos-chave: status, prazo, responsável a um golpe de vista. */
.fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda-suave);
}
.fato__rotulo {
  display: block;
  font-size: var(--txt-micro);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-tenue);
  font-weight: var(--peso-forte);
  margin-bottom: 3px;
}
.fato__valor { font-size: var(--txt-corpo); font-weight: var(--peso-medio); }

/* Abas internas do detalhe. */
.abas-detalhe {
  display: flex;
  gap: var(--e1);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--e4);
  overflow-x: auto;
}
.aba-detalhe {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 40px;
  padding: 0 var(--e3);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--txt-corpo);
  color: var(--texto-fraco);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-rapido), border-color var(--t-rapido);
}
.aba-detalhe:hover { color: var(--texto); }
.aba-detalhe[aria-selected="true"] {
  color: var(--marca);
  border-bottom-color: var(--marca);
  font-weight: var(--peso-forte);
}
.aba-detalhe__contagem {
  font-size: var(--txt-micro);
  padding: 1px 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
}

/* Linha do tempo: prorrogações, mudanças de status e evidências em ordem
   cronológica — a narrativa que a auditoria pede. */
.linha-tempo { position: relative; padding-left: var(--e6); }
.linha-tempo::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--borda);
}
.evento { position: relative; padding-bottom: var(--e5); }
.evento:last-child { padding-bottom: 0; }
.evento::before {
  content: "";
  position: absolute;
  left: calc(var(--e6) * -1 + 5px);
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
}
.evento.ok::before { border-color: var(--ok); background: var(--ok-fundo); }
.evento.atencao::before { border-color: var(--atencao); background: var(--atencao-fundo); }
.evento.risco::before { border-color: var(--risco); background: var(--risco-fundo); }
.evento__topo { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.evento__titulo { font-weight: var(--peso-forte); font-size: var(--txt-corpo); }
.evento__data { font-size: var(--txt-apoio); color: var(--texto-tenue); }
.evento__corpo { margin: var(--e1) 0 0; font-size: var(--txt-apoio); color: var(--texto-fraco); }
.evento__citacao {
  margin: var(--e2) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 2px solid var(--borda);
  background: var(--superficie-afundada);
  border-radius: 0 6px 6px 0;
  font-size: var(--txt-apoio);
  color: var(--texto);
}

/* ─── ANEXOS ─────────────────────────────────────────────────────────── */

/* O botão nativo do <input type=file> ("Escolher arquivo") nasce com o
   visual do navegador, destoando de todo o resto — aqui ele recebe o mesmo
   tratamento do .btn primário para que selecionar um PDF ou foto pareça a
   mesma ação de sempre. Só o botão é estilizado; o nome do arquivo ao lado
   segue sendo desenhado pelo navegador. */
input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-right: var(--e3);
  padding: 0 var(--e4);
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--t-rapido), transform var(--t-rapido);
}
input[type="file"]::file-selector-button:hover { background: var(--marca-clara); }
input[type="file"]::file-selector-button:active { transform: translateY(1px); }
[data-tema="escuro"] input[type="file"]::file-selector-button { color: #06170e; }

/* Ação de linha como ícone. Mantém a altura de alvo de toque do .btn-linha
   (36px) mesmo sem texto: encolher junto com o rótulo transformaria a ação
   num alvo difícil de acertar, sobretudo no celular. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: none;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido);
}
.btn-icone:hover {
  background: var(--superficie-afundada);
  border-color: var(--borda);
  color: var(--texto);
}
.btn-icone:active { transform: translateY(1px); }
.btn-icone--perigo:hover {
  background: var(--risco-fundo);
  border-color: var(--risco-borda);
  color: var(--risco);
}
.col-acoes { white-space: nowrap; }

/* Prazo padrão e o atalho de marcar/desmarcar na mesma linha. */
.campo--linha-acoes {
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  flex-wrap: wrap;
}
.campo--linha-acoes label { flex: 0 0 100%; }

/* Seletor de colunas: duas colunas de checkbox para caber sem rolagem longa,
   uma só no celular. */
.colunas-ordem {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e2);
}
.colunas-ordem__item {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 4px 2px var(--e2);
  border: 1px solid var(--borda); border-radius: var(--raio, 6px);
  background: var(--superficie);
  font-size: var(--txt-apoio);
}
.colunas-ordem__nome { margin-right: var(--e1); white-space: nowrap; }
.colunas-ordem__item .btn-icone { padding: 2px 6px; font-size: 11px; line-height: 1; }
.colunas-ordem__item .btn-icone[disabled] { opacity: .35; cursor: default; }
.colunas-escolha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--e2) var(--e4);
  margin-bottom: var(--e4);
}

/* Aviso de isenção da importação automática. Tom de atenção, não de erro: a
   pessoa não errou nada ao abrir a tela — está sendo informada do limite da
   ferramenta antes de confiar no que ela preencheu. */
.aviso-isencao {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  background: var(--atencao-fundo);
  border: 1px solid var(--atencao-borda);
  border-left: 3px solid var(--atencao);
  color: var(--atencao);
  padding: var(--e3);
  border-radius: var(--raio-controle);
  font-size: var(--txt-apoio);
  margin-bottom: var(--e4);
}
.aviso-isencao .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.aviso-isencao strong { display: block; margin-bottom: 2px; }
.aviso-isencao--compacto { margin-bottom: var(--e3); }

/* Tabela de condicionantes na revisão da importação. As larguras vivem aqui
   e não em atributo style porque a CSP do app não permite estilo inline
   (ver auth.go: style-src 'self', sem unsafe-inline). */
.tabela-cond-import .col-usar { width: 36px; }
.tabela-cond-import .col-item { width: 72px; }
.tabela-cond-import .col-natureza { width: 150px; }
.tabela-cond-import .col-prazo { width: 90px; }
.tabela-cond-import input[type="text"],
.tabela-cond-import input[type="number"],
.tabela-cond-import textarea,
.tabela-cond-import select { width: 100%; }
#ri-prazo-padrao { max-width: 120px; }

/* Área de arrastar e soltar: o gesto natural para documento vindo do
   explorador de arquivos. O <input type=file> continua, por teclado. */
.solta-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e5);
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio-superficie);
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
  text-align: center;
  transition: border-color var(--t-rapido), background var(--t-rapido);
  cursor: pointer;
}
.solta-arquivo:hover, .solta-arquivo.sobre {
  border-color: var(--marca-clara);
  background: var(--marca-suave);
  color: var(--marca);
}
.solta-arquivo .ico { width: 26px; height: 26px; }
.solta-arquivo__texto { font-size: var(--txt-corpo); font-weight: var(--peso-medio); }
.solta-arquivo__dica { font-size: var(--txt-apoio); color: var(--texto-tenue); }

/* Escondido fora da tela, não com display:none — display:none o remove da
   navegação por teclado. */
.arquivo-oculto {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.envio-progresso {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  margin-top: var(--e3);
}
.envio-progresso[hidden] { display: none; }
.envio-progresso__barra {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-afundada);
  overflow: hidden;
}
.envio-progresso__preenchido {
  display: block;
  height: 100%;
  background: var(--marca-clara);
  border-radius: var(--raio-pilula);
  transition: width var(--t-normal) var(--curva);
}

/* ─── CADASTROS E ADMINISTRAÇÃO ──────────────────────────────────────── */

.cadastros-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--e4);
  align-items: start;
}
@media (max-width: 900px) { .cadastros-layout { grid-template-columns: 1fr; } }

.cadastros-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  position: sticky;
  top: calc(var(--alt-topo) + var(--e4));
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .cadastros-menu { position: static; flex-direction: row; overflow-x: auto; }
}
.cadastros-menu button {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido), color var(--t-rapido);
  box-sizing: border-box;
  min-width: 0;
}
/* display:flex acima venceria o [hidden] do navegador: sem isto, as abas
   exclusivas de ndg_admin apareciam para todo mundo (o servidor recusa,
   mas o menu vazava). */
.cadastros-menu button[hidden] { display: none; }
.cadastros-menu button:hover { background: var(--superficie-afundada); color: var(--texto); }
.cadastros-menu button.ativa {
  background: var(--marca-suave);
  color: var(--marca);
  font-weight: var(--peso-forte);
}
[data-tema="escuro"] .cadastros-menu button.ativa { color: var(--marca-clara); }
.cadastros-menu .ico { width: 16px; height: 16px; flex-shrink: 0; }
.cadastros-menu button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cadastros-conteudo { min-width: 0; }
.cadastros-menu__separador {
  margin: var(--e3) 0 var(--e1); padding: 0 var(--e2);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}

.token-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e5);
}
.token-revelado {
  display: block;
  width: 100%;
  margin: var(--e2) 0;
  padding: var(--e3);
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  font-family: var(--fonte-mono);
  font-size: var(--txt-apoio);
  word-break: break-all;
}

/* ─── CALENDÁRIO ─────────────────────────────────────────────────────── */

.calendario-grade {
  display: grid;
  /* minmax(0, 1fr): com 1fr puro o texto do evento (nowrap) alargava a
     coluna e empurrava os últimos dias da semana para fora da grade —
     em 1280px apareciam só 5 colunas. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}
.calendario-cabecalho {
  padding: var(--e2);
  background: var(--superficie-afundada);
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-fraco);
  text-align: center;
}
.calendario-dia {
  min-height: 116px;
  padding: var(--e2);
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.calendario-dia--vazio { background: var(--superficie-afundada); }
.calendario-dia--hoje { background: var(--marca-suave); }
.calendario-dia-numero {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  color: var(--texto-fraco);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendario-dia--hoje .calendario-dia-numero { color: var(--marca); }
.calendario-eventos { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.calendario-evento {
  display: flex;
  align-items: center;
  /* 24px é o alvo mínimo da WCAG 2.2; em 18px o evento era difícil de
     acertar num dia com vários. */
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 5px;
  border-left: 3px solid var(--neutro);
  background: var(--neutro-fundo);
  color: var(--texto);
  font-size: var(--txt-micro);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: left;
  border-top: none; border-right: none; border-bottom: none;
  font-family: inherit;
  width: 100%;
}
.calendario-evento:hover { filter: brightness(.96); }
.calendario-evento.ok { border-left-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.calendario-evento.atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); color: var(--atencao); }
.calendario-evento.risco { border-left-color: var(--risco); background: var(--risco-fundo); color: var(--risco); }

/* ─── MAPA ───────────────────────────────────────────────────────────── */

.mapa-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.mapa-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  cursor: pointer;
  user-select: none;
  transition: transform var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva), box-shadow var(--t-rapida) var(--curva);
  border-left: 4px solid var(--n400);
}

.mapa-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-1);
  border-color: var(--borda-forte);
}

.mapa-kpi-card.ativo {
  box-shadow: 0 0 0 2px var(--marca);
  border-color: var(--marca);
}

.mapa-kpi-card--sucesso { border-left-color: var(--ok); }
.mapa-kpi-card--atencao { border-left-color: var(--atencao); }
.mapa-kpi-card--perigo { border-left-color: var(--risco); }
.mapa-kpi-card--neutro { border-left-color: var(--n400); }

.mapa-kpi-card__rotulo {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-medio);
  color: var(--texto-fraco);
}

.mapa-kpi-card__valor {
  font-size: var(--txt-titulo);
  font-weight: var(--peso-destaque);
  color: var(--texto);
  line-height: 1;
}

.mapa-kpi-card--sucesso .mapa-kpi-card__valor { color: var(--ok); }
.mapa-kpi-card--atencao .mapa-kpi-card__valor { color: var(--atencao); }
.mapa-kpi-card--perigo .mapa-kpi-card__valor { color: var(--risco); }

/* Filtros do Mapa */
.mapa-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  margin-bottom: var(--e4);
}

.mapa-filtros__busca {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
  display: flex;
  align-items: center;
}

.mapa-filtros__busca .ico {
  position: absolute;
  left: var(--e3);
  color: var(--texto-tenue);
  pointer-events: none;
}

.mapa-filtros__busca input {
  width: 100%;
  padding: var(--e2) var(--e4) var(--e2) calc(var(--e3) + 22px);
  font-size: var(--txt-corpo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: var(--superficie-afundada);
  color: var(--texto);
  outline: none;
  transition: border-color var(--t-rapida) var(--curva), background-color var(--t-rapida) var(--curva);
}

.mapa-filtros__busca input:focus {
  border-color: var(--marca);
  background: var(--superficie);
  box-shadow: 0 0 0 3px var(--marca-suave);
}

.mapa-filtros__busca .btn-icone {
  position: absolute;
  right: var(--e2);
  background: transparent;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
}

.mapa-filtros__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.mapa-filtro-label {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  font-weight: var(--peso-medio);
}

.mapa-filtro-label select {
  font-size: var(--txt-corpo);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: var(--superficie);
  color: var(--texto);
  outline: none;
}

.mapa-filtro-label select:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 2px var(--marca-suave);
}

.mapa-filtros__info {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap;
}

/* Layout Split: Mapa + Sidebar */
.mapa-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--e4);
  align-items: start;
}

.mapa-canvas-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--raio-superficie);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--superficie-afundada);
}

.mapa-container, #mapa-unidades {
  height: 640px;
  min-height: 480px;
  width: 100%;
  display: block;
  background: var(--superficie-afundada);
}

.leaflet-container {
  font-family: var(--fonte);
  background: var(--superficie-afundada);
}

#mapa-unidades .leaflet-tile-pane {
  opacity: 1 !important;
}

/* Legenda Flutuante do Mapa */
.mapa-legenda {
  position: absolute;
  bottom: var(--e3);
  left: var(--e3);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  box-shadow: var(--sombra-1);
  font-size: var(--txt-apoio);
  color: var(--texto);
}

.mapa-legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legenda-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legenda-dot--critico { background: #d32f2f; }
.legenda-dot--atencao { background: #ed6c02; }
.legenda-dot--regular { background: #2e7d32; }
.legenda-dot--neutro  { background: #78909c; }

/* Sidebar de Unidades */
.mapa-sidebar {
  display: flex;
  flex-direction: column;
  height: 640px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-0);
  overflow: hidden;
}

.mapa-sidebar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-afundada);
}

.mapa-sidebar__titulo {
  font-size: var(--txt-secao);
  font-weight: var(--peso-forte);
  color: var(--texto);
  margin: 0;
}

.mapa-lista-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

/* Card de Unidade na Lista */
.unidade-geo-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  cursor: pointer;
  transition: all var(--t-rapida) var(--curva);
  border-left: 4px solid var(--n300);
}

.unidade-geo-card:hover {
  border-color: var(--borda-forte);
  background: var(--superficie-afundada);
  transform: translateX(2px);
}

.unidade-geo-card.ativa {
  border-color: var(--marca);
  box-shadow: 0 0 0 2px var(--marca-suave);
  background: var(--marca-suave);
}

.unidade-geo-card--critico { border-left-color: #d32f2f; }
.unidade-geo-card--atencao { border-left-color: #ed6c02; }
.unidade-geo-card--regular { border-left-color: #2e7d32; }
.unidade-geo-card--sem_licenca { border-left-color: #78909c; }

.unidade-geo-card__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e2);
}

.unidade-geo-card__nome {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
  color: var(--texto);
  line-height: var(--linha-densa);
}

.unidade-geo-card__codigo {
  font-family: var(--fonte-mono);
  font-size: var(--txt-micro);
  color: var(--texto-tenue);
  background: var(--n100);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.unidade-geo-card__local {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  line-height: 1.3;
}

.unidade-geo-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.badge-geo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-medio);
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
}

.badge-geo--critico { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-geo--atencao { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-geo--sucesso { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-geo--neutro  { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-geo--reg     { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }

/* Marcador Leaflet Personalizado */
.marcador-mapa-wrapper {
  position: relative;
  width: 32px;
  height: 42px;
}

.marcador-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease;
  border: 2px solid #ffffff;
}

.marcador-pin:hover {
  transform: rotate(-45deg) scale(1.15);
}

.marcador-pin__centro {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  transform: rotate(45deg);
}

.marcador-pin--critico { background: #d32f2f; }
.marcador-pin--atencao { background: #ed6c02; }
.marcador-pin--regular { background: #2e7d32; }
.marcador-pin--sem_licenca { background: #78909c; }

/* Pulso animado para pin crítico */
.marcador-pulso {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(211, 47, 47, 0.4);
  animation: pulso-mapa 2s infinite ease-out;
  pointer-events: none;
}

@keyframes pulso-mapa {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Popup Rico Leaflet */
.leaflet-popup-content-wrapper {
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-2);
  padding: 0;
  overflow: hidden;
}

.leaflet-popup-content {
  margin: 0 !important;
  line-height: var(--linha-normal);
  min-width: 260px;
  max-width: 320px;
}

.popup-unidade {
  display: flex;
  flex-direction: column;
}

.popup-unidade__topo {
  padding: var(--e3);
  background: var(--superficie-afundada);
  border-bottom: 1px solid var(--borda);
}

.popup-unidade__titulo {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-destaque);
  color: var(--texto);
  margin-bottom: 2px;
}

.popup-unidade__meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-micro);
  color: var(--texto-tenue);
}

.popup-unidade__corpo {
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.popup-unidade__endereco {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  line-height: 1.35;
}

.popup-unidade__metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.popup-metrica-box {
  padding: 6px 8px;
  border-radius: var(--raio-campo);
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popup-metrica-box--critico {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.popup-metrica-box--atencao {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.popup-metrica-box__val {
  font-size: var(--txt-secao);
  font-weight: var(--peso-destaque);
  line-height: 1;
}

.popup-metrica-box__rot {
  font-size: 10.5px;
  color: var(--texto-tenue);
}

.popup-metrica-box--critico .popup-metrica-box__rot { color: #991b1b; }
.popup-metrica-box--atencao .popup-metrica-box__rot { color: #92400e; }

.popup-unidade__acoes {
  padding: var(--e2) var(--e3) var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}

.popup-unidade__acoes .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 960px) {
  .mapa-layout {
    grid-template-columns: 1fr;
  }
  .mapa-sidebar {
    height: 380px;
  }
  .mapa-container, #mapa-unidades {
    height: 440px;
  }
}

.lista-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.lista-checklist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
}
.lista-checklist__texto { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.lista-checklist__item { flex-wrap: wrap; }
.lista-checklist__item--valido { border-left: 3px solid var(--ok); }
.lista-checklist__item--atencao { border-left: 3px solid var(--atencao); }
.lista-checklist__item--pendente { border-left: 3px solid var(--risco); }
.lista-checklist__principal { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); width: 100%; flex-wrap: wrap; }
.lista-checklist__acoes { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.lista-checklist__meta { font-size: var(--txt-micro); color: var(--texto-fraco); }
.lista-checklist__tarefa {
  width: 100%; margin-top: var(--e2); padding: var(--e2) var(--e3);
  background: var(--superficie-afundada); border: 1px solid var(--borda); border-radius: var(--raio-controle);
  font-size: var(--txt-micro); display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
.btn-linha--destaque { color: var(--marca); font-weight: var(--peso-forte); border-color: var(--marca); }
.checklist-resumo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.checklist-resumo__barra { flex: 1 1 160px; height: 8px; background: var(--superficie-afundada); border-radius: 4px; overflow: hidden; display: flex; }
.checklist-resumo__barra span { display: block; height: 100%; }

/* ─── PALETA DE COMANDOS (busca global) ──────────────────────────────── */

.paleta-fundo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--e4) var(--e4);
  background: rgba(12, 18, 26, .5);
  backdrop-filter: blur(3px);
  z-index: var(--z-paleta);
  animation: velar var(--t-rapido) var(--curva);
}
.paleta-fundo[hidden] { display: none; }

.paleta {
  width: 100%;
  max-width: 620px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  animation: subir var(--t-normal) var(--curva);
}
.paleta__campo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e4);
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.paleta__campo .ico { color: var(--texto-tenue); }
.paleta__campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  flex: 1 1 auto;
  height: 52px;
  border: none;
  background: none;
  padding: 0;
  font-size: var(--txt-sub);
}
.paleta__campo input:focus { box-shadow: none; }

.paleta__lista { flex: 1 1 auto; overflow-y: auto; padding: var(--e2); }
.paleta__grupo {
  padding: var(--e3) var(--e3) var(--e1);
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-tenue);
}
.paleta__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 42px;
  padding: var(--e2) var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
}
.paleta__item:hover, .paleta__item.ativo { background: var(--superficie-afundada); }
.paleta__item.ativo { box-shadow: inset 2px 0 0 var(--marca); }
.paleta__item .ico { color: var(--texto-tenue); flex: none; }
.paleta__item-texto { flex: 1 1 auto; min-width: 0; }
.paleta__item-titulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta__item-sub {
  display: block;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paleta__marca { background: var(--atencao-fundo); color: var(--atencao); border-radius: 3px; padding: 0 2px; }
.paleta__rodape {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e2) var(--e4);
  border-top: 1px solid var(--borda);
  background: var(--superficie-afundada);
  font-size: var(--txt-micro);
  color: var(--texto-tenue);
  flex: none;
  flex-wrap: wrap;
}
.paleta__rodape span { display: inline-flex; align-items: center; gap: 5px; }

/* ─── AVISO (toast) ──────────────────────────────────────────────────── */

.avisos {
  position: fixed;
  bottom: var(--e5);
  right: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  z-index: var(--z-aviso);
  max-width: min(400px, calc(100vw - var(--e6)));
  pointer-events: none;
}
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie-elevada);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--marca);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-3);
  font-size: var(--txt-corpo);
  color: var(--texto);
  pointer-events: auto;
  animation: deslizar var(--t-normal) var(--curva);
}
.aviso[hidden] { display: none; }
.aviso.erro { border-left-color: var(--risco); }
.aviso.erro .ico { color: var(--risco); }
.aviso.ok .ico { color: var(--ok); }
.aviso__texto { flex: 1 1 auto; }
.aviso__fechar {
  flex: none;
  border: none;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
}
@keyframes deslizar {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── LOGIN ──────────────────────────────────────────────────────────── */

.login-split { position: fixed; inset: 0; display: flex; z-index: var(--z-lateral); }
.login-split[hidden] { display: none; }

.login-hero {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  color: #eaf7ee;
  position: relative;
  /* O conteúdo real rola em .login-hero__scroll; esta caixa só recorta o
     brilho decorativo do ::before, que nunca deve criar barra de rolagem. */
  overflow: hidden;
  /* O extremo claro era #0b9d53, e o texto branco dava 3.52:1 contra ele —
     reprovado em AA para os corpos de 12.5 e 13.5px. Este verde mantém a
     identidade da marca e leva o pior caso a 7.66:1. As manchas do ::before
     clareiam localmente, então a margem é necessária, não folga gratuita. */
  background: linear-gradient(160deg, #06603a 0%, #04763f 40%, #01361f 100%);
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 22% 24%, rgba(93, 214, 137, .40), transparent 70%),
    radial-gradient(34% 38% at 78% 18%, rgba(178, 224, 122, .26), transparent 70%),
    radial-gradient(42% 46% at 52% 88%, rgba(1, 54, 31, .58), transparent 70%);
  filter: blur(64px);
  animation: brisa 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes brisa {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -4%) scale(1.07); }
  100% { transform: translate(-3%, 3%) scale(1); }
}

/* Único filho de .login-hero: centraliza o conteúdo verticalmente quando
   sobra espaço e, quando não sobra (telas baixas, zoom, fonte grande), rola
   por conta própria em vez de estourar a página ou cortar a vitrine — min-
   height:0 é o que permite um item flex encolher abaixo do seu conteúdo e
   assim ativar o overflow-y em vez de empurrar .login-hero para fora da tela.
   As folgas em clamp() encolhem primeiro, então o texto só diminui depois. */
.login-hero__scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* NÃO usar justify-content:center aqui: numa caixa com overflow, o flex
     centraliza e deixa o excesso vazar para cima, onde a rolagem nunca
     alcança (o topo com a marca ficava cortado em janelas baixas, ex.
     Firefox a 100% numa janela de ~570px). As margens automáticas no
     primeiro/último filho centralizam só quando sobra espaço. */
  justify-content: flex-start;
  gap: clamp(20px, 3.5vh, 40px);
  padding: clamp(24px, 5vh, 56px) var(--e7);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .32) transparent;
}
.login-hero__scroll > :first-child { margin-top: auto; }
.login-hero__scroll > :last-child { margin-bottom: auto; }
.login-hero__scroll::-webkit-scrollbar { width: 8px; }
.login-hero__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 4px; }
.login-hero__scroll::-webkit-scrollbar-track { background: transparent; }

.login-hero__inner { max-width: 460px; display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 24px); }
.login-hero__brand { display: flex; align-items: center; gap: var(--e4); flex: none; }
.login-hero__brand img { display: block; flex: none; }
.login-hero__brand-name { font-size: clamp(20px, 2.6vh, 26px); color: #fff; letter-spacing: .02em; font-weight: 300; }
.login-hero__brand-name strong { font-weight: var(--peso-destaque); }

.login-hero__headline {
  font-size: clamp(24px, 3.4vh, 32px);
  line-height: 1.22;
  margin: 0;
  color: #fff;
  letter-spacing: -.02em;
}
.login-hero__accent { color: #a5f5bd; }
.login-hero__lead {
  margin: 0;
  font-size: var(--txt-corpo);
  line-height: var(--linha-normal);
  color: #cfeadb;
  max-width: 440px;
}

.login-hero__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); }
.login-hero__features li { display: flex; gap: var(--e3); align-items: flex-start; }
.login-hero__features strong {
  display: block;
  color: #fff;
  margin-bottom: 2px;
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
}
/* Subiu de #b3d9c0 para este valor: o anterior dava 1.43:1 contra o
   gradiente e reprovava em AA. */
.login-hero__features p { margin: 0; font-size: var(--txt-apoio); color: #cfeadb; line-height: var(--linha-normal); }
.login-hero__feature-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio-controle);
  color: #a5f5bd;
}
.login-hero__feature-icon .ico { width: 17px; height: 17px; }

.login-panel {
  flex: 1 1 54%;
  display: flex;
  /* Centralização "segura": align-items:center + overflow faria o cartão
     vazar para cima em janelas baixas, com o topo (título, aviso de sessão)
     inacessível à rolagem. margin:auto no cartão centraliza quando sobra
     espaço e encosta no topo (rolável) quando não sobra. */
  align-items: flex-start;
  justify-content: center;
  padding: var(--e6) var(--e4);
  background: var(--fundo);
  overflow-y: auto;
}
.login-card {
  width: 100%;
  max-width: 384px;
  margin: auto;
  flex: none;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  padding: var(--e6);
  box-shadow: var(--sombra-2);
}
/* Marca compacta dentro do cartão: abaixo de 900px o herói some, e sem isto
   a tela de login fica sem identidade nenhuma. */
.login-card__marca { display: none; align-items: center; gap: var(--e2); margin-bottom: var(--e5); }
.login-card h2 { font-size: var(--txt-titulo); letter-spacing: -.015em; margin-bottom: 3px; }
.login-card > p.muted { margin: 0 0 var(--e5); font-size: var(--txt-apoio); color: var(--texto-fraco); }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon__icon {
  position: absolute;
  left: var(--e3);
  display: flex;
  color: var(--texto-tenue);
  pointer-events: none;
}
.input-icon__icon .ico, .input-icon__toggle .ico { width: 17px; height: 17px; }
/* Especificidade casada (três :not = 0-4-0): sem isto a regra base vence e
   o ícone sobrepõe o texto digitado. */
.input-icon input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  height: 42px;
  padding-left: 40px;
  padding-right: 44px;
}
/* Valor que não deve quebrar linha na tabela (CNPJ, datas). */
.nowrap { white-space: nowrap; }

/* Campo de senha do formulário genérico: sem ícone à esquerda, só o olho. */
.input-icon--sem-icone input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-left: var(--e3); }
.input-icon__toggle {
  position: absolute;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px, não 26: o botão anterior reprovava no alvo mínimo. */
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--raio-controle);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}
.input-icon__toggle:hover { color: var(--marca); background: var(--superficie-afundada); }

.login-remember { margin: 0; }
/* Lembrar e-mail à esquerda, "Esqueci minha senha" à direita, na mesma linha. */
.login-opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin: var(--e1) 0 var(--e4);
}
.login-esqueci { font-size: var(--txt-apoio); text-decoration: none; }
/* Fora do formulário principal (esqueci/redefinir), o cartão esconde a
   chamada de adesão e o rodapé de ajuda. */
.login-card--fluxo .login-divisor,
.login-card--fluxo .btn--adesao,
.login-card--fluxo .btn--parceiro,
.login-card--fluxo .login__hint { display: none; }
.login-esqueci:hover { text-decoration: underline; }

/* Captcha do "esqueci minha senha": imagem gerada no servidor + botão de
   trocar. A imagem tem tamanho fixo para o cartão não pular ao recarregar. */
.captcha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.captcha__img {
  display: block;
  width: 200px;
  height: 64px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: #f4f7fa;
  user-select: none;
}
.captcha__novo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto-fraco);
  cursor: pointer;
}
.captcha__novo:hover { color: var(--marca); border-color: var(--marca); }
.captcha__novo .ico { width: 18px; height: 18px; }

/* Confirmação / link inválido. */
.login-enviado {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ok, var(--marca));
  border-radius: var(--raio-controle);
  background: var(--superficie-afundada, var(--fundo));
  margin-bottom: var(--e3);
  font-size: var(--txt-corpo);
}
.login-enviado .ico { flex: none; width: 20px; height: 20px; color: var(--ok, var(--marca)); margin-top: 2px; }
.login-enviado p { margin: 0; }
.login-enviado--erro { border-left-color: var(--risco); }
.login-enviado--erro .ico { color: var(--risco); }

/* Marca do cliente na tela de redefinição (logotipo do padrão de layout). */
.login-marca-cliente {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  margin-bottom: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie-afundada, var(--fundo));
  font-weight: var(--peso-medio);
  color: var(--texto);
}
.login-marca-cliente[hidden] { display: none; }
.login-marca-cliente img { display: block; max-height: 48px; max-width: 180px; width: auto; height: auto; }
.login-marca-cliente img[hidden] { display: none; }
.login__hint { text-align: center; margin: var(--e4) 0 0; font-size: var(--txt-apoio); color: var(--texto-fraco); }

/* Estado de carregando no envio: sem ele o usuário clica duas vezes. */
.btn.carregando { color: transparent; pointer-events: none; position: relative; }
.btn.carregando::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: var(--raio-pilula);
  animation: girar .7s linear infinite;
}
.login-divisor {
  display: flex;
  align-items: center;
  margin: var(--e4) 0;
  text-align: center;
  color: var(--texto-tenue);
  font-size: var(--txt-micro);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.login-divisor::before,
.login-divisor::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--borda);
}
.login-divisor span {
  padding: 0 var(--e3);
}
.btn--adesao {
  gap: var(--e2);
  justify-content: center;
  border-color: var(--primaria);
  color: var(--primaria);
  background: transparent;
  font-weight: var(--peso-medio);
  transition: all var(--transicao);
}
.btn--adesao:hover {
  background: rgba(30, 102, 67, .06);
  border-color: var(--primaria-escura);
}

/* Aviso de "primeiro cliente" no modal de cadastro de cliente do parceiro. */
.parceiro-primeiro-cliente {
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: 10px;
  border: 1px solid var(--marca);
  border-left-width: 5px;
  background: var(--marca-suave);
  color: var(--texto);
  line-height: 1.45;
}
.parceiro-primeiro-cliente strong { color: var(--marca-escura); }

/* ═══ SEJA NOSSO PARCEIRO (botão da tela de login + modal) ═══
   Chamativo de propósito: é um canal de aquisição. Gradiente na cor da
   marca, texto em duas linhas e seta — nada disso no botão de adesão, que
   fica discreto ao lado. */
.btn--parceiro {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
  padding: var(--e3) var(--e4);
  text-align: left;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--marca) 0%, var(--marca-escura) 100%);
  box-shadow: 0 6px 18px rgba(4, 118, 63, .28);
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
.btn--parceiro:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(4, 118, 63, .35); filter: saturate(1.08); }
.btn--parceiro:focus-visible { outline: 3px solid rgba(4, 118, 63, .45); outline-offset: 2px; }
.btn--parceiro__icone {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.btn--parceiro__icone .ico { width: 22px; height: 22px; color: #fff; }
.btn--parceiro__texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn--parceiro__texto strong { font-size: var(--txt-sub); letter-spacing: -.01em; }
.btn--parceiro__texto small { font-size: var(--txt-apoio); font-weight: var(--peso-normal, 400); opacity: .92; line-height: 1.3; white-space: normal; }
.btn--parceiro__seta { flex: 0 0 auto; width: 20px; height: 20px; opacity: .85; }

.parceiro-hero {
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e5);
  border-radius: var(--raio-g, 12px);
  color: #fff;
  background: linear-gradient(135deg, var(--marca) 0%, var(--marca-escura) 100%);
}
.parceiro-hero__kicker { margin: 0 0 var(--e1); font-size: var(--txt-apoio); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.parceiro-hero h3 { margin: 0 0 var(--e2); font-size: 1.35rem; line-height: 1.25; letter-spacing: -.015em; }
.parceiro-hero h3 em { font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.55); }
.parceiro-hero p { margin: 0; opacity: .95; line-height: 1.5; }

.parceiro-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.parceiro-passo { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3); border: 1px solid var(--borda-suave); border-radius: var(--raio, 8px); background: var(--superficie-2, var(--superficie)); }
.parceiro-passo__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: var(--peso-forte); color: #fff; background: var(--marca); }
.parceiro-passo strong { display: block; margin-bottom: 2px; }
.parceiro-passo p { margin: 0; font-size: var(--txt-apoio); color: var(--texto-fraco); line-height: 1.4; }
.parceiro-passos--sucesso { text-align: left; margin-top: var(--e4); grid-template-columns: 1fr; }

.parceiro-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.parceiro-beneficios li { display: flex; gap: var(--e3); align-items: flex-start; }
.parceiro-beneficios .ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--marca); margin-top: 2px; }
.parceiro-beneficios strong { display: block; }
.parceiro-beneficios p { margin: 0; font-size: var(--txt-apoio); color: var(--texto-fraco); line-height: 1.4; }

.parceiro-areas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Cartão selecionável: o checkbox nativo fica só para acessibilidade; o
   estado é o próprio cartão (borda, fundo e marca verdes). */
.parceiro-area {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start; gap: var(--e3);
  min-height: 56px; padding: var(--e3) var(--e4) var(--e3) 52px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  background: var(--superficie, #fff);
  text-align: left; font-weight: var(--peso-medio); line-height: 1.3;
  cursor: pointer; user-select: none;
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.parceiro-area::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--borda); background: var(--superficie, #fff);
  transition: border-color var(--transicao), background var(--transicao);
}
.parceiro-area::after {
  content: ""; position: absolute; left: 24px; top: 50%;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: translateY(-62%) rotate(45deg) scale(0); transition: transform var(--transicao);
}
.parceiro-area:hover { border-color: var(--marca); box-shadow: 0 2px 10px rgba(4, 118, 63, .12); transform: translateY(-1px); }
.parceiro-area:has(input:focus-visible) { outline: 3px solid rgba(4, 118, 63, .3); outline-offset: 2px; }
.parceiro-area:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-escura); box-shadow: inset 0 0 0 1px var(--marca); }
.parceiro-area:has(input:checked)::before { border-color: var(--marca); background: var(--marca); }
.parceiro-area:has(input:checked)::after { transform: translateY(-62%) rotate(45deg) scale(1); }
.parceiro-area input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.parceiro-area span { flex: 1 1 auto; }

.tabela--detalhe th { text-align: left; white-space: nowrap; color: var(--texto-fraco); font-weight: var(--peso-medio); padding-right: var(--e4); vertical-align: top; }
.tabela--detalhe td { vertical-align: top; }

/* ═══ FORMULÁRIO DE ADESÃO ONLINE & PROPOSTA ═══ */
.adesao-secao {
  margin-bottom: var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borda-suave);
}
.adesao-secao:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.adesao-secao__titulo {
  font-size: var(--txt-sub);
  font-weight: var(--peso-forte);
  color: var(--texto);
  margin-bottom: var(--e2);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.adesao-secao__sub {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  margin-bottom: var(--e3);
}
.adesao-lgpd {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  background: var(--superficie-2, var(--superficie));
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-superficie);
  padding: var(--e3);
  margin-bottom: var(--e3);
}
.adesao-lgpd p { margin: 0 0 var(--e2); }
.adesao-lgpd p:last-child { margin-bottom: 0; }
.adesao-termos-leitura { margin-bottom: var(--e3); }
.adesao-termo {
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-superficie);
  margin-bottom: var(--e2);
}
.adesao-termo summary {
  cursor: pointer;
  padding: var(--e2) var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  font-weight: 600;
}
.adesao-termo summary .dica { font-weight: 400; }
.adesao-termo__corpo {
  max-height: 40vh;
  overflow-y: auto;
  padding: var(--e3);
  border-top: 1px solid var(--borda-suave);
}
.adesao-termo .dica { padding: 0 var(--e3) var(--e2); margin: 0; }
.adesao-consent-item { align-items: flex-start; margin-bottom: var(--e2); }

/* Prova de integridade do documento aceito (LGPD) */
.prova-integridade {
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-controle);
  border: 1px solid var(--borda);
  border-left-width: 3px;
  font-size: var(--txt-apoio);
  margin-bottom: var(--e3);
}
.prova-integridade--ok { border-left-color: var(--ok); background: var(--ok-fundo, var(--superficie-2)); }
.prova-integridade--erro { border-left-color: var(--risco); background: var(--risco-fundo); color: var(--risco); }

/* Modal "responsável técnico em uso": lista de registros vinculados */
.vinculos-rt__titulo {
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e4) 0 var(--e2);
  font-size: var(--txt-apoio); text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco);
}
.vinculos-rt__lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda-suave); border-radius: var(--raio-superficie); max-height: 40vh; overflow-y: auto; }
.vinculos-rt__lista li { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borda-suave); }
.vinculos-rt__lista li:last-child { border-bottom: 0; }
.vinculos-rt__link { font-weight: 600; }
.adesao-consent-item span { line-height: 1.45; }
.adesao-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e3);
}
/* Pacote adicional na adesão (Layout & Marcas): cartão de venda com preço
   em destaque; a borda acende ao marcar. */
.adesao-pacote {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  border: 2px solid var(--borda);
  border-radius: var(--raio-superficie);
  background: linear-gradient(135deg, var(--superficie) 0%, var(--superficie-afundada) 100%);
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.adesao-pacote:hover { border-color: var(--primaria); }
.adesao-pacote:has(input:checked) { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }
.adesao-pacote input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.adesao-pacote__corpo { flex: 1; min-width: 0; }
.adesao-pacote__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.adesao-pacote__topo strong { font-size: var(--txt-titulo); color: var(--texto); }
.adesao-pacote__preco { font-size: var(--txt-titulo); font-weight: var(--peso-forte, 700); color: var(--primaria); white-space: nowrap; }
.adesao-pacote__preco small { font-size: var(--txt-apoio); font-weight: var(--peso-normal, 400); color: var(--texto-fraco); }
.adesao-pacote__corpo > p { margin: var(--e1) 0 var(--e2); color: var(--texto-fraco); font-size: var(--txt-apoio); }
.adesao-pacote__lista { margin: 0 0 var(--e3); padding-left: 18px; font-size: var(--txt-apoio); color: var(--texto); }
.adesao-pacote__lista li { margin-bottom: 4px; }
.adesao-pacote__cta { margin: 0; font-weight: var(--peso-medio); color: var(--primaria); font-size: var(--txt-apoio); }
.adesao-pacote:has(input:checked) .adesao-pacote__cta::before { content: "✓ "; }

.adesao-modulo-card {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.adesao-modulo-card:hover {
  border-color: var(--primaria);
}
.adesao-modulo-card input {
  margin-top: 3px;
}
.adesao-modulo-card__info strong {
  display: block;
  font-size: var(--txt-padrao);
  color: var(--texto);
  margin-bottom: 2px;
}
.adesao-modulo-card__info p {
  margin: 0;
  font-size: var(--txt-micro);
  color: var(--texto-fraco);
  line-height: 1.35;
}
.adesao-terceiros-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.adesao-terceiro-item {
  padding: var(--e3);
  background: var(--fundo);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-controle);
  position: relative;
}
.adesao-terceiro-item__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--e2);
}
.adesao-sucesso {
  text-align: center;
  padding: var(--e6) var(--e4);
}
.adesao-sucesso__icone {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--e4);
  background: rgba(40, 167, 69, .12);
  color: #28a745;
  border-radius: var(--raio-pilula);
  display: flex;
  align-items: center;
  justify-content: center;
}
.adesao-sucesso__icone .ico {
  width: 36px;
  height: 36px;
}
.adesao-sucesso__protocolo {
  display: inline-block;
  font-size: var(--txt-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  padding: var(--e2) var(--e4);
  background: var(--superficie-destaque);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  margin: var(--e3) 0 var(--e4);
}

/* ─── RESPONSIVIDADE ─────────────────────────────────────────────────── */

/* Quatro pontos de quebra com comportamento definido, não encolhimento.
   Cada breakpoint resolve um cenário real de uso:
   1180px — notebook / tablet paisagem (lateral colapsa para ícones)
    860px — tablet retrato / celular grande (lateral vira gaveta)
    620px — celular (tabela vira cartões, grids simplificam)
    480px — celular compacto (layout ultrassimplificado)

   A versão anterior estourava 240px em 1024, 430px em tablet e 859px em
   celular, porque as 13 abas mediam 1225px fixos e não quebravam. */

/* ═══ ≤ 1180px — Tablet e notebook estreito ═══════════════════════════ */

@media (max-width: 1180px) {
  #app { grid-template-columns: var(--larg-lateral-icones) 1fr; }
  .lateral__marca { justify-content: center; padding: 0; }
  .lateral__marca-texto,
  .lateral__grupo-titulo,
  .lateral__rotulo,
  .lateral__colapsar span { display: none; }
  .lateral__item, .lateral__colapsar { justify-content: center; padding: 0; }
  .lateral__grupo + .lateral__grupo {
    margin-top: var(--e2);
    padding-top: var(--e2);
    border-top: 1px solid rgba(255, 255, 255, .09);
  }
  .lateral__item::after {
    content: attr(data-dica);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--superficie-inversa);
    color: var(--superficie);
    padding: 5px 10px;
    border-radius: var(--raio-controle);
    font-size: var(--txt-apoio);
    white-space: nowrap;
    box-shadow: var(--sombra-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-rapido);
    z-index: var(--z-topo);
  }
  .lateral__item:hover::after, .lateral__item:focus-visible::after { opacity: 1; }
  .lateral__contador { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  main { padding: var(--e4); padding-bottom: var(--e8); }
}

/* ═══ ≤ 860px — Celular e tablet em retrato ═══════════════════════════ */

@media (max-width: 860px) {

  /* ── Casco: lateral vira gaveta ── */
  #app {
    grid-template-columns: 1fr;
    grid-template-areas: "topo" "conteudo";
  }
  .lateral {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(280px, 82vw);
    transform: translateX(-100%);
    transition: transform var(--t-normal) var(--curva);
    box-shadow: var(--sombra-3);
  }
  [data-gaveta="aberta"] .lateral { transform: translateX(0); }
  /* Dentro da gaveta a lateral volta ao formato completo, com rótulos. */
  .lateral__marca { justify-content: flex-start; padding: 0 var(--e4); }
  .lateral__marca-texto, .lateral__grupo-titulo, .lateral__rotulo,
  .lateral__colapsar span { display: block; }
  .lateral__item, .lateral__colapsar { justify-content: flex-start; padding: 0 var(--e3); }
  /* 44px é o mínimo de alvo de toque da WCAG 2.2 — dedo não é ponteiro. */
  .lateral__item { min-height: 44px; }
  .lateral__item::after { display: none; }
  .lateral__contador { position: static; }
  .lateral__grupo + .lateral__grupo { border-top: none; padding-top: 0; margin-top: var(--e4); }
  .lateral__rodape { display: none; }

  .veu-gaveta {
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 26, .5);
    z-index: calc(var(--z-lateral) - 1);
    animation: velar var(--t-rapido) var(--curva);
  }
  .veu-gaveta[hidden] { display: none; }

  /* ── Topo ── */
  .topo { padding: 0 var(--e4); padding-left: max(var(--e4), env(safe-area-inset-left)); }
  .topo .topo__menu { display: inline-flex; }
  .busca-global { flex: 1 1 auto; }
  .busca-global__texto, .busca-global .tecla { display: none; }
  .usuario-gatilho__nome { display: none; }

  /* ── Conteúdo ── */
  main {
    padding: var(--e4) var(--e3);
    padding-bottom: var(--e7);
    /* Safe area nos lados para dispositivos com notch em paisagem */
    padding-left: max(var(--e3), env(safe-area-inset-left));
    padding-right: max(var(--e3), env(safe-area-inset-right));
  }
  .pagina-titulo { font-size: 19px; }

  /* ── Cabeçalho de página: empilha título e ações ── */
  .pagina-topo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e3);
  }
  .pagina-topo__texto { flex: none; }
  .pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
  }
  /* Botões de ação ocupam largura proporcional em mobile */
  .pagina-acoes .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Último botão (o principal, como "Nova licença") fica em destaque */
  .pagina-acoes .btn:last-child:not(.btn--secundario) {
    flex: 1 0 100%;
    order: -1;
  }

  /* ── Filtros do painel ── */
  .filtros-painel {
    flex-direction: column;
    align-items: stretch;
  }
  .filtros-painel label { min-width: 0; width: 100%; }

  /* ── Gráfico de barras ── */
  .barra-linha {
    grid-template-columns: minmax(70px, 120px) 1fr 44px;
    gap: var(--e2);
  }
  .barra-rotulo { font-size: var(--txt-micro); }

  /* ── Calendário ── */
  .calendario-dia { min-height: 84px; }
  .calendario-evento { font-size: 10px; padding: 2px 4px; min-height: 20px; }

  /* ── Mapa ── */
  .mapa-container, #mapa-unidades {
    height: 60vh;
    min-height: 300px;
  }

  /* ── Modal: folha inferior ── */
  .modal-fundo { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--raio-superficie) var(--raio-superficie) 0 0;
    animation: folha var(--t-normal) var(--curva);
  }
  @keyframes folha {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .modal-topo, .modal-corpo { padding-left: var(--e4); padding-right: var(--e4); }
  .modal-rodape, .modal-corpo .acoes-modal, .modal-corpo .form-cadastro__acoes {
    padding-left: var(--e4);
    padding-right: var(--e4);
    /* Safe area no rodapé para dispositivos com barra de gestos */
    padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
  }
  .modal-corpo .acoes-modal, .modal-corpo .form-cadastro__acoes {
    margin-left: calc(var(--e4) * -1);
    margin-right: calc(var(--e4) * -1);
    margin-bottom: calc(var(--e5) * -1);
  }

  /* ── Avisos (toast) ── */
  .avisos {
    left: var(--e3);
    right: var(--e3);
    bottom: max(var(--e3), env(safe-area-inset-bottom));
    max-width: none;
  }

  /* ── Paleta de comandos ── */
  .paleta-fundo {
    padding: var(--e3) var(--e3);
    padding-top: var(--e4);
    align-items: flex-start;
  }
  .paleta { max-height: 82vh; }

  /* ── Chips: scroll horizontal com fade ── */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--e1);
    /* Snap suave nos chips */
    scroll-snap-type: x proximity;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }

  /* ── Alvos maiores no toque ── */
  .btn, .chip, .btn-linha { min-height: 40px; }
  .btn-linha { padding: 0 var(--e3); }

  /* ── Login em telas ≤ 860px: o herói não some mais — vira uma faixa verde
     compacta no topo (marca, título curto e vitrine de produtos) empilhada
     acima do formulário. É a primeira coisa que o visitante vê no celular,
     então continua vendendo a marca; só a lista longa de 4 recursos some,
     porque no formato empilhado ela empurraria o login para muito longe do
     topo. ── */
  .login-split {
    flex-direction: column;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .login-hero { flex: none; width: 100%; }
  .login-hero__scroll {
    flex: none;
    overflow: visible;
    gap: var(--e4);
    padding: max(var(--e5), env(safe-area-inset-top)) max(var(--e4), env(safe-area-inset-right)) var(--e5) max(var(--e4), env(safe-area-inset-left));
  }
  .login-hero__inner { max-width: none; gap: var(--e2); }
  .login-hero__brand { gap: var(--e3); }
  .login-hero__brand img { width: 40px; height: 40px; }
  .login-hero__brand-name { font-size: 19px; }
  .login-hero__headline { font-size: 21px; }
  /* O parágrafo de apoio e os 4 blocos de recurso ficam para o desktop —
     no celular, a vitrine de produtos abaixo já ocupa esse papel de
     "vitrine" sem alongar a rolagem antes do formulário. */
  .login-hero__lead, .login-hero__features { display: none; }
  .login-produtos { max-width: 360px; margin: 0 auto; }
  .login-produtos__titulo { text-align: center; }

  .login-panel {
    flex: none;
    width: 100%;
    padding: var(--e5) max(var(--e4), env(safe-area-inset-right)) max(var(--e5), env(safe-area-inset-bottom)) max(var(--e4), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .login-card {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: var(--e5) var(--e4);
    box-sizing: border-box;
  }
  /* A marca já aparece na faixa verde acima; repeti-la dentro do cartão
     branco seria redundante. */
  .login-card__marca { display: none; }
  /* Previne zoom automático indesejado no iOS Safari ao focar inputs */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea {
    font-size: 16px;
  }
  .login-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    font-size: 16px;
    min-height: 44px;
  }
  .login-card .btn--g {
    min-height: 48px;
    font-size: 16px;
  }

  /* ── Detalhe ── */
  .detalhe-cabecalho { padding: var(--e4); }
  .detalhe-cabecalho__topo { flex-direction: column; }
  .detalhe-titulo { font-size: 19px; }

  /* ── Abas de detalhe: scroll horizontal ── */
  .abas-detalhe {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .abas-detalhe::-webkit-scrollbar { display: none; }
  .aba-detalhe {
    flex: none;
    scroll-snap-align: start;
    min-height: 44px;
  }

  /* ── Linha do tempo ── */
  .linha-tempo { padding-left: var(--e5); }
}

/* ═══ ≤ 620px — Celular estreito ═════════════════════════════════════ */

/* A tabela vira lista de cartões.
   Tabela com rolagem horizontal em telefone não se usa — o usuário perde o
   cabeçalho ao rolar e não sabe mais qual coluna está lendo. O JS marca
   cada célula com data-rotulo, que aqui vira o rótulo à esquerda. */
@media (max-width: 620px) {

  /* ── Tabela → Cartões ── */
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes tr {
    position: relative;
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borda);
  }
  .tabela-cartoes tr:last-child { border-bottom: none; }
  .tabela-cartoes td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    padding: 3px 0;
    border: none;
    height: auto;
    max-width: none;
    text-align: right;
  }
  .tabela-cartoes td::before {
    content: attr(data-rotulo);
    flex: none;
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-tenue);
    font-weight: var(--peso-forte);
    text-align: left;
  }
  /* ── Checkbox de seleção na visualização em cartões ── */
  .tabela-cartoes td.col-selecao {
    position: absolute;
    top: var(--e3);
    right: var(--e4);
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: none;
    background: transparent;
  }
  .tabela-cartoes td.col-selecao::before { display: none !important; }
  .tabela-cartoes td.col-selecao .checkbox {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Título do cartão (primeira célula de conteúdo ou coluna de descrição) ── */
  .tabela-cartoes td:first-child:not(.col-selecao):not(.col-item),
  .tabela-cartoes td.col-selecao + td:not(.col-item),
  .tabela-cartoes td.col-descricao {
    font-size: var(--txt-sub);
    font-weight: var(--peso-forte);
    text-align: left;
    display: block;
    width: 100%;
    padding-bottom: var(--e2);
    line-height: 1.35;
  }
  .tabela-cartoes td:first-child:not(.col-selecao):not(.col-item)::before,
  .tabela-cartoes td.col-selecao + td:not(.col-item)::before,
  .tabela-cartoes td.col-descricao::before {
    display: none !important;
  }
  /* Quando há seleção no topo direito, o título não sobrepõe */
  .tabela-cartoes td.col-selecao ~ td.col-descricao,
  .tabela-cartoes td.col-selecao + td {
    padding-right: 36px;
    box-sizing: border-box;
  }

  .tabela-cartoes td.col-acoes {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--e2);
    padding-top: var(--e3);
    margin-top: var(--e2);
    border-top: 1px solid var(--borda-suave);
  }
  .tabela-cartoes td.col-acoes::before { display: none; }

  /* ── Barra de seleção em lote flutuante no mobile ── */
  .barra-selecao {
    position: sticky;
    top: var(--alt-topo);
    z-index: 10;
    padding: var(--e2) var(--e3);
    gap: var(--e2);
    box-shadow: var(--sombra-1);
  }
  .barra-selecao .btn-linha {
    min-height: 36px;
    padding: 0 var(--e3);
  }

  /* ── Cartões do painel ── */
  .cartoes { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .cartao { padding: var(--e3); }
  .cartao__valor { font-size: 24px; }

  /* ── Fatos no detalhe ── */
  .fatos { grid-template-columns: 1fr 1fr; }

  /* ── Filtros avançados ── */
  .filtros__avancados { grid-template-columns: 1fr; }

  /* ── Calendário compacto ── */
  .calendario-grade { font-size: var(--txt-micro); }
  .calendario-dia { min-height: 62px; padding: 4px; }
  .calendario-evento { padding: 2px 4px; }
  .calendario-cabecalho { padding: var(--e1); }

  /* ── Barra de gráficos em celular ── */
  .barra-linha {
    grid-template-columns: 1fr 42px;
    gap: var(--e1);
  }
  /* Rótulo fica acima da barra quando não há espaço */
  .barra-rotulo {
    grid-column: 1 / -1;
    font-size: var(--txt-apoio);
  }
  .barra-trilho { grid-column: 1; }
  .barra-valor { grid-column: 2; }

  /* ── Mapa ── */
  .mapa-container, #mapa-unidades {
    height: 50vh;
    min-height: 260px;
  }
  .lista-unidades-geo { grid-template-columns: 1fr; }

  /* ── Linha do tempo mais compacta ── */
  .linha-tempo { padding-left: var(--e4); }
  .linha-tempo::before { left: 8px; }
  .evento::before {
    left: calc(var(--e4) * -1 + 2px);
    width: 11px;
    height: 11px;
  }

  /* ── Pagina-acoes: botões em wrap ── */
  .pagina-acoes .btn {
    font-size: var(--txt-apoio);
    padding: 0 var(--e3);
  }

  /* ── Status pilha ── */
  .status-pilha__legenda { gap: var(--e1) var(--e3); }

  /* ── Paginação ── */
  .tabela-rodape {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    text-align: center;
  }
  .paginacao { justify-content: center; flex-wrap: wrap; }


}

/* ═══ ≤ 480px — Celular compacto (iPhone SE, Galaxy S) ═══════════════ */

@media (max-width: 480px) {

  /* ── Tipografia compactada ── */
  .pagina-titulo { font-size: 17px; }
  .pagina-sub { font-size: var(--txt-micro); }

  /* ── Conteúdo com padding mínimo ── */
  main {
    padding: var(--e3) var(--e2);
    padding-bottom: var(--e6);
    padding-left: max(var(--e2), env(safe-area-inset-left));
    padding-right: max(var(--e2), env(safe-area-inset-right));
  }

  /* ── Cartões do painel: coluna única ── */
  .cartoes { grid-template-columns: 1fr; }
  .cartao { padding: var(--e3); }
  .cartao__valor { font-size: 22px; }
  .cartao__rotulo { font-size: var(--txt-micro); }

  /* ── Fatos: coluna única ── */
  .fatos { grid-template-columns: 1fr; gap: var(--e3); }

  /* ── Filtros ── */
  .filtros { padding: var(--e2) var(--e3); }
  .filtros__linha { gap: var(--e1); }
  .campo-busca { min-width: 0; flex: 1 1 100%; }

  /* ── Botões de ação mais compactos ── */
  .pagina-acoes {
    gap: var(--e1);
  }
  .pagina-acoes .btn {
    min-height: 36px;
    font-size: var(--txt-micro);
    padding: 0 var(--e2);
  }


  /* ── Calendário ultra-compacto ── */
  .calendario-dia { min-height: 48px; padding: 2px; }
  .calendario-dia-numero { font-size: 10px; }
  .calendario-evento { font-size: 9px; min-height: 16px; padding: 1px 3px; }
  .calendario-cabecalho { font-size: 10px; padding: 3px 2px; }

  /* ── Gráficos ── */
  .barra-trilho { height: 14px; }

  /* ── Painel ── */
  .painel { padding: var(--e3); }
  .painel h2, .painel__titulo { font-size: var(--txt-corpo); }

  /* ── Tabela-cartões: dados mais compactos ── */
  .tabela-cartoes tr { padding: var(--e2) var(--e3); }
  .tabela-cartoes td.col-selecao { top: var(--e2); right: var(--e3); }
  .tabela-cartoes td:first-child:not(.col-selecao):not(.col-item),
  .tabela-cartoes td.col-selecao + td:not(.col-item),
  .tabela-cartoes td.col-descricao {
    font-size: var(--txt-corpo);
  }

  /* ── Gaveta mais estreita ── */
  .lateral { width: min(260px, 85vw); }

  /* ── Topo compacto ── */
  .topo { height: 52px; padding: 0 var(--e3); gap: var(--e2); }
  .topo { --alt-topo: 52px; }
  .busca-global { height: 34px; font-size: var(--txt-apoio); }
  .botao-icone { width: 34px; height: 34px; }

  /* ── Avatar compacto ── */
  .avatar { width: 26px; height: 26px; font-size: var(--txt-micro); }
  .usuario-gatilho { padding: 3px 6px 3px 3px; }

  /* ── Mapa ainda menor ── */
  .mapa-container, #mapa-unidades {
    height: 45vh;
    min-height: 220px;
  }

  /* ── Modal ── */
  .modal { max-height: 95vh; }
  .modal-topo { padding: var(--e3) var(--e3); }
  .modal-topo h2 { font-size: var(--txt-sub); }
  .modal-corpo { padding: var(--e3); }

  /* ── Paleta ── */
  .paleta-fundo { padding: var(--e2); }
  .paleta__campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: 44px;
    font-size: var(--txt-corpo);
  }
  .paleta__rodape { display: none; }

  /* ── Login ── */
  .login-panel {
    padding: max(var(--e4), env(safe-area-inset-top)) max(var(--e3), env(safe-area-inset-right)) max(var(--e4), env(safe-area-inset-bottom)) max(var(--e3), env(safe-area-inset-left));
  }
  .login-card { padding: var(--e4) var(--e3); }
  .login-card h2 { font-size: 19px; }

  /* ── Cadastros ── */
  .cadastros-menu { gap: 1px; padding: var(--e1); }
  .cadastros-menu button {
    min-height: 40px;
    font-size: var(--txt-apoio);
    padding: 0 var(--e2);
  }

  /* ── Detalhe ── */
  .detalhe-cabecalho { padding: var(--e3); }
  .detalhe-titulo { font-size: 17px; }
  .detalhe-meta { gap: var(--e2); }
  .evento__topo { flex-direction: column; gap: var(--e1); }

  /* ── Alvos de toque WCAG: 44px mínimo ── */
  .btn, .chip { min-height: 44px; }
  .btn-linha { min-height: 40px; }
  .suspenso__item { min-height: 44px; }
  .paleta__item { min-height: 44px; }
  .aba-detalhe { min-height: 44px; }
  .lateral__item { min-height: 48px; }

  /* ── Avisos com safe area ── */
  .avisos {
    bottom: max(var(--e2), env(safe-area-inset-bottom));
    left: var(--e2);
    right: var(--e2);
  }
  .aviso { font-size: var(--txt-apoio); padding: var(--e2) var(--e3); }
}

/* ═══ ≤ 360px — Ultra-compacto (iPhone SE 1st gen, dispositivos antigos) */

@media (max-width: 360px) {
  .pagina-titulo { font-size: 16px; }
  main { padding: var(--e2); padding-bottom: var(--e5); }
  .filtros { padding: var(--e2); }
  .painel { padding: var(--e2); margin-bottom: var(--e2); }
  .grade-2, .grade-3 { gap: var(--e2); margin-bottom: var(--e2); }
  .cartao__valor { font-size: 20px; }
  .login-card { padding: var(--e3); border-radius: var(--raio-controle); }
  .login-panel { padding: var(--e3) var(--e2); }
}

/* ─── ORIENTAÇÃO PAISAGEM EM MOBILE ──────────────────────────────────── */

/* Celular em paisagem: viewport muito curta, conteúdo precisa encolher
   verticalmente para não exigir scroll excessivo. */
@media (max-height: 500px) and (orientation: landscape) {
  .topo { height: 48px; --alt-topo: 48px; }
  .lateral { width: min(240px, 72vw); }
  .lateral__item { min-height: 38px; }
  .lateral__marca { height: 48px; }
  .modal { max-height: 96vh; }
  .modal-topo { padding: var(--e2) var(--e3); }
  .modal-corpo { padding: var(--e3); }
  .login-hero { display: none; }
  .login-panel { flex: 1 1 100%; }
  .login-card__marca { display: flex; }
  .calendario-dia { min-height: 48px; }
  .mapa-container, #mapa-unidades { height: 70vh; min-height: 200px; }
}

/* ─── MOVIMENTO REDUZIDO ─────────────────────────────────────────────── */

/* Preferência do sistema operacional: quem tem sensibilidade vestibular
   passa mal com movimento contínuo, e este sistema abre todo dia. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .login-hero::before { animation: none; }
}

/* ─── IMPRESSÃO ──────────────────────────────────────────────────────── */

/* Relatório regulatório acaba impresso ou em PDF para o órgão. Sem isto a
   lateral escura consome meia página e as cores somem em preto e branco. */
@media print {
  .lateral, .topo, .filtros, .chips, .fichas, .pagina-acoes,
  .tabela-rodape, .avisos, .col-acoes, .col-selecao, .pular { display: none !important; }
  #app { display: block; }
  main { padding: 0; }
  .painel, .tabela-envolucro, .cartao { box-shadow: none; border-color: #999; break-inside: avoid; }
  .vista { display: none; }
  .vista.ativa { display: block; }
  body { background: #fff; font-size: 11px; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* Botão de link dentro da linha da tabela (ex.: ver condicionantes) */
.btn-linha--link {
  background: transparent;
  border: none;
  color: var(--destaque);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.btn-linha--link:hover {
  color: var(--destaque-hover);
}

/* ═── BADGE DE ORIGEM (Ações) ─═════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--neutro-borda);
  border-radius: var(--raio-pilula);
  background: var(--neutro-fundo);
  color: var(--neutro);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.badge:hover {
  background: var(--n100);
}
.badge--licenca {
  background: var(--ok-fundo);
  color: var(--ok);
  border-color: var(--ok-borda);
}
.badge--condicionante {
  background: var(--info-fundo);
  color: var(--info);
  border-color: var(--info-borda);
}
.badge--fiscalizacao {
  background: var(--atencao-fundo);
  color: var(--atencao);
  border-color: var(--atencao-borda);
}

/* ═── DESTAQUE DE PRAZO VENCIDO ─═══════════════════════════════════════ */
.tabela-cartoes tbody tr.acao-vencida {
  border-left: 4px solid var(--risco);
  background: var(--risco-fundo);
}
.tabela-cartoes tbody tr.acao-vencida td {
  background: transparent;
}

/* ═── MENU ⋮ POR LINHA ─════════════════════════════════════════════════ */
.acao-menu {
  position: relative;
}
.acao-menu__gatilho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.acao-menu__gatilho:hover {
  background: var(--n100);
  color: var(--texto);
}
.acao-menu__lista {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-2);
  z-index: var(--z-topo);
  list-style: none;
  margin: 0;
  padding: var(--e1) 0;
}
.acao-menu__lista[hidden] {
  display: none;
}
.acao-menu__lista button {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: var(--e2) var(--e3);
  border: none;
  background: transparent;
  color: var(--texto);
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.acao-menu__lista button:hover {
  background: var(--n100);
}
.acao-menu__lista button .ico {
  width: 14px;
  height: 14px;
}

/* ═── PAINEL CENTRAL DE AÇÕES ─═════════════════════════════════════════ */
.painel-central-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.painel-central-acoes__card {
  background: var(--superficie);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-superficie);
  padding: var(--e3);
  box-shadow: var(--sombra-0);
}
.painel-central-acoes__card h3 {
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  color: var(--texto-fraco);
  margin: 0 0 var(--e2) 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.painel-central-acoes__valor {
  font-size: 28px;
  font-weight: var(--peso-forte);
  color: var(--texto);
  line-height: 1;
}
.painel-central-acoes__valor.risco { color: var(--risco); }
.painel-central-acoes__valor.atencao { color: var(--atencao); }
.painel-central-acoes__valor.ok { color: var(--ok); }
.painel-central-acoes__rotulo {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  margin-top: var(--e1);
}
.painel-central-acoes__card a {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-top: var(--e2);
  font-size: var(--txt-apoio);
  color: var(--marca);
  text-decoration: none;
}
.painel-central-acoes__card a:hover {
  text-decoration: underline;
}
.painel-central-acoes__card a .ico {
  width: 12px;
  height: 12px;
}


/* Botão desabilitado para ações aguardando aprovação */
.btn--desabilitado {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
}
.btn--desabilitado:hover {
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
}

/* Prioridade alta nas ações */
.badge--prioridade-alta {
  background: var(--risco);
  color: #fff;
}
.badge--prioridade-media {
  background: var(--atencao);
  color: var(--texto);
}
.badge--prioridade-baixa {
  background: var(--ok);
  color: #fff;
}

/* Progresso 0% visível mesmo quando vencido — fundo mais contrastante */
.acao-vencida .progresso-trilho {
  background: var(--risco);
  opacity: 0.3;
}
.acao-vencida .progresso-preenchido {
  background: var(--risco);
}

/* Chips de filtro com contagem */
.chip-contagem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-contagem__numero {
  background: var(--destaque);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--raio-pilula);
  min-width: 16px;
  text-align: center;
}

/* Painel lateral de agrupamento */
.painel-lateral { max-width: 480px; }
.painel-lateral__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e3); border-bottom: 1px solid var(--borda);
}
.painel-lateral__conteudo { padding: var(--e3); }
.grupo-acao { margin-bottom: var(--e2); }
.grupo-acao summary {
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-weight: var(--peso-medio); padding: var(--e1) 0;
}
.grupo-acao ul { margin: var(--e1) 0 0 var(--e4); padding: 0; list-style: none; }
.grupo-acao li { padding: 3px 0; }
.grupo-acao li a { color: var(--texto); text-decoration: none; }
.grupo-acao li a:hover { text-decoration: underline; }

/* Badge genérico para agrupamento */
.badge--outro {
  background: var(--neutro-fundo); color: var(--texto-fraco);
  font-size: var(--txt-apoio); font-weight: 600;
  padding: 2px 8px; border-radius: var(--raio-pilula);
}

/* ═══ ACEITE DE TERMOS ═════════════════════════════════════════════════ */

.termos-aceite {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--e4);
}
.termos-aceite[hidden] {
  display: none !important;
}
/* .btn (display:inline-flex) vence o [hidden] do navegador — mesma
   armadilha de outras telas: sem isto, "Próximo documento" ficava visível
   mesmo antes de aceitar o documento atual. */
#btn-proximo-termo[hidden] {
  display: none;
}
.termos-aceite__card {
  background: var(--superficie); border-radius: var(--raio-l);
  box-shadow: var(--sombra-l);
  display: flex; flex-direction: column;
  max-width: 820px; width: 100%;
  max-height: 90vh;
  overflow: hidden;
  animation: surgir .3s ease-out;
}
.termos-aceite__header {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}
.termos-aceite__titulo {
  font-size: var(--txt-grande); font-weight: 700;
  margin: 0; line-height: 1.2;
}
.termos-aceite__versao {
  font-size: var(--txt-apoio); color: var(--texto-fraco); margin: 2px 0 0;
}
.termos-aceite__corpo {
  flex: 1; overflow-y: auto; padding: var(--e4) var(--e5);
  font-size: var(--txt-normal); line-height: 1.7;
  white-space: pre-wrap;
}
.termos-aceite__corpo h1,
.termos-aceite__corpo h2,
.termos-aceite__corpo h3 {
  margin-top: 1.2em; margin-bottom: .4em;
  font-weight: 700;
}
.termos-aceite__corpo h1 { font-size: 1.3em; }
.termos-aceite__corpo h2 { font-size: 1.15em; }
.termos-aceite__corpo h3 { font-size: 1em; }
.termos-aceite__corpo p  { margin: .5em 0; }
.termos-aceite__corpo ul,
.termos-aceite__corpo ol { margin: .5em 0; padding-left: 1.5em; }
.termos-aceite__rodape {
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: var(--e2);
  flex-shrink: 0;
}
.termos-aceite__check {
  font-size: var(--txt-normal); font-weight: 600;
}
.termos-aceite__rodape .btn { font-size: var(--txt-normal); }

/* ═══ PAINEL DE TERMOS (admin) ════════════════════════════════════════ */

.termos-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3); margin-bottom: var(--e4);
}
.termos-stat-card {
  background: var(--superficie); border-radius: var(--raio-m);
  padding: var(--e3); border: 1px solid var(--borda);
  text-align: center;
}
.termos-stat-card__valor {
  font-size: 2rem; font-weight: 800;
  color: var(--primaria);
}
.termos-stat-card__rotulo {
  font-size: var(--txt-apoio); color: var(--texto-fraco);
  margin-top: 2px;
}
.termos-stat-card--sucesso .termos-stat-card__valor { color: var(--sucesso); }
.termos-stat-card--alerta .termos-stat-card__valor  { color: var(--alerta); }

.termos-editor { display: flex; flex-direction: column; gap: var(--e3); }
.termos-editor-meta {
  display: grid; grid-template-columns: 1.5fr 1fr 2fr; gap: var(--e3); align-items: end;
}
@media (max-width: 768px) {
  .termos-editor-meta { grid-template-columns: 1fr; }
}

/* ═══ CONSTRUTOR DE DOCUMENTOS JURÍDICOS (WYSIWYG & HTML) ═══ */
.editor-juridico {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--superficie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-1);
}

.editor-juridico__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--superficie-afundada);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
  gap: var(--e2);
}

.editor-juridico__modos {
  display: flex;
  gap: 4px;
}

.editor-modo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: transparent;
  font-size: var(--txt-apoio);
  font-weight: 600;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: all var(--transicao);
}

.editor-modo-btn:hover {
  background: var(--superficie);
  color: var(--texto);
}

.editor-modo-btn.ativo {
  background: var(--superficie);
  border-color: var(--borda);
  color: var(--primaria);
  box-shadow: var(--sombra-1);
}

.editor-juridico__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.toolbar-grupo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.toolbar-separador {
  width: 1px;
  height: 20px;
  background: var(--borda);
  margin: 0 4px;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  color: var(--texto);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transicao);
}

.toolbar-btn:hover {
  background: var(--superficie-afundada);
  border-color: var(--borda);
}

.toolbar-btn.ativo {
  background: var(--primaria-translucida, rgba(30, 102, 67, .12));
  border-color: var(--primaria);
  color: var(--primaria);
}

.toolbar-select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  cursor: pointer;
}

.editor-juridico__canvas {
  min-height: 340px;
  max-height: 500px;
  overflow-y: auto;
  padding: var(--e4) var(--e5);
  background: #ffffff;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.7;
  outline: none;
}

.editor-juridico__canvas:empty::before {
  content: "Comece a redigir ou use a barra de ferramentas acima para construir sua política...";
  color: #999999;
  pointer-events: none;
}

.editor-juridico__canvas h1 {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0.8em 0 0.3em;
  color: #111;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.editor-juridico__canvas h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0.8em 0 0.3em;
  color: #222;
}

.editor-juridico__canvas h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.7em 0 0.2em;
  color: #333;
}

.editor-juridico__canvas p {
  margin: 0.5em 0;
}

.editor-juridico__canvas ul,
.editor-juridico__canvas ol {
  margin: 0.5em 0;
  padding-left: 1.6em;
}

.editor-juridico__canvas blockquote {
  border-left: 3px solid var(--primaria, #1e6643);
  margin: 0.8em 0;
  padding: 0.4em 1em;
  background: #f8faf9;
  color: #444;
  font-style: italic;
}

.editor-juridico__canvas hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 1.2em 0;
}

.editor-juridico__canvas a {
  color: var(--primaria, #1e6643);
  text-decoration: underline;
}

.editor-juridico__code {
  min-height: 340px;
  max-height: 500px;
  padding: var(--e4);
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: #181825;
  color: #cdd6f4;
  border: none;
  outline: none;
  resize: vertical;
}

.editor-juridico__preview {
  min-height: 340px;
  max-height: 500px;
  overflow-y: auto;
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  line-height: 1.7;
}

.termos-preview {
  background: var(--neutro-fundo); border-radius: var(--raio-m);
  padding: var(--e4); max-height: 450px; overflow-y: auto;
  border: 1px solid var(--borda);
  line-height: 1.7;
}
.termos-preview h1, .editor-juridico__preview h1 { font-size: 1.45em; font-weight: 700; margin: .8em 0 .3em; }
.termos-preview h2, .editor-juridico__preview h2 { font-size: 1.25em; font-weight: 600; margin: .8em 0 .3em; }
.termos-preview h3, .editor-juridico__preview h3 { font-size: 1.1em; font-weight: 600; margin: .7em 0 .2em; }
.termos-preview p, .editor-juridico__preview p { margin: .5em 0; }
.termos-preview ul, .editor-juridico__preview ul,
.termos-preview ol, .editor-juridico__preview ol { margin: .5em 0; padding-left: 1.6em; }
.termos-preview blockquote, .editor-juridico__preview blockquote {
  border-left: 3px solid var(--primaria, #1e6643);
  margin: .8em 0; padding: .4em 1em;
  background: var(--superficie-afundada); font-style: italic;
}

.termos-lista-versoes { margin-bottom: var(--e4); }
.termos-versao-item {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borda);
}
.termos-versao-item:last-child { border-bottom: none; }
.termos-versao-badge {
  font-size: var(--txt-apoio); font-weight: 700;
  padding: 2px 10px; border-radius: var(--raio-pilula);
}
.termos-versao-badge--publicado {
  background: hsl(145 60% 90%); color: hsl(145 70% 30%);
}
.termos-versao-badge--rascunho {
  background: hsl(40 80% 90%); color: hsl(40 70% 35%);
}
.termos-tipo-badge {
  font-size: var(--txt-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--raio-pilula);
  background: var(--superficie-afundada); color: var(--texto-fraco);
}

/* Abas de categorias no painel admin */
.termos-categoria-tabs {
  display: flex; gap: var(--e2); margin-bottom: var(--e4);
  flex-wrap: wrap; border-bottom: 1px solid var(--borda); padding-bottom: var(--e2);
}
.termos-categoria-tab {
  padding: 6px 14px; border: 1px solid transparent;
  border-radius: var(--raio-pilula); background: transparent;
  font-size: var(--txt-apoio); font-weight: 600; color: var(--texto-fraco);
  cursor: pointer; transition: all var(--transicao);
}
.termos-categoria-tab:hover {
  background: var(--superficie-afundada); color: var(--texto);
}
.termos-categoria-tab.ativa {
  background: var(--primaria-translucida, rgba(30, 102, 67, .1));
  border-color: var(--primaria); color: var(--primaria);
}

/* Grid com as 4 categorias principais */
.termos-grid-categorias {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3); margin-bottom: var(--e4);
}
.termos-card-categoria {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-m); padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.termos-card-categoria:hover {
  border-color: var(--primaria); box-shadow: var(--sombra-1);
}
.termos-card-categoria__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
}
.termos-card-categoria__titulo {
  font-size: var(--txt-normal); font-weight: 700; margin: 0;
}
.termos-card-categoria__status {
  display: flex; align-items: center; gap: var(--e1); font-size: var(--txt-apoio);
}
.termos-card-categoria__acoes {
  display: flex; gap: var(--e2); margin-top: auto; padding-top: var(--e2);
}

/* Abas de leitura no modal de aceite de múltiplos termos */
.termos-aceite__abas {
  display: flex; gap: var(--e2); padding: var(--e2) var(--e5);
  background: var(--superficie-afundada); border-bottom: 1px solid var(--borda);
  overflow-x: auto; flex-shrink: 0;
}
.termos-aceite__aba {
  padding: 6px 12px; border: 1px solid var(--borda);
  border-radius: var(--raio-pilula); background: var(--superficie);
  font-size: var(--txt-apoio); font-weight: 600; color: var(--texto-fraco);
  cursor: pointer; white-space: nowrap; transition: all var(--transicao);
}
.termos-aceite__aba:hover {
  color: var(--texto); border-color: var(--texto-tenue);
}
.termos-aceite__aba { display: inline-flex; align-items: center; gap: 6px; }
.termos-aceite__aba-ok { display: none; color: var(--ok); }
.termos-aceite__aba.lida .termos-aceite__aba-ok { display: inline-flex; }
.termos-aceite__aba.lida { border-color: var(--ok); }
.termos-aceite__corpo--html { white-space: normal; }
.termos-aceite__progresso {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e2); padding: var(--e2) var(--e3);
  border-radius: var(--raio-controle);
  background: var(--superficie-afundada); border: 1px solid var(--borda);
  font-size: var(--txt-apoio); color: var(--texto-fraco);
}
.termos-aceite__progresso--ok { background: var(--ok-fundo); border-color: var(--ok); color: var(--texto); }
.termos-aceite__check.desabilitado { opacity: .55; }
#btn-proximo-termo { margin-bottom: var(--e2); }
.termos-aceite__aba.ativa {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
}

/* Atalho flutuante para reabrir as preferências de cookies. Fica no canto
   oposto aos avisos empilháveis (.avisos, no rodapé direito) para nunca
   competir por espaço com eles, e abaixo da barra lateral e de qualquer
   véu/modal na pilha de z-index — nunca deve aparecer por cima de uma
   camada que a pessoa esteja usando. */
.cookies-flutuante {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  /* Precisa vencer .login-split (z-index var(--z-lateral), 40): na tela de
     login esse painel cobre a viewport inteira com conteúdo opaco. Fica
     abaixo do véu de modal (--z-veu, 50) de propósito — quando algo abre
     por cima, o atalho não deve competir com aquela camada. */
  z-index: 41;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ok-borda);
  background: var(--ok-fundo);
  color: var(--ok);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cookies-flutuante .ico { width: 22px; height: 22px; }
.cookies-flutuante:hover {
  color: var(--marca);
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
}
.cookies-flutuante:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}
.cookies-flutuante[hidden] { display: none; }
/* Fica no canto direito, empilhado logo acima do botão de suporte
   (.fab-suporte: 52px, right/bottom var(--e5)) quando ele está visível —
   alinhado pelo centro (44px vs 52px ⇒ +4px). Sem o FAB (integração
   desligada ou tela de login), ocupa o canto. */
body:has(#fab-suporte:not([hidden])) .cookies-flutuante {
  right: calc(var(--e5) + 4px);
  bottom: calc(var(--e5) + 52px + var(--e3));
}
@media (max-width: 860px) {
  .cookies-flutuante {
    right: max(var(--e3), env(safe-area-inset-right));
    bottom: max(var(--e3), env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }
  body:has(#fab-suporte:not([hidden])) .cookies-flutuante {
    right: calc(var(--e5) + 6px);
    bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px) + 52px + var(--e3));
  }
  .cookies-flutuante .ico { width: 20px; height: 20px; }
}

/* Aviso de cookies (LGPD) */
.cookies-aviso {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(920px, calc(100% - 32px)); z-index: 9000;
  display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-2);
}
.cookies-aviso[hidden] { display: none; }
.cookies-aviso__texto { flex: 1 1 360px; min-width: 0; }
.cookies-aviso__texto p { margin: 4px 0 0; font-size: var(--txt-apoio); color: var(--texto-fraco); }
.cookies-aviso__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cookie-categoria { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e2) 0; border-bottom: 1px solid var(--borda-suave, var(--borda)); }
.cookie-categoria:last-child { border-bottom: 0; }
.cookie-categoria__texto { flex: 1; }
.cookie-categoria__texto strong { display: block; }
.cookie-categoria__texto span { font-size: var(--txt-apoio); color: var(--texto-fraco); }
.cookie-categoria .checkbox { flex: none; }
.privacidade-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
@media print { .cookies-aviso { display: none !important; } }

/* Reincidência de fiscalização (formulários) */
.reincidencia { border-radius: var(--raio-controle); padding: var(--e2) var(--e3); margin: 0 0 var(--e3); border: 1px solid var(--borda); background: var(--superficie-afundada); }
.reincidencia p { margin: 0 0 var(--e2); }
.reincidencia--ok { border-color: var(--ok-borda); background: var(--ok-fundo); color: var(--ok); }
.reincidencia--alerta { border-color: var(--risco-borda, var(--risco)); background: var(--risco-fundo, #fdf2f2); }
.reincidencia--alerta .campo { margin-bottom: 0; }
.cartoes--compactos { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cartoes--compactos .cartao { min-width: 140px; padding: var(--e2) var(--e3); }
.cartoes--compactos .cartao__valor { font-size: 22px; }

/* Detalhe da fiscalização em modal: abas e galeria de evidências */
.abas-detalhe--modal { margin: 0 0 var(--e4); }
.evidencias__titulo { font-size: var(--txt-apoio); color: var(--texto-fraco); margin: var(--e4) 0 var(--e2); }
.evidencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e3); }
.evidencia { margin: 0; }
.evidencia img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raio-controle); border: 1px solid var(--borda); background: var(--superficie-afundada);
}
.evidencia figcaption { font-size: 11px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.3; }
.texto-risco { color: var(--risco); }

/* Faixa de personificação (administrador NDG atuando como outro usuário) */
.faixa-personificacao {
  display: flex; align-items: center; gap: var(--e2);
  padding: 6px var(--e4);
  background: #fff3cd; color: #6b4e00; border-bottom: 2px solid #e0a800;
  font-size: var(--txt-apoio);
}
.faixa-personificacao[hidden] { display: none; }
/* A faixa ocupa uma linha inteira acima da lateral e do topo: o #app é um
   grid com áreas nomeadas, e um filho sem área cairia numa linha implícita. */
.faixa-personificacao { grid-area: faixa; }
body.personificando #app {
  grid-template-rows: auto var(--alt-topo) 1fr;
  grid-template-areas:
    "faixa faixa"
    "lateral topo"
    "lateral conteudo";
}
@media (max-width: 860px) {
  body.personificando #app {
    grid-template-rows: auto var(--alt-topo) 1fr;
    grid-template-areas: "faixa" "topo" "conteudo";
  }
}
.faixa-personificacao .btn { flex: none; }
@media print { .faixa-personificacao { display: none !important; } }

/* Layouts & Marca (Administração, só ndg_admin) */
.layouts-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e4); margin-top: var(--e4);
}
.layout-cartao {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-superficie); overflow: hidden; box-shadow: var(--sombra-1);
}
.layout-cartao__previa {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: var(--e3);
  background: var(--superficie-afundada);
  border-bottom: 3px solid var(--cor-layout, var(--borda));
}
.layout-cartao__previa img { max-height: 100%; max-width: 100%; object-fit: contain; }
.layout-cartao__sem-logo { font-size: var(--txt-apoio); color: var(--texto-tenue); }
.layout-cartao__corpo { padding: var(--e3) var(--e4); flex: 1; }
.layout-cartao__nome { margin: 0 0 4px; font-size: var(--txt-base); }
.layout-cartao__descricao { margin: 0 0 var(--e2); font-size: var(--txt-apoio); color: var(--texto-fraco); }
.layout-cartao__detalhes { margin: 0; font-size: var(--txt-apoio); }
.layout-cartao__detalhes div { display: flex; gap: var(--e2); padding: 2px 0; }
.layout-cartao__detalhes dt { color: var(--texto-fraco); min-width: 72px; }
.layout-cartao__detalhes dd { margin: 0; overflow-wrap: anywhere; }
.layout-cartao__cor {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px;
  background: var(--cor-layout); border: 1px solid rgba(0,0,0,.15);
}
.layout-cartao__etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--e2); }
.layout-cartao__acoes {
  display: flex; gap: var(--e2); padding: var(--e2) var(--e4);
  border-top: 1px solid var(--borda); background: var(--superficie-afundada);
}
.layout-cartao--ndg { border-style: dashed; }
.layout-cartao--ndg .layout-cartao__acoes { font-size: var(--txt-apoio); }
.campo-cor { display: flex; gap: var(--e2); align-items: center; }
.campo-cor input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--borda); border-radius: var(--raio-controle); background: var(--superficie); cursor: pointer; flex: none; }
.layout-opcoes { border: 1px solid var(--borda); border-radius: var(--raio-controle); padding: var(--e2) var(--e3); }
.layout-opcoes legend { font-size: var(--txt-apoio); font-weight: 600; color: var(--texto-fraco); padding: 0 4px; }
.layout-opcoes .checkbox { display: flex; margin: 4px 0; }
.layout-logo-campo { display: flex; gap: var(--e3); align-items: flex-start; }
.layout-logo-previa {
  flex: none; width: 140px; height: 80px; display: flex; align-items: center; justify-content: center;
  background: var(--superficie-afundada); border: 1px dashed var(--borda); border-radius: var(--raio-controle); padding: var(--e2);
}
.layout-logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.select-layout-tenant { min-width: 140px; font-size: var(--txt-apoio); }

/* Rodapé legal da tela de login: links compactos em linha, separados por
   ponto. Antes eram quatro botões empilhados que ocupavam mais altura que o
   próprio formulário. */
.login-termos-lista {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 0;
}
.login-termo-link {
  padding: 2px 6px;
  background: transparent;
  border: none;
  border-radius: var(--raio-controle);
  color: var(--texto-fraco);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--transicao), background-color var(--transicao);
}
.login-termo-link + .login-termo-link::before {
  content: "\00b7";
  margin-right: 8px;
  margin-left: -6px;
  color: var(--texto-tenue);
}
.login-termo-link:hover,
.login-termo-link:focus-visible {
  color: var(--primaria);
  text-decoration: underline;
  text-underline-offset: 2px;
}



/* Linha de Total do diagnóstico — v3 */
.barra--total {
  border-top: 1px solid var(--borda);
  padding-top: var(--e1);
}

/* ── Painel de alertas (sino) ──
   Agrupado por origem; cada grupo é um <details> para o volume não
   engolir o painel. */
.suspenso--alertas {
  width: min(440px, calc(100vw - 2 * var(--e3)));
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
}
.suspenso--alertas[hidden] { display: none; }
.painel-alertas__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.painel-alertas__cabecalho > div { min-width: 0; flex: 1; }
.painel-alertas__cabecalho .btn { flex: none; white-space: nowrap; }
.painel-alertas__resultado {
  display: block;
  padding: 0 var(--e3) var(--e2);
  font-size: var(--txt-apoio);
}
.painel-alertas__resultado[hidden] { display: none; }
.painel-alertas__corpo { overflow-y: auto; min-height: 80px; }
.painel-alertas__vazio {
  padding: var(--e4) var(--e3);
  color: var(--texto-fraco);
  font-size: var(--txt-apoio);
  text-align: center;
}
.painel-alertas__grupo + .painel-alertas__grupo { border-top: 1px solid var(--borda-suave); }
.painel-alertas__grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.painel-alertas__grupo-titulo::-webkit-details-marker { display: none; }
.painel-alertas__grupo-titulo:hover { background: var(--superficie-afundada); }
.painel-alertas__seta { transition: transform var(--t-rapido); color: var(--texto-fraco); }
.painel-alertas__grupo:not([open]) .painel-alertas__seta { transform: rotate(-90deg); }
.painel-alertas__contagem {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-afundada);
  color: var(--texto-fraco);
  font-size: var(--txt-micro);
  text-align: center;
  line-height: 20px;
}
.painel-alertas__lista { list-style: none; margin: 0; padding: 0 0 var(--e1); }
.painel-alertas__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: var(--e2) var(--e3) var(--e2) calc(var(--e3) + 22px);
  border: none;
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.painel-alertas__item:hover { background: var(--superficie-afundada); }
.painel-alertas__lista li + li { border-top: 1px solid var(--borda-suave); }
.painel-alertas__descricao { font-size: var(--txt-apoio); line-height: 1.4; }
.painel-alertas__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-micro);
  color: var(--texto-fraco);
}
.painel-alertas__camada { font-weight: var(--peso-forte); color: var(--texto); }
.painel-alertas__erro { font-size: var(--txt-micro); color: var(--risco); }

/* ── Minhas tarefas ──
   Lista no estilo de gestor de tarefas: cartões de resumo, abas por
   situação, chips por módulo e itens agrupados por data. */
.tarefas__escopo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
}
.tarefas__escopo select { min-height: 36px; }
.tarefas__resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.tarefas__cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.tarefas__cartao:hover { border-color: var(--borda-forte); background: var(--superficie-afundada); }
.tarefas__cartao-valor { font-size: var(--txt-titulo); font-weight: var(--peso-destaque); line-height: 1.1; }
.tarefas__cartao-rotulo { font-size: var(--txt-apoio); color: var(--texto-fraco); }
.tarefas__cartao--risco .tarefas__cartao-valor { color: var(--risco); }
.tarefas__cartao--atencao .tarefas__cartao-valor { color: var(--atencao); }

#tarefas-modulos { margin-bottom: var(--e3); }

.tarefas__grupo {
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  background: var(--superficie);
  margin-bottom: var(--e3);
  overflow: hidden;
}
.tarefas__grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  background: var(--superficie-afundada);
  border-bottom: 1px solid var(--borda-suave);
}
.tarefas__grupo-n {
  margin-left: auto;
  font-weight: var(--peso-normal);
  color: var(--texto-fraco);
}
.tarefas__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 48px;
  padding: var(--e2) var(--e4);
  border: none;
  border-top: 1px solid var(--borda-suave);
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tarefas__grupo .tarefas__item:first-of-type { border-top: none; }
.tarefas__item:hover { background: var(--superficie-afundada); }
.tarefas__check {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--borda-forte);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tarefas__check--feito { background: var(--ok); border-color: var(--ok); }
.tarefas__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tarefas__titulo { font-size: var(--txt-corpo); line-height: 1.35; }
.tarefas__local {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarefas__contexto {
  font-size: var(--txt-apoio);
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tarefas__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tarefas__resp { font-size: var(--txt-apoio); color: var(--texto-fraco); }
/* Etiqueta de módulo: cor por família, como o marcador de projeto do Asana. */
.tarefas__modulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--raio-pilula);
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  white-space: nowrap;
}
.tarefas__modulo::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.tarefas__modulo--acao          { background: rgba(99, 102, 241, .14); color: #4f46e5; }
.tarefas__modulo--condicionante { background: rgba(14, 165, 233, .14); color: #0284c7; }
.tarefas__modulo--renovacao     { background: rgba(234, 179, 8, .18);  color: #a16207; }
.tarefas__modulo--checklist     { background: rgba(168, 85, 247, .14); color: #7e22ce; }
[data-tema="escuro"] .tarefas__modulo--acao          { color: #a5b4fc; }
[data-tema="escuro"] .tarefas__modulo--condicionante { color: #7dd3fc; }
[data-tema="escuro"] .tarefas__modulo--renovacao     { color: #fde047; }
[data-tema="escuro"] .tarefas__modulo--checklist     { color: #d8b4fe; }

@media (max-width: 720px) {
  .tarefas__item { flex-wrap: wrap; }
  .tarefas__texto { flex-basis: calc(100% - 32px); }
  .tarefas__meta { justify-content: flex-start; padding-left: 32px; }
}

/* ── Robô da análise por IA (fila de importação) ── */
.ia-robo {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: 4px 10px 4px 6px;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--marca) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--marca) 25%, transparent);
  max-width: 100%;
}
.ia-robo__svg { width: 44px; height: 37px; flex: none; overflow: visible; }
.ia-robo__cabeca, .ia-robo__orelha { fill: var(--superficie); stroke: var(--marca); stroke-width: 1.6; }
.ia-robo__cabeca { animation: ia-flutua 2.4s ease-in-out infinite; }
.ia-robo__visor { fill: color-mix(in srgb, var(--marca) 18%, var(--superficie-afundada)); }
.ia-robo__olho { fill: var(--marca); animation: ia-olhar 3.2s ease-in-out infinite, ia-piscar 4.6s steps(1) infinite; }
.ia-robo__olho--dir { animation-delay: .1s, .1s; }
.ia-robo__boca { fill: var(--marca); opacity: .7; }
.ia-robo__antena { stroke: var(--marca); stroke-width: 1.6; }
.ia-robo__luz { fill: var(--atencao); animation: ia-pulsa 1.1s ease-in-out infinite; }
.ia-robo__doc { fill: var(--superficie-afundada); stroke: var(--borda); stroke-width: 1; }
.ia-robo__feixe { fill: var(--marca); opacity: .75; animation: ia-varre 1.6s ease-in-out infinite alternate; }
.ia-robo__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ia-robo__titulo { font-size: var(--txt-micro); font-weight: var(--peso-forte); color: var(--marca); text-transform: uppercase; letter-spacing: .05em; }
.ia-robo__frase { font-size: var(--txt-apoio); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-robo__frase--troca { animation: ia-troca .35s ease-out; }
@keyframes ia-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes ia-olhar { 0%, 30%, 100% { transform: translateX(0); } 45%, 75% { transform: translateX(1.6px); } }
@keyframes ia-piscar { 0%, 92%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.1); } }
@keyframes ia-pulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ia-varre { from { transform: translateX(0); } to { transform: translateX(34px); } }
@keyframes ia-troca { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ia-robo__olho { transform-box: fill-box; transform-origin: center; }

/* Leitura sem IA: girinho discreto. */
.ia-leitura { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-fraco); font-size: var(--txt-apoio); }
.ia-leitura__giro {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--borda); border-top-color: var(--marca);
  animation: ia-gira .8s linear infinite;
}
@keyframes ia-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ia-robo__cabeca, .ia-robo__olho, .ia-robo__luz, .ia-robo__feixe, .ia-robo__frase--troca, .ia-leitura__giro { animation: none; }
}

/* ═══ Segurança (Administração) e MFA no login ═══════════════════════ */
.mfa-codigo { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-acoes { display: flex; justify-content: space-between; margin-top: var(--e3); }
.btn--link { background: none; border: 0; color: var(--primaria); padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.btn--link:disabled { color: var(--texto-fraco); text-decoration: none; cursor: default; }

.seguranca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); }
.seguranca-secao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); padding: var(--e4); }
.seguranca-secao h4 { margin: 0 0 var(--e1); display: flex; align-items: center; gap: var(--e2); }
.seguranca-secao > p.ajuda { margin-bottom: var(--e3); }
.seguranca-secao .campo { margin-bottom: var(--e3); }
.seguranca-secao .campo--linha { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: var(--e2); }
.seguranca-secao .campo--linha label { margin: 0; }
.seguranca-secao .checkbox { display: flex; gap: var(--e2); align-items: center; margin-bottom: var(--e2); }
.seguranca-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-top: var(--e4); flex-wrap: wrap; }
.seguranca-indicadores { display: flex; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.seguranca-indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); padding: var(--e2) var(--e3); font-size: var(--txt-apoio); }
.seguranca-indicador strong { font-size: 1.1rem; margin-right: var(--e1); }
.seguranca-indicador--ok strong { color: var(--sucesso); }
.seguranca-indicador--off strong { color: var(--alerta); }

/* ═══ Vitrine de produtos NDG na tela de login ══════════════════════════
   Cartões brancos com o logo em preto e branco e o nome em cinza; ao passar
   o mouse (ou focar) o logo ganha cor e o texto escurece. */
/* .login-hero já é coluna rolável (ver .login-hero__scroll); a vitrine é só
   mais um item dessa coluna, na mesma largura do texto acima dela. */
.login-produtos {
  width: 100%;
  max-width: 460px;
  flex: none;
}
.login-produtos__titulo {
  margin: 0 0 var(--e2);
  font-size: var(--txt-apoio);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfeadb;
  opacity: .8;
}
.login-produtos__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e2);
}
.login-produto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: clamp(64px, 9vh, 88px);
  padding: var(--e2);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  text-decoration: none;
  text-align: center;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.login-produto img {
  display: block;
  width: clamp(28px, 4.5vh, 40px); height: clamp(28px, 4.5vh, 40px);
  object-fit: contain;
  /* Preto e branco em repouso; a cor volta no hover/foco. */
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.login-produto:hover, .login-produto:focus-visible {
  color: #1f2937;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  outline: none;
}
.login-produto:hover img, .login-produto:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}
.login-produto:focus-visible { box-shadow: 0 0 0 3px #a5f5bd, 0 8px 20px rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) {
  .login-produto, .login-produto img { transition: none; }
}
/* Herói estreito: cartões um pouco mais compactos, ainda quatro por linha.
   Em altura baixa, o próprio .login-hero__scroll rola — a vitrine nunca
   precisa mais desaparecer nem cortar por cima do rodapé do sistema. */
@media (max-width: 1180px) {
  .login-produtos__lista { gap: var(--e2); }
  .login-produto { font-size: 10px; }
}

/* ── Auditoria: modal de detalhes ── */
.lista-definicao {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e1) var(--e3);
  margin: 0 0 var(--e3);
  font-size: var(--txt-apoio);
}
.lista-definicao dt { color: var(--texto-fraco); }
.lista-definicao dd { margin: 0; overflow-wrap: anywhere; }
.modal__subtitulo {
  margin: var(--e3) 0 var(--e1);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-destaque);
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.auditoria-frase {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border-left: 3px solid var(--marca);
  background: var(--superficie-afundada);
  border-radius: var(--raio-controle);
  font-weight: var(--peso-medio);
}
.auditoria-descricao { max-width: 520px; overflow-wrap: anywhere; }
.auditoria-bruto summary { cursor: pointer; }
.auditoria-json {
  margin: 0;
  padding: var(--e2);
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie-afundada);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ─── WIDGET DE SUPORTE (GLPI) ───────────────────────────────────────── */

.fab-suporte {
  position: fixed;
  right: var(--e5);
  bottom: var(--e5);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--marca);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-3);
  cursor: pointer;
  z-index: var(--z-fab);
  transition: transform var(--t-rapido) var(--curva);
}
.fab-suporte:hover { transform: scale(1.06); }
.fab-suporte .ico { width: 24px; height: 24px; }
.fab-suporte[hidden] { display: none; }
.fab-suporte .fab-suporte__fechar { display: none; }
.fab-suporte[aria-expanded="true"] .fab-suporte__abrir { display: none; }
.fab-suporte[aria-expanded="true"] .fab-suporte__fechar { display: block; }
.fab-suporte[aria-expanded="true"] { background: var(--n700, #3d4b5c); }

/* Painel ancorado acima do botão flutuante. */
.painel-suporte {
  position: fixed;
  right: var(--e5);
  bottom: calc(var(--e5) + 52px + var(--e3));
  width: 410px;
  max-width: calc(100vw - 2 * var(--e4));
  max-height: calc(100vh - var(--e5) - 52px - 2 * var(--e3));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: 16px;
  box-shadow: var(--sombra-3);
  overflow: hidden;
  z-index: var(--z-fab);
  animation: painel-suporte-entra var(--t-rapido) var(--curva);
}
.painel-suporte[hidden] { display: none; }
@keyframes painel-suporte-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.painel-suporte__topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--marca);
  color: #fff;
}
.painel-suporte__topo .ico { width: 20px; height: 20px; flex: none; }
.painel-suporte__topo h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: var(--peso-destaque);
  color: inherit;
}
.painel-suporte__selo {
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .22);
  font-size: var(--txt-micro);
  font-weight: var(--peso-destaque);
  letter-spacing: .04em;
}
.painel-suporte__selo--premium { background: #f4c542; color: #3a2a00; }
.painel-suporte__fechar {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.painel-suporte__fechar .ico { width: 16px; height: 16px; }
.painel-suporte__fechar:hover { background: rgba(255, 255, 255, .3); }
.painel-suporte .suporte-abas { margin: 0; gap: 0; }
.painel-suporte .suporte-aba {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--e3) var(--e2);
}
.painel-suporte .suporte-aba .ico { width: 16px; height: 16px; }
.painel-suporte__sla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  font-size: var(--txt-apoio);
  background: #f3ecfb;
  color: #6b3fa0;
}
[data-tema="escuro"] .painel-suporte__sla { background: #2a2140; color: #c9b3ec; }
.painel-suporte__sla--premium { background: #fff6dc; color: #7a5200; }
[data-tema="escuro"] .painel-suporte__sla--premium { background: #3a2f10; color: #f4c542; }
.painel-suporte__sla > span { display: inline-flex; align-items: center; gap: 6px; }
.painel-suporte__sla .ico { width: 14px; height: 14px; flex: none; }
.painel-suporte__sla-premium {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: help;
  text-decoration: underline dotted;
}
.painel-suporte__corpo { padding: var(--e4); overflow: auto; }
.painel-suporte__corpo .campo label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--txt-micro);
  font-weight: var(--peso-destaque);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.painel-suporte__corpo .campo { margin-bottom: var(--e3); }
.painel-suporte__corpo .campos-2 { gap: var(--e3); }
.suporte-anexo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: var(--peso-destaque);
  cursor: pointer;
  text-align: left;
}
.suporte-anexo:hover, .suporte-anexo.arrastando { border-color: var(--marca); background: var(--marca-suave); }
.suporte-anexo .ico { width: 18px; height: 18px; flex: none; }
.suporte-anexo__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suporte-anexo__remover {
  border: none;
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font: inherit;
  padding: 0 4px;
}
.suporte-anexo__previa {
  margin-top: var(--e2);
  max-height: 120px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--borda);
  display: block;
}
.suporte-anexo__previa[hidden] { display: none; }
.suporte-enviar {
  width: 100%;
  margin-top: var(--e3);
  padding: 12px var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: var(--peso-destaque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  cursor: pointer;
}
.suporte-enviar:hover { background: var(--marca-clara); }
.suporte-enviar .ico { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .painel-suporte {
    right: var(--e3);
    left: var(--e3);
    width: auto;
    bottom: calc(var(--e5) + 52px + var(--e3) + env(safe-area-inset-bottom, 0px));
  }
}

/* Em telas pequenas, sobe acima de qualquer barra inferior de navegação. */
@media (max-width: 720px) {
  .fab-suporte { bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px)); }
}

.suporte-abas {
  display: flex;
  gap: var(--e2);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--e4);
}
.suporte-aba {
  padding: var(--e2) var(--e3);
  border: none;
  background: none;
  font: inherit;
  font-weight: var(--peso-destaque);
  color: var(--texto-tenue);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.suporte-aba.ativa { color: var(--marca); border-color: var(--marca); }

.suporte-lista { display: flex; flex-direction: column; gap: var(--e2); }
.suporte-chamado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
}
.suporte-chamado:hover { background: var(--superficie-afundada); }
.suporte-chamado__titulo { font-weight: var(--peso-destaque); }
.suporte-chamado__meta { font-size: var(--txt-apoio); color: var(--texto-fraco); }
.suporte-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--txt-apoio);
  font-weight: var(--peso-destaque);
  background: var(--superficie-afundada);
  white-space: nowrap;
}
.suporte-status--ok { background: var(--ok-fundo); color: var(--ok); border: 1px solid var(--ok-borda); }
.suporte-status--andamento { background: var(--info-fundo); }
.suporte-status--pendente { background: var(--atencao-fundo); }

.suporte-encerrado {
  padding: var(--e3);
  border-radius: var(--raio-controle);
  background: var(--ok-fundo);
  border: 1px solid var(--ok-borda);
  font-size: var(--txt-apoio);
  margin: var(--e3) 0;
}
.suporte-encerrado__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); }
#form-responder-chamado[hidden], .suporte-encerrado[hidden] { display: none; }

.suporte-timeline { display: flex; flex-direction: column; gap: var(--e3); margin: var(--e3) 0; }
.suporte-timeline__item {
  padding: var(--e3);
  border-radius: var(--raio-controle);
  background: var(--superficie-afundada);
  white-space: pre-wrap;
  font-size: var(--txt-apoio);
}
.suporte-timeline__data { display: block; color: var(--texto-tenue); font-size: var(--txt-micro); margin-bottom: 4px; }
.suporte-solucao {
  padding: var(--e3);
  border-radius: var(--raio-controle);
  border: 1px solid var(--ok-borda);
  background: var(--ok-fundo);
  white-space: pre-wrap;
  font-size: var(--txt-apoio);
  margin: var(--e3) 0;
}

/* ─── AJUDA ──────────────────────────────────────────────────────────────
   Índice à esquerda (mesmo padrão dos Cadastros) e o tópico à direita. O
   texto é maior e mais espaçado que o resto do sistema de propósito: é
   leitura, não operação, e o público inclui quem tem dificuldade. */
.ajuda-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}
@media (max-width: 900px) { .ajuda-layout { grid-template-columns: 1fr; } }

.ajuda-indice {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-1);
  position: sticky;
  top: calc(var(--alt-topo) + var(--e4));
  max-height: calc(100vh - var(--alt-topo) - var(--e4) * 2);
  overflow-y: auto;
  box-sizing: border-box;
}
@media (max-width: 900px) { .ajuda-indice { position: static; max-height: none; } }
.ajuda-busca { width: 100%; flex: none; }
.ajuda-indice__grupo { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e2); }
.ajuda-indice__grupo-titulo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: var(--e2) var(--e3) var(--e1);
}
.ajuda-indice__item, .ajuda-indice__secao {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--e3);
  border: none;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--txt-corpo);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.ajuda-indice__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajuda-indice__item .ico { flex: none; }
.ajuda-indice__secao { min-height: 30px; padding-left: calc(var(--e3) + 22px); font-size: var(--txt-apoio); }
.ajuda-indice__item:hover, .ajuda-indice__secao:hover { background: var(--superficie-afundada); color: var(--texto); }
.ajuda-indice__item.ativa { background: var(--marca-suave); color: var(--marca); font-weight: var(--peso-forte); }
[data-tema="escuro"] .ajuda-indice__item.ativa { color: var(--marca-clara); }
.ajuda-indice__vazio { padding: var(--e3); }

.ajuda-conteudo { min-width: 0; scroll-margin-top: calc(var(--alt-topo) + var(--e4)); }
.ajuda-topico { font-size: 15px; line-height: 1.65; max-width: 860px; }
.ajuda-topico__cabecalho { margin-bottom: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--borda); }
.ajuda-topico__grupo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca);
}
.painel .ajuda-topico__titulo { font-size: 26px; font-weight: var(--peso-forte); letter-spacing: -.01em; margin: var(--e1) 0 var(--e2); color: var(--texto); }
.ajuda-topico__resumo { margin: 0 0 var(--e3); color: var(--texto-fraco); font-size: 16px; }
.ajuda-topico__sumario {
  background: var(--superficie-afundada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
}
.ajuda-topico__sumario strong { display: block; margin-bottom: var(--e1); }
.ajuda-topico__sumario ol { margin: 0; padding-left: 22px; columns: 2; column-gap: var(--e5); }
@media (max-width: 700px) { .ajuda-topico__sumario ol { columns: 1; } }
.ajuda-topico__sumario a { color: var(--marca); text-decoration: none; }
.ajuda-topico__sumario a:hover { text-decoration: underline; }

.ajuda-secao { margin-bottom: var(--e6); scroll-margin-top: calc(var(--alt-topo) + var(--e4)); border-radius: var(--raio-controle); transition: box-shadow .4s; }
.ajuda-secao--destaque { box-shadow: 0 0 0 4px var(--marca-suave); }
.painel .ajuda-secao__titulo { font-size: 20px; font-weight: var(--peso-forte); margin: 0 0 var(--e3); color: var(--texto); }
.painel .ajuda-secao h4 { font-size: 16px; font-weight: var(--peso-forte); margin: var(--e4) 0 var(--e2); }
.ajuda-secao p { margin: 0 0 var(--e3); }
.ajuda-secao ul, .ajuda-secao ol { margin: 0 0 var(--e3); padding-left: 24px; }
.ajuda-secao li { margin-bottom: var(--e1); }
.ajuda-secao a { color: var(--marca); }
.ajuda-secao table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e4); font-size: 14px; }
.ajuda-secao th, .ajuda-secao td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borda); vertical-align: top; }
.ajuda-secao th { background: var(--superficie-afundada); font-weight: var(--peso-forte); }

/* Passos numerados: número grande e destacado, um passo por linha. */
.ajuda-passos { list-style: none; counter-reset: passo; padding: 0; margin: 0 0 var(--e4); }
.ajuda-passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--e3);
  align-items: start;
  padding: var(--e2) 0;
}
.ajuda-passos li::before {
  content: counter(passo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-weight: var(--peso-forte);
  font-size: 15px;
}
.ajuda-passos li > div { padding-top: 4px; }

/* Nome de botão/menu exatamente como aparece na tela. */
.ajuda-botao {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie-afundada);
  font-weight: var(--peso-forte);
  font-size: .93em;
  white-space: nowrap;
}
.ajuda-caminho { color: var(--texto-fraco); }

/* Caixas de destaque. */
.ajuda-caixa {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-controle);
  border: 1px solid var(--info-borda);
  background: var(--info-fundo);
  margin: 0 0 var(--e4);
}
.ajuda-caixa .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--info); }
.ajuda-caixa--atencao { border-color: var(--atencao-borda); background: var(--atencao-fundo); }
.ajuda-caixa--atencao .ico { color: var(--atencao); }
.ajuda-caixa--ok { border-color: var(--ok-borda); background: var(--ok-fundo); }
.ajuda-caixa--ok .ico { color: var(--ok); }
.ajuda-caixa strong { display: block; margin-bottom: 2px; }
.ajuda-caixa p { margin: 0; }

/* Capturas de tela. */
.ajuda-figura { margin: var(--e3) 0 var(--e5); }
.ajuda-figura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-1);
  cursor: zoom-in;
  background: #fff;
}
.ajuda-figura figcaption { font-size: 13px; color: var(--texto-fraco); margin-top: var(--e2); text-align: center; }
.ajuda-figura--media { max-width: 620px; }
.ajuda-figura--pequena { max-width: 420px; }
.ajuda-figura__ampliada { display: block; width: 100%; height: auto; border: 1px solid var(--borda); border-radius: var(--raio-controle); }

/* Glossário e perguntas frequentes. */
.ajuda-glossario dt { font-weight: var(--peso-forte); margin-top: var(--e3); }
.ajuda-glossario dd { margin: var(--e1) 0 0; }
.ajuda-faq details { border: 1px solid var(--borda); border-radius: var(--raio-controle); padding: var(--e2) var(--e3); margin-bottom: var(--e2); background: var(--superficie); }
.ajuda-faq summary { cursor: pointer; font-weight: var(--peso-forte); }
.ajuda-faq details[open] summary { margin-bottom: var(--e2); }

.ajuda-topico__rodape { display: flex; justify-content: space-between; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--borda); }

/* Opt-in da IA por cliente (Integrações → Análise por IA): bloco destacado
   dentro do painel, porque é a decisão do cliente — a configuração técnica
   abaixo é da NDG. */
.ia-consentimento { border: 1px solid var(--borda); border-radius: var(--raio-controle); background: var(--superficie-afundada); padding: var(--e3) var(--e4); margin: var(--e3) 0 var(--e4); }
.ia-consentimento h3 { margin: 0 0 var(--e2); font-size: var(--txt-base); }
.ia-consentimento .acoes-modal { margin-top: var(--e2); }

@media print {
  .ajuda-indice, .ajuda-topico__rodape, .ajuda-topico__cabecalho .btn { display: none !important; }
  .ajuda-layout { display: block; }
  .ajuda-topico { max-width: none; font-size: 12px; }
  .ajuda-figura img { box-shadow: none; }
}

/* Controles com `display` próprio perdiam para o atributo `hidden` do
   navegador: "Cadastrar cliente" (só parceiro), "Novo" (só quem gerencia
   cadastros) e o botão de consentimento de IA ficavam visíveis para quem o
   JS tinha escondido. Mesma proteção já usada em .cadastros-menu button. */
.btn[hidden], .btn-linha[hidden], .botao-icone[hidden], .btn-icone[hidden],
.chip[hidden], .etiqueta[hidden] { display: none !important; }

/* ═══ CELULAR — rodada de 16/10/2026 (auditoria automática em 375 e 360px) ═══
   Cada bloco abaixo corrige um defeito observado em captura real de tela.
   Ficam agrupados aqui, e não espalhados, para a próxima auditoria ver o
   que mudou de uma vez. */

/* Busca do mapa: a regra base `input:not([type=checkbox])…` tem
   especificidade maior que `.mapa-filtros__busca input` e zerava o recuo
   do texto — o ícone da lupa ficava em cima do placeholder. */
.mapa-filtros .mapa-filtros__busca input[type="text"] { padding-left: calc(var(--e3) + 26px); padding-right: 40px; }

/* Agenda do calendário: lista vertical dos vencimentos do mês. Só aparece
   em telefone (ver bloco ≤ 620px) — no desktop a grade já conta a história. */
.calendario-agenda { display: none; margin-top: var(--e4); }
.calendario-agenda__dia + .calendario-agenda__dia { margin-top: var(--e3); }
.calendario-agenda__data {
  margin: 0 0 var(--e1);
  font-size: var(--txt-apoio);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
}
.calendario-agenda__data .ajuda { text-transform: none; letter-spacing: 0; font-weight: var(--peso-normal, 400); }
.calendario-agenda__dia--hoje .calendario-agenda__data { color: var(--marca); }
.calendario-agenda__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 48px;
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e1);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--neutro);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.calendario-agenda__item.ok { border-left-color: var(--ok); }
.calendario-agenda__item.atencao { border-left-color: var(--atencao); }
.calendario-agenda__item.risco { border-left-color: var(--risco); }
.calendario-agenda__titulo { font-weight: var(--peso-medio); line-height: 1.3; }
.calendario-agenda__tipo { font-size: var(--txt-apoio); color: var(--texto-fraco); }

@media (max-width: 860px) {

  /* ── Cabeçalho de detalhe: `flex: 1 1 320px` do desktop virava ALTURA
     mínima de 320px quando o topo empilha em coluna — sobrava um vazio
     enorme entre o status e os botões. ── */
  .detalhe-cabecalho__texto { flex: none; }
  .detalhe-cabecalho__topo .pagina-acoes { width: 100%; }

  /* ── Menu de Cadastros/Administração em linha: cada aba com a própria
     largura e rolagem horizontal. Antes, `width: 100%` + `min-width: 0`
     encolhiam 20 abas para 18px cada e os rótulos se sobrepunham. ── */
  .cadastros-menu {
    gap: var(--e1);
    padding: var(--e1);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cadastros-menu::-webkit-scrollbar { display: none; }
  .cadastros-menu button {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 0 var(--e3);
    scroll-snap-align: start;
  }
  .cadastros-menu button span { overflow: visible; }
  .cadastros-menu__separador {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 var(--e1);
    padding: 0 0 0 var(--e2);
    border-left: 1px solid var(--borda);
    white-space: nowrap;
  }

  /* ── Suspensos do topo (alertas, usuário): ancorados à janela, não ao
     botão — o painel de alertas nascia 128px fora da tela à esquerda. ── */
  .suspenso { max-width: calc(100vw - 2 * var(--e2)); }
  .suspenso--alertas {
    position: fixed;
    left: var(--e2);
    right: var(--e2);
    top: calc(var(--alt-topo, 60px) + 6px);
    width: auto;
    max-height: calc(100vh - var(--alt-topo, 60px) - var(--e4) - env(safe-area-inset-bottom));
  }

  /* ── Filtros do painel: grade compacta em vez de 3 selects empilhados
     que empurravam os indicadores para fora da primeira tela. ── */
  .filtros-painel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2) var(--e3);
    align-items: end;
    margin-bottom: var(--e3);
  }
  .filtros-painel label:nth-of-type(3) { grid-column: 1 / -1; }
  .filtros-painel select { min-height: 44px; }
  .filtros-painel .btn-linha { grid-column: 1 / -1; justify-self: end; min-height: 40px; }

  /* ── 16px em todo campo de texto/seleção: abaixo disso o iOS dá zoom ao
     focar e desloca o layout. Regras específicas (filtros do painel,
     paleta, mapa, layout do cliente) venciam a regra geral de ≤ 860px. ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }

  /* ── Alvos de toque (WCAG 2.5.8): trilha, ícones de linha, legenda da
     pilha de status, links de termos no login, checkboxes nativos. ── */
  .trilha { gap: var(--e2); }
  .trilha button { min-height: 32px; padding: 4px 6px; margin: -4px 0; }
  .btn-linha--icone { min-width: 40px; }
  .status-pilha__item { min-height: 32px; padding: 4px 8px; }
  .login-termo-link { min-height: 32px; padding: 6px 4px; }
  input[type="checkbox"]:not(.checkbox input), input[type="radio"]:not(.checkbox input) { width: 20px; height: 20px; min-width: 20px; flex: none; }

  /* ── Coluna "Detalhes" dos cadastros: um único filho na célula, senão o
     flex do cartão espalha etiqueta e textos lado a lado. ── */
  .tabela-cartoes td .cad-detalhes { display: block; min-width: 0; line-height: 1.5; }

  /* ── Listas <dl> de detalhe (fiscalização, layouts): botões de linha com
     texto longo quebram linha em vez de vazar pela lateral do modal. ── */
  .layout-cartao__detalhes div { flex-wrap: wrap; }
  .layout-cartao__detalhes dd { min-width: 0; flex: 1 1 200px; }
  .layout-cartao__detalhes dd .btn-linha {
    white-space: normal;
    height: auto;
    min-height: 36px;
    max-width: 100%;
    padding: 6px 10px;
    line-height: 1.3;
    text-align: left;
  }

  /* ── Mapa: busca e seletores em largura total, ícone sem invadir o texto. ── */
  .mapa-filtros { padding: var(--e3); gap: var(--e2); }
  .mapa-filtros__busca { flex: 1 1 100%; min-width: 0; }
  .mapa-filtros__busca input { min-height: 44px; }
  .mapa-filtros__controles { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--e2); }
  .mapa-filtro-label { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .mapa-filtro-label select { width: 100%; min-height: 44px; }
  .mapa-filtros__controles .btn { width: 100%; }
  .mapa-filtros__info { white-space: normal; }

  /* ── Barras de filtro geradas por JS (financeiro, cadastros): campos e
     botões ocupam a linha inteira em vez de ficarem soltos à esquerda. ── */
  .barra-filtros { gap: var(--e2); }
  .barra-filtros > .campo, .barra-filtros > .btn { flex: 1 1 100%; margin: 0; }
  .barra-filtros > .campo select, .barra-filtros > .campo input { width: 100%; }
  .barra-filtros > .barra-selecao__espaco { display: none; }
  .barra-filtros > .checkbox { flex: 1 1 auto; }

  /* ── Modal de release: três ações em largura total. ── */
  .modal-release-barra-acoes .btn { flex: 1 1 100%; width: 100%; justify-content: center; }

  /* ── Aviso de cookies: botões dividem a largura e o aviso não esconde
     meia tela de conteúdo. ── */
  .cookies-aviso .btn { flex: 1 1 auto; justify-content: center; }
  .cookies-aviso p { font-size: var(--txt-apoio); line-height: 1.4; }

  /* ── Aceite de termos: o contador "0 de 4" quebrava em três colunas. ── */
  .termos-aceite__progresso { flex-wrap: wrap; line-height: 1.4; }
}

@media (max-width: 620px) {
  /* ── Calendário: 7 colunas de verdade (minmax(0,1fr) impede o texto do
     evento de alargar a coluna até sumir metade do mês), evento vira ponto
     colorido e a lista completa fica na agenda logo abaixo. ── */
  .calendario-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .calendario-cabecalho { padding: var(--e1) 0; font-size: 10px; letter-spacing: .02em; }
  .calendario-dia { min-height: 54px; padding: 4px 2px; gap: 3px; cursor: pointer; }
  .calendario-dia--vazio { cursor: default; }
  .calendario-dia-numero { justify-content: center; font-size: 12px; }
  .calendario-dia-numero .etiqueta { display: none; }
  .calendario-eventos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; overflow: visible; }
  .calendario-evento {
    width: 8px; height: 8px; min-height: 0; padding: 0;
    border: none; border-radius: 50%;
    font-size: 0; color: transparent;
    background: var(--neutro);
    pointer-events: none;
  }
  .calendario-evento.ok { background: var(--ok); }
  .calendario-evento.atencao { background: var(--atencao); }
  .calendario-evento.risco { background: var(--risco); }
  /* mais de 6 eventos num dia: mostra só os 6 primeiros pontos */
  .calendario-evento:nth-child(n + 7) { display: none; }
  .calendario-agenda { display: block; }
}

@media (max-width: 480px) {
  /* ── Rodapé de ações do modal: as margens negativas seguiam o padding
     de ≤ 860px (16px) enquanto o corpo já usava 12px — vazava 8px. ── */
  .modal-corpo .acoes-modal, .modal-corpo .form-cadastro__acoes {
    margin-left: calc(var(--e3) * -1);
    margin-right: calc(var(--e3) * -1);
    margin-bottom: calc(var(--e3) * -1);
    bottom: calc(var(--e3) * -1);
    padding-left: var(--e3);
    padding-right: var(--e3);
  }
  /* Paginação: 30px era pequeno demais para o dedo. */
  .pag-btn { min-width: 36px; min-height: 36px; }
  /* Botões do rodapé do modal dividem a largura: alvo maior e sem sobra
     à esquerda. O principal continua por último (à direita). */
  .modal-rodape .btn, .acoes-modal .btn, .form-cadastro__acoes .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}