/* ==========================================================================
   SGQ Wellness Club · sgq-base.css · mockups v2 (25/09/2026)
   Tokens (§3) + base global (§3.4) + componentes compartilhados (§4, §8).
   Fonte única: BRIEF_v2.md. Os nomes de classe daqui são CONTRATO:
   as telas usam estes nomes e não inventam variações.

   Sumário
     00  Tokens — claro (padrão)
     01  Tokens — escuro (automático e forçado)
     02  Tokens responsivos (gutter, número grande)
     03  Base global
     04  Foco, pular para o conteúdo, sr-only
     05  Utilitários de apoio (contêiner, código, número, bloco, seção…)
     06  Barra superior e marca (.topo, .marca, .sistema)
     07  Botões (.bt)
     08  Selos (.selo)
     09  Card de módulo (.mod) — 3 formatos + linha de celular
     10  Cabeçalho de tela e trilha (.cab, .trilha)
     11  Abas (.abas)
     12  Filtros e barra da lista (.filtros, .barra-lista, .contador)
     13  Tabela ↔ cartões (.tabela-rola, .tabela-cx, .tabela, .cartoes, .cartao, .vazio)
     14  Aviso e nota do mockup (.aviso, .nota-mockup)
     15  Campos (.campo, .rotulo, .ajuda, .erro, .caixa)
     16  Segmentado (.seg) e escala 0–10 (.escala)
     17  Barra de ação (.barra-acao)
     18  Ações da barra: busca, sino, perfil (.acoes-topo)
     19  Popover (.pop) e menu suspenso
     20  Diálogo de busca (.busca-dlg)
     21  Toast (.toasts, .toast)
     22  Folha (.folha)
     23  Painel do mockup (.painel-mockup, .painel)
     24  Animações (keyframes)
     25  Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   00  TOKENS — CLARO (padrão)  §3.1 · §3.3 · §3.4
   ========================================================================== */
:root{
  color-scheme:light;

  /* Marca */
  --azul:#053a99;          /* ações, links, códigos, nome de módulo, borda do card disponível */
  --navy:#1E2A57;          /* barras, títulos, faixa */
  --azul-med:#05A0DD;      /* SÓ barras, ícones grandes, bordas — nunca texto */
  --ciano:#33CCFF;         /* texto/ícone SÓ sobre navy/azul */
  --limao:#C8FB00;         /* acento — lista fechada §3.5 */

  /* Superfícies */
  --ground:#F7F7F7;
  --surface:#FFFFFF;
  --surface-2:#EEFBFF;
  --hover:#F7FAFD;          /* linha e item sob o mouse (v3) */
  --tabela-cab:#F6F8FB;     /* cabeçalho de tabela e de grupo (v3) */
  --linha-sutil:#EEF1F5;    /* divisória entre linhas de tabela (v3) */
  --breve-bg:#EFF1F4;
  --breve-borda:#C3C9D1;
  --breve-nome:#4A4F55;
  --breve-txt:#5F6368;
  --linha:#E3E8EF;
  --linha-2:#CBD5E4;

  /* Texto (v3: neutros azulados do estudo híbrido) */
  --titulo:#1E2A57;
  --ink:#1E2A57;
  --ink-2:#34405F;
  --ink-3:#56627A;
  --ink-4:#66728A;

  /* Ação, foco, barras */
  --acao-bg:#053a99;
  --acao-txt:#F7F7F7;
  --acao-hover:#1E2A57;
  --filtro-on-bg:#1E2A57;   /* filtro ativo: pílula navy (v3) */
  --filtro-on-txt:#F7F7F7;
  --foco:#053a99;
  --topo:#1E2A57;
  --faixa:linear-gradient(180deg,#1E2A57 0%,#053a99 100%);
  --rail:#FFFFFF;           /* v3: menu lateral claro */
  /* Degradê da marca (v3): azul → navy com brilhos ciano. Fundo do topo da home e da casca. */
  --degrade:
    radial-gradient(40% 70% at 94% 0%, rgba(51,204,255,.40) 0%, rgba(51,204,255,0) 70%),
    radial-gradient(36% 62% at 74% 92%, rgba(5,160,221,.42) 0%, rgba(5,160,221,0) 72%),
    radial-gradient(50% 90% at 0% 0%, rgba(17,25,58,.85) 0%, rgba(17,25,58,0) 70%),
    linear-gradient(112deg,#1E2A57 0%,#14317A 36%,#053a99 68%,#0A4FB0 100%);
  --degrade-meio:#14317A;   /* cor de apoio (contorno do ponto do sino sobre o degradê) */
  --rodape:#1E2A57;

  /* Semânticas (selos e barras finas; nunca número grande nem fundo de área) */
  --crit-bg:#FBE3E3;   --crit-txt:#A63232;
  --aten-bg:#FEF0E6;   --aten-txt:#B54708;
  --ok-bg:#DFF6E3;     --ok-txt:#1F7A3D;
  --info-bg:#E4EDFB;   --info-txt:#2C4C8C;
  --neutro-bg:#ECEFF3; --neutro-txt:#5A6472;
  --disp-bg:#C8FB00;   --disp-txt:#1E2A57;

  /* Apoio (derivados dos tokens acima) */
  --destaque:rgba(5,160,221,.16);   /* destaque de retorno à lista */
  --veu:rgba(16,22,43,.48);         /* fundo atrás de diálogo e folha */
  --rola-sombra:rgba(16,22,43,.14); /* borda direita da tabela que rola: "tem mais colunas" */
  --toast-bg:#1E2A57;
  --toast-borda:#1E2A57;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");

  /* Tipografia §3.3 */
  --fonte:"Open Sans","Segoe UI",system-ui,sans-serif;
  --fonte-destaque:var(--fonte);   /* v3: a Michroma saiu; números grandes em Open Sans leve (300) */
  --fs-12:12px; --lh-12:1.4;
  --fs-14:14px; --lh-14:1.5;
  --fs-16:16px; --lh-16:1.5;
  --fs-20:20px; --lh-20:1.3;
  --fs-28:28px; --lh-28:1.2;
  --fs-num:44px; --lh-num:1;

  /* Espaço §3.4 */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
  --gutter:16px;

  /* Raio (v3: nada quadrado) */
  --r-selo:6px;
  --r-bt:999px;
  --r-campo:8px;
  --r-card:12px;
  --r-folha:16px;

  /* Sombra (v3: leve, como no estudo B) */
  --sombra-1:0 1px 2px rgba(30,42,87,.05), 0 1px 3px rgba(5,58,153,.07);
  --sombra-2:0 18px 40px -16px rgba(30,42,87,.28), 0 4px 10px -4px rgba(30,42,87,.10);
  --sombra-pop:0 12px 32px -8px rgba(30,42,87,.24), 0 2px 6px rgba(30,42,87,.08);

  /* Movimento */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --t-press:120ms;
  --t-hover:150ms;
  --t-pop:160ms;
  --t-seg:200ms;
  --t-toast:300ms;
}

/* Fonte de comparação (painel do mockup §8) */
html[data-font="montserrat"]{--fonte:"Montserrat","Segoe UI",system-ui,sans-serif}


/* ==========================================================================
   01  TOKENS — ESCURO  §3.2
   Automático (sistema em escuro e sem data-theme="light") e forçado
   (data-theme="dark"). Os dois blocos têm de ficar IGUAIS.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#151E42;
    --surface:#1E2A57;
    --surface-2:#26336A;
    --breve-bg:#232C57;
    --breve-borda:#3A4679;
    --breve-nome:#EEFBFF;
    --breve-txt:#D6F4FF;
    --linha:#34427A;
    --linha-2:#45558F;
    --titulo:#F7F7F7;
    --ink:#F7F7F7;
    --ink-2:#FFFFFF;
    --ink-3:#EEFBFF;
    --ink-4:#D6F4FF;
    --azul:#33CCFF;
    --acao-bg:#33CCFF;
    --acao-txt:#1E2A57;
    --acao-hover:#EEFBFF;
    --foco:#33CCFF;
    --topo:#141B3A;
    --faixa:linear-gradient(180deg,#141B3A 0%,#1E2A57 100%);
    --rail:#19234C;
    --hover:#233063;
    --tabela-cab:#222E60;
    --linha-sutil:#2C3A72;
    --filtro-on-bg:#F7F7F7;
    --filtro-on-txt:#1E2A57;
    --degrade:
    radial-gradient(40% 70% at 94% 0%, rgba(51,204,255,.20) 0%, rgba(51,204,255,0) 70%),
    radial-gradient(36% 62% at 74% 92%, rgba(5,160,221,.22) 0%, rgba(5,160,221,0) 72%),
    radial-gradient(50% 90% at 0% 0%, rgba(6,10,28,.9) 0%, rgba(6,10,28,0) 70%),
    linear-gradient(112deg,#0E1434 0%,#13215A 40%,#0A3384 72%,#0B3F99 100%);
    --degrade-meio:#13215A;
    --rodape:#0E1434;
    --sombra-pop:0 12px 32px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
    --crit-bg:rgba(240,144,144,.16);   --crit-txt:#F4A3A3;
    --aten-bg:rgba(245,166,96,.16);    --aten-txt:#F5B77A;
    --ok-bg:rgba(120,201,162,.16);     --ok-txt:#8FD6B0;
    --info-bg:rgba(51,204,255,.14);    --info-txt:#8FDBFF;
    --neutro-bg:rgba(255,255,255,.08); --neutro-txt:#EEFBFF;
    --destaque:rgba(5,160,221,.24);
    --veu:rgba(5,8,20,.64);
    --rola-sombra:rgba(5,8,20,.5);
    --toast-bg:#26336A;
    --toast-borda:#45558F;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    --sombra-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.25);
    --sombra-2:0 18px 40px -16px rgba(0,0,0,.60), 0 4px 10px -4px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#151E42;
  --surface:#1E2A57;
  --surface-2:#26336A;
  --breve-bg:#232C57;
  --breve-borda:#3A4679;
  --breve-nome:#EEFBFF;
  --breve-txt:#D6F4FF;
  --linha:#34427A;
  --linha-2:#45558F;
  --titulo:#F7F7F7;
  --ink:#F7F7F7;
  --ink-2:#FFFFFF;
  --ink-3:#EEFBFF;
  --ink-4:#D6F4FF;
  --azul:#33CCFF;
  --acao-bg:#33CCFF;
  --acao-txt:#1E2A57;
  --acao-hover:#EEFBFF;
  --foco:#33CCFF;
  --topo:#141B3A;
  --faixa:linear-gradient(180deg,#141B3A 0%,#1E2A57 100%);
  --rail:#19234C;
  --hover:#233063;
  --tabela-cab:#222E60;
  --linha-sutil:#2C3A72;
  --filtro-on-bg:#F7F7F7;
  --filtro-on-txt:#1E2A57;
  --degrade:
  radial-gradient(40% 70% at 94% 0%, rgba(51,204,255,.20) 0%, rgba(51,204,255,0) 70%),
  radial-gradient(36% 62% at 74% 92%, rgba(5,160,221,.22) 0%, rgba(5,160,221,0) 72%),
  radial-gradient(50% 90% at 0% 0%, rgba(6,10,28,.9) 0%, rgba(6,10,28,0) 70%),
  linear-gradient(112deg,#0E1434 0%,#13215A 40%,#0A3384 72%,#0B3F99 100%);
  --degrade-meio:#13215A;
  --rodape:#0E1434;
  --sombra-pop:0 12px 32px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  --crit-bg:rgba(240,144,144,.16);   --crit-txt:#F4A3A3;
  --aten-bg:rgba(245,166,96,.16);    --aten-txt:#F5B77A;
  --ok-bg:rgba(120,201,162,.16);     --ok-txt:#8FD6B0;
  --info-bg:rgba(51,204,255,.14);    --info-txt:#8FDBFF;
  --neutro-bg:rgba(255,255,255,.08); --neutro-txt:#EEFBFF;
  --destaque:rgba(5,160,221,.24);
  --veu:rgba(5,8,20,.64);
  --rola-sombra:rgba(5,8,20,.5);
  --toast-bg:#26336A;
  --toast-borda:#45558F;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --sombra-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.25);
  --sombra-2:0 18px 40px -16px rgba(0,0,0,.60), 0 4px 10px -4px rgba(0,0,0,.35);
}


/* ==========================================================================
   02  TOKENS RESPONSIVOS
   Quebras: 560 celular · 720 tabela→cartões · 900 menu lateral→barra+folha ·
            1024 pilares em 4 colunas · 1200 menu completo da home
   ========================================================================== */
@media (max-width:559px){
  :root{--fs-num:32px}
}
@media (min-width:560px){
  :root{--gutter:24px}
}
@media (min-width:900px){
  :root{--gutter:32px}
}


/* ==========================================================================
   03  BASE GLOBAL  §3.4
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:80px;
  background:var(--ground);
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--ground);
  color:var(--ink-2);
  font-family:var(--fonte);
  font-size:var(--fs-16);
  line-height:var(--lh-16);
  font-weight:400;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Margens zeradas: o espaçamento vertical é sempre desenhado por classe. */
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{color:var(--titulo);font-weight:700}
h1{font-size:var(--fs-28);line-height:var(--lh-28);text-wrap:balance}
h2{font-size:var(--fs-20);line-height:var(--lh-20)}
h3{font-size:var(--fs-16);line-height:1.35}
p{max-width:68ch}
@media (max-width:559px){
  h1{font-size:24px}
}

a{color:var(--azul);text-underline-offset:.18em;text-decoration-thickness:1px}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
label,summary,[role="button"],[role="radio"],[role="option"]{-webkit-tap-highlight-color:transparent}

img,svg,video,canvas{max-width:100%}
img{height:auto}
svg{flex:none}

button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
input,select,textarea{font-size:16px}
button{cursor:pointer}
table{border-collapse:collapse}
[hidden]{display:none !important}

kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;padding:3px 6px;
  font:700 12px/1 var(--fonte);letter-spacing:.02em;
  color:var(--ink-3);background:var(--surface-2);
  border:1px solid var(--linha-2);border-radius:999px;
  white-space:nowrap;
}
@media (hover:none){
  kbd{display:none}
}

::selection{background:rgba(5,160,221,.28)}

time,.num{font-variant-numeric:tabular-nums}


/* ==========================================================================
   04  FOCO, PULAR PARA O CONTEÚDO, SR-ONLY  §4.12
   ========================================================================== */
/* Par para iOS 15.0–15.3 (sem :focus-visible): :focus + :focus:not(:focus-visible) */
:focus{outline:3px solid var(--foco);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* Sobre navy/azul o anel é ciano */
.topo :focus,.faixa :focus,.degrade :focus,.sobre-degrade :focus,.rodape :focus,.painel-mockup:focus,.toast:not(.toast--erro) :focus{outline-color:var(--ciano)}
.topo :focus-visible,.faixa :focus-visible,.degrade :focus-visible,.sobre-degrade :focus-visible,.rodape :focus-visible,.painel-mockup:focus-visible,.toast:not(.toast--erro) :focus-visible{outline-color:var(--ciano)}

/* Destinos de foco programático (h1 da tela, main) não ganham anel */
h1[tabindex="-1"]:focus,main[tabindex="-1"]:focus,.pop:focus,[data-foco-silencioso]:focus{outline:none}

.pular{
  position:absolute;z-index:100;
  top:0;left:max(16px, env(safe-area-inset-left,0px));
  transform:translateY(-120%);
  padding:14px 18px;
  background:var(--acao-bg);color:var(--acao-txt);
  font:700 14px/1.2 var(--fonte);
  text-decoration:none;
  border-radius:0 0 8px 8px;
}
.pular:focus{transform:none;outline:3px solid var(--ciano);outline-offset:0}

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}


/* ==========================================================================
   05  UTILITÁRIOS DE APOIO
   ========================================================================== */
/* Contêiner da home: SÓ recuo lateral (o vertical fica em outra classe). */
.conteiner{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:max(var(--gutter), env(safe-area-inset-left,0px)) max(var(--gutter), env(safe-area-inset-right,0px));
}

/* Código de negócio (POP-REC-003, TRN-1042…) — use com translate="no" */
.cod{
  font-family:var(--fonte);
  font-weight:700;
  color:var(--azul);
  letter-spacing:.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
a.cod{text-decoration:none}

/* CPF com botão "Copiar CPF" (SGQ.cpf.comCopia) */
.cpf{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.cpf .bt--icone{margin-block:-10px}

/* Complemento de célula ("· 19 aval.") */
.compl{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--ink-4);font-weight:400}

.lista-limpa{list-style:none;margin:0;padding:0}

/* Superfície genérica para blocos de conteúdo (cartão de aprovação, QR…) */
.bloco{
  background:var(--surface);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
  padding:20px;
}
@media (min-width:900px){
  .bloco{padding:24px}
}

/* Seção com título h2 */
.secao{display:grid;gap:16px;margin-top:32px}
/* Item de grade não cresce até a largura mínima da tabela: a tabela rola dentro da própria
   caixa, não a página. Vale para qualquer grade sua que tenha uma tabela dentro. */
.secao > *{min-width:0}
.secao__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.secao__tit{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:700;color:var(--titulo)}
.secao__sub{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--ink-3)}

/* Lista de dados (<dl class="dados">) */
.dados{display:grid;gap:16px 32px;margin:0}
.dados > div{display:grid;gap:4px;min-width:0}
.dados dt{font-size:13px;line-height:1.4;font-weight:700;color:var(--ink-3)}
.dados dd{margin:0;font-size:var(--fs-16);line-height:var(--lh-16);color:var(--ink-2)}
@media (min-width:720px){
  .dados--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dados--2col > .dados__largo{grid-column:1/-1}
}

/* Etiqueta não clicável (público-alvo, unidades) */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{
  display:inline-flex;align-items:center;
  padding:4px 12px;
  font-size:var(--fs-14);line-height:1.4;font-weight:600;
  color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--linha);border-radius:999px;
}

/* Barra de progresso (ciência, conclusão, barras de indicador) */
.progresso{
  position:relative;display:block;
  height:8px;border-radius:999px;
  background:var(--linha);overflow:hidden;
}
.progresso > span{
  position:absolute;inset:0 auto 0 0;
  background:var(--azul-med);border-radius:inherit;
}

/* Link solto com alvo de toque */
.link-solto{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
  font-weight:700;color:var(--azul);
  text-decoration:none;
}
@media (min-width:900px) and (pointer:fine){
  .link-solto{min-height:32px}
}

/* Resposta ao toque dos links soltos (o destaque azul nativo do toque está desligado) */
.link-solto:active,.trilha a:active,.aviso__txt a:active,.nota-mockup a:active{background-color:var(--destaque);border-radius:4px}

/* Troca de número por ação da pessoa: sai em 90 ms, entra em 150 ms */
.troca{transition:opacity 150ms var(--ease-out)}
.troca.is-oculto{opacity:0;transition-duration:90ms}


/* Pessoa com as iniciais num círculo (v3: responsáveis no Plano de ação) */
.pessoa{display:inline-flex;align-items:center;gap:10px;min-width:0;line-height:1.3}
.iniciais{
  display:inline-grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--neutro-bg);color:var(--titulo);
  font-size:12px;line-height:1;font-weight:700;letter-spacing:.02em;
}
.iniciais--voce{background:var(--acao-bg);color:var(--acao-txt)}

/* Rodapé (v3): faixa navy com o logo branco, a linha do sistema, os links e a
   pílula do mockup (que mora aqui e não cobre conteúdo). Home e casca usam o mesmo. */
.rodape{
  background:var(--rodape);
  color:rgba(247,247,247,.82);
  font-size:var(--fs-14);line-height:1.5;
  padding:24px 0 calc(26px + env(safe-area-inset-bottom,0px));
}
.rodape__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  max-width:1200px;margin-inline:auto;
  padding-inline:max(var(--gutter), env(safe-area-inset-left,0px)) max(var(--gutter), env(safe-area-inset-right,0px));
}
.rodape__logo{display:block;flex:none;height:32px;width:auto;max-width:none}
.rodape__txt{flex:1 1 260px;min-width:0;max-width:none;font-variant-numeric:tabular-nums}
.rodape__links{display:flex;flex-wrap:wrap;gap:4px}
.rodape__link{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 12px;
  border:0;border-radius:999px;background:none;
  font:inherit;font-weight:600;color:#F7F7F7;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out);
}
.rodape__link:active{background:rgba(255,255,255,.16)}
@media (hover:hover) and (pointer:fine){
  .rodape__link:hover{background:rgba(255,255,255,.10)}
}
@media (max-width:559px){
  .rodape__in{flex-direction:column;align-items:flex-start;gap:12px}
  .rodape__txt{flex:none}
  .rodape__links{margin-inline-start:-12px}
}


/* ==========================================================================
   06  DEGRADÊ, BARRA SUPERIOR E MARCA  §4.1 (v3 · 11/10/2026)
   A barra fica SOBRE o degradê da marca (.degrade): sem fundo próprio e sem
   grudar no topo. Marca: logo Wqualis (branco sobre o degradê, navy sobre
   fundo claro). Abaixo de 360 px entra só o selo do logo (ícone).
   Nunca esticar, filtrar ou recortar o logo: só a altura é fixada.
   ========================================================================== */
.degrade{
  position:relative;isolation:isolate;
  background:var(--degrade);
  color:#F7F7F7;
}
/* Onda da marca atrás do conteúdo (SVG com 3 senoides, aria-hidden) */
.onda{
  position:absolute;right:0;top:96px;z-index:-1;
  width:62%;height:300px;
  color:var(--ciano);opacity:.16;
  pointer-events:none;
}
@media (max-width:559px){
  .onda{width:100%;opacity:.10}
}

.topo{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:12px;
  min-height:calc(64px + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-inline:max(var(--gutter), env(safe-area-inset-left,0px)) max(var(--gutter), env(safe-area-inset-right,0px));
  background:transparent;
  color:#F7F7F7;
}
@media (min-width:900px){
  .topo{min-height:calc(72px + env(safe-area-inset-top,0px))}
}
/* Miolo opcional, alinhado ao contêiner de 1200 px da home */
.topo__in{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:12px;
  max-width:calc(1200px - 2 * var(--gutter));
  margin-inline:auto;
}

.marca{
  display:inline-flex;align-items:center;flex:none;
  min-height:44px;min-width:44px;
  margin-inline-end:8px;
  border-radius:6px;
  color:inherit;
}
.marca img{display:block;height:30px;width:auto;max-width:none}
@media (min-width:560px){
  .marca img{height:34px}
}
.marca .marca__ic{display:none}
@media (max-width:359px){
  .marca .marca__logo{display:none}
  .marca .marca__ic{display:block;width:36px;height:36px}
}
/* v3: o texto "SGQ" e o divisor ao lado do logo saíram. A classe fica sem efeito. */
.sistema{display:none}
/* 320–559 px: os ícones de 44 px já têm área de toque própria; sem espaço entre eles. */
@media (max-width:559px){
  .topo__in{column-gap:0}
}

/* Logo com duas versões (navy no claro, branco no escuro): <img class="so-claro"> + <img class="so-escuro"> */
.so-escuro{display:none !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .so-claro{display:none !important}
  :root:not([data-theme="light"]) .so-escuro{display:block !important}
}
:root[data-theme="dark"] .so-claro{display:none !important}
:root[data-theme="dark"] .so-escuro{display:block !important}


/* ==========================================================================
   07  BOTÕES  §4.2 (v3: pílula, caixa de frase, 600)
   ========================================================================== */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;
  padding:0 18px;
  border-radius:var(--r-bt);
  border:1px solid var(--linha-2);
  background:var(--surface);
  color:var(--azul);
  font:600 14px/1.2 var(--fonte);
  letter-spacing:0;
  text-transform:none;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
@media (pointer:coarse), (max-width:899px){
  .bt{min-height:44px}
}
.bt svg{width:16px;height:16px}
.bt:active{transform:scale(.97)}

.bt--primario{background:var(--acao-bg);color:var(--acao-txt);border-color:var(--acao-bg)}
.bt--sec{background:var(--surface);color:var(--azul);border-color:var(--linha-2)}
.bt--fantasma{background:transparent;color:var(--azul);border-color:transparent}
.bt--limao{background:var(--limao);color:#1E2A57;border-color:var(--limao)}
.bt--icone{width:44px;height:44px;min-height:44px;padding:0;gap:0}
.bt--icone svg{width:18px;height:18px}
.bt--icone.bt--sec,.bt--icone.bt--fantasma{color:var(--ink-2)}
.bt--bloco{display:flex;width:100%;min-height:48px}

/* Seta de menu ("Exportar ▾") */
.bt__caret{width:16px !important;height:16px !important;margin-inline-end:-4px}

@media (hover:hover) and (pointer:fine){
  .bt--primario:not([disabled],[aria-disabled="true"]):hover{background:var(--acao-hover);border-color:var(--acao-hover)}
  .bt--sec:not([disabled],[aria-disabled="true"]):hover{background:var(--hover);border-color:var(--azul-med)}
  .bt--fantasma:not([disabled],[aria-disabled="true"]):hover{background:var(--surface-2)}
  .bt--limao:not([disabled],[aria-disabled="true"]):hover{border-color:#1E2A57}
}

/* Desabilitado: cores sólidas do "em breve", nunca opacity */
.bt[disabled],.bt[aria-disabled="true"]{
  background:var(--breve-bg);
  color:var(--breve-txt);
  border-color:var(--breve-borda);
  cursor:not-allowed;
  transform:none;
}
.bt--fantasma[disabled],.bt--fantasma[aria-disabled="true"]{background:transparent;border-color:transparent}
.bt[disabled]:active,.bt[aria-disabled="true"]:active{transform:none}
.bt[aria-busy="true"]{cursor:progress}


/* ==========================================================================
   08  SELOS  §4.3 (v3: cantos de 6 px, CAIXA ALTA, 700)
   ========================================================================== */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  min-height:22px;
  padding:5px 8px;
  border-radius:var(--r-selo);
  background:var(--neutro-bg);color:var(--neutro-txt);
  font:700 12px/1 var(--fonte);
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  vertical-align:middle;
}
.selo__ic{font-weight:800;line-height:1}
.selo--crit{background:var(--crit-bg);color:var(--crit-txt)}
.selo--aten{background:var(--aten-bg);color:var(--aten-txt)}
.selo--ok{background:var(--ok-bg);color:var(--ok-txt)}
.selo--info{background:var(--info-bg);color:var(--info-txt)}
.selo--neutro{background:var(--neutro-bg);color:var(--neutro-txt)}
.selo--disp{background:var(--disp-bg);color:var(--disp-txt);border-radius:3px}
@media (max-width:559px){
  .selo{white-space:normal;line-height:1.2}
}


/* ==========================================================================
   09  CARD DE MÓDULO  §4.4 (v3: cartão branco, sombra leve, selo ao lado do nome)
   Marcação (o nome é h3 ou h4 conforme a hierarquia da página):
   <li class="mod [mod--faixa] [mod--breve]" [aria-disabled="true"]>
     <h4 class="mod__nome"><a class="mod__link" href="…">Documentos</a></h4>
     <p class="mod__desc">…</p>
     <div class="mod__pe">
       <span class="mod__vivo"><b>4</b> com revisão vencida</span>
       <span class="selo selo--disp">Disponível</span>
     </div>
   </li>
   O .mod__pe se desfaz na grade: o selo sobe para o lado do nome e o número vivo
   fica no pé, separado por um filete. Na faixa (≥ 1024 px) o pé volta a ser a
   coluna da direita (número vivo em cima, selo embaixo).
   ========================================================================== */
.mod{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"nome selo" "desc desc" "vivo vivo";
  column-gap:12px;row-gap:6px;
  min-width:0;
  padding:20px 22px 18px;
  background:var(--surface);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
  transition:
    border-color var(--t-hover) var(--ease-out),
    background-color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.mod__corpo{display:contents}
.mod__nome{
  grid-area:nome;align-self:start;
  margin:0;
  font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.1px;
  color:var(--titulo);
}
.mod__link{color:inherit;text-decoration:none}
.mod__link::after{
  content:"";
  position:absolute;inset:0;
  border-radius:var(--r-card);
}
/* O anel de foco contorna o card inteiro, não só o nome */
.mod__link:focus,.mod__link:focus-visible{outline:none}
.mod__link:focus-visible::after{outline:3px solid var(--foco);outline-offset:4px}
.mod__desc{
  grid-area:desc;
  margin-bottom:8px;
  font-size:var(--fs-14);line-height:var(--lh-14);
  color:var(--ink-3);
}
.mod__pe{display:contents}
.mod__pe > .selo{grid-area:selo;align-self:start;justify-self:end;margin-top:1px}
.mod__vivo{
  grid-area:vivo;align-self:end;
  padding-top:14px;
  border-top:1px solid var(--linha);
  font-size:var(--fs-14);line-height:1.4;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.mod__vivo b{font-weight:700;color:var(--azul)}
.mod:not(.mod--breve):active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .mod:not(.mod--breve):hover{border-color:rgba(5,160,221,.45)}
}

/* Em breve: cor sólida legível, borda tracejada, sem link, sem hover, sem opacity */
.mod--breve{
  background:var(--breve-bg);
  border:1px dashed var(--breve-borda);
  box-shadow:none;
}
.mod--breve .mod__nome{color:var(--breve-nome)}
.mod--breve .mod__desc{color:var(--breve-txt)}
.mod--breve .mod__pe{
  display:flex;align-items:center;gap:6px;
  grid-area:vivo;align-self:end;
  padding-top:14px;
  border-top:1px solid var(--breve-borda);
  font-size:13px;line-height:1.4;font-weight:600;
  color:var(--breve-txt);
}

/* Faixa (Institucional na home): lado a lado só a partir de 1024 px. */
@media (min-width:1024px){
  .mod--faixa{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    grid-template-areas:"nome pe" "desc pe";
    column-gap:24px;row-gap:4px;
    align-content:center;
    padding:22px 24px;
  }
  .mod--faixa .mod__desc{margin:0}
  .mod--faixa .mod__pe{
    grid-area:pe;
    display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;
    text-align:right;
  }
  .mod--faixa .mod__pe > .selo{margin:0}
  .mod--faixa .mod__vivo{padding-top:0;border-top:0}
}

/* Celular (< 560 px): o mesmo cartão, mais compacto; o "em breve" sem descrição. */
@media (max-width:559px){
  .mod{padding:16px 18px}
  .mod__nome{font-size:16px}
  .mod__vivo{padding-top:10px}
  .mod--breve{grid-template-areas:"nome nome" "vivo vivo";grid-template-rows:auto auto;padding:14px 18px}
  .mod--breve .mod__desc{display:none}
  .mod--breve .mod__pe{padding-top:4px;border-top:0}
}


/* ==========================================================================
   10  CABEÇALHO DE TELA E TRILHA  (SGQ.cabecalho)
   Na casca dos módulos o cabeçalho fica SOBRE o degradê (.tela > .cab): título
   leve e grande, texto claro, ações em pílula clara e a régua de métricas.
   ========================================================================== */
.cab{display:grid;gap:12px;margin-bottom:24px;min-width:0}

.trilha ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  font-size:var(--fs-14);line-height:1.4;
  color:var(--ink-3);
}
.trilha li{display:inline-flex;align-items:center;min-width:0}
.trilha li + li::before{
  content:"›";
  content:"›" / "";
  margin:0 10px;
  color:var(--ink-4);
}
.trilha a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  min-width:44px;          /* "Início" tem 36 px de texto: o alvo chega a 44 */
  font-weight:600;color:var(--azul);
  text-decoration:none;
}
.trilha [aria-current="page"]{font-weight:400;color:var(--ink-3)}
@media (min-width:900px) and (pointer:fine){
  .trilha a{min-height:32px}
}
@media (hover:hover) and (pointer:fine){
  .trilha a:hover{text-decoration:underline;text-underline-offset:3px}
}
/* Trilha sobre o degradê (linha superior da casca) */
.sobre-degrade .trilha ol{color:rgba(247,247,247,.78)}
.sobre-degrade .trilha li + li::before{color:rgba(247,247,247,.6)}
.sobre-degrade .trilha a{color:#F7F7F7}
.sobre-degrade .trilha [aria-current="page"]{color:rgba(247,247,247,.86)}

.cab__linha{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;
}
.cab__textos{flex:1 1 420px;min-width:0}
.cab__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
.cab__titulo{
  margin:0;
  font-size:var(--fs-28);line-height:var(--lh-28);font-weight:700;
  color:var(--titulo);
  text-wrap:balance;
}
.cab__sub{margin-top:6px;max-width:88ch;font-size:var(--fs-16);line-height:var(--lh-16);color:var(--ink-3)}
.cab__metricas{
  margin-top:8px;
  font-size:var(--fs-14);line-height:var(--lh-14);
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.cab__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cab__mais{display:none}
.cab__mais svg{width:22px !important;height:22px !important}
.cab .aviso--previa{margin-top:4px}

/* Régua de métricas (SGQ.cabecalho quando cada pedaço das métricas começa por número) */
.cab__regua{
  list-style:none;margin:8px 0 0;padding:16px 0 0;
  display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  border-top:1px solid var(--linha);
}
.metrica{min-width:0;padding:0 20px;border-left:1px solid var(--linha)}
.metrica:first-child{padding-left:0;border-left:0}
.metrica__n{
  display:block;
  font-size:32px;line-height:1.1;font-weight:300;letter-spacing:-.8px;
  color:var(--titulo);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.metrica__r{
  display:flex;align-items:center;gap:6px;
  margin-top:4px;
  font-size:13px;line-height:1.35;
  color:var(--ink-3);
}
.metrica__ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--crit-txt)}

@media (max-width:559px){
  .cab__titulo{font-size:24px}
  .cab__acoes{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
  }
  .cab__acoes > .cab__pri{order:-1;width:100%;min-height:48px}
  .cab__acoes > .cab__sec{display:none}
  .cab__mais{display:inline-flex;min-height:48px}
  .cab__regua{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  .metrica,.metrica:first-child{padding:12px 0;border-left:0;border-bottom:1px solid var(--linha)}
  .metrica:nth-child(even){padding-left:16px;border-left:1px solid var(--linha)}
  .cab__regua--impar .metrica:first-child{grid-column:1 / -1}
  .cab__regua--impar .metrica:nth-child(even){padding-left:0;border-left:0}
  .cab__regua--impar .metrica:nth-child(odd):not(:first-child){padding-left:16px;border-left:1px solid var(--linha)}
  .metrica__n{font-size:28px}
}
/* < 400 px: rótulos longos ("+ Novo treinamento", "Li e estou ciente da v5") quebravam em
   2 linhas ao lado do "⋯ Mais". O Mais fica só com o ícone (48 × 48; o nome "Mais ações"
   continua no aria-label) e a ação principal ganha a largura. */
@media (max-width:399px){
  .cab__acoes > .cab__pri{padding-inline:12px}
  .cab__mais,.tela > .cab .cab__mais{width:48px;min-width:48px;padding:0;gap:0}   /* o cabeçalho sobre o degradê dava 20 px de recheio e espremia o ícone para 6 px */
  .cab__mais svg{max-width:none}
  .cab__mais .bt__txt{display:none}
}

/* ---- Cabeçalho sobre o degradê (casca dos módulos) ---------------------- */
.tela > .cab{
  margin:0;
  padding:4px 0 32px;
  color:#F7F7F7;
}
.tela > .cab .cab__titulo{
  font-size:44px;line-height:1.08;font-weight:300;letter-spacing:-1.3px;
  color:#FFFFFF;
}
.tela > .cab .cab__sub{font-size:17px;line-height:1.5;color:rgba(247,247,247,.86)}
.tela > .cab .cab__metricas{color:rgba(247,247,247,.8)}
.tela > .cab a:not(.bt){color:var(--ciano)}
.tela > .cab .cod{color:var(--ciano)}
.tela > .cab .compl{color:rgba(247,247,247,.74)}
.tela > .cab .cab__meta{color:rgba(247,247,247,.86);font-size:var(--fs-14)}
/* Textos de apoio que os módulos põem no meta e no sub (com cor própria de fundo claro) herdam a cor clara */
.tela > .cab :is(.cab__meta,.cab__sub,.cab__metricas) :not(a,.cod,.selo,.selo *,.bt,.bt *,svg,svg *){color:inherit}
.tela > .cab :focus,.tela > .cab :focus-visible{outline-color:var(--ciano)}
.tela > .cab .cab__regua{border-top-color:rgba(255,255,255,.20);margin-top:12px}
.tela > .cab .metrica{border-color:rgba(255,255,255,.20)}
.tela > .cab .metrica__n{color:#FFFFFF}
.tela > .cab .metrica__r{color:rgba(247,247,247,.80)}
.tela > .cab .metrica__ponto{background:#FF9E9E}
/* Ações em pílula clara (primária) e contorno claro (demais) */
.tela > .cab .bt{min-height:44px;padding-inline:20px;font-size:15px}
.tela > .cab .bt--primario{background:#F7F7F7;border-color:#F7F7F7;color:#053a99;box-shadow:0 4px 14px rgba(10,20,60,.25)}
.tela > .cab .bt--sec{background:transparent;border-color:rgba(255,255,255,.45);color:#F7F7F7}
.tela > .cab .bt--fantasma{color:#F7F7F7}
.tela > .cab .bt--icone.bt--sec,.tela > .cab .bt--icone.bt--fantasma{color:#F7F7F7}
.tela > .cab .bt[disabled],.tela > .cab .bt[aria-disabled="true"]{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.32);
  color:rgba(247,247,247,.74);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .tela > .cab .bt--primario:not([disabled],[aria-disabled="true"]):hover{background:#FFFFFF;border-color:#FFFFFF}
  .tela > .cab .bt--sec:not([disabled],[aria-disabled="true"]):hover,
  .tela > .cab .bt--fantasma:not([disabled],[aria-disabled="true"]):hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.7)}
}
/* Faixa de prévia (fase 2/3) sobre o degradê: vidro claro, texto claro */
.tela > .cab .aviso{background:rgba(255,255,255,.10);color:#F7F7F7;box-shadow:inset 3px 0 0 rgba(247,247,247,.6)}
.tela > .cab .aviso > svg{color:#F7F7F7}
@media (max-width:899px){
  .tela > .cab .cab__titulo{font-size:38px;letter-spacing:-1px}
}
@media (max-width:559px){
  .tela > .cab{padding-bottom:28px}
  .tela > .cab .cab__titulo{font-size:32px;letter-spacing:-.8px}
  .tela > .cab .cab__sub{font-size:16px}
  .tela > .cab .metrica,.tela > .cab .metrica:first-child{border-bottom-color:rgba(255,255,255,.18)}
  .tela > .cab .bt{min-height:48px}
}

/* Ações dentro da folha "Mais" */
.folha__acoes{display:grid;gap:8px}
.folha__acoes > .bt{width:100%;min-height:48px}


/* ==========================================================================
   10b PAINEL DA TELA (.tela__painel) — v3
   Na casca, tudo o que vem depois do cabeçalho mora num painel branco que
   "sobe" sobre o degradê (a casca embrulha sozinha, depois de cada desenho).
   As abas, quando abrem o painel, encostam no topo dele; o degradê termina
   na base delas. No celular o painel ocupa a largura toda (a largura útil
   do conteúdo continua a mesma de antes: 288 px em 320).
   ========================================================================== */
.tela__painel{
  --painel-pad:24px;          /* recuo interno; quem quiser encostar nas bordas usa margin negativa com ele */
  position:relative;
  min-width:0;
  padding:var(--painel-pad);
  background:var(--surface);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-2);
}
.tela__painel > *{min-width:0}
.tela__painel > :first-child,
.tela__painel > .sr-only:first-child + *{margin-top:0}
.tela__painel > :last-child{margin-bottom:0}
.tela__painel > .abas:first-child,
.tela__painel > .sr-only:first-child + .abas{
  margin:calc(-1 * var(--painel-pad)) calc(-1 * var(--painel-pad)) 20px;
  padding-inline:calc(var(--painel-pad) - 8px);
}
/* Dentro do painel, blocos, tabelas e cartões ficam sem sombra (só a borda fina) */
.tela__painel .bloco,
.tela__painel .tabela-cx,
.tela__painel .cartao{box-shadow:none}
@media (max-width:899px){
  .tela__painel{--painel-pad:20px}
}
@media (max-width:559px){
  .tela__painel{
    --painel-pad:max(var(--gutter), env(safe-area-inset-left,0px));
    margin-inline:calc(-1 * var(--painel-pad));
    padding:16px var(--painel-pad) 24px;
    border-inline:0;
    border-radius:var(--r-folha) var(--r-folha) 0 0;
    box-shadow:0 -8px 24px -16px rgba(10,20,60,.35);
  }
  .tela__painel > .abas:first-child,
  .tela__painel > .sr-only:first-child + .abas{
    margin:-16px calc(-1 * var(--painel-pad)) 16px;
    padding-inline:8px;
  }
}


/* ==========================================================================
   11  ABAS  §4.5 (v3: 50 px, 15 px; ativa em azul com filete limão)
   ========================================================================== */
.abas{
  display:flex;gap:16px;
  margin-bottom:24px;
  border-bottom:1px solid var(--linha);
  overflow-x:auto;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.abas::-webkit-scrollbar{display:none}
.abas a{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  min-height:50px;
  padding:0 6px;
  font-size:15px;line-height:1.2;font-weight:600;
  color:var(--ink-3);
  text-decoration:none;
  white-space:nowrap;
  border-radius:6px 6px 0 0;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.abas a[aria-current="page"]{
  font-weight:700;
  color:var(--azul);
  box-shadow:inset 0 -3px 0 var(--limao);
}
.abas a:focus-visible{outline-offset:-3px}
.abas__n{
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-12);line-height:1;font-weight:700;
  padding:4px 8px;border-radius:999px;
  background:var(--neutro-bg);color:var(--ink-3);
}
.abas a[aria-current="page"] .abas__n{background:var(--info-bg);color:var(--info-txt)}
@media (hover:hover) and (pointer:fine){
  .abas a:hover{color:var(--titulo)}
  .abas a[aria-current="page"]:hover{color:var(--azul)}
}
.abas a:active{background:var(--hover)}
@media (max-width:559px){
  .abas{
    gap:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    padding-inline-end:32px;   /* a última aba não fica sob o esmaecido */
  }
  .abas a{min-height:48px}
}


/* ==========================================================================
   12  FILTROS E BARRA DA LISTA  §4.5 (v3: pílulas separadas de 36 px; ativo navy)
   <div class="barra-lista">
     <div class="filtros" role="group" aria-label="Filtrar por situação">…</div>
     <input type="search" class="campo campo--busca" aria-label="…">
     <p class="contador" aria-live="polite">5 de 148 documentos</p>
   </div>
   ========================================================================== */
.barra-lista{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 14px;
  margin-bottom:16px;
}
.barra-lista > .filtros{flex:1 1 auto}
.barra-lista > .campo--busca{flex:1 1 380px;max-width:440px;width:auto;min-width:0}   /* o texto de exemplo cabe inteiro */
@media (max-width:719px){
  .barra-lista > .campo--busca{flex-basis:100%}
}
.contador{
  flex-basis:100%;
  max-width:none;          /* sem isto o p{max-width:68ch} o fazia subir para a linha da busca */
  margin:0;
  font-size:13px;line-height:1.4;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px}
.filtro{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  height:36px;
  padding:0 13px;
  border:1px solid var(--linha-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:var(--fs-14);line-height:1;font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.filtro::after{content:"";position:absolute;inset:-5px 0}   /* área de toque de 44 px (34 por dentro da borda + 5 + 5); não invade a linha de baixo (espaço de 10 px) */
.filtro:active{transform:scale(.97)}
.filtro[aria-pressed="true"]{
  background:var(--filtro-on-bg);
  border-color:var(--filtro-on-bg);
  color:var(--filtro-on-txt);
}
.filtro__n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-3)}
.filtro[aria-pressed="true"] .filtro__n{color:inherit;opacity:.8}
.filtro__vencido{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-12);font-weight:700;
  color:var(--crit-txt);
}
.filtro__vencido::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--crit-txt);
}
.filtro[aria-pressed="true"] .filtro__vencido{color:inherit}
.filtro[aria-pressed="true"] .filtro__vencido::before{box-shadow:0 0 0 1.5px var(--filtro-on-txt)}
@media (hover:hover) and (pointer:fine){
  .filtro:not([aria-pressed="true"]):hover{background:var(--hover);border-color:var(--azul-med)}
}


/* ==========================================================================
   13  TABELA ↔ CARTÕES  §4.6 (v3: densa, cabeçalho cinza-azulado, divisórias sutis)
   SGQ.tabela monta <div class="tabela-rola"><div class="tabela-cx">…</div></div> + <ul class="cartoes">.
   .tabela-rola ganha .tem-mais enquanto houver colunas escondidas à direita: sombra na borda.
   Atenção: as faixas de 720–1023 px abaixo (1ª coluna fixa, .col-1024) são pela largura da
   JANELA. Com o menu lateral dos módulos (224 px), de 1024 a ~1280 px a caixa é tão estreita
   quanto num tablet; cada tela trata essa faixa (ver GUIA RÁPIDO do núcleo, SGQ.tabela).
   ========================================================================== */
.tabela-rola{position:relative}
.tabela-rola::after{
  content:"";
  position:absolute;top:1px;bottom:1px;right:1px;
  width:28px;
  border-radius:0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0;
  background:linear-gradient(90deg, transparent, var(--rola-sombra));
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-hover) var(--ease-out);
}
.tabela-rola.tem-mais::after{opacity:1}
.tabela-cx{
  position:relative;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  background:var(--surface);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
}
.tabela{
  width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:var(--fs-14);line-height:1.45;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tabela thead tr{background:var(--tabela-cab)}
.tabela th{
  padding:9px 12px;
  background:var(--tabela-cab);
  border-bottom:1px solid var(--linha);
  font-size:13px;line-height:1.35;font-weight:600;
  color:var(--ink-3);
  text-align:left;vertical-align:bottom;
}
.tabela td{
  height:44px;
  padding:11px 12px;
  border-top:1px solid var(--linha-sutil);
  vertical-align:middle;
}
.tabela th:first-child,.tabela td:first-child{padding-left:16px}
.tabela th:last-child,.tabela td:last-child{padding-right:16px}
.tabela tbody tr:first-child td{border-top:0}
.tabela tbody tr{background:var(--surface)}
.tabela .dir{text-align:right}
.tabela a{font-weight:700;color:var(--azul);text-decoration:none}
.tabela__link{font-weight:700}
.tabela tr[data-href]{cursor:pointer}
.tabela tfoot td{
  border-top:1px solid var(--linha);
  background:var(--tabela-cab);
  font-weight:700;color:var(--ink-2);
}
@media (hover:hover) and (pointer:fine){
  .tabela tr[data-href]:hover{background:var(--hover)}
  .tabela a:hover{text-decoration:underline}
}
.tabela tr[data-href]:active{background:var(--linha-sutil)}
/* No toque, o link da linha (código/título) também tem 44 px, sem aumentar a linha
   (a margem negativa usa o recuo de 11 px da célula). A linha inteira continua clicável. */
@media (pointer:coarse){
  .tabela td > a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-block:-10px}
}
/* Primeira coluna fixa enquanto a tabela rola dentro da caixa */
@media (min-width:720px) and (max-width:1023px){
  .tabela th:first-child,.tabela td:first-child{
    position:sticky;left:0;z-index:1;
    background:inherit;
    box-shadow:inset -1px 0 0 var(--linha);
  }
  .tabela .col-1024{display:none}
}
.tabela tr.is-destaque{animation:sgq-destaque 900ms var(--ease-out) 1}

/* Cartões (< 720 px) */
.cartoes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cartao{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);     /* o código nunca encolhe; o selo quebra linha se precisar */
  grid-template-areas:"cod selo" "tit tit" "meta meta";
  gap:4px 12px;
  align-items:center;
  min-height:72px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-1);
  color:var(--ink-2);
  text-decoration:none;
  transition:background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.cartao--sem-cod{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tit selo" "meta meta"}
/* Sem código e com selo: o selo desce para baixo do título. Lado a lado, um selo longo
   ("PARCIALMENTE ATINGIDO", "⊘ DESQUALIFICADO") espremia o título em 320–375 px até
   quebrar no meio da palavra. Cartão sem selo continua como acima (sem linha vazia). */
.cartao--sem-cod:has(> .cartao__selo){grid-template-columns:minmax(0,1fr);grid-template-areas:"tit" "selo" "meta"}
.cartao--sem-cod > .cartao__selo{justify-self:start;text-align:left}
.cartao__cod{grid-area:cod}
.cartao__selo{grid-area:selo;justify-self:end;text-align:right;min-width:0}
.cartao__tit{
  grid-area:tit;
  font-size:var(--fs-16);line-height:1.35;font-weight:600;
  color:var(--titulo);
  overflow-wrap:break-word;   /* quebra entre palavras; só parte uma palavra que não cabe sozinha */
}
.cartao__meta{
  grid-area:meta;
  font-size:13px;line-height:1.45;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
a.cartao:active{transform:scale(.98)}
.cartao.is-destaque{animation:sgq-destaque 900ms var(--ease-out) 1}
.cartoes__rodape{
  padding:12px 16px;
  font-size:var(--fs-14);font-weight:700;
  color:var(--ink-2);
}
@media (hover:hover) and (pointer:fine){
  a.cartao:hover{background:var(--hover)}
}

@media (min-width:720px){
  .cartoes{display:none}
}
@media (max-width:719px){
  .tabela-rola,.tabela-cx{display:none}   /* o invólucro some junto: não ocupa vaga (nem gap) numa grade */
}

/* Estado vazio */
.vazio{
  display:grid;justify-items:center;gap:8px;
  padding:32px 16px;
  text-align:center;
  background:var(--surface);
  border:1px dashed var(--linha-2);
  border-radius:var(--r-card);
  color:var(--ink-3);
}
.vazio__txt{font-size:var(--fs-16);color:var(--ink-2)}


/* ==========================================================================
   14  AVISO E NOTA DO MOCKUP  §4.7
   ========================================================================== */
.aviso{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;
  background:var(--surface-2);
  border-left:4px solid var(--azul-med);
  border-radius:10px;              /* v3: nada quadrado */
  font-size:var(--fs-14);line-height:var(--lh-14);
  color:var(--ink-2);
}
.aviso > svg{margin-top:1px}
.aviso__txt{min-width:0;flex:1}
.aviso__txt a{font-weight:700;padding-block:13px}   /* área de toque ≥ 44 px sem mudar a altura da linha (19 de texto + 26) */
.aviso--aten{background:var(--aten-bg);border-left-color:var(--aten-txt)}
.aviso--aten > svg{color:var(--aten-txt)}
.aviso--crit{background:var(--crit-bg);border-left-color:var(--crit-txt)}
.aviso--crit > svg{color:var(--crit-txt)}
.aviso--previa,.aviso--neutro{background:var(--breve-bg);border-left-color:var(--breve-txt)}

.nota-mockup{
  padding:10px 14px;
  background:transparent;
  border:1px dashed var(--azul-med);
  border-radius:var(--r-campo);
  font-size:13px;line-height:1.5;
  color:var(--ink-3);
}
.nota-mockup__cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin-bottom:2px}
.nota-mockup__et{
  font-size:12px;line-height:1.4;font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--azul);
}
.nota-mockup__ref{font-size:12px;line-height:1.4;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.nota-mockup__ref::before{content:"·";margin-inline-end:6px}
html[data-notas="off"] .nota-mockup{display:none}


/* ==========================================================================
   15  CAMPOS  §4.8
   <div class="form-item">
     <label class="rotulo" for="x">Título <span class="rotulo__obr">(obrigatório)</span></label>
     <input class="campo" id="x" aria-describedby="x-ajuda x-erro">
     <p class="ajuda" id="x-ajuda">…</p>
     <p class="erro" id="x-erro" hidden>…</p>
   </div>
   ========================================================================== */
.form-item{display:grid;gap:6px;min-width:0;align-content:start}
.rotulo{
  font-size:var(--fs-14);line-height:1.4;font-weight:700;
  color:var(--ink-2);
}
.rotulo__obr{font-weight:400;color:var(--ink-3)}
.ajuda{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.erro{
  display:flex;align-items:flex-start;gap:6px;
  margin:0;
  font-size:13px;line-height:1.45;font-weight:600;
  color:var(--crit-txt);
}
.erro svg{width:16px;height:16px;margin-top:1px}

.campo{
  display:block;
  width:100%;
  min-height:48px;
  padding:0 14px;
  font-family:var(--fonte);
  font-size:16px;line-height:1.4;font-weight:400;
  color:var(--ink);
  background-color:var(--surface);
  border:1.5px solid var(--linha-2);
  border-radius:8px;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.campo::placeholder{color:var(--ink-4);opacity:1}
.campo:focus{border-color:var(--foco)}
.campo[aria-invalid="true"]{border-color:var(--crit-txt)}
textarea.campo{min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
select.campo{
  padding-right:40px;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  cursor:pointer;
}
.campo--busca{
  min-height:44px;height:44px;
  padding-left:42px;
  background-image:var(--lupa);
  background-repeat:no-repeat;
  background-position:14px center;
  background-size:18px 18px;
}
.campo--busca::-webkit-search-decoration{-webkit-appearance:none}
.campo:disabled,.campo[readonly]{background-color:var(--breve-bg);color:var(--breve-txt);border-color:var(--breve-borda)}
.campo:disabled{cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .campo:not(:disabled):not([readonly]):hover{border-color:var(--azul-med)}
}

/* Caixa de seleção / opção com alvo de 44 px */
.caixa{
  display:flex;align-items:flex-start;gap:12px;
  min-height:44px;
  padding:10px 0;
  font-size:var(--fs-16);line-height:1.4;
  color:var(--ink-2);
  cursor:pointer;
}
.caixa input{
  flex:none;
  width:22px;height:22px;
  margin:0;
  accent-color:var(--azul);
  cursor:pointer;
}


/* ==========================================================================
   16  SEGMENTADO (.seg) E ESCALA 0–10 (.escala)
   Opção única curta: <div class="seg" role="group" aria-label="Modalidade">
     <button type="button" aria-pressed="true">Presencial</button>…</div>
   Com indicador que desliza (Meus / Da equipe): acrescente .seg--deslize,
   um <span class="seg__ind" aria-hidden="true"></span> como 1º filho e
   style="--seg-n:2;--seg-i:0" (quantos botões; índice do ativo).
   Sobre navy (.faixa) o visual troca sozinho; fora dela use .seg--navy.
   ========================================================================== */
.seg{
  position:relative;
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(min-content,1fr);   /* larguras iguais quando cabe; nunca quebra palavra */
  min-height:44px;
  border-radius:999px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--linha-2);
  isolation:isolate;
  max-width:100%;
}
.seg--bloco{display:grid;width:100%}
.seg > button{
  position:relative;z-index:1;
  min-height:44px;
  padding:6px 16px;
  border:0;border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  font-size:var(--fs-14);line-height:1.2;font-weight:600;
  overflow-wrap:normal;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
@media (max-width:559px){
  .seg > button{padding:6px 10px}
}
.seg > button[aria-pressed="true"]{background:var(--acao-bg);color:var(--acao-txt);font-weight:700}
/* Anel por fora do botão: por dentro ele sumia no botão pressionado (--acao-bg e --foco são a
   mesma cor nos dois temas). z-index põe o anel acima do vizinho. */
.seg > button:focus-visible{outline-offset:2px;z-index:2}
@media (hover:hover) and (pointer:fine){
  .seg > button:not([aria-pressed="true"]):hover{background:var(--surface-2)}
}

/* Indicador deslizante (translateX 200 ms) */
.seg--deslize > button[aria-pressed="true"]{background:transparent}
.seg__ind{
  position:absolute;z-index:0;
  top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / var(--seg-n, 2));
  border-radius:999px;
  background:var(--acao-bg);
  transform:translateX(calc(100% * var(--seg-i, 0)));
  transition:transform var(--t-seg) var(--ease-in-out);
  pointer-events:none;
}
.seg__n{font-variant-numeric:tabular-nums;font-weight:800;margin-inline-start:6px}

/* Sobre navy */
.faixa .seg,.degrade .seg,.seg--navy{
  background:rgba(247,247,247,.12);
  box-shadow:inset 0 0 0 1px rgba(247,247,247,.3);
}
.faixa .seg > button,.degrade .seg > button,.seg--navy > button{color:#F7F7F7}
.faixa .seg > button[aria-pressed="true"],.degrade .seg > button[aria-pressed="true"],.seg--navy > button[aria-pressed="true"]{color:#1E2A57;background:#F7F7F7}
.faixa .seg--deslize > button[aria-pressed="true"],.degrade .seg--deslize > button[aria-pressed="true"],.seg--navy.seg--deslize > button[aria-pressed="true"]{background:transparent}
.faixa .seg__ind,.degrade .seg__ind,.seg--navy .seg__ind{background:#F7F7F7;box-shadow:0 2px 8px rgba(10,20,60,.25)}
@media (hover:hover) and (pointer:fine){
  .faixa .seg > button:not([aria-pressed="true"]):hover,
  .degrade .seg > button:not([aria-pressed="true"]):hover,
  .seg--navy > button:not([aria-pressed="true"]):hover{background:rgba(247,247,247,.1)}
}

/* Escala 0–10: 6 + 5 em 320 px; 11 numa linha quando cabe (≥ 524 px de largura útil).
   Precisa de 284 px livres (6 × 44 + 5 × 4): cabe num celular de 320 com recuo de 16 px,
   mas NÃO dentro de outro cartão com recuo extra. Envolva em .escala-cx. */
.escala-cx{container-type:inline-size}
.escala{
  display:grid;
  grid-template-columns:repeat(6,44px);
  gap:8px 4px;
}
@container (min-width:524px){
  .escala{grid-template-columns:repeat(11,44px)}
}
.escala [role="radio"]{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  padding:0;
  border:1.5px solid var(--linha-2);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink-2);
  font-size:var(--fs-16);font-weight:700;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.escala [role="radio"]:active{transform:scale(.97)}
.escala [role="radio"][aria-checked="true"]{background:var(--acao-bg);border-color:var(--acao-bg);color:var(--acao-txt)}
.escala__legenda{display:flex;justify-content:space-between;gap:8px;max-width:284px;margin-top:6px;font-size:var(--fs-12);color:var(--ink-3)}
@container (min-width:524px){
  .escala__legenda{max-width:524px}
}
@media (hover:hover) and (pointer:fine){
  .escala [role="radio"]:not([aria-checked="true"]):hover{border-color:var(--azul);background:var(--surface-2)}
}


/* ==========================================================================
   17  BARRA DE AÇÃO DO FORMULÁRIO  §4.8
   ========================================================================== */
.barra-acao{
  position:sticky;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--surface);
  border-top:1px solid var(--linha);
}
form:focus-within .barra-acao{position:static}   /* não flutuar sobre o teclado do iPhone */
@media (max-width:559px){
  .barra-acao > .bt--primario,.barra-acao > .bt--limao{flex:1 1 auto;min-height:48px}
}


/* ==========================================================================
   18  AÇÕES DA BARRA: BUSCA, SINO, PERFIL  §4.9  (SGQ.montarAcoesTopo)
   Versão clara por padrão; dentro de .topo ou .sobre-degrade vira a versão
   sobre o degradê (vidro claro, ícones claros, avatar claro).
   ========================================================================== */
.acoes-topo{
  display:flex;align-items:center;gap:0;
  margin-inline-start:auto;
  flex:none;
}
@media (min-width:900px){
  .acoes-topo{gap:8px}
}
.acoes-topo__item{position:relative;display:inline-flex}

/* Busca: pílula de 220 px (≥ 900 px); abaixo vira só a lupa (44 × 44). */
.busca{
  display:inline-flex;align-items:center;gap:10px;
  min-height:40px;width:220px;min-width:0;
  padding:0 8px 0 14px;
  border:1px solid var(--linha-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-3);
  font-size:var(--fs-14);line-height:1;font-weight:400;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.busca svg{width:16px;height:16px}
.busca__txt{flex:1;text-align:left}
.busca kbd{border-radius:999px;padding:5px 8px;font-weight:600}
.busca:active{transform:scale(.97)}
:is(.topo,.sobre-degrade) .busca{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
  color:rgba(247,247,247,.86);
}
:is(.topo,.sobre-degrade) .busca kbd{color:rgba(247,247,247,.86);background:rgba(255,255,255,.12);border-color:transparent}
@media (pointer:coarse){
  .busca{min-height:44px}
}
@media (hover:hover) and (pointer:fine){
  .busca:hover{background:var(--hover);border-color:var(--azul-med)}
  :is(.topo,.sobre-degrade) .busca:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
}
@media (max-width:899px){
  .busca,:is(.topo,.sobre-degrade) .busca{
    width:44px;height:44px;min-width:0;min-height:44px;
    padding:0;
    justify-content:center;
    border-color:transparent;
    background:transparent;
  }
  .busca svg{width:20px;height:20px}
  .busca{color:var(--ink-2)}
  :is(.topo,.sobre-degrade) .busca{color:#F7F7F7}
  .busca__txt,.busca kbd{display:none}
}

/* Ícones da barra (sino) */
.acoes-topo .bt--icone{background:transparent;border-color:transparent;color:var(--ink-2)}
.acoes-topo .bt--icone svg{width:20px;height:20px}
:is(.topo,.sobre-degrade) .acoes-topo .bt--icone{color:#F7F7F7}
@media (hover:hover) and (pointer:fine){
  .acoes-topo .bt--icone:hover{background:var(--surface-2)}
  :is(.topo,.sobre-degrade) .acoes-topo .bt--icone:hover{background:rgba(255,255,255,.10)}
}
.acoes-topo .bt--icone:active{background:var(--linha)}
:is(.topo,.sobre-degrade) .acoes-topo .bt--icone:active{background:rgba(255,255,255,.18)}

.sino{position:relative}
.sino__ponto{
  position:absolute;top:10px;right:11px;
  width:7px;height:7px;border-radius:50%;
  background:var(--limao);
  box-shadow:0 0 0 1.5px var(--navy);
  pointer-events:none;
}
:is(.topo,.sobre-degrade) .sino__ponto{box-shadow:0 0 0 2px var(--degrade-meio)}

/* Perfil */
.perfil{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:44px;min-height:44px;
  padding:4px;
  border:0;border-radius:999px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.perfil:active{transform:scale(.97)}
.avatar{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:50%;
  background:var(--acao-bg);
  color:var(--acao-txt);
  font-size:13px;line-height:1;font-weight:700;
  letter-spacing:.02em;
}
:is(.topo,.sobre-degrade) .avatar{background:#F7F7F7;color:#1E2A57}
.perfil__txt{display:none;flex-direction:column;gap:1px;padding-inline-end:8px;line-height:1.25}
.perfil__nome{font-size:var(--fs-14);font-weight:600;color:var(--titulo);white-space:nowrap}
.perfil__papel{font-size:var(--fs-12);font-weight:400;color:var(--ink-3);white-space:nowrap}
:is(.topo,.sobre-degrade) .perfil__nome{color:#F7F7F7}
:is(.topo,.sobre-degrade) .perfil__papel{color:rgba(247,247,247,.78)}
@media (min-width:1180px){
  .perfil{padding:4px 10px 4px 4px}
  .perfil__txt{display:flex}
}
@media (hover:hover) and (pointer:fine){
  .perfil:hover{background:var(--surface-2)}
  :is(.topo,.sobre-degrade) .perfil:hover{background:rgba(255,255,255,.08)}
}


/* ==========================================================================
   19  POPOVER (.pop) E MENU SUSPENSO
   Aberto: opacity + scale .96→1 em 160 ms (origem no canto do botão);
   fecha só com opacity em 120 ms. < 560 px: largura toda, sem escala.
   ========================================================================== */
.pop{
  position:fixed;z-index:50;
  width:340px;
  max-width:calc(100vw - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px;
  background:var(--surface);
  color:var(--ink-2);
  border:1px solid var(--linha);
  border-radius:12px;
  box-shadow:var(--sombra-pop);
  transform-origin:top right;
  animation:sgq-pop-entra var(--t-pop) var(--ease-out);
}
.pop--esq{transform-origin:top left}
.pop--cima{transform-origin:bottom right}
.pop--largo{animation-name:sgq-surge}
.pop.is-saindo{animation:sgq-some 120ms ease-out forwards;pointer-events:none}
.pop--menu{width:auto;min-width:220px;max-width:min(320px, calc(100vw - 32px))}
.pop--perfil{width:260px}

.pop__cab{
  display:grid;gap:2px;
  padding:8px 10px 12px;
  margin-bottom:4px;
  border-bottom:1px solid var(--linha);
}
.pop__tit{font-size:var(--fs-14);line-height:1.3;font-weight:700;color:var(--titulo)}
.pop__sub{font-size:var(--fs-12);line-height:var(--lh-12);font-weight:600;color:var(--ink-3)}
.pop__lista{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pop__item{
  display:flex;align-items:flex-start;gap:10px;
  width:100%;
  min-height:44px;
  padding:10px;
  border:0;border-radius:8px;
  background:transparent;
  color:var(--ink-2);
  font-size:var(--fs-14);line-height:1.45;font-weight:400;
  text-align:left;text-decoration:none;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out);
}
.pop__item > svg{color:var(--azul);margin-top:1px}
.pop__item[aria-disabled="true"]{color:var(--breve-txt);cursor:not-allowed}
.pop__item:focus-visible{outline-offset:-3px}
.pop__corpo{display:grid;gap:2px;min-width:0}
.pop__meta{display:block;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--ink-4)}
@media (hover:hover) and (pointer:fine){
  .pop__item:not([aria-disabled="true"]):hover{background:var(--surface-2)}
}
.pop__item:not([aria-disabled="true"]):active{background:var(--linha)}

/* Menu dentro da folha (celular) */
.menu-folha{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu-folha .pop__item{min-height:48px;font-size:var(--fs-16);align-items:center}


/* ==========================================================================
   20  DIÁLOGO DE BUSCA  §4.9 — sem animação; tela cheia no celular
   ========================================================================== */
dialog.busca-dlg{
  padding:0;border:0;
  width:min(640px, calc(100% - 32px));
  max-width:none;
  max-height:76vh;
  margin:12vh auto auto;
  overflow:hidden;
  border-radius:12px;
  background:var(--surface);
  color:var(--ink-2);
  box-shadow:var(--sombra-pop);
}
dialog.busca-dlg[open]{display:flex;flex-direction:column}
dialog.busca-dlg::backdrop{background:var(--veu)}
.busca-dlg__cab{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 16px;
  border-bottom:1px solid var(--linha);
}
.busca-dlg__cab > svg{color:var(--ink-3)}
.busca-dlg__campo{
  flex:1;min-width:0;
  min-height:48px;
  padding:0 4px;
  border:0;background:transparent;
  font-size:18px;line-height:1.3;
  color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.busca-dlg__campo::placeholder{color:var(--ink-4);opacity:1}
.busca-dlg__campo:focus,.busca-dlg__campo:focus-visible{outline:none}
.busca-dlg__campo::-webkit-search-cancel-button{-webkit-appearance:none}
.busca-dlg__cab:focus-within{box-shadow:inset 0 -2px 0 var(--foco)}
.busca-dlg__dica{padding:12px 16px 4px;font-size:13px;line-height:1.4;color:var(--ink-3);max-width:none}
.busca-dlg__grupo{padding:12px 16px 4px;font-size:var(--fs-12);line-height:var(--lh-12);font-weight:700;color:var(--ink-3)}
.busca-dlg__res{
  list-style:none;margin:0;
  padding:4px 8px 8px;
  overflow-y:auto;
  overscroll-behavior:contain;
  flex:1;
}
.busca-dlg__op{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"tipo tit" "tipo sub";
  align-items:center;
  gap:2px 12px;
  min-height:52px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}
.busca-dlg__op.is-ativo{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--azul-med)}
.busca-dlg__op:active{background:var(--linha)}
.busca-dlg__tipo{
  grid-area:tipo;
  min-width:92px;
  font-size:var(--fs-12);line-height:1.2;font-weight:700;
  color:var(--ink-4);
}
.busca-dlg__tit{grid-area:tit;min-width:0;font-size:var(--fs-14);line-height:1.4;color:var(--ink-2)}
.busca-dlg__tit .cod{margin-inline-end:8px}
.busca-dlg__sub{grid-area:sub;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--ink-3)}
.busca-dlg__vazio{padding:16px;font-size:var(--fs-14);color:var(--ink-3)}
.busca-dlg__pe{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  padding:10px 16px;
  border-top:1px solid var(--linha);
  font-size:var(--fs-12);line-height:1.4;
  color:var(--ink-3);
}
.busca-dlg__pe span{display:inline-flex;align-items:center;gap:4px}
@media (hover:none){
  .busca-dlg__pe{display:none}
}
@media (max-width:559px){
  dialog.busca-dlg{
    width:100%;max-width:100%;
    height:100vh;height:100dvh;
    max-height:none;
    margin:0;
    border-radius:0;
  }
  .busca-dlg__cab{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .busca-dlg__res{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .busca-dlg__tipo{min-width:76px}
}


/* ==========================================================================
   21  TOAST  §4.10 — acima da pílula do mockup
   ========================================================================== */
.toasts{
  position:fixed;z-index:70;
  right:max(16px, env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));   /* v3: a pílula do mockup saiu do canto */
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  width:min(420px, calc(100vw - 32px));
  pointer-events:none;
}
.toasts__grupo{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%}
.toasts__grupo:empty{display:none}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  max-width:100%;
  padding:12px 16px;
  background:var(--toast-bg);
  color:#F7F7F7;
  border:1px solid var(--toast-borda);
  border-radius:12px;
  box-shadow:var(--sombra-pop);
  font-size:var(--fs-14);line-height:1.45;font-weight:600;
  animation:sgq-toast-entra var(--t-toast) var(--ease-out);
}
.toast > svg{color:var(--ciano);margin-top:1px}
.toast__txt{flex:1;min-width:0}
.toast--erro{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--crit-txt);
  border-left-width:4px;
  padding-right:6px;
}
.toast--erro > svg{color:var(--crit-txt)}
.toast__fechar{margin:-10px 0 -10px 4px}
.toast.is-saindo{animation:sgq-toast-sai 200ms var(--ease-out) forwards;pointer-events:none}
@media (max-width:559px){
  .toasts{left:16px;right:16px;width:auto;align-items:stretch}
  .toasts__grupo{align-items:stretch}
}


/* ==========================================================================
   22  FOLHA  §4.11 — sobe de baixo (< 720 px); centrada a partir de 720 px
   ========================================================================== */
dialog.folha{
  padding:0;border:0;
  width:100%;
  max-width:560px;
  max-height:85vh;
  max-height:85dvh;
  margin:auto auto 0;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:var(--r-folha) var(--r-folha) 0 0;
  background:var(--surface);
  color:var(--ink-2);
  box-shadow:var(--sombra-pop);
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
dialog.folha[open]{animation:sgq-folha-entra 260ms var(--ease-out)}
dialog.folha.is-fechando{animation:sgq-folha-sai 200ms var(--ease-out) forwards}
dialog.folha::backdrop{background:var(--veu);animation:sgq-surge 200ms var(--ease-out)}
.folha__cx{padding:0 16px}
.folha__cab{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;
  margin:0 -16px 8px;
  padding:8px 8px 8px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--linha);
}
.folha__tit{font-size:18px;line-height:1.3;font-weight:700;color:var(--titulo)}
.folha__cab .bt{min-height:44px}
.folha__corpo{display:grid;gap:12px;padding-bottom:4px}
@media (min-width:720px){
  dialog.folha{
    max-width:520px;
    max-height:min(85vh, 720px);
    margin:auto;
    border-radius:var(--r-folha);
    padding-bottom:16px;
  }
  dialog.folha[open]{animation:sgq-pop-entra 200ms var(--ease-out)}
  dialog.folha.is-fechando{animation:sgq-some 150ms ease-out forwards}
}


/* ==========================================================================
   23  PAINEL DO MOCKUP  §8 — chrome, não produto
   ========================================================================== */
.painel-mockup{
  position:fixed;z-index:60;
  right:max(16px, env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  padding:0 12px 0 6px;
  border:1px solid var(--limao);
  border-radius:999px;
  background:#1E2A57;
  color:#F7F7F7;
  font-size:13px;line-height:1;font-weight:700;
  box-shadow:var(--sombra-pop);
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.painel-mockup:active{transform:scale(.97)}
.painel-mockup__et{
  padding:6px 8px;
  border-radius:999px;
  background:var(--limao);
  color:#1E2A57;
  font-size:12px;line-height:1;font-weight:800;
  letter-spacing:.06em;
}
.painel-mockup svg{width:16px;height:16px}
/* v3: a pílula mora num lugar da página (rodapé, pé do menu lateral) e não cobre conteúdo. */
.painel-mockup--no-lugar{position:static;flex:none;box-shadow:none;border-color:rgba(255,255,255,.22);background:transparent;padding:6px 14px 6px 6px;font-size:14px;font-weight:600}
.painel-mockup--no-lugar .painel-mockup__txt{display:inline}
.painel-mockup--claro{border-color:var(--linha-2);color:var(--titulo)}
.painel-mockup--claro .painel-mockup__et{color:#1E2A57}
.painel-mockup[aria-expanded="true"] svg{transform:rotate(-90deg)}
@media (max-width:559px){
  .painel-mockup:not(.painel-mockup--no-lugar) .painel-mockup__txt{display:none}
  .painel-mockup:not(.painel-mockup--no-lugar){padding-right:10px}
}
@media (hover:hover) and (pointer:fine){
  .painel-mockup:hover{background:#053a99}
  .painel-mockup--no-lugar:hover{background:rgba(255,255,255,.10)}
  .painel-mockup--claro:hover{background:var(--hover)}
}

.pop--painel{width:340px;z-index:75;padding:16px}   /* aberto de propósito: fica acima dos toasts */
.painel{display:grid;gap:18px}
.painel__cab{display:grid;gap:2px}
.painel__tit{font-size:var(--fs-16);line-height:1.3;font-weight:700;color:var(--titulo)}
.painel__sub{font-size:13px;line-height:1.4;color:var(--ink-3)}
.painel__grupo{display:grid;gap:8px;min-width:0}
.painel__rot{
  font-size:13px;line-height:1.4;font-weight:700;
  color:var(--ink-2);
}
.painel__grupo > .seg{width:100%;display:grid}
.painel__pe{
  padding-top:12px;
  border-top:1px solid var(--linha);
  font-size:var(--fs-12);line-height:var(--lh-12);
  color:var(--ink-4);
}
.opcoes{display:grid;gap:2px}
.opcao{
  display:flex;align-items:center;gap:12px;
  min-height:44px;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-out);
}
.opcao input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--azul);cursor:pointer}
.opcao__txt{display:grid;gap:1px;min-width:0}
.opcao__nome{font-size:var(--fs-14);line-height:1.3;font-weight:600;color:var(--ink-2)}
.opcao__desc{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--ink-4)}
.opcao:has(input:checked){background:var(--surface-2)}
.opcao:has(input:checked) .opcao__nome{font-weight:700;color:var(--titulo)}
@media (hover:hover) and (pointer:fine){
  .opcao:hover{background:var(--surface-2)}
}
.opcao:active{background:var(--linha)}


/* ==========================================================================
   24  ANIMAÇÕES — só transform, opacity e cor; nada acima de 300 ms
   (exceção do brief: destaque de retorno à lista, 900 ms, uma vez)
   ========================================================================== */
@keyframes sgq-pop-entra{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes sgq-surge{from{opacity:0}to{opacity:1}}
@keyframes sgq-some{from{opacity:1}to{opacity:0}}
@keyframes sgq-toast-entra{
  from{opacity:0;transform:translateY(100%)}
  to{opacity:1;transform:none}
}
@keyframes sgq-toast-sai{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(8px)}
}
@keyframes sgq-folha-entra{
  from{transform:translateY(100%)}
  to{transform:none}
}
@keyframes sgq-folha-sai{
  from{transform:none}
  to{transform:translateY(100%)}
}
@keyframes sgq-destaque{
  from{background-color:var(--destaque)}
}
@keyframes sgq-destaque-parado{
  0%,87%{background-color:var(--destaque)}
}


/* ==========================================================================
   25  MOVIMENTO REDUZIDO
   Tira transform/escala/deslize; mantém cor e opacidade em ≤ 120 ms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bt:active,.mod:not(.mod--breve):active,a.cartao:active,.filtro:active,
  .busca:active,.perfil:active,.painel-mockup:active,.escala [role="radio"]:active{transform:none}
  .bt,.mod,.cartao,.filtro,.busca,.perfil,.abas a,.seg > button,.campo,
  .pop__item,.opcao,.painel-mockup,.escala [role="radio"]{transition-duration:120ms}
  .seg__ind{transition:none}
  .painel-mockup[aria-expanded="true"] svg{transform:none}
  .pop,.pop--largo,.pop--cima,.pop--esq{animation:sgq-surge 120ms linear}
  .pop.is-saindo{animation:sgq-some 100ms linear forwards}
  .toast{animation:sgq-surge 120ms linear}
  .toast.is-saindo{animation:sgq-some 100ms linear forwards}
  dialog.folha[open]{animation:sgq-surge 120ms linear}
  dialog.folha.is-fechando{animation:sgq-some 100ms linear forwards}
  dialog.folha::backdrop{animation:none}
  .tabela tr.is-destaque,.cartao.is-destaque{animation:sgq-destaque-parado 900ms linear 1}
  .tabela-rola::after{transition-duration:120ms}
  .troca{transition-duration:120ms}
  .troca.is-oculto{transition-duration:90ms}
}

/* ==========================================================================
   19  BARRA SUPERIOR v4 (.bwq) — estudo de 28/10/2026, inspirada no humanacademy.ai
   Logo à esquerda, menu em pílula de vidro no centro, ações à direita.
   Transparente no topo; vidro fosco depois de rolar (.is-rolou).
   .bwq--sobre-escuro: no topo, por cima do degradê das telas de módulo.
   ========================================================================== */
:root{
  --bwq-h:72px;
  --bwq-vidro:rgba(247,247,247,.72);
  --bwq-pilula:rgba(255,255,255,.66);
  --bwq-borda:rgba(203,213,228,.85);
  --bwq-item:#56627A;
  --bwq-item-on:#1E2A57;
  --bwq-drop:rgba(255,255,255,.94);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bwq-vidro:rgba(20,27,58,.74);
    --bwq-pilula:rgba(30,42,87,.62);
    --bwq-borda:rgba(255,255,255,.14);
    --bwq-item:#EEFBFF;
    --bwq-item-on:#FFFFFF;
    --bwq-drop:rgba(30,42,87,.96);
  }
}
:root[data-theme="dark"]{
  --bwq-vidro:rgba(20,27,58,.74);
  --bwq-pilula:rgba(30,42,87,.62);
  --bwq-borda:rgba(255,255,255,.14);
  --bwq-item:#EEFBFF;
  --bwq-item-on:#FFFFFF;
  --bwq-drop:rgba(30,42,87,.96);
}
.bwq{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding-top:env(safe-area-inset-top,0px);
  transition:background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
  border-bottom:1px solid transparent;
}
.bwq.is-rolou{
  background:var(--bwq-vidro);border-bottom-color:var(--bwq-borda);
  box-shadow:0 10px 30px -18px rgba(20,27,58,.35);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
}
.bwq__in{
  display:flex;align-items:center;gap:16px;height:var(--bwq-h);
  max-width:1280px;margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
}
.bwq__marca{display:inline-flex;align-items:center;flex:none;min-height:44px}
.bwq__logo{display:block;height:30px;width:auto}
.bwq__logo--branco{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bwq__logo--navy{display:none} :root:not([data-theme="light"]) .bwq__logo--branco{display:block} }
:root[data-theme="dark"] .bwq__logo--navy{display:none}
:root[data-theme="dark"] .bwq__logo--branco{display:block}
.bwq--sobre-escuro:not(.is-rolou) .bwq__logo--navy{display:none}
.bwq--sobre-escuro:not(.is-rolou) .bwq__logo--branco{display:block}

.bwq__nav{flex:1;display:none;justify-content:center;min-width:0}
.bwq__pilula{
  list-style:none;margin:0;padding:6px;display:flex;align-items:center;gap:2px;
  border-radius:999px;background:var(--bwq-pilula);border:1px solid var(--bwq-borda);
  box-shadow:0 8px 24px -16px rgba(20,27,58,.35);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
.bwq__pilula > li{position:relative}
.bwq__item{
  display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border:0;border-radius:999px;
  background:transparent;color:var(--bwq-item);cursor:pointer;
  font:600 12px/1 var(--fonte);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.bwq__item.on{color:var(--bwq-item-on);background:var(--surface)}
.bwq__item[aria-expanded="true"]{color:var(--bwq-item-on)}
@media (hover:hover) and (pointer:fine){ .bwq__item:hover{color:var(--bwq-item-on)} }
.bwq__item:focus-visible,.bwq__menu-bt:focus-visible,.bwq__op:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.bwq__caret{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.bwq__item[aria-expanded="true"] .bwq__caret{transform:rotate(180deg)}

.bwq__drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:320px;padding:8px;
  border-radius:18px;background:var(--bwq-drop);border:1px solid var(--bwq-borda);
  box-shadow:0 24px 48px -20px rgba(20,27,58,.45);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.bwq__ops{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bwq__op{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;
  color:var(--titulo);text-decoration:none;font-size:14px;font-weight:600;line-height:1.3;
}
.bwq__op--bt{width:100%;border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
.bwq__op small{font-size:12.5px;font-weight:400;color:var(--ink-3)}
.bwq__op.on{background:var(--surface-2);color:var(--azul)}
.bwq__op.is-breve{color:var(--breve-txt);font-weight:400}
@media (hover:hover) and (pointer:fine){ a.bwq__op:hover{background:var(--hover)} }

.bwq__acoes{margin-inline-start:auto;display:flex;align-items:center}
.bwq__acoes .perfil__txt{display:none}            /* na barra limpa, só o avatar */
.bwq__acoes{gap:4px}
.bwq__acoes .busca__txt,.bwq__acoes .busca kbd{display:none}   /* só a lupa; o atalho Ctrl K continua */
.bwq__acoes .busca{width:44px;min-height:44px;padding:0;justify-content:center}
/* sobre o degradê azul (topo das telas de módulo): pílula translúcida com texto claro */
.bwq--sobre-escuro:not(.is-rolou) .bwq__pilula{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);box-shadow:none}
.bwq--sobre-escuro:not(.is-rolou) .bwq__item{color:rgba(247,247,247,.86)}
.bwq--sobre-escuro:not(.is-rolou) .bwq__item[aria-expanded="true"]{color:#FFFFFF}
.bwq--sobre-escuro:not(.is-rolou) .bwq__item.on{background:#F7F7F7;color:#1E2A57}
@media (hover:hover) and (pointer:fine){ .bwq--sobre-escuro:not(.is-rolou) .bwq__item:not(.on):hover{color:#FFFFFF;background:rgba(255,255,255,.10)} }
.bwq--sobre-escuro:not(.is-rolou) .bwq__acoes .bt--icone{color:#F7F7F7}
.bwq--sobre-escuro:not(.is-rolou) .bwq__acoes .busca{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#F7F7F7}
.bwq--sobre-escuro:not(.is-rolou) .bwq__acoes .avatar{background:#F7F7F7;color:#1E2A57}

.bwq__menu-bt{
  display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 16px 0 14px;border-radius:999px;cursor:pointer;
  background:var(--bwq-pilula);border:1px solid var(--bwq-borda);color:var(--titulo);font:600 13px var(--fonte);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.bwq--sobre-escuro:not(.is-rolou) .bwq__menu-bt{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#F7F7F7}
.bwq__hamb{display:grid;gap:4px}
.bwq__hamb i{display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor}
.bwq__cel{
  margin:0 max(var(--gutter),env(safe-area-inset-left,0px)) 12px;max-height:calc(100dvh - var(--bwq-h) - 24px);overflow:auto;
  padding:10px;border-radius:20px;background:var(--bwq-drop);border:1px solid var(--bwq-borda);
  box-shadow:0 24px 48px -20px rgba(20,27,58,.45);
}
.bwq__cel-grupo{margin-top:8px}
.bwq__cel-tit{margin:6px 12px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
@media (min-width:1024px){
  .bwq__nav{display:flex}
  .bwq__menu-bt,.bwq__cel{display:none}
}
@media (max-width:559px){
  .bwq__menu-txt{display:none}
  .bwq__menu-bt{width:44px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion: reduce){ .bwq,.bwq__caret{transition:none} }

/* Tema escuro (28/10/2026, pedido do Lucas): nada de letra cinza. Texto branco ou
   quase-branco azulado; as etiquetas pequenas em maiúsculas ganham o verde-limão. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.eyebrow,.cab__olho,.tm-olho){color:var(--limao)}
}
:root[data-theme="dark"] :is(.eyebrow,.cab__olho,.tm-olho){color:var(--limao)}

/* Item ativo da barra: sombra leve para se destacar da pílula clara */
.bwq__item.on{box-shadow:0 1px 2px rgba(30,42,87,.10), 0 4px 12px -4px rgba(30,42,87,.22)}