/* ACESSO AO SIGO (16/09/2026): tela inicial, login, troca de senha, Usuários e
   Perfis. Alan: "já vamos implementar a parte de login... com usuários, perfis
   e etc..." e "na hora de abrir o sistema aparecer o logo da itamarati... com o
   nome SIGO - Sistema Integrado de Gestão Operacional". Regra da casa: copiar
   FIELMENTE o Gestão de Jornadas (Login.tsx, PrimeiroAcessoSenha.tsx,
   Usuarios.tsx, Perfis.tsx, CarregandoOverlay.tsx e index.css de lá). Os valores
   daqui são os que o navegador pinta lá (Tailwind resolvido), escritos com os
   tokens do SIGO (style.css) sempre que o token é o mesmo.
   Este arquivo vai no <head>, DEPOIS do style.css: a tela inicial precisa valer
   antes de qualquer JavaScript, e os tokens (--brand, --surface...) vêm de lá.
   Tema escuro: html.dark (tema-inicial.js põe a classe antes da pintura), no
   lugar do body[data-theme='dark'] do Jornadas.
   Vermelho: --brand (#de0013, o vermelho oficial do SIGO) no lugar do #e30613
   do Jornadas claro — mesma decisão do style.css. */

/* ── TELA INICIAL ────────────────────────────────────────────────────────
   Marcação estática no index.html (a CSP proíbe script inline, e ela precisa
   aparecer antes do app.js). O cartão é o do carregamento do Jornadas
   (CarregandoOverlay.tsx: 380 px, raio 20, fundo do cartão a 90% com desfoque,
   "Carregando..." e a barra vermelha indeterminada de 8 px) com a marca por
   cima. A entrada é a do cartão do login de lá (loginCardIn, 620 ms) e os itens
   sobem 8 px em sequência curta. O app.js tira a tela com fecharSplash()
   (mínimo de ~900 ms, saída por opacidade); com o servidor fora do ar ela fica,
   e o boot escreve "Conectando ao servidor…" no rótulo (#sigoSplashAviso).
   Se o JavaScript nunca chegar (erro de rede ou de sintaxe), aos 15 s aparece o
   aviso de falha; o boot do app.js marca .sigo-splash-vivo e o aviso não aparece.
   Só para quem ainda não entrou: com a sessão aberta (e no telão) ela fica
   escondida — ver .sigo-sem-abertura logo abaixo. */
.sigo-splash{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px 16px;
  background:var(--canvas);background-image:var(--fundo-app);
  transition:opacity 240ms ease-out,visibility 0s linear 240ms}
.sigo-splash.sigo-splash-saindo{opacity:0;visibility:hidden;pointer-events:none}
.sigo-splash-falha{max-height:0;margin:0;overflow:hidden;opacity:0;font-size:12px;line-height:1.45;color:var(--destructive);
  animation:sigoSplashFalha 300ms ease 15s forwards}
.sigo-splash-vivo .sigo-splash-falha{animation:none}
@keyframes sigoSplashFalha{to{max-height:80px;margin-top:12px;opacity:1}}
/* SESSÃO JÁ ABERTA, OU O TELÃO (Alan, 17/09/2026): a abertura não aparece. A classe
   vem do tema-inicial.js, antes da primeira pintura. Escondida, ela ainda volta se o
   carregamento travar: sem JavaScript aos 8 s (a tela não fica em branco sem aviso;
   o boot, ao chegar, a esconde de novo), e com o servidor fora do ar ou a sessão
   vencida o boot tira a classe (mostrarSplash). */
.sigo-sem-abertura .sigo-splash{visibility:hidden;animation:sigoAberturaDemorou 0s linear 8s forwards}
.sigo-sem-abertura .sigo-splash.sigo-splash-vivo{animation:none}
@keyframes sigoAberturaDemorou{to{visibility:visible}}
.sigo-splash-cartao{width:min(90%,380px);display:flex;flex-direction:column;align-items:center;padding:24px 20px 18px;text-align:center;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  animation:sigoSplashEntra 620ms cubic-bezier(.21,.85,.22,1) both}
@keyframes sigoSplashEntra{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sigoSplashItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* o PNG da marca é recortado rente e tem o fundo #f03127: a caixa com o mesmo
   vermelho dá o respiro do logo grande sem baixar os 62 KB do .jpg */
.sigo-splash-logo{display:inline-flex;padding:12px 18px;border-radius:12px;background:var(--marca-faixa,#f03127);
  box-shadow:0 8px 20px rgba(222,0,19,.18);animation:sigoSplashItem 520ms cubic-bezier(.21,.85,.22,1) 80ms both}
.sigo-splash-logo img{display:block;width:196px;height:auto}
/* o espaçamento de letras deixa um vão depois do O: o padding do começo devolve o centro */
.sigo-splash-nome{margin:16px 0 0;padding-left:.14em;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:.14em;color:var(--ink);
  animation:sigoSplashItem 520ms cubic-bezier(.21,.85,.22,1) 140ms both}
.sigo-splash-desc{margin:6px 0 0;font-size:13px;line-height:1.4;font-weight:600;color:var(--muted);
  animation:sigoSplashItem 520ms cubic-bezier(.21,.85,.22,1) 200ms both}
.sigo-splash-progresso{align-self:stretch;margin-top:20px;text-align:left;animation:sigoSplashItem 520ms cubic-bezier(.21,.85,.22,1) 260ms both}
.sigo-splash-rotulo{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.sigo-splash-barra{position:relative;height:8px;overflow:hidden;border-radius:999px;background:var(--surface-2)}
.sigo-splash-barra i{position:absolute;top:0;bottom:0;left:0;width:33.333%;border-radius:999px;background:var(--brand);
  animation:carregamento-indeterminado 1.2s ease-in-out infinite}
@keyframes carregamento-indeterminado{0%{transform:translateX(-140%)}50%{transform:translateX(110%)}100%{transform:translateX(340%)}}
html.dark .sigo-splash-cartao{border-color:rgba(171,196,224,.23);box-shadow:0 20px 40px rgba(2,8,18,.45)}
html.dark .sigo-splash-barra{background:var(--accent)}   /* --surface-2 sumiria no cartão escuro */

/* ── LOGIN (Login.tsx; index.css:1884-2817 do Jornadas) ──────────────────
   Nomes de classe do Jornadas, menos o .login-card: o style.css ainda tem o
   .login-card do login antigo, e o cartão aqui usa só o .login-card-modern
   (que também é classe de lá), para nenhuma regra antiga vazar. */
.login-shell{--brand-red:var(--brand);--brand-gray:#d3d6dc;--brand-ink:#181a1f;--brand-paper:#ffffff;
  --login-error-text:#982232;--login-error-bg:#dc41521f;--login-error-border:#dc415247;
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(14px,3.2vw,34px);position:relative;isolation:isolate;
  font-family:'Manrope','Segoe UI',sans-serif;color:var(--brand-ink);
  background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.72),transparent 46%),
    radial-gradient(circle at 84% 82%,color-mix(in srgb,var(--brand-gray) 30%,transparent),transparent 44%),
    repeating-linear-gradient(135deg,rgba(31,36,44,.015) 0 2px,transparent 2px 10px),
    linear-gradient(140deg,color-mix(in srgb,var(--brand-paper) 88%,#f6f7f9),color-mix(in srgb,var(--brand-gray) 46%,#ffffff 54%));
  animation:loginSceneIn 560ms ease both}
html.dark .login-shell{--brand-gray:#8b95a2;--brand-ink:#f2f5fa;--brand-paper:#2b3441;
  --login-error-text:#ffd2d7;--login-error-bg:#ff4d5e29;--login-error-border:#ff4d5e47;
  background:radial-gradient(circle at 20% 14%,rgba(255,255,255,.08),transparent 46%),
    radial-gradient(circle at 84% 82%,color-mix(in srgb,var(--brand-gray) 22%,transparent),transparent 44%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 2px,transparent 2px 12px),
    linear-gradient(140deg,#171a1f,#111419 52%,#0b0d11)}
.login-shell input,.login-shell button,.login-shell label,.login-shell p,.login-shell span{font-family:'Manrope','Segoe UI',sans-serif}
/* as auroras passam da borda (left:-120px): no Jornadas a tela inteira tem
   overflow:hidden, e a lista do acesso de teste sai por um portal. Aqui a lista
   mora dentro do cartão, então só a camada das auroras corta */
.login-auroras{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.login-aurora{position:absolute;border-radius:999px;filter:blur(46px);opacity:.34;pointer-events:none;z-index:0;animation:loginAuroraFloat 9.5s ease-in-out infinite}
.login-aurora-a{width:clamp(220px,32vw,420px);height:clamp(220px,32vw,420px);left:-120px;top:-90px;background:color-mix(in srgb,var(--brand-gray) 72%,transparent)}
.login-aurora-b{width:clamp(220px,28vw,360px);height:clamp(220px,28vw,360px);right:-90px;bottom:-120px;background:color-mix(in srgb,var(--brand-gray) 64%,transparent);animation-delay:-4.2s}
.login-grid{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);--login-left-panel-height:366px;
  grid-template-rows:var(--login-left-panel-height);gap:clamp(16px,2.6vw,28px);align-items:start;position:relative;z-index:1}
.login-grid > .login-brand{height:var(--login-left-panel-height)}
/* RODAPÉ da entrada, o mesmo do Gestão de Jornadas (03/11/2026): «Versão x» e os direitos. A casca ganha uma segunda linha: o cartão fica no meio e o rodapé embaixo */
.login-shell{grid-template-rows:1fr auto}
.login-footer{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;width:100%;padding-top:14px;padding-bottom:env(safe-area-inset-bottom,0px);color:color-mix(in srgb,var(--brand-ink) 68%,var(--brand-paper));font-size:.68rem;line-height:1.4;text-align:center}
.login-version{letter-spacing:.02em;min-height:1.4em}   /* a linha já nasce com a altura dela: a versão chega do servidor um instante depois e nada se mexe */
.login-copyright{font-weight:500}
.login-brand{background:linear-gradient(170deg,#ffffff,#f5f6f8);border:1px solid color-mix(in srgb,var(--brand-gray) 80%,transparent);border-radius:22px;padding:18px;
  box-shadow:0 16px 34px rgba(20,24,30,.12),inset 0 1px 0 rgba(255,255,255,.66);display:grid;grid-template-rows:auto 1fr auto;align-content:stretch;gap:15px;
  animation:loginBrandIn 620ms ease both;min-width:0}
html.dark .login-brand{background:linear-gradient(170deg,#181c22,#12161c);border-color:rgba(255,255,255,.14);box-shadow:0 20px 40px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.05)}
.login-brand-logo-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:0;width:fit-content;padding:0;border:0;
  border-radius:5px;background:transparent;box-shadow:none;overflow:hidden}
/* no Jornadas é a imagem do site (150×60 no máximo); aqui, o PNG da marca numa
   caixa do mesmo vermelho, com os mesmos 150 px de largura e raio 5 */
.login-brand-logo{display:block;width:150px;max-width:150px;padding:10px 14px;border-radius:5px;background:var(--marca-faixa,#f03127);line-height:0}
.login-brand-logo img{display:block;width:100%;height:auto;image-rendering:-webkit-optimize-contrast}
.login-brand-kicker{margin:15px 0 0;display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;line-height:1.2;font-weight:800;color:var(--brand-red)}
/* O LOGO DO SIGO À DIREITA DO DA ITAMARATI (Alan, 03/11/2026: «usa esse logo no sistema… o logo do SIGO era pra estar à direita do logo da Itamarati»; «essa tela era pra estar como estava antes»; «na versão clara use este logo [grafite e dourado]… e na
   versão escura você usa a outra versão»; «vc não deixou em png… colocou cor de fundo… e perdeu o efeito do png»): a faixa vermelha da Itamarati não muda e o resto do cartão (kicker, título, texto, selos) é o de sempre. Um desenho por tema, os DOIS em PNG com fundo
   TRANSPARENTE e SEM cor de fundo nenhuma — o brilho e as bordas suaves do PNG aparecem direto sobre o cartão: CLARO = o logo grafite e dourado; ESCURO = o de letras brancas/prata. São o recorte sem a frase embaixo (nessa altura ela viraria um risco de 2 px; o nome por
   extenso está no título logo abaixo). O tema é a classe `dark` do <html> (não o do Windows), por isso são duas imagens e o CSS mostra uma. */
.login-brand-logos{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.login-brand-sigo{display:flex;align-items:center;padding:0 6px;line-height:0}
.login-brand-sigo img{display:block;height:28px;width:auto}
.login-brand-sigo .sigo-logo-escuro{display:none}
html.dark .login-brand-sigo .sigo-logo-claro{display:none}
html.dark .login-brand-sigo .sigo-logo-escuro{display:block}
.login-brand-copy{display:grid;gap:clamp(6px,.9vw,10px);align-content:center;align-self:center}
.login-brand-title{margin:0;font-size:clamp(24px,3.3vw,36px);line-height:1.16;letter-spacing:-.012em;font-weight:800;max-width:26ch;
  color:color-mix(in srgb,var(--brand-ink) 90%,#1d222a)}
.login-brand-subtitle{margin:0;font-size:clamp(13px,1.4vw,15px);line-height:1.62;max-width:46ch;color:color-mix(in srgb,var(--brand-ink) 58%,#6a6f77)}
.login-brand-highlights{margin-top:0;display:flex;flex-wrap:wrap;gap:8px;align-self:end}
.login-brand-highlights span{padding:8px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand-gray) 82%,transparent);
  background:color-mix(in srgb,var(--brand-gray) 20%,var(--brand-paper));color:color-mix(in srgb,var(--brand-ink) 82%,#2a2f37);font-size:12px;font-weight:700}
html.dark .login-brand-highlights span{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:rgba(245,247,250,.9)}
.login-access-column{width:min(460px,100%);justify-self:end;display:flex;flex-direction:column;gap:10px}
.login-card-modern{width:100%;min-height:var(--login-left-panel-height);background:linear-gradient(170deg,#ffffff,#f5f6f8);
  border:1px solid color-mix(in srgb,var(--brand-gray) 82%,transparent);border-radius:20px;padding:clamp(18px,2.5vw,24px);box-shadow:0 14px 32px rgba(22,24,30,.14);
  justify-self:end;align-self:center;animation:loginCardIn 620ms cubic-bezier(.21,.85,.22,1) both}
html.dark .login-card-modern{background:linear-gradient(170deg,#181c22,#12161c);border-color:rgba(255,255,255,.15);box-shadow:0 16px 34px rgba(0,0,0,.42)}
.login-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.login-title{margin-bottom:4px;font-size:clamp(21px,2.3vw,28px);font-weight:800;line-height:1.12;color:color-mix(in srgb,var(--brand-ink) 90%,#1d222a)}
.login-subtitle{margin:0;font-size:13px;line-height:1.35;color:color-mix(in srgb,var(--brand-ink) 56%,#6f757d)}
/* o botão de tema (btn-outline icon-btn theme-toggle, dentro de .login-head) */
.login-theme-toggle{appearance:none;-webkit-appearance:none;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;padding:0;
  overflow:hidden;line-height:1;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand-gray) 84%,transparent);
  background:color-mix(in srgb,var(--brand-paper) 94%,#f2f3f5);color:color-mix(in srgb,var(--brand-ink) 70%,#4d525a);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
@media (hover:hover){.login-theme-toggle:hover{border-color:color-mix(in srgb,var(--brand-red) 45%,transparent);color:var(--brand-red);background:color-mix(in srgb,var(--brand-red) 8%,var(--brand-paper))}}
.login-theme-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--ring) 50%,transparent);outline-offset:1px}
.login-theme-toggle .icon{width:16px;height:16px}
html.dark .login-theme-toggle{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:rgba(246,248,251,.84)}
@media (hover:hover){html.dark .login-theme-toggle:hover{border-color:color-mix(in srgb,var(--brand-red) 45%,transparent);color:#ff858f}}
.login-form{display:grid;gap:10px}
.login-form label{display:block;margin:0 0 2px;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--brand-ink) 66%,#666c73)}
.login-form input{width:100%;display:block;height:36px;margin:0;padding:8px 12px;border-radius:16px;font:inherit;font-size:13px;box-shadow:none;outline-color:color-mix(in srgb,var(--ring) 50%,transparent);
  background:color-mix(in srgb,var(--brand-paper) 96%,#f4f5f7);border:1px solid color-mix(in srgb,var(--brand-gray) 82%,transparent);
  color:color-mix(in srgb,var(--brand-ink) 86%,#2a2f36);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.login-form input::placeholder{color:color-mix(in srgb,var(--brand-ink) 50%,transparent);opacity:1}
html.dark .login-form input{background:color-mix(in srgb,var(--brand-paper) 90%,#161a21);border-color:rgba(255,255,255,.2);color:#f5f7fb}
.login-form input:focus{border-color:color-mix(in srgb,var(--brand-gray) 72%,#9ea6b0);box-shadow:0 0 0 2px rgba(58,64,72,.14)}
html.dark .login-form input:focus{border-color:rgba(255,255,255,.26);box-shadow:0 0 0 2px rgba(168,177,188,.18)}
.login-password-field{position:relative;width:100%}
.login-form .login-password-input{padding-right:42px}
.login-password-icon-btn{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:26px;height:26px;padding:0;border:0;border-radius:999px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:color-mix(in srgb,var(--brand-ink) 58%,#6f757d);
  transition:color .16s ease,background-color .16s ease}
.login-password-icon-btn .icon{width:16px;height:16px}
@media (hover:hover){.login-password-icon-btn:hover{color:color-mix(in srgb,var(--brand-red) 72%,#9c1f28);background:color-mix(in srgb,var(--brand-paper) 70%,#e9edf2)}}
.login-password-icon-btn:focus-visible{outline:none;color:color-mix(in srgb,var(--brand-red) 72%,#9c1f28);background:color-mix(in srgb,var(--brand-paper) 62%,#e6ebf1);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 24%,transparent)}
html.dark .login-password-icon-btn{color:rgba(237,242,249,.78)}
html.dark .login-password-icon-btn:focus-visible{color:color-mix(in srgb,var(--brand-red) 68%,#ff858f);background:rgba(255,255,255,.06)}
@media (hover:hover){html.dark .login-password-icon-btn:hover{color:color-mix(in srgb,var(--brand-red) 68%,#ff858f);background:rgba(255,255,255,.06)}}
.login-inline-links{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px;position:relative}
.login-first-access-link{padding:0;margin:0;border:0;background:transparent;font-size:12px;font-weight:700;line-height:1.2;
  color:color-mix(in srgb,var(--brand-ink) 58%,#6f757d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media (hover:hover){.login-first-access-link:hover{color:color-mix(in srgb,var(--brand-red) 72%,#9c1f28);text-decoration-thickness:2px}}
.login-first-access-link:focus-visible{outline:none;color:color-mix(in srgb,var(--brand-red) 72%,#9c1f28)}
html.dark .login-first-access-link{color:rgba(237,242,249,.78)}
html.dark .login-first-access-link:focus-visible{color:color-mix(in srgb,var(--brand-red) 68%,#ff858f)}
@media (hover:hover){html.dark .login-first-access-link:hover{color:color-mix(in srgb,var(--brand-red) 68%,#ff858f)}}
.login-info{color:color-mix(in srgb,var(--brand-ink) 74%,#5a6068);background:color-mix(in srgb,var(--brand-gray) 20%,var(--brand-paper));
  border:1px solid color-mix(in srgb,var(--brand-gray) 72%,transparent);border-radius:10px;padding:8px 10px;font-size:12px}
html.dark .login-info{color:rgba(237,242,249,.88);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.login-error{margin-top:2px;padding:9px 11px;border-radius:12px;font-size:12px;color:var(--login-error-text);background:var(--login-error-bg);border:1px solid var(--login-error-border)}
/* btn-green + login-submit */
.login-submit{margin-top:8px;width:100%;min-height:42px;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff5f6;
  background:linear-gradient(92deg,color-mix(in srgb,var(--brand-red) 86%,#7c0008),color-mix(in srgb,var(--brand-red) 94%,#ff6872));
  border:1px solid color-mix(in srgb,var(--brand-red) 78%,transparent);box-shadow:0 4px 11px color-mix(in srgb,var(--brand-red) 18%,transparent);transition:all .18s}
@media (hover:hover){.login-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}}
.login-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.login-submit:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-red) 22%,transparent),0 4px 11px color-mix(in srgb,var(--brand-red) 18%,transparent)}
/* painel "Acesso de teste" (só quando o servidor diz que está disponível) */
.login-test-panel{margin-top:18px;padding:14px;border:1px solid color-mix(in srgb,var(--brand-gray) 76%,transparent);border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--brand-paper) 94%,var(--brand-gray)),color-mix(in srgb,var(--brand-gray) 17%,var(--brand-paper)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
html.dark .login-test-panel{border-color:rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.login-test-heading{display:flex;align-items:center;gap:9px;min-width:0}
.login-test-icon{width:30px;height:30px;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--brand-red) 26%,var(--brand-gray));background:color-mix(in srgb,var(--brand-red) 9%,var(--brand-paper));
  color:color-mix(in srgb,var(--brand-red) 76%,var(--brand-ink))}
.login-test-icon .icon{width:15px;height:15px}
html.dark .login-test-icon{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#ff9aa3}
.login-test-heading-copy{min-width:0;display:grid;gap:1px}
.login-test-title,.login-test-caption{margin:0}
.login-test-title{font-size:12px;font-weight:800;line-height:1.25;color:color-mix(in srgb,var(--brand-ink) 86%,#252a32)}
.login-test-caption{font-size:11px;line-height:1.25;color:color-mix(in srgb,var(--brand-ink) 54%,#717780)}
html.dark .login-test-title{color:#f2f5fa}
html.dark .login-test-caption{color:rgba(237,242,249,.68)}
.login-test-badge{margin-left:auto;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1;
  border:1px solid color-mix(in srgb,var(--brand-red) 28%,var(--brand-gray));color:color-mix(in srgb,var(--brand-red) 78%,var(--brand-ink));
  background:color-mix(in srgb,var(--brand-red) 8%,var(--brand-paper))}
html.dark .login-test-badge{border-color:rgba(255,255,255,.18);color:#ffb0b7;background:rgba(255,255,255,.06)}
.login-test-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.login-test-select-wrap{position:relative;min-width:0}
/* sem escolha, o botão da lista mostra o convite em cinza (placeholder do Jornadas) */
.login-test-select-wrap .cs-btn.cs-vazia span{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.login-test-select-wrap .cs-panel{max-width:min(420px,calc(100vw - 32px))}
.login-test-submit{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 13px;border-radius:10px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--brand-ink) 24%,var(--brand-gray));background:color-mix(in srgb,var(--brand-ink) 86%,var(--brand-red));
  color:#fff;font-size:12px;font-weight:800;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.login-test-submit .icon{width:15px;height:15px}
html.dark .login-test-submit{border-color:rgba(255,255,255,.16);background:linear-gradient(135deg,#34485d,#26394b);color:#f5f8fc}
@media (hover:hover){.login-test-submit:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 5px 12px rgba(24,28,34,.16)}}
.login-test-submit:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-red) 20%,transparent)}
.login-test-submit:disabled{opacity:.46;cursor:not-allowed;filter:saturate(.4)}
@keyframes loginSceneIn{from{opacity:0}to{opacity:1}}
@keyframes loginCardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes loginBrandIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginAuroraFloat{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-16px) translateX(10px)}100%{transform:translateY(0) translateX(0)}}
@media(max-width:980px){
  .login-grid{--login-left-panel-height:auto;grid-template-rows:auto;grid-template-columns:1fr;max-width:680px}
  .login-grid > .login-brand{height:auto}
  .login-card-modern{min-height:auto;align-self:stretch;justify-self:stretch;width:100%}
  .login-access-column{width:100%;justify-self:stretch;min-width:0}
  .login-brand-title{max-width:26ch}
  .login-brand{align-content:center;gap:40px;min-height:auto}
}
@media(max-width:640px){
  .login-shell{padding:14px}
  .login-brand{border-radius:16px;padding:18px}
  .login-grid,.login-card-modern,.login-test-panel{min-width:0;width:100%}
  .login-card-modern{border-radius:16px;padding:18px}
  .login-test-controls{grid-template-columns:minmax(0,1fr)}
  .login-test-submit{width:100%}
  .login-brand-logo{width:124px;padding:8px 12px}   /* o logo de 44 px de altura do Jornadas no celular */
  .login-brand-sigo{padding:0 4px}
  .login-brand-sigo img{height:22px}
  .login-brand-highlights span{font-size:11px;padding:7px 10px}
}
/* campos com 16 px e 40 px de altura no toque: com menos, o Safari do iPhone
   dá zoom na tela ao focar o campo */
@media (hover:none) and (pointer:coarse){
  .login-form input{height:40px;font-size:16px}
  .login-password-icon-btn{width:34px;height:34px;right:4px}
}

/* ── BOTÕES (ui/button.tsx e as classes de ação do index.css do Jornadas) ── */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border:1px solid transparent;border-radius:16px;
  font:inherit;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);transition:all 150ms cubic-bezier(.4,0,.2,1)}
.ac-btn .icon{width:16px;height:16px;transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.ac-btn:disabled{opacity:.5;pointer-events:none}
.ac-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent)}
.ac-btn-sm{height:32px;padding:0 10px;gap:6px;border-radius:14px}
.ac-btn-sm .icon{width:14px;height:14px}
/* rodapé do Editar usuário (22/09/2026, Alan: "coloca uma animação melhorzinha" e,
   depois, "não sobe suave... é um salto"): easeOutExpo em vez de um back-ease com
   overshoot — sobe devagarinho e desacelera, sem pulo; ganha uma sombra tingida da
   própria cor; ao clicar, afunda de volta na hora */
.ac-btn-salvar,.ac-btn-salvar-copiar,.ac-btn-cancelar{transition:background 220ms ease-out,box-shadow 260ms cubic-bezier(.16,1,.3,1),border-color 220ms ease-out,transform 260ms cubic-bezier(.16,1,.3,1)}
.ac-btn-salvar:active,.ac-btn-salvar-copiar:active,.ac-btn-cancelar:active{transform:translateY(0) scale(.97);transition:transform 100ms ease-out}
/* salvar / sucesso (btn-integracao-salvar, btn-success-action) */
.ac-btn-salvar{color:#fff;background:linear-gradient(92deg,oklch(0.54 0.17 155),oklch(0.64 0.17 155));border-color:oklch(0.52 0.17 155)}
@media (hover:hover){
  .ac-btn-salvar:hover{background:linear-gradient(92deg,oklch(0.5 0.17 155),oklch(0.6 0.17 155));transform:translateY(-2px);
    box-shadow:0 8px 18px -4px oklch(0.56 0.17 155 / 45%),0 1px 3px rgba(0,0,0,.1)}
  .ac-btn-salvar:hover .icon{transform:translateY(-1px) scale(1.1)}
}
/* "Salvar e copiar senha" (22/09/2026, Alan: "um verde diferente pra não ficar
   igual"): mesmo molde do Salvar, num verde-azulado (hue 175) — a diferença de cor
   já avisa que os dois botões não fazem exatamente a mesma coisa */
.ac-btn-salvar-copiar{color:#fff;background:linear-gradient(92deg,oklch(0.56 0.13 175),oklch(0.66 0.13 175));border-color:oklch(0.54 0.13 175)}
@media (hover:hover){
  .ac-btn-salvar-copiar:hover{background:linear-gradient(92deg,oklch(0.52 0.13 175),oklch(0.62 0.13 175));transform:translateY(-2px);
    box-shadow:0 8px 18px -4px oklch(0.58 0.13 175 / 45%),0 1px 3px rgba(0,0,0,.1)}
  .ac-btn-salvar-copiar:hover .icon{transform:translateY(-1px) scale(1.1)}
}
/* cancelar (btn-integracao-cancelar) */
.ac-btn-cancelar{color:#fff;background:linear-gradient(92deg,oklch(0.58 0.2 25),oklch(0.68 0.2 25));border-color:oklch(0.62 0.2 25)}
@media (hover:hover){
  .ac-btn-cancelar:hover{background:linear-gradient(92deg,oklch(0.52 0.2 25),oklch(0.62 0.2 25));transform:translateY(-2px);
    box-shadow:0 8px 18px -4px oklch(0.6 0.2 25 / 45%),0 1px 3px rgba(0,0,0,.1)}
  .ac-btn-cancelar:hover .icon{transform:rotate(90deg)}
}
/* inativar (btn-inativar-alerta) */
.ac-btn-inativar{color:#fff;background:linear-gradient(92deg,oklch(0.75 0.16 68),oklch(0.69 0.16 64));border-color:oklch(0.64 0.15 62);box-shadow:0 4px 11px rgba(219,130,34,.28)}
@media (hover:hover){.ac-btn-inativar:hover{background:linear-gradient(92deg,oklch(0.71 0.17 66),oklch(0.64 0.17 62))}}
/* padrão vermelho (btn-corporate) */
.ac-btn-primario{color:var(--brand-texto);border-color:color-mix(in srgb,var(--brand) 76%,transparent);
  background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));
  box-shadow:0 4px 11px color-mix(in srgb,var(--brand) 16%,transparent)}
@media (hover:hover){.ac-btn-primario:hover{filter:brightness(1.06);transform:translateY(-1px)}}
/* contorno (btn-corporate-outline) */
.ac-btn-contorno{color:var(--btn-contorno-texto);background:var(--btn-contorno-fundo);border-color:var(--btn-contorno-borda)}
@media (hover:hover){.ac-btn-contorno:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}}
@media (hover:hover){html.dark .ac-btn-contorno:hover{color:var(--destructive)}}
/* ações da barra: a cor aparece só no hover (btn-toolbar-hover-info; perigo e
   sucesso já são o .btn-perigo/.btn-sucesso do style.css) */
.ac-btn-info:focus-visible:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.5 0.14 250),oklch(0.6 0.14 250));
  border-color:oklch(0.56 0.14 250);box-shadow:0 4px 11px oklch(0.56 0.14 250 / 20%)}
@media (hover:hover){.ac-btn-info:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.5 0.14 250),oklch(0.6 0.14 250));
  border-color:oklch(0.56 0.14 250);box-shadow:0 4px 11px oklch(0.56 0.14 250 / 20%)}}
/* criar: verde fixo com o ícone branco (btn-success-action + !text-white) */
.btn-icone.ac-btn-criar{color:#fff;background:linear-gradient(92deg,oklch(0.54 0.17 155),oklch(0.64 0.17 155));border-color:oklch(0.52 0.17 155)}
.btn-icone.ac-btn-criar:focus-visible{color:#fff;background:linear-gradient(92deg,oklch(0.5 0.17 155),oklch(0.6 0.17 155));border-color:oklch(0.52 0.17 155)}
@media (hover:hover){.btn-icone.ac-btn-criar:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.5 0.17 155),oklch(0.6 0.17 155));border-color:oklch(0.52 0.17 155)}}
/* limpar sem filtro: a borda mais escura e o fundo do campo (border-[oklch(0.8_0.01_250)] bg-card/90) */
.btn-icone.ac-limpar:disabled{border-color:var(--line-forte);background:var(--campo-fundo);pointer-events:none}

/* ── TROCA DE SENHA (PrimeiroAcessoSenha.tsx) ───────────────────────────── */
.senha-shell{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--canvas);color:var(--ink)}
.senha-cartao{width:100%;max-width:448px;display:flex;flex-direction:column;gap:24px;padding:24px 0;border:1px solid var(--cartao-borda);border-radius:16px;
  background:var(--surface);background-image:var(--cartao-fundo);box-shadow:0 18px 55px rgba(15,23,42,.08);animation:loginCardIn 620ms cubic-bezier(.21,.85,.22,1) both}
html.dark .senha-cartao{box-shadow:0 18px 55px rgba(2,8,18,.4)}
.senha-cab{display:grid;gap:8px;padding:0 24px}
.senha-icone{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:16px;
  background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand)}
.senha-icone .icon{width:20px;height:20px}
html.dark .senha-icone{color:var(--destructive)}
.senha-titulo{margin:0;font-size:16px;font-weight:600;line-height:1;color:var(--ink)}
.senha-desc{display:grid;gap:4px;margin:0;font-size:14px;line-height:20px;color:var(--muted)}
.senha-desc span{display:block}
.senha-desc strong{font-weight:600;color:var(--ink)}
.senha-form{display:grid;gap:12px;padding:0 24px;margin:0}
.senha-campo{display:grid;gap:6px;min-width:0}
.senha-rotulo{margin:0;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.senha-com-olho{position:relative}
.ac-input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:36px;margin:0;padding:0 12px;border:1px solid var(--campo-borda);border-radius:16px;
  background:var(--campo-fundo);color:var(--campo-texto);font:inherit;font-size:13px;line-height:20px;font-weight:400;letter-spacing:-.01em;text-transform:none;
  box-shadow:none;outline:none;transition:color var(--t-rapida),box-shadow var(--t-rapida),background-color var(--t-rapida)}
.ac-input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent);opacity:1}
.ac-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.ac-input:disabled,.ac-input[readonly]:not(.ac-input-senha){background:var(--surface-2);color:var(--muted)}
.ac-input:disabled{opacity:.7;cursor:not-allowed}
.senha-com-olho .ac-input{padding-right:40px}
.senha-olho{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--muted);
  transition:color var(--t-rapida)}
@media (hover:hover){.senha-olho:hover{color:var(--ink)}}
.senha-olho .icon{width:16px;height:16px}
.senha-regras{margin:0;font-size:12px;line-height:16px;color:var(--muted)}
.senha-erro{padding:8px 12px;border:1px solid oklch(0.6 0.22 25 / 25%);border-radius:14px;background:oklch(0.6 0.22 25 / 8%);font-size:12px;line-height:16px;color:oklch(0.55 0.22 25)}
html.dark .senha-erro{color:var(--erro)}
.senha-acoes{display:flex;align-items:center;gap:8px;padding-top:8px}
.senha-acoes .ac-btn-salvar{flex:1}
.senha-acoes .ac-btn-contorno{padding:0 16px}
/* o nome da conta para o gerenciador de senhas guardar a senha nova na conta certa */
.ac-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (hover:none) and (pointer:coarse){
  .senha-shell .ac-input{height:40px;font-size:16px}
  .senha-olho{width:40px;height:40px;right:0}
  .senha-acoes .ac-btn{height:40px}
}

/* ── MODAIS (ui/dialog.tsx) ──────────────────────────────────────────────
   Fundo preto a 45% com desfoque de 8 px; conteúdo com raio 16, padding 24,
   fundo --canvas, entrada de 200 ms (opacidade e escala .95). Cabeçalho
   centralizado abaixo de 640 px; rodapé com os botões empilhados, o principal
   por cima (column-reverse). 900: acima da barra do mapa e do menu; abaixo dos
   balões (950). */
@keyframes acFade{from{opacity:0}to{opacity:1}}
@keyframes acModalEntra{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.ac-modal-fundo{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:acFade 150ms ease}
/* o de confirmação por cima de outro modal (a matrícula do Jornadas: z 99/100, fundo a 25%) */
.ac-modal-fundo.ac-modal-sobre{z-index:910;background:rgba(0,0,0,.25);-webkit-backdrop-filter:none;backdrop-filter:none}
.ac-modal{position:relative;display:grid;gap:16px;width:100%;max-width:512px;max-height:92vh;max-height:92dvh;overflow:auto;padding:24px;
  border:1px solid var(--line);border-radius:16px;background:var(--canvas);color:var(--ink);text-align:left;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);animation:acModalEntra 200ms ease}
html.dark .ac-modal{border-color:rgba(171,196,224,.28);box-shadow:0 16px 34px rgba(9,16,28,.44)}
.ac-modal-md{max-width:448px}
.ac-modal-x{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:2px;
  background:none;color:var(--ink);opacity:.7;transition:opacity 150ms}
@media (hover:hover){.ac-modal-x:hover{opacity:1}}
.ac-modal-x:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ac-modal-x .icon{width:16px;height:16px}
.ac-modal-cab{display:flex;flex-direction:column;gap:8px;text-align:center}
.ac-modal-titulo{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;line-height:1;font-weight:600;color:var(--ink)}
.ac-modal-cab > .ac-modal-titulo{justify-content:center}
.ac-modal-titulo .icon{width:16px;height:16px;color:var(--brand)}
.ac-modal-titulo .ac-icone-verde{color:oklch(0.5 0.17 155)}
html.dark .ac-modal-titulo .icon{color:var(--destructive)}
html.dark .ac-modal-titulo .ac-icone-verde{color:var(--ok)}
.ac-modal-desc{margin:0;font-size:14px;line-height:20px;color:var(--muted);white-space:pre-line}
.ac-modal-rodape{display:flex;flex-direction:column-reverse;gap:8px}
@media(min-width:640px){
  .ac-modal-cab{text-align:left}
  .ac-modal-cab > .ac-modal-titulo{justify-content:flex-start}
  .ac-modal-rodape{flex-direction:row;justify-content:flex-end}
}
/* superfícies (modal-aprovacao-surface, modal-novo-usuario-surface) */
.ac-modal.ac-sup-aprov{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 99%,#fff),color-mix(in srgb,var(--surface-2) 56%,#fff));
  border-color:color-mix(in srgb,var(--line) 78%,transparent)}
html.dark .ac-modal.ac-sup-aprov{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,#223447),color-mix(in srgb,var(--surface-2) 84%,#1a2b3d));
  border-color:rgba(171,196,224,.28)}
.ac-modal.ac-sup-novo{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,#fff),color-mix(in srgb,var(--surface-2) 68%,#fff));
  border-color:color-mix(in srgb,var(--line) 74%,transparent);box-shadow:0 14px 30px rgba(20,33,52,.1),inset 0 1px 0 rgba(255,255,255,.72)}
html.dark .ac-modal.ac-sup-novo{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 93%,#223447),color-mix(in srgb,var(--surface-2) 82%,#182b3f));
  border-color:rgba(171,196,224,.3);box-shadow:0 16px 34px rgba(9,16,28,.44),inset 0 1px 0 rgba(255,255,255,.05)}
/* resumo das confirmações (modal-aprovacao-resumo) */
.ac-resumo{display:grid;gap:4px;padding:12px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:16px;font-size:12px;line-height:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,#fff),color-mix(in srgb,var(--surface-2) 78%,#f5f8fc))}
.ac-resumo p{margin:0;overflow-wrap:anywhere}
.ac-resumo p > span{color:var(--muted)}
.ac-resumo p > b{font-weight:500;color:var(--ink)}
html.dark .ac-resumo{border-color:rgba(171,196,224,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#1a2a3d),color-mix(in srgb,var(--surface-2) 86%,#142335))}
/* modal grande (Novo/Editar usuário, Sessões ativas): sem padding, cabeçalho,
   corpo que rola e rodapé fixos */
.ac-modal.ac-modal-grande{display:flex;flex-direction:column;gap:0;width:min(96vw,920px);max-width:none;padding:0;overflow:hidden}
.ac-modal.ac-modal-sessoes{width:min(98vw,1320px)}
.ac-modal.ac-modal-sessoes:not(.ac-sup-novo){background:var(--surface);background-image:var(--cartao-fundo)}
.ac-mg-cab{flex:none;display:flex;flex-direction:column;gap:8px;padding:16px;padding-right:44px;border-bottom:1px solid var(--line);text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,250,252,.92) 100%)}
html.dark .ac-mg-cab{background:linear-gradient(180deg,rgba(19,28,39,.98) 0%,rgba(19,28,39,.92) 100%);border-bottom-color:rgba(171,196,224,.24)}
.ac-mg-cab .ac-modal-titulo{font-size:16px}
.ac-mg-cab .ac-modal-desc{font-size:12px;line-height:16px}
.ac-mg-corpo{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:20px 16px}
.ac-mg-rodape{flex:none;padding:16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 20%,transparent)}
html.dark .ac-mg-rodape{border-top-color:rgba(171,196,224,.24)}
@media(min-width:640px){
  .ac-mg-cab{padding:16px 44px 16px 24px;text-align:left}
  .ac-mg-corpo{padding:20px 24px}
  .ac-mg-rodape{padding:16px 24px}
}
/* seções do modal (app-card-surface, raio 20, borda a 80%, padding 16) */
.ac-mg-secao{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:20px;
  background:var(--surface);background-image:var(--cartao-fundo);box-shadow:var(--sombra-cartao)}
html.dark .ac-mg-secao{border-color:var(--cartao-borda)}
.ac-mg-secao-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ac-mg-secao-titulo{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ac-mg-secao-titulo .icon{width:16px;height:16px;color:var(--brand)}
html.dark .ac-mg-secao-titulo .icon{color:var(--destructive)}
.ac-mg-secao-lado{display:flex;align-items:center;gap:8px}
.ac-mg-seta{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:color-mix(in srgb,var(--muted) 70%,transparent);transition:color 150ms}
@media (hover:hover){.ac-mg-seta:hover{color:var(--muted)}}
.ac-mg-seta .icon{width:14px;height:14px;transition:transform 150ms}
.ac-mg-secao[data-aberta="1"] .ac-mg-seta .icon{transform:rotate(180deg)}
.ac-mg-secao[data-aberta="0"] > :not(.ac-mg-secao-cab){display:none}
.ac-mg-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* duas colunas até o modal ter a largura toda (as quatro do Jornadas cortavam a
   matrícula e o perfil numa janela de 800 px — revisão de 17/09/2026) */
@media(min-width:640px){
  .ac-mg-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-mg-grade .ac-span2{grid-column:span 2}
}
@media(min-width:960px){
  .ac-mg-grade{grid-template-columns:minmax(0,1.8fr) minmax(180px,1.2fr) minmax(140px,.95fr) minmax(0,.85fr)}
}
.ac-mg-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.ac-mg-rotulo{margin:0;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ac-mg-dica{margin-left:4px;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:400;font-size:9px;color:oklch(0.5 0.17 155)}
html.dark .ac-mg-dica{color:var(--ok)}
.ac-mg-dica.ac-mg-opcional{color:var(--muted)}
.ac-mg-ajuda{margin:0;font-size:11px;line-height:16px;color:var(--muted)}
.ac-mg-erro-campo{display:flex;align-items:center;gap:4px;margin:0;font-size:11px;font-weight:500;color:var(--destructive)}
.ac-mg-erro-campo .icon{width:14px;height:14px}
/* a lista suspensa desligada (perfil sem agências): o texto diz por quê */
.ac-mg-campo .cs-btn:disabled span{color:var(--muted)}

/* ── AVISOS (o Sonner do Jornadas: canto inferior direito, fundo do popover) ── */
.ac-avisos{position:fixed;right:32px;bottom:32px;z-index:960;display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:min(356px,calc(100vw - 32px));pointer-events:none}
.ac-aviso{pointer-events:auto;display:flex;align-items:flex-start;gap:8px;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font-size:13px;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.1);
  animation:acAvisoEntra 300ms cubic-bezier(.21,1.02,.73,1) both}
.ac-aviso.saindo{animation:acAvisoSai 200ms ease forwards}
@keyframes acAvisoEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes acAvisoSai{to{opacity:0;transform:translateY(8px)}}
.ac-aviso .icon{flex:none;width:18px;height:18px;margin-top:1px}
.ac-aviso b{display:block;font-weight:600}
.ac-aviso span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.ac-aviso-sucesso .icon,.ac-aviso-sucesso b{color:hsl(140,100%,27%)}
.ac-aviso-erro .icon,.ac-aviso-erro b{color:hsl(360,100%,45%)}
.ac-aviso-info .icon,.ac-aviso-info b{color:hsl(210,92%,45%)}
html.dark .ac-aviso{border-color:rgba(171,196,224,.28);box-shadow:0 10px 28px rgba(2,8,18,.48)}
html.dark .ac-aviso-sucesso .icon,html.dark .ac-aviso-sucesso b{color:hsl(150,86%,65%)}
html.dark .ac-aviso-erro .icon,html.dark .ac-aviso-erro b{color:hsl(358,100%,81%)}
html.dark .ac-aviso-info .icon,html.dark .ac-aviso-info b{color:hsl(216,87%,65%)}
/* no celular o menu fica embaixo (56 px): o aviso sobe acima dele */
@media(max-width:900px){.ac-avisos{right:16px;left:16px;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;align-items:stretch}}
/* ── PÁGINAS DE ACESSOS (Usuários e Perfis) ──────────────────────────────
   No computador a página ocupa a altura da janela e só a tabela (ou a lista e
   a matriz) rola por dentro, como no Jornadas (h-[calc(100dvh-86px)]). No
   celular, em janela baixa ou em tablet, a página rola inteira: a caixa
   interna ficaria com meia dúzia de linhas. */
.ac-conteudo{min-height:0}
/* Usuários: com o menu ao lado (901 px ou mais) */
@media(min-width:901px) and (min-height:600px){
  .tela-pagina.ac-pagina-usuarios{display:flex;flex-direction:column;overflow:hidden}
  .ac-pagina-usuarios > .ac-conteudo{flex:1;display:flex;flex-direction:column}
  .ac-pagina-usuarios > .ac-conteudo > .ac-usu{flex:1}
}
/* Perfis: só com lista e matriz lado a lado (1024 px ou mais); a linha única
   da grade é exatamente a altura que sobra, e cada cartão rola por dentro */
@media(min-width:1024px) and (min-height:600px){
  .tela-pagina.ac-pagina-perfis{display:flex;flex-direction:column;overflow:hidden}
  .ac-pagina-perfis > .ac-conteudo{flex:1;display:flex;flex-direction:column}
  .ac-pagina-perfis > .ac-conteudo > .ac-perfis{flex:1;grid-template-rows:minmax(0,1fr);overflow:hidden}
}

/* ── USUÁRIOS (Usuarios.tsx) ── */
.ac-usu{display:flex;flex-direction:column;gap:15px;min-height:0}
/* indicadores: 2 colunas; 3 a partir de 768; 5 a partir de 1280 */
.ac-kpis{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:768px){.ac-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:1280px){.ac-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ac-kpi{--kpi-cor:oklch(0.62 0.14 250);position:relative;display:block;width:100%;min-width:0;margin:0;padding:8px 12px;border:2px solid var(--line);border-radius:20px;
  background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:all 200ms cubic-bezier(.4,0,.2,1)}
.ac-kpi-sucesso{--kpi-cor:oklch(0.6 0.17 155)}
.ac-kpi-aviso{--kpi-cor:oklch(0.75 0.15 80)}
.ac-kpi[aria-pressed="true"]{border-color:var(--kpi-cor);background:color-mix(in srgb,var(--kpi-cor) 5%,var(--surface));
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
@media (hover:hover){.ac-kpi:hover{transform:translateY(-2px);border-color:var(--ring);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}}
.ac-kpi:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ac-kpi-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ac-kpi-rotulo{margin:0;min-width:0;font-size:10px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.ac-kpi-num{margin:0;flex:none;font-size:16px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums}
.ac-kpi-risco{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:999px;background:var(--kpi-cor)}
.ac-kpi:not([aria-pressed="true"]) .ac-kpi-risco{display:none}
.ac-num-padrao{color:var(--ink)}
.ac-num-verde{color:oklch(0.5 0.17 155)}
.ac-num-ambar{color:oklch(0.62 0.15 80)}
.ac-num-cinza{color:var(--muted)}
html.dark .ac-num-verde{color:var(--ok)}
html.dark .ac-num-ambar{color:var(--alerta)}
/* cartão da lista (Card flex-1, borda cheia e shadow-md) */
.cartao.ac-usu-cartao{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border-color:var(--line);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
html.dark .cartao.ac-usu-cartao{border-color:var(--cartao-borda);box-shadow:0 8px 24px rgba(2,8,18,.28)}
.ac-usu-filtros{flex:none;padding:15px 14px 8px}
@media(min-width:768px){.ac-usu-filtros{padding:15px 16px 8px}}
.ac-filtros-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:900px){
  .ac-filtros-grade{grid-template-columns:minmax(180px,1.7fr) minmax(145px,1.15fr) minmax(120px,.9fr) minmax(165px,1.2fr) auto}
  .ac-filtros-grade > *{min-width:0}
}
@media(min-width:1024px){.ac-filtros-grade{align-items:end}}
/* o rótulo dos filtros de Usuários (11 px, 600, .14em, 2 px acima do campo) */
.campo.ac-campo{gap:2px;min-width:0;font-size:11px;font-weight:600;letter-spacing:.14em}
.campo.ac-campo .busca-wrap input{min-width:0}
.ac-filtro-acoes{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;flex:none}
.ac-filtro-acoes .btn-icone{flex:none}
/* tabela: caixa com borda (app-table-shell) e a rolagem dentro dela; o
   cabeçalho fica preso no alto enquanto as linhas rolam */
.ac-tabela-area{flex:1;min-height:0;display:flex;flex-direction:column;padding:4px 14px 15px}
@media(min-width:768px){.ac-tabela-area{padding:4px 16px 15px}}
.ac-tabela-caixa{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--campo-borda);border-radius:14px;
  background:color-mix(in srgb,var(--surface) 92%,#fff)}
html.dark .ac-tabela-caixa{border-color:rgba(171,196,224,.2);background:color-mix(in srgb,var(--surface) 93%,#111d2c)}
.ac-tabela-caixa > .tabela-rol{flex:1 1 auto;min-height:0;margin:0;border:0;border-radius:0;background:none;overscroll-behavior:contain}
/* sem linhas, a caixa fica só com o cabeçalho e o aviso ocupa o resto */
.ac-tabela-caixa > .tabela-rol.ac-rol-vazio{flex:none;overflow-y:hidden}
.cartao.ac-pf-cartao{scroll-margin-top:72px}
.vg-tabela.ac-usu-tab{width:100%;min-width:1100px;table-layout:fixed;font-size:12px}
/* as larguras do Jornadas (20|20|10|10|13|7|5|15|120px), com Agências no lugar de
   Responsável. Sem a coluna Login desde 22/09/2026 (a conta é o e-mail, como lá),
   as colunas são as mesmas 9 de lá: Usuário, E-mail, Matrícula, Perfil, Agências,
   Status, Senha, Último acesso, Ações */
.ac-usu-tab col:nth-child(1){width:20%}
.ac-usu-tab col:nth-child(2){width:20%}
.ac-usu-tab col:nth-child(3){width:10%}
.ac-usu-tab col:nth-child(4){width:10%}
.ac-usu-tab col:nth-child(5){width:13%}
.ac-usu-tab col:nth-child(6){width:7%}
.ac-usu-tab col:nth-child(7){width:5%}
.ac-usu-tab col:nth-child(8){width:15%}
.ac-usu-tab col:nth-child(9){width:142px}   /* 120 → 142 (06/10/2026): a linha de uma conta bloqueada, conectada e com permissão de excluir tem CINCO ícones (cadeado aberto + ver + editar + inativar + excluir) */
.ac-usu-tab thead th{position:sticky;top:0;z-index:3;padding:10px 16px;background:var(--surface-2)}
.ac-usu-tab td{padding:6px 16px;color:var(--ink)}
/* as linhas não abrem nada: sem a mãozinha e sem o traço de "clicável" */
.ac-usu-tab tbody tr{cursor:default}
@media (hover:hover){.ac-usu-tab tbody tr:hover td:first-child{box-shadow:none}}
.ac-usu-tab .ac-centro,.ac-usu-tab th.ac-centro .th-ordenar{justify-content:center}
.ac-usu-tab .ac-centro{text-align:center}
.ac-usu-tab th.ac-centro .th-ordenar{width:100%}
.ac-cel-muted{color:var(--muted)}
.ac-usu-tab td.ac-cel-muted{color:var(--muted)}
.ac-trunc{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-num{font-variant-numeric:tabular-nums}
.ac-usu-pessoa{display:flex;align-items:center;gap:10px;min-width:0}
.ac-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand);font-size:10px;font-weight:700;line-height:1;text-align:center}
html.dark .ac-avatar{background:rgba(222,0,19,.18);color:var(--destructive)}
/* "conectado agora": ponto verde com o pulso (animate-ping) */
.ac-online{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px}
.ac-online::before,.ac-online::after{content:"";position:absolute;inset:0;border-radius:50%;background:oklch(0.5 0.17 155)}
.ac-online::before{opacity:.8;animation:acPing 1s cubic-bezier(0,0,.2,1) infinite}
.ac-online::after{border:1px solid var(--surface)}
@keyframes acPing{75%,100%{transform:scale(2);opacity:0}}
html.dark .ac-online::before,html.dark .ac-online::after{background:var(--ok)}
.ac-usu-textos{min-width:0;flex:1}
.ac-usu-nome-linha{display:flex;align-items:center;gap:6px;min-width:0}
.ac-usu-nome{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ink)}
.ac-bloqueado{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:oklch(0.62 0.2 25 / 12%);color:oklch(0.55 0.2 25)}
.ac-bloqueado .icon{width:14px;height:14px}
html.dark .ac-bloqueado{color:var(--erro)}
.ac-selo-linha{display:block;margin:0;font-size:10px;line-height:14px;font-weight:600;white-space:nowrap}
.ac-selo-conectado{color:oklch(0.5 0.17 155)}
.ac-selo-teste{color:oklch(0.62 0.15 80)}
html.dark .ac-selo-conectado{color:var(--ok)}
html.dark .ac-selo-teste{color:var(--alerta)}
/* chips (perfil, status, senha): padding 2/8, redondos, 10 px/600 */
.ac-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 8px;border-radius:999px;font-size:10px;line-height:16px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ac-chip-ativo,.ac-chip-definitiva{background:oklch(0.6 0.17 155 / 12%);color:oklch(0.5 0.17 155)}
.ac-chip-inativo{background:var(--surface-2);color:var(--muted)}
.ac-chip-temporaria{background:oklch(0.75 0.15 80 / 12%);color:oklch(0.6 0.15 80)}
html.dark .ac-chip-ativo,html.dark .ac-chip-definitiva{background:var(--ok-bg);color:var(--ok)}
html.dark .ac-chip-inativo{background:var(--accent);color:var(--muted)}
html.dark .ac-chip-temporaria{background:var(--alerta-fundo);color:var(--alerta)}
/* cores dos perfis (perfil-apresentacao.ts do Jornadas): admin = Administrador,
   operacao = Gestor, consulta = Visualizador, agencia = Coordenador; perfil
   criado depois = Depto. Pessoal */
.ac-perfil-admin{background:#f3e8ff;color:#8200db}
.ac-perfil-operacao{background:#dbeafe;color:#1447e6}
.ac-perfil-consulta{background:#f3f4f6;color:#364153}
.ac-perfil-agencia{background:#cbfbf1;color:#00786f}
.ac-perfil-outro{background:#e0e7ff;color:#432dd7}
/* Tráfego (22/09/2026): âmbar, na mesma escala de tons dos outros */
.ac-perfil-trafego{background:#fef3c6;color:#bb4d00}
html.dark .ac-perfil-trafego{background:rgba(123,51,6,.3);color:#ffd230}
.ac-icone-trafego{color:#bb4d00}
html.dark .ac-icone-trafego{color:#ffd230}
/* Coordenador (29/09/2026): rosa, na mesma escala de tons dos outros */
.ac-perfil-coordenador{background:#ffe4e6;color:#c70036}
html.dark .ac-perfil-coordenador{background:rgba(120,16,43,.3);color:#ffa1ad}
.ac-icone-coordenador{color:#c70036}
html.dark .ac-icone-coordenador{color:#ffa1ad}
html.dark .ac-perfil-admin{background:rgba(89,22,139,.3);color:#dab2ff}
html.dark .ac-perfil-operacao{background:rgba(28,57,142,.3);color:#8ec5ff}
html.dark .ac-perfil-consulta{background:rgba(30,41,57,.5);color:#d1d5dc}
html.dark .ac-perfil-agencia{background:rgba(11,79,74,.3);color:#46ecd5}
html.dark .ac-perfil-outro{background:rgba(49,44,133,.3);color:#a3b3ff}
.ac-icone-admin{color:#8200db}
.ac-icone-operacao{color:#1447e6}
.ac-icone-consulta{color:#364153}
.ac-icone-agencia{color:#00786f}
.ac-icone-outro{color:#432dd7}
html.dark .ac-icone-admin{color:#dab2ff}
html.dark .ac-icone-operacao{color:#8ec5ff}
html.dark .ac-icone-consulta{color:#d1d5dc}
html.dark .ac-icone-agencia{color:#46ecd5}
html.dark .ac-icone-outro{color:#a3b3ff}
/* senha: círculo de 24 px com o ícone de 14 */
.ac-senha{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;vertical-align:middle}
.ac-senha .icon{width:14px;height:14px}
.ac-senha-temp{background:oklch(0.75 0.15 80 / 12%);color:oklch(0.6 0.15 80)}
.ac-senha-def{background:oklch(0.6 0.17 155 / 12%);color:oklch(0.5 0.17 155)}
html.dark .ac-senha-temp{background:var(--alerta-fundo);color:var(--alerta)}
html.dark .ac-senha-def{background:var(--ok-bg);color:var(--ok)}
/* ações da linha: botões fantasma sem raio; no hover o ícone sobe 1 px e ganha a cor.
   MAIS JUNTOS (Alan, 22/09/2026: "os ícones estão muito afastados uns dos outros"):
   eram 24 px + 4 px entre eles, e o ícone de 14 px deixava ~14 px de vão; agora 20 px
   de largura e 2 px, ~8 px de vão (a altura segue 24; no toque continuam 40 px) */
.ac-acoes{display:flex;align-items:center;justify-content:center;gap:2px}
.ac-acao-wrap{display:inline-flex}
.ac-acao{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:24px;padding:0;border:0;border-radius:0;background:transparent;
  box-shadow:none;color:var(--muted);transition:color 180ms ease-out}
.ac-acao .icon{width:14px;height:14px;transition:transform 180ms ease-out}
.ac-acao:focus-visible .icon{transform:translateY(-1px)}
@media (hover:hover){.ac-acao:hover:not(:disabled) .icon{transform:translateY(-1px)}}
.ac-acao:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* desabilitado não recebe o mouse: o balão que diz por quê fica no invólucro */
.ac-acao:disabled{opacity:.5;cursor:default;pointer-events:none}
@media (hover:hover){.ac-acao-ver:hover{color:oklch(0.5 0.17 155)}}
@media (hover:hover){.ac-acao-editar:hover{color:oklch(0.62 0.16 250)}}
@media (hover:hover){.ac-acao-inativar:hover{color:oklch(0.72 0.17 58)}}
@media (hover:hover){.ac-acao-reativar:hover{color:oklch(0.56 0.17 155)}}
@media (hover:hover){.ac-acao-excluir:hover{color:oklch(0.6 0.22 25)}}
/* DESBLOQUEAR LOGIN na linha (06/10/2026): o cadeado aberto já aparece no âmbar de "atenção" (a conta está travada agora), não só no hover */
.ac-acao-desbloquear{color:oklch(0.72 0.17 58)}
@media (hover:hover){.ac-acao-desbloquear:hover:not(:disabled){color:oklch(0.62 0.18 50)}}
.ac-somente-leitura{margin:0;text-align:center;font-size:11px;color:var(--muted)}
/* vazio e rodapé */
.ac-tabela-vazia{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:240px;padding:0 16px;text-align:center;color:var(--muted)}
.ac-tabela-vazia > div{display:flex;flex-direction:column;align-items:center;gap:8px}
.ac-tabela-vazia .icon{width:32px;height:32px;color:color-mix(in srgb,var(--muted) 40%,transparent)}
.ac-tabela-vazia p{margin:0;font-size:14px}
.ac-tabela-vazia p + p{font-size:12px}
.ac-tabela-rodape{flex:none;padding:6px 12px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
@media(min-width:768px){.ac-tabela-rodape{padding:6px 16px}}
.ac-tabela-rodape p{margin:0;text-align:right;font-size:11px;color:color-mix(in srgb,var(--muted) 75%,transparent)}
.ac-tabela-rodape b{font-weight:700}
.ac-erro-carga{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:240px;padding:24px 16px;text-align:center}
.ac-erro-carga .icon{width:32px;height:32px;color:var(--destructive)}
.ac-erro-carga b{font-size:14px;font-weight:500;color:var(--ink)}
.ac-erro-carga span{max-width:360px;font-size:12px;color:var(--muted)}
.ac-link{padding:0;border:0;background:none;color:var(--brand);font:inherit;font-size:12px;font-weight:500}
@media (hover:hover){.ac-link:hover{text-decoration:underline}}
html.dark .ac-link{color:var(--destructive)}

/* ── MODAIS DE USUÁRIO ── */
/* Editar: o fundo do modal é o --canvas (sem a superfície em degradê do Novo) */
.ac-modal.ac-modal-grande.ac-sup-editar{background:var(--canvas)}
/* senha temporária gerada: campo mono só leitura com o botão de copiar dentro */
.ac-senha-caixa{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-2) 20%,transparent)}
/* status da senha (22/09/2026, Alan: "essas informações são redundantes... coloca
   esse card [o chip] onde eu coloquei a seta"): o chip sobe pro cabeçalho da seção,
   ao lado da seta de recolher — "Status da senha" e a frase embaixo dele saíram, o
   chip já diz tudo. "Cancelar redefinição" vai junto, menor que os botões de ação */
.ac-mg-secao-lado .ac-redondo{width:24px;height:24px}
.ac-mg-secao-lado .ac-redondo .icon{width:12px;height:12px}
.ac-senha-linha{display:flex;align-items:center;gap:8px}
.ac-senha-campo{position:relative;flex:1;min-width:0}
/* A FONTE DOS OUTROS CAMPOS (Alan, 22/09/2026: "a fonte do campo pode ser a fonte
   padrão"): era monoespaçada. E O COPIAR SOLTO NO CAMPO ("não precisa estar dentro de
   um círculo... pode ficar flutuando dentro do campo"), como a lupa da Matrícula: sem
   borda nem sombra, cinza que escurece no hover */
.ac-input.ac-input-senha{padding-right:40px;background:var(--campo-fundo);color:var(--campo-texto)}
.ac-copiar{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:0;border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;
  transition:color 150ms cubic-bezier(.4,0,.2,1),background-color 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.ac-copiar:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}}
.ac-copiar:disabled{opacity:.5;pointer-events:none}
.ac-copiar .icon{width:16px;height:16px}
/* MATRÍCULA COM LUPA (Usuarios.tsx do Jornadas, 17/09/2026): a lupa dentro do
   campo, 32 px à direita, sem borda, cinza que escurece no hover; enquanto a
   consulta corre ela vira o círculo que gira (Loader2) */
.ac-lupa-campo{position:relative;min-width:0}
.ac-input.ac-input-lupa{padding-right:40px}
.ac-lupa{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:0;border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;transition:color 150ms cubic-bezier(.4,0,.2,1),background-color 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.ac-lupa:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}}
.ac-lupa:disabled{pointer-events:none;opacity:.5;cursor:default}
.ac-lupa[aria-busy="true"]{opacity:1}
.ac-lupa .icon{width:16px;height:16px}
/* SUGESTÃO DE DOMÍNIO NO E-MAIL (24/09/2026): a lista embaixo do campo ao digitar o "@". Presa à
   janela (fixed) como a lista suspensa do modal — o corpo do modal rola e cortaria uma lista solta;
   o painel de sugestões da Escala (.esc-sug) é o modelo do desenho */
.ac-sug{position:fixed;z-index:20;max-width:min(420px,calc(100vw - 16px));max-height:220px;overflow-y:auto;padding:4px;background:var(--surface);border:1px solid var(--line-forte);
  border-radius:var(--r-md);box-shadow:var(--shadow-pop)}
.ac-sug-op{display:flex;align-items:baseline;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:inherit;
  font-size:13.5px;line-height:20px;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ac-sug-op b{font-weight:600}
.ac-sug-local{opacity:.72}
.ac-sug-op:hover,.ac-sug-op.foco{background:var(--accent);color:var(--accent-texto)}
@media(max-width:640px){.ac-sug-op{min-height:44px;align-items:center}}
.ac-gira{animation:ac-gira 1s linear infinite}
@keyframes ac-gira{to{transform:rotate(360deg)}}
.ac-quebra{white-space:pre-line}
.ac-input[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--destructive) 20%,transparent)}
/* a linha do cadastro de funcionários, embaixo dos dados (o admin atualiza dali) */
.ac-base-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:10px}
.ac-base-linha .ac-link{font-size:inherit}
/* "Dados encontrados": os tamanhos do diálogo do Jornadas (16 e 12 px) */
.ac-sup-cadastro .ac-modal-titulo{font-size:16px}
.ac-sup-cadastro .ac-modal-desc{font-size:12px;line-height:16px}
.ac-redondo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--btn-contorno-borda);border-radius:50%;
  background:var(--btn-contorno-fundo);color:var(--btn-contorno-texto);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  transition:border-color 150ms,background-color 150ms,color 150ms}
@media (hover:hover){.ac-redondo:hover:not(:disabled){border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}}
@media (hover:hover){html.dark .ac-redondo:hover:not(:disabled){color:var(--destructive)}}
.ac-redondo:disabled{opacity:.5;pointer-events:none}
.ac-redondo .icon{width:16px;height:16px;transition:transform 180ms ease-out}
/* GERAR SENHA E USAR CPF COM COR (Alan, 22/09/2026: "no estilo do botão Baixar em
   Excel... cores diferentes para esses 2 botões"; ajuste do mesmo dia: "não precisa
   ter cor antes de passar o mouse"): em repouso é um .ac-redondo neutro comum; só no
   hover entra o degradê da cor, o ícone branco que sobe 1 px e a sombra colorida.
   Gerar = âmbar (a chave), CPF = azul */
.ac-redondo-gerar{--ac-cor-a:oklch(0.58 0.16 55);--ac-cor-b:oklch(0.7 0.16 70)}
.ac-redondo-cpf{--ac-cor-a:oklch(0.5 0.17 255);--ac-cor-b:oklch(0.62 0.16 245)}
.ac-redondo-gerar,.ac-redondo-cpf{transition:border-color 180ms ease-out,background 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out}
@media (hover:hover){
  .ac-redondo-gerar:hover:not(:disabled),.ac-redondo-cpf:hover:not(:disabled),
  html.dark .ac-redondo-gerar:hover:not(:disabled),html.dark .ac-redondo-cpf:hover:not(:disabled){
    color:#fff;background:linear-gradient(92deg,var(--ac-cor-a),var(--ac-cor-b));border-color:var(--ac-cor-a);
    box-shadow:0 4px 11px color-mix(in srgb,var(--ac-cor-a) 22%,transparent)}
  .ac-redondo-gerar:hover:not(:disabled) .icon,.ac-redondo-cpf:hover:not(:disabled) .icon{transform:translateY(-1px)}
}
/* "Desbloquear login" (âmbar, 32 px, raio 14) */
.ac-desbloquear{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 10px;border:1px solid #ffd230;border-radius:14px;
  background:rgba(255,251,235,.7);color:#7b3306;font:inherit;font-size:11px;font-weight:600;box-shadow:none;transition:background-color 150ms}
@media (hover:hover){.ac-desbloquear:hover:not(:disabled){background:#fef3c6}}
.ac-desbloquear:disabled{opacity:.5;pointer-events:none}
.ac-desbloquear .icon{width:14px;height:14px}
html.dark .ac-desbloquear{border-color:#973c00;background:rgba(70,25,1,.2);color:#fee685}
@media (hover:hover){html.dark .ac-desbloquear:hover:not(:disabled){background:rgba(70,25,1,.5)}}
/* resultado da criação e a senha recém-gerada */
.ac-senha-nova{display:flex;flex-direction:column;gap:8px}
.ac-alerta-ambar{margin:0;padding:8px 12px;border:1px solid #fee685;border-radius:14px;background:#fffbeb;font-size:11px;line-height:16px;color:#973c00}
html.dark .ac-alerta-ambar{border-color:rgba(151,60,0,.5);background:rgba(70,25,1,.2);color:#fcd34d}

/* ── SESSÕES ATIVAS / ACESSO ATUAL ── */
.ac-ses-carregando{display:flex;align-items:center;justify-content:center;gap:8px;min-height:160px;font-size:12px;color:var(--muted)}
.ac-modal-sessoes .ac-ses-carregando{min-height:320px}
.ac-ses-carregando .icon{width:16px;height:16px;animation:skelPulsa 2s cubic-bezier(.4,0,.6,1) infinite}
.ac-modal-sessoes .ac-tabela-vazia{min-height:260px}
.ac-modal-sessoes .ac-mg-corpo{gap:20px}
.ac-ses-kpis{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:640px){.ac-ses-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 5 totais (sessões, contas, origens, abas abertas, telas à vista) numa linha só no computador */
@media(min-width:1000px){.ac-ses-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ac-ses-kpi{padding:12px 16px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.ac-ses-kpi-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ac-ses-kpi-cab span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.ac-ses-kpi-cab .icon{width:16px;height:16px}
.ac-ses-kpi p{margin:4px 0 0;font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ac-ic-marca{color:var(--brand)}
.ac-ic-verde{color:oklch(0.5 0.17 155)}
.ac-ic-azul{color:oklch(0.56 0.14 250)}
html.dark .ac-ic-marca{color:var(--destructive)}
html.dark .ac-ic-verde{color:var(--ok)}
html.dark .ac-ic-azul{color:var(--info)}
.ac-ses-filtro{padding:12px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;background:var(--surface)}
.ac-ses-rol{overflow-x:auto;border:1px solid var(--campo-borda);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,#fff)}
html.dark .ac-ses-rol{border-color:rgba(171,196,224,.2);background:color-mix(in srgb,var(--surface) 93%,#111d2c)}
.vg-tabela.ac-ses-tab{min-width:1080px;font-size:12px}
/* o Encerrar fica sempre à vista, mesmo com a tabela rolando de lado (10 colunas) */
.ac-ses-tab th:last-child,.ac-ses-tab td:last-child{position:sticky;right:0;z-index:1;background:var(--surface);box-shadow:-10px 0 10px -10px rgba(0,0,0,.18)}
.ac-ses-tab thead th:last-child{background:var(--surface-2,var(--surface))}
.ac-ses-tab th{padding:10px 8px}
.ac-ses-tab td{padding:10px 8px}
/* o cabeçalho quebra em duas linhas em vez de alargar a coluna (senão a tabela passa da largura do modal) */
.ac-ses-tab .th-ordenar{white-space:normal;text-align:left}
/* Situação e Último aviso ficam centralizados (cabeçalho e conteúdo) */
.ac-ses-tab .ac-centro{text-align:center}
.ac-ses-tab th.ac-centro .th-ordenar{width:100%;justify-content:center;text-align:center}
.ac-ses-tab tbody tr{cursor:default}
@media (hover:hover){.ac-ses-tab tbody tr:hover td:first-child{box-shadow:none}}
.ac-ses-conta b{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ink)}
.ac-ses-conta .ac-ses-email{display:block;margin-top:2px;font-size:10px;color:var(--muted)}
/* o nome e, à direita dele, o selo "esta sessão"; o nome corta com reticências, o selo não */
.ac-ses-conta-nome{display:flex;align-items:center;min-width:0}
.ac-ses-conta-nome b{flex:0 1 auto;min-width:0}
.ac-ses-conta-nome .ac-selo-voce{flex:none}
/* a situação da sessão: só uma bolinha (o significado vai no balão); a área do mouse é maior que a bolinha */
/* a bolinha e o "há 12 s" na mesma célula; o texto tem largura mínima para as bolinhas ficarem alinhadas de uma linha à outra */
.ac-ses-aviso{display:inline-flex;align-items:center;justify-content:center}
.ac-ses-aviso-texto{display:inline-block;min-width:74px;text-align:left}
.ac-ses-ponto{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;cursor:default}
.ac-ses-ponto::before{content:"";box-sizing:border-box;width:11px;height:11px;border-radius:50%}
.ac-ses-ponto-a-vista::before{background:var(--ok)}
.ac-ses-ponto-segundo-plano::before{background:var(--alerta)}
.ac-ses-ponto-sem-aba::before{border:2px solid var(--muted)}
.ac-ses-icone{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.ac-ses-icone .icon{width:14px;height:14px}
.ac-selo-voce{display:inline-flex;align-items:center;height:16px;margin-left:6px;padding:0 6px;border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);border-radius:999px;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
html.dark .ac-selo-voce{color:var(--destructive);border-color:color-mix(in srgb,var(--destructive) 40%,transparent)}
/* selo neutro ("servidor", "+2 abas") ao lado do vermelho "esta sessão"/"seu IP"; e a célula da tela aberta */
.ac-selo-mais{display:inline-flex;align-items:center;height:16px;margin-left:6px;padding:0 6px;border:1px solid var(--line-forte);border-radius:999px;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ac-ses-tela{display:inline-flex;align-items:center;white-space:nowrap;max-width:260px}
.ac-ses-nota{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.ac-ses-tela > span:first-child{overflow:hidden;text-overflow:ellipsis}
.ac-encerrar{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted);font:inherit;font-size:11px;font-weight:600;
  white-space:nowrap;transition:background 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out}
@media (hover:hover){.ac-encerrar:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.52 0.2 25),oklch(0.62 0.2 25));border-color:oklch(0.62 0.2 25);box-shadow:0 4px 11px rgba(207,75,88,.18)}}
.ac-encerrar:disabled{opacity:.5;pointer-events:none}
.ac-sessao-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:640px){.ac-sessao-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-sessao-grade .ac-span2{grid-column:span 2}}
.ac-sessao-caixa{padding:12px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:16px;background:color-mix(in srgb,var(--surface-2) 20%,transparent)}
.ac-sessao-caixa > span{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ac-sessao-caixa > span .icon{width:14px;height:14px}
.ac-sessao-caixa p{margin:4px 0 0;font-size:14px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.ac-sessao-caixa p + p{margin-top:2px;font-size:12px;font-weight:400;color:var(--muted)}
.ac-sessao-bloco{display:grid;gap:12px}
.ac-sessao-bloco + .ac-sessao-bloco{padding-top:12px;border-top:1px solid var(--line)}
.ac-sessao-acao{display:flex;justify-content:flex-end}

/* ── PERFIS (Perfis.tsx) ─────────────────────────────────────────────────
   Lista à esquerda e matriz módulos × ações à direita (1 coluna até 1024). */
.ac-perfis{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}
@media(min-width:1024px){.ac-perfis{grid-template-columns:minmax(220px,.85fr) minmax(0,3.15fr)}}
.cartao.ac-pf-cartao{display:flex;flex-direction:column;min-height:0;margin:0;padding:0;overflow:hidden}
.ac-pf-lista-cab{flex:none;padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ac-pf-lista-titulo{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;line-height:1;font-weight:600;color:var(--ink)}
.ac-pf-lista-titulo .icon{width:16px;height:16px;color:var(--brand)}
html.dark .ac-pf-lista-titulo .icon{color:var(--destructive)}
.ac-pf-lista{flex:1;min-height:0;overflow-y:auto;padding:8px}
.ac-pf-item{display:block;width:100%;margin:0;padding:12px;border:1px solid transparent;border-radius:16px;background:none;color:inherit;font:inherit;text-align:left;
  transition:all 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.ac-pf-item:hover{background:color-mix(in srgb,var(--surface-2) 50%,transparent)}}
.ac-pf-item[aria-pressed="true"]{border-color:color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,var(--surface-2) 70%,transparent);
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
@media (hover:hover){html.dark .ac-pf-item:hover{background:color-mix(in srgb,var(--accent) 50%,transparent)}}
html.dark .ac-pf-item[aria-pressed="true"]{background:var(--accent);border-color:rgba(171,196,224,.28)}
.ac-pf-item:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.ac-pf-item-linha{display:flex;align-items:center;gap:8px}
.ac-pf-item-linha > .icon{width:20px;height:20px;flex:none}
.ac-pf-item-textos{flex:1;min-width:0}
.ac-pf-item-nome{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.ac-pf-item-sub{display:flex;align-items:center;gap:4px;margin-top:2px}
/* escopo (os chips de Perfis.tsx: Acesso Total em verde; o de agências no
   azul do "Subordinados" de lá) */
.ac-escopo{display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 6px;border:1px solid transparent;border-radius:14px;font-size:9px;line-height:1;font-weight:500;white-space:nowrap}
.ac-escopo .icon{width:12px;height:12px;margin-right:4px}
.ac-escopo-total{background:#d0fae5;color:#006045}
.ac-escopo-agencias{background:#dbeafe;color:#193cb8}
html.dark .ac-escopo-total{background:rgba(0,79,59,.3);color:#00d492}
html.dark .ac-escopo-agencias{background:rgba(28,57,142,.3);color:#51a2ff}
.ac-escopo.ac-escopo-grande{height:auto;padding:2px 8px;border-color:var(--line);font-size:10px;line-height:16px}
html.dark .ac-escopo.ac-escopo-grande{border-color:rgba(171,196,224,.28)}
/* Badge secondary do Jornadas */
.ac-etiqueta{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid transparent;border-radius:14px;background:var(--surface-2);color:var(--texto-2);
  font-size:10px;line-height:16px;font-weight:500;white-space:nowrap}
.ac-etiqueta .icon{width:12px;height:12px;margin-right:2px}
html.dark .ac-etiqueta{background:var(--accent);color:var(--accent-texto)}
.ac-pf-vazio{flex:1;min-height:240px;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.ac-pf-vazio > div{display:grid;justify-items:center;gap:8px;max-width:384px}
.ac-pf-vazio .icon{width:32px;height:32px;color:color-mix(in srgb,var(--muted) 60%,transparent)}
.ac-pf-vazio b{font-size:14px;font-weight:600;color:var(--ink)}
.ac-pf-vazio span{font-size:12px;line-height:1.625;color:var(--muted)}
.ac-pf-cab{flex:none;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ac-pf-cab-textos{min-width:0;flex:1 1 320px}
.ac-pf-nome{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.ac-pf-nome > .icon{width:20px;height:20px;flex:none}
.ac-pf-desc{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.ac-pf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.ac-pf-pendente{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:flex-start;margin-left:auto}
.ac-pf-botoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.ac-pf-aviso{max-width:340px;margin:0;padding:8px 12px;border:1px solid oklch(0.45 0.12 175 / 25%);border-radius:16px;background:oklch(0.45 0.12 175 / 8%);text-align:right;
  font-size:12px;line-height:16px;font-weight:500;color:oklch(0.35 0.12 175)}
html.dark .ac-pf-aviso{border-color:oklch(0.7 0.1 175 / 35%);background:oklch(0.7 0.1 175 / 10%);color:oklch(0.85 0.08 175)}
.ac-pf-corpo{flex:1;min-height:0;overflow:auto;padding:12px}
.ac-pf-nota{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:16px;
  background:color-mix(in srgb,var(--surface-2) 35%,transparent);font-size:11px;line-height:16px;color:var(--muted)}
.ac-pf-nota .icon{flex:none;width:14px;height:14px;margin-top:2px}
.ac-pf-nota p{margin:0}
.ac-pf-moldura{width:100%;max-width:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:16px}
.ac-pf-tab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.ac-pf-tab th{padding:8px;text-align:left;font-size:10px;line-height:1.25;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line)}
.ac-pf-tab th.ac-pf-th-modulo{width:33%}
.ac-pf-tab th.ac-pf-th-acesso{width:8%;padding:8px 4px;text-align:center}
.ac-pf-tab th.ac-pf-th-acoes{width:59%;white-space:nowrap}
.ac-pf-tab td{padding:8px;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);transition:background-color 150ms}
.ac-pf-tab td.ac-pf-td-acesso{padding:8px 4px;text-align:center}
.ac-pf-tab tbody tr:last-child td{border-bottom:0}
.ac-pf-grupo td{background:color-mix(in srgb,var(--surface-2) 20%,transparent)}
.ac-pf-grupo-btn{display:flex;align-items:flex-start;gap:8px;min-width:0;max-width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.ac-pf-grupo-btn > .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted);transition:transform 150ms}
.ac-pf-grupo-btn[aria-expanded="true"] > .icon{transform:rotate(180deg)}
.ac-pf-grupo-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
.ac-pf-grupo-textos{min-width:0}
.ac-pf-linha-nome{display:flex;align-items:center;gap:6px;min-width:0}
.ac-pf-grupo-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.ac-pf-conta{flex:none;font-size:10px;line-height:16px;color:color-mix(in srgb,var(--muted) 75%,transparent)}
.ac-pf-grupo-desc,.ac-pf-mod-desc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:16px;color:color-mix(in srgb,var(--muted) 70%,transparent)}
.ac-pf-dica{font-size:11px;line-height:16px;color:color-mix(in srgb,var(--muted) 75%,transparent)}
.ac-pf-modulo.ativo td{background:color-mix(in srgb,var(--surface-2) 30%,transparent)}
html.dark .ac-pf-modulo.ativo td{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.ac-pf-recuo{min-width:0;margin-left:16px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ac-pf-mod-nome{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:16px;font-weight:500;color:var(--muted)}
.ac-pf-modulo.ativo .ac-pf-mod-nome{color:var(--ink)}
.ac-pf-inativo{font-size:11px;line-height:16px;color:color-mix(in srgb,var(--muted) 70%,transparent)}
.ac-pf-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ac-pf-pilula{display:inline-flex;align-items:center;gap:4px;min-width:max-content;margin:0;padding:2px 6px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:14px;background:var(--canvas);color:var(--muted);font:inherit;font-size:10px;line-height:16px;white-space:nowrap;
  transition:color 150ms,background-color 150ms,border-color 150ms}
.ac-pf-pilula > i{flex:none;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--muted) 40%,transparent)}
@media (hover:hover){.ac-pf-pilula:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--surface-2) 40%,transparent)}}
.ac-pf-pilula[aria-pressed="true"]{border-color:color-mix(in srgb,var(--brand) 35%,transparent);background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand)}
.ac-pf-pilula[aria-pressed="true"] > i{background:var(--brand)}
html.dark .ac-pf-pilula[aria-pressed="true"]{color:var(--destructive);border-color:color-mix(in srgb,var(--destructive) 40%,transparent)}
html.dark .ac-pf-pilula[aria-pressed="true"] > i{background:var(--destructive)}
.ac-pf-pilula:disabled{cursor:not-allowed;opacity:.6}
.ac-pf-pilula:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* caixinha do Jornadas (ui/checkbox.tsx): 16 px, raio 4, marcada no vermelho;
   meio marcada (grupo com parte das opções) mostra um traço */
.ac-check{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;flex:none;width:16px;height:16px;margin:2px 0 0;vertical-align:top;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:4px;background:var(--canvas);box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color 150ms,background-color 150ms,box-shadow 150ms}
@media (hover:hover){.ac-check:hover:not(:checked):not(:indeterminate){border-color:color-mix(in srgb,var(--ring) 75%,transparent)}}
.ac-check:checked,.ac-check:indeterminate{background:var(--brand);border-color:var(--brand)}
.ac-check:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--brand-texto);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ac-check:indeterminate::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;border-radius:1px;background:var(--brand-texto)}
.ac-check:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent)}
.ac-check:disabled{cursor:not-allowed;opacity:.5}
html.dark .ac-check{background:rgba(19,34,53,.55);border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
html.dark .ac-check:checked,html.dark .ac-check:indeterminate{background:var(--brand);border-color:var(--brand)}

/* ── HIERARQUIA DAS CONTAS (Alan, 30/09/2026) ────────────────────────────
   O perfil Gestor, o campo Responsável (obrigatório, com erro na própria linha), o
   selo "Sem aprovador" da lista e a janela de transferência da equipe. Só tokens que
   existem nos dois temas (--alerta, --alerta-fundo, --erro, --destructive, --line...). */
/* Gestor: verde-limão, na mesma escala de tons dos outros perfis */
.ac-perfil-gestor{background:#ecfcca;color:#497d00}
html.dark .ac-perfil-gestor{background:rgba(53,83,14,.3);color:#bbf451}
.ac-icone-gestor{color:#497d00}
html.dark .ac-icone-gestor{color:#bbf451}
/* Planejamento de escala (29/10/2026): o perfil de quem monta a escala de pessoal — azul-céu, na mesma escala de tons dos outros perfis */
.ac-perfil-planejamento{background:#e0f2fe;color:#0369a1}
html.dark .ac-perfil-planejamento{background:rgba(12,74,110,.3);color:#7dd3fc}
.ac-icone-planejamento{color:#0369a1}
html.dark .ac-icone-planejamento{color:#7dd3fc}
/* "Sem aprovador": o selo permanente embaixo do nome (o balão diz o porquê) */
.ac-selo-semaprov{display:flex;align-items:center;gap:4px;width:fit-content;max-width:100%;height:16px;margin-top:2px;padding:0 6px;border-radius:999px;
  background:var(--alerta-fundo);color:var(--alerta)}
.ac-selo-semaprov .icon{flex:none;width:11px;height:11px}
/* o "(obrigatório)" do rótulo e a lista com erro na linha do campo */
.ac-mg-dica.ac-mg-obrig{color:var(--erro)}
.ac-mg-campo .cs-btn[aria-invalid="true"]{border-color:var(--destructive)}
.ac-mg-erro-campo{align-items:flex-start;line-height:16px}
.ac-mg-erro-campo .icon{flex:none;margin-top:1px}
/* a janela de transferência (e a recusa do Perfis): a equipe numa lista que rola sozinha, com o nome cortando e o perfil sempre inteiro */
.ac-modal.ac-modal-transf{max-width:520px}
.ac-transf-corpo{display:grid;gap:16px;min-width:0}
.ac-equipe{list-style:none;margin:0;padding:4px;max-height:220px;overflow-y:auto;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 30%,transparent)}
.ac-equipe-item{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px}
.ac-equipe-item + .ac-equipe-item{border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.ac-equipe-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:20px;font-weight:500;color:var(--ink)}
.ac-equipe-item .ac-chip{flex:none}
.ac-equipe-conta{flex:none;font-size:11px;color:var(--muted)}
@media(max-height:520px){.ac-equipe{max-height:104px}}
/* celular DEITADO (revisão de 30/09/2026): o botão "Transferir e…" ficava abaixo da dobra (740×360 e 844×390) — a janela encolhe o que dá (respiro, texto, lista) e o rodapé fica PRESO ao pé
   da caixa, à vista mesmo com o corpo rolando */
@media(max-height:520px){
  .ac-modal.ac-modal-transf{padding:14px 16px;gap:10px}
  .ac-modal-transf .ac-modal-desc{font-size:13px;line-height:18px}
  .ac-modal-transf .ac-transf-corpo{gap:10px}
  .ac-modal-transf .ac-equipe{max-height:72px}
  .ac-modal-transf .ac-modal-rodape{position:sticky;bottom:-14px;z-index:1;margin:0 -16px -14px;padding:8px 16px 14px;background:var(--surface);border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
}

/* ── CELULAR E TOQUE ─────────────────────────────────────────────────────
   375 px: modais em 96vw/92dvh (já acima), rodapé empilhado, tabelas com
   rolagem lateral dentro da caixa, campos com 16 px e alvos de 40 px. */
@media(max-width:900px){
  .ac-perfis .cartao.ac-pf-cartao{overflow:visible}
  .ac-pf-lista,.ac-pf-corpo{overflow:visible}
  .ac-pf-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px}
}
@media(max-width:640px){
  .ac-pf-moldura{overflow-x:auto}
  .ac-pf-tab{min-width:520px}
  .ac-pf-pendente{align-items:stretch;width:100%;margin-left:0}
  .ac-pf-botoes{justify-content:stretch}
  .ac-pf-botoes .ac-btn{flex:1 1 150px}
  .ac-pf-aviso{max-width:none;text-align:left}
  .ac-filtro-acoes{justify-content:flex-start;flex-wrap:wrap}
  .ac-senha-linha{flex-wrap:wrap}
  .ac-senha-linha .ac-senha-campo{flex-basis:100%}
}
@media (hover:none) and (pointer:coarse){
  .ac-modal .ac-input,.ac-pagina .ac-input,.ac-modal .busca-wrap input,.ac-pagina .busca-wrap input,.ac-modal .cs-campo .cs-busca,.ac-pagina .cs-campo .cs-busca,
  .login-shell .cs-campo .cs-busca{font-size:16px}
  .ac-modal .ac-input,.ac-modal .cs-btn,.ac-pagina .cs-btn,.ac-pagina .busca-wrap input,.ac-modal .ac-btn{height:40px}
  .ac-filtro-acoes .btn-icone{width:40px;height:40px}
  .ac-kpi{min-height:44px}
  .ac-usu-tab col:nth-child(9){width:236px}
  .ac-acao{width:40px;height:40px}
  .ac-acoes{gap:0}
  .ac-pf-pilula{min-height:36px;padding:0 10px;font-size:12px}
  .ac-pf-acoes{gap:6px}
  .ac-check{width:22px;height:22px}
  .ac-check:checked::after{left:7px;top:3px;width:5px;height:10px}
  .ac-check:indeterminate::after{top:9px}
  .ac-pf-item{padding:14px 12px}
  .ac-encerrar{height:40px;padding:0 14px}
  .ac-modal-x{top:10px;right:10px;width:40px;height:40px}
  .ac-mg-seta{width:40px;height:40px;margin:-12px -12px -12px 0}
  .ac-copiar{width:36px;height:36px;right:2px}
  .ac-lupa{width:40px;height:40px;right:0}
  .ac-input.ac-input-lupa{padding-right:44px}
  .ac-base-linha .ac-link{display:inline-flex;align-items:center;min-height:40px;padding:0 6px;margin:-12px 0}
  /* o alvo do link (40 px) sobra 12 px para cima: quebrado em outra linha, ele cobria o
     texto de cima e o toque no texto relia a planilha (segunda revisão) */
  .ac-base-linha{row-gap:14px}
}

/* margens seguras nas laterais (viewport-fit=cover: no iPhone deitado o recorte
   da câmera fica sobre a página); no computador env() vale 0 — 16/09/2026 */
.login-shell{padding-left:max(clamp(14px,3.2vw,34px),env(safe-area-inset-left));padding-right:max(clamp(14px,3.2vw,34px),env(safe-area-inset-right))}
.senha-shell,.ac-modal-fundo{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
/* desligado não recebe o toque: o balão com o motivo fica no invólucro (a
   pílula fora do escopo do perfil; a lista travada ao editar a própria conta) */
.ac-acao-wrap > .ac-pf-pilula:disabled,.ac-mg-campo .cs-btn:disabled{pointer-events:none}
.ac-avisos{right:max(32px,env(safe-area-inset-right))}
@media(max-width:900px){.ac-avisos{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}}
@media(max-width:640px){.login-shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}}