/* ═══════════════════════════════════════════════════════
   CRM LRM Internet — Design System
   Font: Plus Jakarta Sans + DM Sans | Azul LRM #1B73C4
═══════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════════
   V61 Parte 3 — TOKENS DO PORTAL
   Uma família só de cor, sombra, raio e transição para o shell inteiro
   (entrada, barra lateral, topo, dashboard, Equipe e Perfil). Tudo o que é
   do shell usa estes nomes; o modo escuro só troca os valores (ver DARK MODE).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Marca LRM */
  --lrm-azul:        #1B73C4;
  --lrm-azul-claro:  #4BA3E3;
  --lrm-azul-escuro: #0D4F8B;
  --lrm-ciano:       #00B4D8;
  --grad-marca: linear-gradient(135deg, #4BA3E3 0%, #1B73C4 55%, #0D4F8B 100%);
  --grad-sutil: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);

  /* Neutros com um toque de azul (não cinza puro) */
  --tinta-900: #0B1F38;
  --tinta-700: #2B405C;
  --tinta-500: #64748B;
  --tinta-300: #CBD6E4;
  --fundo:       #F4F8FD;
  --superficie:  #FFFFFF;
  --borda:       #E7EEF7;
  --borda-campo: #D3DEEB;   /* campo de formulário precisa de contorno que se veja no sol */
  --realce:      #F0F6FD;   /* fundo do hover e dos chips */
  --skel-a: #EEF3F9;
  --skel-b: #E1E9F3;

  /* Profundidade: uma sombra fina de contato + uma difusa */
  --sombra-sm: 0 1px 2px rgba(16,40,80,.04), 0 1px 3px rgba(16,40,80,.06);
  --sombra-md: 0 4px 12px rgba(16,40,80,.06), 0 2px 4px rgba(16,40,80,.04);
  --sombra-lg: 0 12px 32px rgba(16,40,80,.10), 0 4px 8px rgba(16,40,80,.05);
  --sombra-marca: 0 10px 30px rgba(27,115,196,.25);
  --foco: 0 0 0 4px rgba(27,115,196,.14);

  /* Raios e transição */
  --raio-sm: 10px;
  --raio-md: 16px;
  --raio-lg: 22px;
  --raio-full: 999px;
  --transicao: .2s cubic-bezier(.2,.8,.2,1);

  --sidebar-w: 264px;
  --topbar-h:  68px;

  /* Nomes antigos: seguem valendo e acompanham a paleta acima, para o que já
     usava var(--color-*) (Status do Banco, por exemplo) não ser reescrito. */
  --color-primary:       #1B73C4;
  --color-primary-dark:  #0D4F8B;
  --color-primary-light: #E8F2FC;
  --color-accent:        #00B4D8;
  --color-bg:            #F4F8FD;
  --color-surface:       #FFFFFF;
  --color-border:        #E7EEF7;
  --color-text-primary:  #0B1F38;
  --color-text-secondary:#64748B;
  --color-text-muted:    #94A3B8;
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --blue:        #1B73C4;
  --blue-dark:   #0D4F8B;
  --blue-light:  #E8F2FC;
  --blue-xlight: #F0F6FD;
  --white:       #FFFFFF;
  --bg:          #F4F8FD;
  --text:        #0B1F38;
  --text-muted:  #64748B;
  --border:      #E7EEF7;
  --shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.1);
  --radius:      12px;
  --radius-sm:   8px;
  --transition:  .18s ease;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--fundo);
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
}

h1, h2, h3, h4, .sidebar-brand-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── COMPONENTES DO SHELL (V61 P3) ───────────────────────────────────────
   Botão, campo, cartão, página, esqueleto e estado vazio: o que se repete
   em Equipe, Perfil e no modal sai daqui, para não haver dois botões azuis
   diferentes na mesma tela. */

/* Foco de teclado. :where() não pesa na especificidade — quem já define o
   próprio contorno continua mandando. */
:where(a, button, [role="button"], select, summary):focus-visible {
  outline: 2px solid var(--lrm-azul);
  outline-offset: 2px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--raio-sm);
  font: 700 .875rem/1 'Plus Jakarta Sans', sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primario { background: var(--grad-marca); color: #fff; box-shadow: var(--sombra-marca); }
.btn--primario:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(27,115,196,.35); }

.btn--secundario { background: var(--superficie); color: var(--lrm-azul); border-color: var(--borda-campo); }
.btn--secundario:hover:not(:disabled) { background: var(--realce); border-color: var(--lrm-azul-claro); }

.btn--neutro { background: var(--superficie); color: var(--tinta-500); border-color: var(--borda-campo); }
.btn--neutro:hover:not(:disabled) { background: var(--realce); color: var(--tinta-700); }

/* Botão só de ícone (fechar, sair) */
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: var(--raio-sm); background: none;
  color: var(--tinta-500); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-icone:hover { background: var(--realce); color: var(--tinta-900); }
.btn-icone svg { width: 19px; height: 19px; }

/* Campo: rótulo em cima, caixa embaixo */
.campo { display: block; min-width: 0; }
.campo > label, .campo-rotulo {
  display: block; margin-bottom: 6px;
  font: 600 .8rem/1.3 'DM Sans', sans-serif; color: var(--tinta-500);
}
.campo input, .campo-input {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--tinta-900);
  font: 500 .92rem 'DM Sans', sans-serif; outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder, .campo-input::placeholder { color: #94A3B8; }
.campo input:focus, .campo-input:focus { border-color: var(--lrm-azul); box-shadow: var(--foco); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* Página interna do portal: quem rola é a página inteira, e o conteúdo é que
   tem largura máxima — antes o limite ficava na própria área de rolagem e a
   barra de rolagem aparecia no meio do monitor. */
.pagina { flex: 1; min-width: 0; overflow-y: auto; padding: 32px; }
.pagina__miolo { max-width: 1180px; }
.pagina__miolo--estreito { max-width: 820px; }
.pagina-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.pagina-cab h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--tinta-900); }
.pagina-cab p { margin-top: 4px; font-size: .9rem; color: var(--tinta-500); }
.pagina-cab__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-md); box-shadow: var(--sombra-sm);
  padding: 24px; margin-bottom: 20px;
}
.cartao__titulo {
  font-size: 1rem; font-weight: 700; color: var(--tinta-900);
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--borda);
}

/* Esqueleto de carregamento (o brilho é o @keyframes shimmer, mais abaixo) */
.skel {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skel--linha { height: 12px; }
.skel--valor { width: 72px; height: 14px; }

/* Lista vazia ou que não carregou: diz o que houve e o que fazer */
.estado {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 20px; color: var(--tinta-500);
}
.estado__icone {
  width: 64px; height: 64px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--raio-lg); background: var(--realce); color: var(--lrm-azul);
}
.estado__icone svg { width: 28px; height: 28px; }
.estado :is(h2, h3) { font-size: 1.05rem; font-weight: 700; color: var(--tinta-900); margin-bottom: 6px; }
.estado p { max-width: 380px; font-size: .88rem; line-height: 1.5; }
.estado--erro .estado__icone { background: #FEF2F2; color: #DC2626; }
/* quando o estado é a tela inteira (ex.: módulo sem permissão) */
.estado--tela { flex: 1; justify-content: center; }

/* Barra de rolagem discreta. A borda transparente faz o respiro sem depender
   da cor do fundo (a mesma barra aparece sobre branco e sobre o fundo azulado). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--tinta-300); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-500); background-clip: padding-box; }
/* Firefox não tem ::-webkit-scrollbar. Fica dentro do @supports porque, no
   Chrome, declarar scrollbar-color desliga o estilo de cima. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--tinta-300) transparent; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
  .skel, .login-sinal__pulso { animation: none !important; }
  .btn, .nav-item, .nav-subitem, .dash-module-card, .equipe-card, .btn-entrar { transition: none !important; }
}

/* ── LOGIN ─────────────────────────────────────────────
   V61 P3: painel da marca à esquerda, formulário à direita. No celular o
   painel vira uma faixa no topo e o formulário sobe por cima dela. */
#login-screen {
  display: flex;                 /* o app.js alterna entre flex e none */
  height: 100vh; height: 100dvh;
  background: var(--superficie);
  overflow-y: auto;
}
.login-wrap {
  flex: 1; min-height: 100%;
  align-self: flex-start;        /* cresce com o formulário; esticada, ela espremia a faixa da marca em tela baixa */
  display: grid; grid-template-columns: 1fr 1fr;
}

.login-marca {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 32px;
  background: var(--grad-marca); color: #fff; text-align: center;
}
/* pontos de rede, bem de leve */
.login-marca::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 28px 28px; opacity: .5;
}
.login-logo-wrap { position: relative; width: 110px; height: 110px; margin-bottom: 26px; }
.login-logo {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.14);
}
/* O sinal que sai da logo: os mesmos arcos de Wi-Fi do símbolo da LRM,
   abertos em volta dela. Um anel pulsa devagar — conexão que não cai. */
.login-sinal {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 1200px; height: 1200px; transform: translate(-50%, -50%);
  pointer-events: none;
}
.login-sinal circle { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.login-sinal__pulso {
  transform-origin: 600px 600px; opacity: 0;
  animation: login-pulso 6s cubic-bezier(.2,.6,.3,1) infinite;
}
.login-sinal__pulso--2 { animation-delay: 3s; }
@keyframes login-pulso {
  0%   { transform: scale(.14); opacity: 0; }
  12%  { opacity: .34; }
  100% { transform: scale(1); opacity: 0; }
}

.login-marca__nome {
  font: 800 2.6rem/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .03em;
}
.login-marca__desc { margin-top: 10px; font-size: 1.02rem; font-weight: 500; opacity: .88; }
.login-marca__assinatura {
  position: absolute; left: 0; right: 0; bottom: 30px;
  font: 700 .7rem/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .24em; text-transform: uppercase; opacity: .72;
}

.login-form-area {
  display: flex; align-items: center; justify-content: center;
  padding: 48px; background: var(--superficie);
}
.login-form { width: 100%; max-width: 400px; }
.login-form h1 {
  font-size: 1.9rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--tinta-900); margin-bottom: 6px;
}
.login-form .sub { color: var(--tinta-500); font-size: .95rem; margin-bottom: 28px; }

.login-input { margin-bottom: 16px; }
.login-input label {
  display: block; margin-bottom: 7px;
  font-size: .82rem; font-weight: 600; color: var(--tinta-700);
}
.login-input input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--tinta-900);
  font: 500 16px 'DM Sans', sans-serif; outline: none;   /* 16px: o iPhone não dá zoom ao focar */
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.login-input input::placeholder { color: #94A3B8; }
.login-input input:focus { border-color: var(--lrm-azul); box-shadow: 0 0 0 4px rgba(27,115,196,.12); }
.login-input .input-senha-wrap input { padding-right: 52px; }
.login-input .btn-olho { right: 6px; width: 44px; height: 44px; justify-content: center; }
.login-input .btn-olho svg { width: 19px; height: 19px; }

.btn-entrar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin-top: 8px;
  background: var(--grad-marca); color: #fff; border: none; border-radius: var(--raio-sm);
  font: 700 17px 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  box-shadow: var(--sombra-marca);
  transition: transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
}
/* A seta é do CSS de propósito: o app.js troca o texto do botão por
   "Entrando…" e apagaria um ícone que estivesse dentro dele. */
.btn-entrar::after { content: '→'; transition: transform var(--transicao); }
.btn-entrar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(27,115,196,.35); }
.btn-entrar:hover:not(:disabled)::after { transform: translateX(4px); }
.btn-entrar:active:not(:disabled) { transform: scale(.99); }
.btn-entrar:disabled { opacity: .7; cursor: progress; }
.btn-entrar:disabled::after { content: none; }
.btn-entrar:focus-visible { outline: 2px solid var(--lrm-azul-escuro); outline-offset: 3px; }

.login-error {
  display: none; margin-top: 14px; padding: 11px 14px;
  border: 1px solid #FECACA; border-radius: var(--raio-sm);
  background: #FEF2F2; color: #B91C1C; font-size: .86rem; font-weight: 600;
}
.login-error.show { display: block; }
.login-ajuda { margin-top: 22px; font-size: .82rem; color: var(--tinta-500); text-align: center; }

/* Celular e tablet em pé: empilha. A marca vira faixa e o formulário é o
   que ocupa a tela. */
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-marca { min-height: 200px; padding: 26px 20px 46px; }
  .login-logo-wrap { width: 72px; height: 72px; margin-bottom: 12px; }
  .login-logo { box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.14); }
  .login-marca__nome { font-size: 1.7rem; }
  .login-marca__desc { margin-top: 6px; font-size: .9rem; }
  .login-marca__assinatura { display: none; }      /* a própria logo já diz */
  .login-form-area {
    position: relative; align-items: flex-start;
    margin-top: -22px; padding: 28px 22px 32px;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  }
  .login-form { max-width: 440px; margin: 0 auto; }
  .login-form h1 { font-size: 1.55rem; }
  .login-form .sub { margin-bottom: 22px; }
  .login-error { font-size: .92rem; }
}
/* Celular deitado ou teclado aberto: a faixa encolhe para o formulário caber */
@media (max-width: 860px) and (max-height: 560px) {
  .login-marca { min-height: 0; padding: 14px 20px 34px; flex-direction: row; gap: 12px; }
  .login-logo-wrap { width: 44px; height: 44px; margin-bottom: 0; }
  .login-marca__nome { font-size: 1.3rem; }
  .login-marca__desc { display: none; }
}

/* Quem recarrega a página já logado via a tela de entrada piscar até o
   servidor confirmar a sessão. O index.html marca <html class="verificando">
   quando há sessão guardada; enquanto isso fica só um indicador, e o
   showLogin()/showApp() do app.js tiram a marca. */
html.verificando #login-screen { display: none; }
html.verificando body::after {
  content: ''; position: fixed; inset: 0; margin: auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--borda); border-top-color: var(--lrm-azul);
  animation: spin .7s linear infinite;
}

/* ── MAIN LAYOUT ─────────────────────────────────────── */
#main-app {
  display: none;
  height: 100vh;
  overflow: hidden;
}

#main-app.visible { display: flex; }

/* ── SIDEBAR ───────────────────────────────────────────
   V61 P3: marca fixa no alto, menu rolando no meio, perfil preso embaixo. */
#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  z-index: 100;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 14px; flex-shrink: 0;
  text-decoration: none;
}
.sidebar-brand-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 4px 12px rgba(27,115,196,.22);
}
.sidebar-brand-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand-text {
  font-size: 1.2rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em;
  color: var(--tinta-900);
}
.sidebar-brand-text span {
  display: block; margin-top: 3px;
  font: 500 .68rem/1.2 'DM Sans', sans-serif; letter-spacing: .01em;
  color: var(--tinta-500);
}

nav.sidebar-nav {
  --nav-pad: 14px;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 2px var(--nav-pad) 16px;
}

.nav-section-label {
  padding: 16px 12px 6px;
  font: 700 .7rem/1.2 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-500);
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 2px;
  border-radius: var(--raio-sm);
  color: var(--tinta-700);
  font: 600 .92rem/1.25 'Plus Jakarta Sans', sans-serif;
  cursor: pointer; user-select: none;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.nav-icon {
  width: 19px; height: 19px; flex-shrink: 0;
  color: var(--tinta-500);
  transition: color var(--transicao);
}
.nav-item:hover { background: var(--realce); color: var(--lrm-azul); }
.nav-item:hover .nav-icon { color: var(--lrm-azul); }

/* Onde você está: a pílula da marca + a barrinha ciano na borda do menu */
.nav-item.active { background: var(--grad-marca); color: #fff; box-shadow: var(--sombra-marca); }
.nav-item.active .nav-icon { color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; left: calc(-1 * var(--nav-pad)); top: 50%;
  width: 4px; height: 60%; transform: translateY(-50%);
  background: var(--lrm-ciano); border-radius: 0 4px 4px 0;
}

/* Grupo (Financeiro, Comercial, Serviços e TI) só abre e fecha — não é um
   lugar. Fica azul quando tem alguém ativo dentro, mas a pílula é do filho. */
.nav-item--grupo.active { background: transparent; color: var(--lrm-azul); box-shadow: none; }
.nav-item--grupo.active .nav-icon { color: var(--lrm-azul); }
.nav-item--grupo.active::before { content: none; }
.nav-item--grupo:hover { background: var(--realce); }

.nav-chevron {
  width: 15px; height: 15px; margin-left: auto; flex-shrink: 0;
  color: var(--tinta-500); opacity: .7;
  transition: transform var(--transicao);
}
.nav-item.expanded .nav-chevron { transform: rotate(90deg); }

/* Submenu: recuado, com uma linha-guia ligando os itens ao grupo */
.nav-submenu {
  max-height: 0; overflow: hidden;
  margin-left: 23px; padding-left: 9px;
  border-left: 1.5px solid var(--borda);
  transition: max-height .28s cubic-bezier(.2,.8,.2,1);
}
.nav-submenu.open { max-height: 320px; margin-bottom: 6px; }

.nav-subitem {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--raio-sm);
  color: var(--tinta-700);
  font: 600 .86rem/1.25 'Plus Jakarta Sans', sans-serif;
  cursor: pointer; user-select: none;
  transition: background var(--transicao), color var(--transicao);
}
.nav-subitem .nav-icon { width: 16px; height: 16px; }
.nav-subitem:hover { background: var(--realce); color: var(--lrm-azul); }
.nav-subitem:hover .nav-icon { color: var(--lrm-azul); }
/* Sem a sombra da pílula de cima: o submenu corta o que sai da caixa dele
   (é assim que ele abre e fecha) e a sombra apareceria cortada. */
.nav-subitem.active { background: var(--grad-marca); color: #fff; }
.nav-subitem.active .nav-icon { color: #fff; }
.nav-subitem.active::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 3px; height: 60%; transform: translateY(-50%);
  background: var(--lrm-ciano); border-radius: 0 3px 3px 0;
}

/* Perfil no rodapé */
.sidebar-footer {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--borda);
}
.sidebar-perfil {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--raio-sm);
  text-decoration: none;
  transition: background var(--transicao);
}
.sidebar-perfil:hover { background: var(--realce); }
.sidebar-perfil img {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; background: var(--realce);
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--borda-campo);
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font: 700 .86rem/1.3 'Plus Jakarta Sans', sans-serif;
  color: var(--tinta-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role { font-size: .72rem; color: var(--tinta-500); }

.btn-logout {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; padding: 0;
  border: none; border-radius: var(--raio-sm); background: none;
  color: var(--tinta-500); cursor: pointer;
  transition: color var(--transicao), background var(--transicao);
}
.btn-logout:hover { color: #DC2626; background: #FEF2F2; }
.btn-logout svg { width: 17px; height: 17px; }

/* ── CONTENT AREA ────────────────────────────────────── */
#content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── TOPBAR ────────────────────────────────────────────
   V61 P3: de onde vem (em cima, pequeno) e onde está (o título). O selo
   azul repetia o título e a busca não buscava nada — os dois saíram. */
#topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  z-index: 50;
}

.topbar-breadcrumb {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
#topbar-parent {
  font: 700 .68rem/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-500);
}
.topbar-sep { display: none; }
.topbar-breadcrumb strong {
  font: 800 1.25rem/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em;
  color: var(--tinta-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O app.js ainda escreve o nome do módulo aqui; fica no HTML, fora da tela. */
.topbar-module-badge { display: none; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-username {
  font: 700 .86rem/1 'Plus Jakarta Sans', sans-serif;
  color: var(--tinta-900);
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── IFRAME CONTAINER ────────────────────────────────── */
#module-frame-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#module-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── DASHBOARD HOME ────────────────────────────────────
   Saudação, categorias e cards ficam mais abaixo ("DASHBOARD — saudação e
   cards dos sistemas"). Aqui só a área que rola. */
#dashboard-home {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

/* Carregando um módulo: em vez do "Carregando…" girando, o esqueleto da tela
   que vem. O texto (com o nome do módulo) continua, pequeno, para leitor de
   tela e para quem quer saber o que está abrindo. */
.frame-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--fundo);
  overflow: hidden;
}
.frame-loading.hidden { display: none; }
.frame-loading p {
  display: flex; align-items: center; gap: 8px;
  color: var(--tinta-500);
  font-size: .82rem;
  font-weight: 600;
}
.frame-loading p::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lrm-azul-claro);
  animation: frame-pisca 1.1s ease-in-out infinite;
}
@keyframes frame-pisca { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.frame-skel { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.frame-skel__titulo { width: min(320px, 60%); height: 26px; }
.frame-skel__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.frame-skel__cards .skel { height: 92px; border-radius: var(--raio-md); }
.frame-skel__bloco { flex: 1; min-height: 120px; border-radius: var(--raio-md); }

.spinner {
  width: 52px;
  height: 52px;
  border: 3px solid var(--borda);
  border-top-color: var(--lrm-azul);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 18px;
  background: var(--tinta-900);
  color: #fff;
  border-radius: var(--raio-sm);
  font-size: .86rem;
  font-weight: 600;
  box-shadow: var(--sombra-lg);
  z-index: 9999;
  transform: translateY(60px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #14532D; }
.toast.error { background: #7F1D1D; }


/* ??? AJUSTE 5 ? MELHORIAS VISUAIS ENTERPRISE ??? */

/* 5.4 ? Badges de status com pulso animado */
.badge-ativo {
  display: inline-flex; align-items: center; gap: 5px;
  background: #ECFDF5; color: #059669;
  font-size: 0.75rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
}
.badge-ativo::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* 5.5 ? Tabela enterprise */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table thead th {
  padding: 12px 16px; text-align: left;
  font-size: 0.72rem; font-weight: 700;
  color: #64748B; text-transform: uppercase; letter-spacing: 0.05em;
  background: #F8FAFC; border-bottom: 1px solid #E2E8F0; white-space: nowrap;
}
.data-table tbody td {
  padding: 14px 16px; color: #1A202C;
  border-bottom: 1px solid #F0F4F8; vertical-align: middle;
}
.data-table tbody tr:hover { background: #F8FAFC; }
.data-table tbody tr:last-child td { border-bottom: none; }
.dias-critico { color: #DC2626; font-weight: 700; }
.dias-alerta  { color: #D97706; font-weight: 600; }

/* 5.6 ? Shimmer loading */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer-cell {
  height: 16px;
  background: linear-gradient(90deg, #F0F4F8 25%, #E2E8F0 50%, #F0F4F8 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

/* 5.7 ? Toast melhorado */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.toast-rich {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: white; border-radius: 10px; padding: 14px 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 0.875rem; color: #1A202C;
  animation: slideInRight 0.3s ease;
  max-width: 360px; pointer-events: none;
}
.toast-rich.hide { animation: slideOutRight 0.3s ease forwards; }

/* 5.8 ? Empty state elegante */
.empty-state {
  text-align: center; padding: 60px 20px; color: #94A3B8;
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; color: #CBD5E0; }
.empty-state h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 700; color: #64748B; margin: 0 0 6px;
}
.empty-state p { font-size: 0.85rem; margin: 0; }

/* Sidebar tooltip nos itens */
.nav-item { position: relative; }


/* ═══════════════════════════════════════════════════════════════
   AJUSTES VISUAIS HABLLA — Hero, Dropdown, Dark Mode, Cards
═══════════════════════════════════════════════════════════════ */

/* ── MODULE HERO BANNER ─────────────────────────────────────── */
#module-hero-container {
  padding: 20px 28px 0;
  background: var(--color-bg);
  flex-shrink: 0;
}
.module-hero {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  min-height: 130px;
}
.module-hero::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 280px; height: 280px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}
.module-hero::after {
  content: '';
  position: absolute;
  right: 80px; bottom: -80px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}
.module-hero__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  z-index: 1;
  flex: 1;
}
.module-hero__icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.module-hero__icon svg { width: 20px; height: 20px; color: white; }
.module-hero__welcome {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 5px;
}
.module-hero__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem; font-weight: 800;
  color: white; margin: 0 0 8px;
}
.module-hero__activity {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.80);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.module-hero__activity strong { color: white; font-weight: 700; }
.module-hero__activity-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.90);
  font-size: 0.78rem; font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.20);
}
.module-hero__illustration {
  position: relative;
  width: 200px; height: 110px;
  flex-shrink: 0;
  z-index: 1;
}
.module-hero__img {
  height: 130px;
  width: auto;
  object-fit: contain;
  position: absolute;
  right: 0; bottom: -24px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.20));
  max-width: 200px;
}
.float-el {
  position: absolute;
  font-size: 1.4rem;
  animation: floatAnim 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  pointer-events: none;
}
.float-el--1 { top: 8px;  right: 160px; animation-delay: 0s; }
.float-el--2 { top: 0px;  right: 80px;  animation-delay: 0.5s; font-size: 1.1rem; }
.float-el--3 { top: 18px; right: 215px; animation-delay: 1s;   font-size: 1rem; }
@keyframes floatAnim {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── SUBCAT CARDS ────────────────────────────────────────────── */
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.subcat-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.subcat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  border-color: #0077CC;
}
.subcat-card--disabled { cursor: default; pointer-events: none; }
.subcat-card--disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-color: #E2E8F0;
}
.subcat-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: #7C3AED;
  color: white;
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
}
.subcat-card__tag--blue  { background: #0077CC; }
.subcat-card__tag--green { background: #10B981; }
.subcat-card__media {
  width: 100%;
  height: 150px;
  background: linear-gradient(135deg, #F0F4F8, #E8F4FD);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.subcat-card__media img {
  max-height: 130px; width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.subcat-card:hover .subcat-card__media img { transform: scale(1.05); }
.subcat-card__media--muted {
  background: linear-gradient(135deg, #F8FAFC, #F0F4F8);
  filter: grayscale(0.6) opacity(0.7);
}
.subcat-card__body { padding: 16px; }
.subcat-card__body h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  color: #1A202C; margin: 0 0 6px;
}
.subcat-card__body p {
  font-size: 0.8rem; color: #64748B;
  margin: 0; line-height: 1.5;
}
.subcat-card--disabled .subcat-card__body h4 { color: #94A3B8; }

/* ── USER DROPDOWN ───────────────────────────────────────────── */
.topbar-user-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid transparent;
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.topbar-user-wrap:hover { background: var(--realce); border-color: var(--borda); }
.topbar-user-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--tinta-500); }
.topbar-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--realce);
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--borda-campo);
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 256px;
  background: var(--superficie);
  border-radius: var(--raio-md);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-lg);
  z-index: 1000;
  overflow: hidden;
  animation: dropdownIn .2s cubic-bezier(.2,.8,.2,1);
  display: none;
  cursor: default;
}
.user-dropdown.open { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-dropdown__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.user-dropdown__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--realce);
}
.user-dropdown__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-dropdown__info { min-width: 0; }
.user-dropdown__name {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem; font-weight: 700;
  color: var(--tinta-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown__email {
  display: block;
  font-size: 0.75rem; color: var(--tinta-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown__divider {
  height: 1px;
  background: var(--borda);
  margin: 4px 0;
}
.user-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.875rem;
  color: var(--tinta-700);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}
.user-dropdown__item > svg,
.user-dropdown__item > div > svg { width: 16px; height: 16px; color: var(--tinta-500); flex-shrink: 0; }
.user-dropdown__item:hover { background: var(--realce); color: var(--tinta-900); }
.user-dropdown__item--danger,
.user-dropdown__item--danger > svg { color: #DC2626; }
.user-dropdown__item--danger:hover { background: #FEF2F2; color: #B91C1C; }
.item-arrow { width: 14px !important; color: var(--tinta-300) !important; }
.toggle-switch {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--tinta-300);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: background var(--transicao);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transicao);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--lrm-azul); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--lrm-azul); outline-offset: 2px; }

/* ── DARK MODE ───────────────────────────────────────────────── */
/* V61 P3: o shell é todo feito de tokens, então o modo escuro é trocar os
   valores aqui. As linhas soltas abaixo são do que ainda tem cor escrita à
   mão (tabelas, cards antigos) ou do que precisa de um ajuste próprio. */
body.dark-mode {
  --tinta-900: #F1F5F9;
  --tinta-700: #CBD5E1;
  --tinta-500: #94A3B8;
  --tinta-300: #475569;
  --fundo:       #0F172A;
  --superficie:  #1E293B;
  --borda:       #334155;
  --borda-campo: #3D4E66;
  --realce:      rgba(75,163,227,.12);
  --skel-a: #243247;
  --skel-b: #2E3F58;
  --grad-sutil: linear-gradient(180deg, #1E293B 0%, #1B2537 100%);
  --sombra-sm: 0 1px 2px rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.20);
  --sombra-md: 0 4px 12px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.20);
  --sombra-lg: 0 12px 32px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.24);
  --foco: 0 0 0 4px rgba(75,163,227,.22);

  --color-bg:             #0F172A;
  --color-surface:        #1E293B;
  --color-border:         #334155;
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;
}
body.dark-mode .nav-item:hover,
body.dark-mode .nav-subitem:hover { color: #7CC0F2; }
body.dark-mode .nav-item:hover .nav-icon,
body.dark-mode .nav-subitem:hover .nav-icon { color: #7CC0F2; }
body.dark-mode .nav-item.active,
body.dark-mode .nav-subitem.active { color: #fff; }
body.dark-mode .nav-item.active .nav-icon,
body.dark-mode .nav-subitem.active .nav-icon { color: #fff; }
body.dark-mode .nav-item--grupo.active,
body.dark-mode .nav-item--grupo.active .nav-icon { color: #7CC0F2; }
body.dark-mode .btn--secundario { color: #7CC0F2; }
body.dark-mode .btn-logout:hover,
body.dark-mode .btn-excluir { background: rgba(239,68,68,.12); }
body.dark-mode .user-dropdown__item--danger:hover { background: rgba(239,68,68,.12); color: #FCA5A5; }
body.dark-mode .login-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #FCA5A5; }
body.dark-mode .estado--erro .estado__icone { background: rgba(239,68,68,.14); color: #FCA5A5; }
body.dark-mode .data-table thead th { background: #0F172A; color: #64748B; }
body.dark-mode .data-table tbody td { color: #F1F5F9; border-color: #334155; }
body.dark-mode .data-table tbody tr:hover { background: rgba(255,255,255,0.03); }
body.dark-mode input, body.dark-mode textarea {
  background: #0F172A; border-color: #334155; color: #F1F5F9;
}
body.dark-mode #module-hero-container { background: #0F172A; }
body.dark-mode .subcat-card { background: #1E293B; border-color: #334155; }
body.dark-mode .subcat-card__body h4 { color: #F1F5F9; }
body.dark-mode .subcat-card__media { background: linear-gradient(135deg, #1E293B, #0F172A); }
body.dark-mode .module-section__header { border-color: #334155; }
body.dark-mode .module-section__icon-wrap { background: #334155; }
body.dark-mode .module-section__title { color: #F1F5F9; }

/* ── MODULE SECTION ──────────────────────────────────────────── */
.module-section { margin-bottom: 36px; }
.module-section__header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F0F4F8;
}
.module-section__icon-wrap {
  width: 52px; height: 36px;
  border-radius: 8px;
  background: #F0F4F8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.module-section__icon-wrap svg { width: 18px; color: #7C3AED; }
.module-section__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: #1A202C; margin: 0 0 2px;
}
.module-section__desc { font-size: 0.78rem; color: #94A3B8; margin: 0; }


/* ═══════════════════════════════════════════════════════
   DASHBOARD — saudação e cards dos sistemas (V61 P3)
   O faixão azul e as fotos dos cards saíram: a tela inicial serve para
   chegar rápido ao sistema, então fica o cumprimento, a data e os cards
   agrupados por área — todos com o mesmo desenho.
═══════════════════════════════════════════════════════ */
.dash-saudacao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.dash-saudacao h1 {
  font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
  color: var(--tinta-900);
}
.dash-saudacao p { margin-top: 4px; font-size: .95rem; color: var(--tinta-500); }
.dash-saudacao__data {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-full); box-shadow: var(--sombra-sm);
  font-size: .82rem; font-weight: 600; color: var(--tinta-700);
  white-space: nowrap;
}
.dash-saudacao__data svg { width: 15px; height: 15px; color: var(--lrm-azul); }

/* Categoria: o mesmo rótulo miúdo do menu lateral, com um fio até a borda */
.dash-category { margin-bottom: 32px; }
.dash-category__header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.dash-category__header::after {
  content: ''; flex: 1; align-self: center; height: 1px; min-width: 24px;
  background: var(--borda);
}
.dash-category__title {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-700); white-space: nowrap;
}
.dash-category__desc { font-size: .82rem; color: var(--tinta-500); }

.dash-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.dash-module-card {
  position: relative; overflow: hidden;
  display: block; padding: 22px;
  background: var(--grad-sutil);
  border: 1px solid var(--borda); border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.dash-module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: var(--lrm-azul-claro);
}
.dash-module-card:focus-visible { outline: 2px solid var(--lrm-azul); outline-offset: 3px; }
/* brilho no canto — some no modo escuro, onde viraria uma mancha */
.dash-module-card::after {
  content: ''; position: absolute; top: -70px; right: -70px;
  width: 220px; height: 220px;
  background: radial-gradient(closest-side, rgba(75,163,227,.16), transparent);
  pointer-events: none;
}
body.dark-mode .dash-module-card::after { content: none; }

.dash-card-icone {
  width: 52px; height: 52px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--grad-marca);
  box-shadow: 0 6px 16px rgba(27,115,196,.24);
}
.dash-card-icone svg { width: 26px; height: 26px; color: #fff; }
.dash-module-card h3 {
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  color: var(--tinta-900); margin-bottom: 4px;
  padding-right: 22px;                    /* não passa por baixo da seta */
}
.dash-module-card p { font-size: .82rem; line-height: 1.45; color: var(--tinta-500); }
.dash-card-seta {
  position: absolute; top: 22px; right: 20px;
  width: 18px; height: 18px;
  color: var(--tinta-300);
  transition: transform var(--transicao), color var(--transicao);
}
.dash-module-card:hover .dash-card-seta { color: var(--lrm-azul); transform: translate(2px, -2px); }

/* Servidor: o estado da VM, no pé da página, sem competir com os cards */
.dash-sistema { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--borda); }
.dash-sistema__titulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font: 700 .74rem/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-500);
}
.dash-sistema__titulo svg { width: 16px; height: 16px; }
.dash-sistema__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.dash-sistema__item {
  padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm);
}
.dash-sistema__rotulo {
  margin-bottom: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-500);
}
.dash-sistema__valor {
  display: flex; align-items: center; gap: 6px; min-height: 1.4em;
  font-size: .9rem; font-weight: 600; color: var(--tinta-900);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dash-sistema__ponto {
  width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* Monitor largo: as categorias formam duas colunas, e a tela inicial cabe
   inteira em vez de deixar metade do monitor vazia. A última, sozinha na
   linha, ocupa a largura toda. */
@media (min-width: 1820px) {
  .dash-categorias { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .dash-categorias > .dash-category:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═══ Status do Banco (superadmin) ═══════════════════════════════════════════ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.status-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #CBD5E0;
}
.status-card--ok     { border-left-color: #10B981; }
.status-card--alerta { border-left-color: #F59E0B; }
.status-card--erro   { border-left-color: #EF4444; }
.status-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #E8F4FD; color: #0077CC;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.status-card__icon svg { width: 22px; height: 22px; }
.status-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-card__label {
  font-size: 0.75rem; color: #94A3B8; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.status-card__value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem; font-weight: 700; color: #1A202C;
}
.status-card__sub { font-size: 0.72rem; color: #94A3B8; }

.banco-section {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}
.banco-section h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 700; color: #1A202C;
  margin: 0 0 16px;
}
.banco-table { width: 100%; border-collapse: collapse; }
.banco-table th {
  text-align: left; padding: 10px 12px;
  font-size: 0.72rem; font-weight: 700; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1.5px solid #E2E8F0;
}
.banco-table td {
  padding: 10px 12px;
  font-size: 0.85rem; color: #374151;
  border-bottom: 1px solid #F1F5F9;
}
.banco-table tbody tr:last-child td { border-bottom: none; }
.banco-table tbody tr:hover td { background: #F8FAFC; }

.banco-section--cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(135deg, #E8F4FD, #F0F9FF);
  border: 1px solid #B3D9F2;
}

/* Dark mode */
body.dark-mode .status-card,
body.dark-mode .banco-section { background: #1E293B; border-color: #334155; }
body.dark-mode .status-card--ok     { border-left-color: #10B981; }
body.dark-mode .status-card--alerta { border-left-color: #F59E0B; }
body.dark-mode .status-card--erro   { border-left-color: #EF4444; }
body.dark-mode .status-card__value,
body.dark-mode .banco-section h3 { color: #F1F5F9; }
body.dark-mode .status-card__icon { background: rgba(0,119,204,0.2); color: #60A5FA; }
body.dark-mode .banco-table td { color: #CBD5E1; border-color: #334155; }
body.dark-mode .banco-table th { border-color: #334155; }
body.dark-mode .banco-table tbody tr:hover td { background: rgba(255,255,255,0.04); }
body.dark-mode .banco-section--cta {
  background: linear-gradient(135deg, rgba(0,119,204,0.15), rgba(0,119,204,0.08));
  border-color: #334155;
}

/* ══ V34: Painel do Banco — scroll + abas + SQL ══════════════════ */

/* Correção do scroll: as páginas internas precisam rolar dentro do
   #content-area (que é overflow:hidden, como o body) */
#banco-page,
#equipe-page {
  flex: 1;
  overflow-y: auto;
  height: auto;
  max-height: none;
}

.banco-db-select {
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'DM Sans', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1D4ED8;
  background: #EFF6FF;
  cursor: pointer;
  outline: none;
}

.banco-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.banco-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.banco-tab svg { width: 15px; height: 15px; }
.banco-tab:hover { color: var(--color-primary); }
.banco-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.banco-table--mini { font-size: 0.78rem; }
.banco-table--mini th, .banco-table--mini td { padding: 5px 8px; }
.banco-table--mini code { background: #EFF6FF; padding: 1px 5px; border-radius: 4px; font-size: 0.74rem; }

.banco-row-tabela:hover td { background: #F0F9FF; }

.banco-sql-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  background: var(--color-surface);
  resize: vertical;
  outline: none;
}
.banco-sql-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,204,.12);
}

body.dark-mode .banco-tab.active { color: #60A5FA; border-bottom-color: #60A5FA; }
body.dark-mode .banco-db-select { background: #1E293B; color: #93C5FD; border-color: #334155; }
body.dark-mode .banco-sql-input { background: #0F172A; color: #E2E8F0; border-color: #334155; }
body.dark-mode .banco-row-tabela:hover td { background: rgba(255,255,255,0.04); }
body.dark-mode .banco-row-schema > td { background: #0F172A !important; }
body.dark-mode .banco-table--mini code { background: #1E3A5F; }

/* ══════════════════════════════════════════════════════════════════════════
   EQUIPE — cards de usuário, modal de edição e campo de senha
   (V36-3; redesenhado com os tokens do portal na V61 P3)
   ══════════════════════════════════════════════════════════════════════════ */
.equipe-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.equipe-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-md); box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.equipe-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: var(--tinta-300); }
.equipe-card__top { display: flex; align-items: center; gap: 12px; }
.equipe-avatar-wrap { position: relative; flex-shrink: 0; }
.equipe-avatar { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--realce); }
.equipe-status-dot {
  position: absolute; bottom: 0; right: 0; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--superficie);
}
.equipe-status-dot--on  { background: #10B981; }
.equipe-status-dot--off { background: #94A3B8; }
.equipe-identidade { flex: 1; min-width: 0; }
.equipe-identidade h3 {
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--tinta-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.equipe-email {
  display: block; font-size: .8rem; color: var(--tinta-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.role-chip {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 4px 10px; border-radius: var(--raio-full);
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.role-chip--super { background: #FEF3C7; color: #B45309; }
.role-chip--user  { background: var(--realce); color: var(--tinta-500); }
.role-chip svg { width: 11px; height: 11px; }
.modulos-titulo {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-500);
}
.modulos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.modulo-chip {
  padding: 3px 10px; border-radius: var(--raio-full);
  background: var(--realce); color: var(--lrm-azul);
  font-size: .72rem; font-weight: 600;
}
.modulo-chip--vazio { background: #FEF2F2; color: #B91C1C; }
.equipe-card__acoes { display: flex; gap: 8px; margin-top: auto; }
.btn-editar {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 12px;
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--lrm-azul);
  font: 700 .84rem 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn-editar:hover { background: var(--realce); border-color: var(--lrm-azul-claro); }
.btn-editar svg { width: 14px; height: 14px; }
.btn-excluir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; min-height: 42px; flex-shrink: 0; padding: 0;
  border: 1.5px solid #FECACA; border-radius: var(--raio-sm);
  background: #FEF2F2; color: #DC2626; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn-excluir:hover { background: #DC2626; border-color: #DC2626; color: #fff; }
.btn-excluir svg { width: 15px; height: 15px; }

/* Esqueleto do card enquanto a lista não chega */
.equipe-card--skel { pointer-events: none; }
.equipe-card--skel:hover { transform: none; box-shadow: var(--sombra-sm); border-color: var(--borda); }
.equipe-card--skel .skel--avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.equipe-card--skel .skel--chips  { height: 22px; width: 82%; border-radius: var(--raio-full); }
.equipe-card--skel .skel--botao  { height: 42px; border-radius: var(--raio-sm); }

/* ── Modal ────────────────────────────────────────────────────────────────
   Cabeçalho e rodapé ficam parados; quem rola é o miolo. Assim o "Salvar"
   está sempre à vista, mesmo com os 13 módulos abertos. */
.modal {
  position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal__fundo {
  position: absolute; inset: 0;
  background: rgba(11,31,56,.5); backdrop-filter: blur(4px);
}
.modal__painel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: min(90vh, 880px);
  background: var(--superficie);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
  overflow: hidden;
  animation: modal-entra .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 20px 14px 26px; flex-shrink: 0;
}
.modal__cab h3 { font-size: 1.15rem; font-weight: 800; color: var(--tinta-900); }
.modal__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 26px 22px; }
.modal__rodape {
  display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
  padding: 16px 26px;
  border-top: 1px solid var(--borda);
}
.modal__secao { margin-bottom: 20px; }

/* Campo de senha com olho + indicador de força */
.input-senha-wrap { position: relative; display: flex; align-items: center; }
.input-senha-wrap input { padding-right: 46px; }
.btn-olho {
  position: absolute; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 8px; background: none;
  color: var(--tinta-500); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-olho:hover { color: var(--lrm-azul); background: var(--realce); }
.btn-olho svg { width: 16px; height: 16px; }
.senha-forca { display: block; min-height: 14px; margin-top: 4px; font-size: .72rem; font-weight: 600; }

/* Perfil: a foto ao lado do nome */
.perfil-topo { display: flex; align-items: center; gap: 24px; }
.perfil-topo__foto {
  width: 80px; height: 80px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--superficie), 0 0 0 4.5px var(--borda-campo), var(--sombra-md);
}
.perfil-topo__dados { flex: 1; min-width: 0; }
.perfil-topo__dados h3 { font-size: 1.1rem; font-weight: 700; color: var(--tinta-900); margin-bottom: 6px; }
.perfil-topo__linha { display: flex; gap: 8px; margin-top: 12px; }
.perfil-topo__linha .campo-input { flex: 1; min-width: 0; }
.perfil-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.perfil-info span { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-500); margin-bottom: 2px; }
.perfil-info strong { font-size: .9rem; font-weight: 600; color: var(--tinta-900); font-variant-numeric: tabular-nums; }

body.dark-mode .role-chip--super { background: #422006; color: #FCD34D; }
body.dark-mode .modulo-chip { color: #7CC0F2; }
body.dark-mode .modulo-chip--vazio { background: #450A0A; color: #FCA5A5; }
body.dark-mode .btn-editar { color: #7CC0F2; }
body.dark-mode .btn-excluir { border-color: rgba(239,68,68,.4); color: #FCA5A5; }
body.dark-mode .btn-excluir:hover { background: #DC2626; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   V42 Parte 3 · Bloco A — itens navegáveis viraram <a href> reais
   ═══════════════════════════════════════════════════════════════
   Menu e cards do dashboard passaram de <div onclick> para <a href> só para o
   botão direito oferecer "abrir em nova aba". A aparência não pode mudar: o
   link herda a cor definida pela própria classe e nunca sublinha. */
a.nav-item, a.nav-subitem, a.dash-card, a.dash-module-card, a.sidebar-brand {
  text-decoration: none;
  color: inherit;
}
a.nav-item:hover, a.nav-subitem:hover,
a.dash-card:hover, a.dash-module-card:hover { text-decoration: none; }
/* as classes acima já definem a cor do texto; `color: inherit` no <a> apenas
   impede o azul-de-link padrão do navegador de vazar por cima delas */
a.nav-item { color: var(--tinta-700); }
a.nav-subitem { color: var(--tinta-700); }

/* ── Status do Banco no dark mode ─────────────────────────────────────────────
   O <h2> e o <p> do topo trazem a cor inline no HTML (#1A202C / #64748B), que
   some no fundo escuro — so `!important` vence estilo inline. */
body.dark-mode #banco-page > div:first-child h2 { color: #F1F5F9 !important; }
body.dark-mode #banco-page > div:first-child p  { color: #94A3B8 !important; }

/* ═══ V54 P2 · Clientes Desconectados ═══════════════════════════════════════
   Paleta LRM: azul #1B73C4 · azul-claro #4BA3E3 · ciano #00B4D8.
   Cores por tipo de motivo (iguais no card, no KPI e no mapa):
   inadimplência #DC2626 · suspensão #F59E0B · queda técnica #1B73C4 ·
   verificar #8B5CF6 · cancelamento #64748B · vencimento recente #0891B2
   ═════════════════════════════════════════════════════════════════════════ */
#desconectados-page {
  --lrm-azul: #1B73C4; --lrm-azul-claro: #4BA3E3; --lrm-ciano: #00B4D8;
  flex: 1; overflow-y: auto; height: auto; max-height: none;
}

/* ── Topo ──────────────────────────────────────────────────────────────── */
.desc-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.desc-topo-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.desc-topo-status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.desc-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: #FEF2F2; color: #B91C1C; font-size: .9rem; border: 1px solid #FECACA;
}
.desc-live strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; }
.desc-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #DC2626; animation: pulse-dot 2s infinite; }
.desc-topo-sub { font-size: .8rem; color: #64748B; }
.desc-topo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.desc-atualizado { font-size: .78rem; color: #94A3B8; }
.desc-auto { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: #64748B; cursor: pointer; user-select: none; }
.desc-btn-prim {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: 8px;
  background: var(--lrm-azul); color: #fff; font: 600 .85rem 'DM Sans', sans-serif; cursor: pointer;
  box-shadow: 0 4px 12px rgba(27,115,196,.28); transition: background .15s;
}
.desc-btn-prim:hover { background: #155FA3; }
.desc-btn-prim svg { width: 15px; height: 15px; }
.desc-btn-prim.desc-girando svg { animation: desc-girar 1s linear infinite; }
@keyframes desc-girar { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.desc-btn-sec {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  border: 1.5px solid #B3D9F2; background: #fff; color: var(--lrm-azul); font: 600 .78rem 'DM Sans', sans-serif; cursor: pointer;
}
.desc-btn-sec svg { width: 14px; height: 14px; }

/* ── Faixa da IA ───────────────────────────────────────────────────────── */
.desc-ia {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  font-size: .82rem; margin-bottom: 16px; border: 1px solid #DBEAFE; background: #EFF6FF; color: #1E3A8A; flex-wrap: wrap;
}
.desc-ia > svg { width: 18px; height: 18px; flex-shrink: 0; }
.desc-ia-txt { flex: 1 1 240px; min-width: 0; line-height: 1.45; }
.desc-ia--rodando > svg { animation: desc-girar 1.2s linear infinite; }
.desc-ia--erro { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.desc-ia--off { background: #F8FAFC; border-color: #E2E8F0; color: #475569; }
.desc-ia:empty { display: none; }

/* ── KPIs (clicáveis = filtro por tipo) ────────────────────────────────── */
.desc-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.desc-kpi {
  display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--kpi-cor); border-radius: 12px;
  font-family: 'DM Sans', sans-serif; transition: box-shadow .15s, transform .15s;
}
.desc-kpi:hover { box-shadow: 0 4px 14px rgba(16,40,80,.08); transform: translateY(-1px); }
.desc-kpi.ativo { box-shadow: 0 0 0 2px var(--kpi-cor); }
.desc-kpi-icone {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--kpi-cor); background: color-mix(in srgb, var(--kpi-cor) 12%, transparent);
}
.desc-kpi-icone svg { width: 18px; height: 18px; }
.desc-kpi-info { display: flex; flex-direction: column; min-width: 0; }
.desc-kpi-label { font-size: .7rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: .03em; }
.desc-kpi-valor { font: 800 1.35rem 'Plus Jakarta Sans', sans-serif; color: #1A202C; line-height: 1.2; }
.desc-kpi-sub { font-size: .7rem; color: #94A3B8; }

/* ── Alertas de infraestrutura ─────────────────────────────────────────── */
.desc-alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.desc-alerta {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: #EFF6FF; border: 1px solid #BFDBFE; border-left: 4px solid var(--lrm-azul); color: #1E3A8A; font-size: .84rem;
}
.desc-alerta svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.desc-alerta strong { display: block; margin-bottom: 2px; }

/* ── Filtros ───────────────────────────────────────────────────────────── */
.desc-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.desc-filtros select, .desc-busca {
  padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; background: #fff;
  font: 500 .82rem 'DM Sans', sans-serif; color: #334155; outline: none;
}
.desc-filtros select:focus, .desc-busca:focus-within { border-color: var(--lrm-azul-claro); box-shadow: 0 0 0 3px rgba(75,163,227,.15); }
.desc-busca { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.desc-busca svg { width: 15px; height: 15px; color: #94A3B8; flex-shrink: 0; }
.desc-busca input { border: none; outline: none; background: transparent; width: 100%; font: inherit; color: inherit; }
.desc-filtros select { max-width: 260px; min-width: 0; }

/* ── Corpo: mapa + lista ───────────────────────────────────────────────── */
.desc-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.desc-mapa-box, .desc-lista-box { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 16px; min-width: 0; }
.desc-mapa-box { position: sticky; top: 0; }
.desc-box-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.desc-box-cab h3 { display: flex; align-items: center; gap: 8px; font: 700 .95rem 'Plus Jakarta Sans', sans-serif; color: #1A202C; margin: 0; }
.desc-box-cab h3 svg { width: 17px; height: 17px; color: var(--lrm-azul); }
.desc-camadas { display: inline-flex; background: #F1F5F9; border-radius: 8px; padding: 3px; }
.desc-camada-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 6px; font: 600 .78rem 'DM Sans', sans-serif; color: #64748B; cursor: pointer; }
.desc-camada-btn.ativo { background: #fff; color: var(--lrm-azul); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#desc-mapa { height: 560px; border-radius: 10px; overflow: hidden; background: #E2E8F0; z-index: 0; }
.desc-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .74rem; color: #475569; align-items: center; }
.desc-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.desc-leg-bola { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.desc-leg-bola--aprox { background: transparent !important; border: 1.5px dashed #64748B; box-shadow: none; }
.desc-leg-anel { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2px dashed #1B73C4; }
.desc-leg-nota { flex-basis: 100%; color: #94A3B8; font-size: .72rem; }
.desc-mapa-aviso { font-size: .74rem; color: #B45309; margin-top: 4px; min-height: 1em; }
.desc-contagem { font-size: .8rem; color: #64748B; }
.desc-contagem a { color: var(--lrm-azul); }
.desc-lista { max-height: 720px; overflow-y: auto; padding-right: 4px; }

/* Popup do mapa */
.desc-pop { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: #334155; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.desc-pop strong { font: 700 .92rem 'Plus Jakarta Sans', sans-serif; color: #1A202C; }
.desc-pop-cidade { font-size: .72rem; color: #94A3B8; }
.desc-pop-num { font-weight: 700; color: #DC2626; margin-top: 2px; }
.desc-pop-sub { font-size: .72rem; color: #64748B; }
.desc-pop-btn {
  margin-top: 6px; align-self: flex-start; padding: 5px 10px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--lrm-azul, #1B73C4); color: #fff !important; font: 600 .74rem 'DM Sans', sans-serif; text-decoration: none;
}

/* ── Card do cliente (base do prompt D3) ───────────────────────────────── */
.desc-card { display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid #EDF1F6; border-radius: 14px; padding: 16px; margin-bottom: 10px;
  border-left: 4px solid #94A3B8; cursor: pointer; transition: box-shadow .15s; }
.desc-card:hover { box-shadow: 0 4px 14px rgba(16,40,80,.07); }
.desc-card.selecionado { box-shadow: 0 0 0 2px var(--lrm-azul-claro); }
.desc-card--inadimplencia { border-left-color: #DC2626; }
.desc-card--suspensao { border-left-color: #F59E0B; }
.desc-card--cancelamento { border-left-color: #64748B; }
.desc-card--queda_tecnica { border-left-color: #1B73C4; }
.desc-card--verificar { border-left-color: #8B5CF6; }
.desc-card--vencimento_recente { border-left-color: #0891B2; }
.desc-card--skeleton { cursor: default; }
.desc-card--skeleton .skeleton { background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%); background-size: 200% 100%; animation: desc-shimmer 1.3s infinite; }
@keyframes desc-shimmer { to { background-position: -200% 0; } }
.desc-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #DC2626;
  margin-top: 6px; animation: pulse-dot 2s infinite; flex-shrink: 0; }
.desc-status-dot--parado { animation: none; background: #CBD5E1; }
.desc-info { flex: 1; min-width: 0; }
.desc-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.desc-nome strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .92rem; color: #1A202C; }
.desc-contrato { font-size: 0.75rem; color: #94A3B8; background: #F1F5F9; padding: 1px 8px; border-radius: 8px; }
.desc-st { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .02em; }
.desc-st--1 { background: #DCFCE7; color: #166534; }
.desc-st--4 { background: #FEF3C7; color: #92400E; }
.desc-st--3, .desc-st--5 { background: #F1F5F9; color: #475569; }
.desc-st--2 { background: #EDE9FE; color: #5B21B6; }
.desc-plano { font-size: 0.85rem; color: #64748B; margin: 2px 0; }
.desc-tempo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85rem; color: #DC2626; font-weight: 600; }
.desc-tempo svg { width: 14px; height: 14px; }
.desc-desde { font-weight: 400; color: #94A3B8; font-size: .76rem; }
.desc-motivo { display: flex; align-items: flex-start; gap: 7px; font-size: 0.84rem; margin-top: 8px;
  padding: 7px 10px; border-radius: 8px; background: #F8FAFC; color: #334155; line-height: 1.4; }
.desc-motivo > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.desc-motivo-txt { flex: 1; }
.desc-motivo--inadimplencia { background: #FEF2F2; color: #B91C1C; }
.desc-motivo--queda_tecnica { background: #EFF6FF; color: #1D4ED8; }
.desc-motivo--suspensao { background: #FFFBEB; color: #92400E; }
.desc-motivo--verificar { background: #F5F3FF; color: #6D28D9; }
.desc-motivo--cancelamento { background: #F1F5F9; color: #475569; }
.desc-motivo--vencimento_recente { background: #ECFEFF; color: #0E7490; }
.desc-conf { font-size: 0.72rem; font-style: italic; opacity: .8; }
.desc-fonte { flex-shrink: 0; font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 6px;
  background: rgba(100,116,139,.14); color: #475569; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.desc-fonte--ia { background: linear-gradient(135deg, #1B73C4, #00B4D8); color: #fff; }
.desc-evid-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 0; border: none; background: none;
  color: var(--lrm-azul); font: 600 .76rem 'DM Sans', sans-serif; cursor: pointer; }
.desc-evid-btn svg { width: 14px; height: 14px; }
.desc-evid { list-style: none; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #F8FAFC; border: 1px solid #EDF1F6;
  display: flex; flex-direction: column; gap: 6px; cursor: default; }
.desc-evid li { display: flex; gap: 8px; font-size: .78rem; color: #475569; line-height: 1.45; }
.desc-evid li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: #94A3B8; }
.desc-evid b { color: #334155; }
.desc-evid code { background: #E2E8F0; padding: 0 5px; border-radius: 4px; font-size: .74rem; }
.desc-neg { color: #B91C1C; font-weight: 600; }
.btn-sgp { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #E2E8F0; color: #64748B; text-decoration: none; transition: all .15s; }
.btn-sgp:hover { border-color: var(--lrm-azul-claro); color: var(--lrm-azul); background: #EFF6FF; }
.btn-sgp svg { width: 15px; height: 15px; }
.desc-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 48px 20px; color: #64748B; font-size: .85rem; height: 100%; }
.desc-vazio svg { width: 30px; height: 30px; color: #CBD5E1; }
.desc-vazio strong { color: #334155; }
.desc-vazio a { color: var(--lrm-azul); }
.desc-rodape { margin: 16px 0 0; font-size: .74rem; color: #94A3B8; line-height: 1.5; }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .desc-corpo { grid-template-columns: 1fr; }
  .desc-mapa-box { position: static; }
  #desc-mapa { height: 420px; }
  .desc-lista { max-height: none; }
}
@media (max-width: 640px) {
  #desconectados-page { padding: 16px !important; }
  .desc-topo-acoes { align-items: flex-start; }
  .desc-filtros select { max-width: none; flex: 1 1 45%; }
  #desc-mapa { height: 340px; }
  #desconectados-page h2 { overflow-wrap: anywhere; }
  .desc-motivo { flex-wrap: wrap; }
  .desc-card { padding: 12px; gap: 10px; }
  .desc-status-dot { display: none; }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
body.dark-mode #desconectados-page > .desc-topo h2 { color: #F1F5F9 !important; }
body.dark-mode #desconectados-page > .desc-topo p { color: #94A3B8 !important; }
body.dark-mode .desc-live { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.35); color: #FCA5A5; }
body.dark-mode .desc-topo-sub, body.dark-mode .desc-auto { color: #94A3B8; }
body.dark-mode .desc-btn-sec { background: #0F172A; border-color: #334155; color: #93C5FD; }
body.dark-mode .desc-ia { background: rgba(27,115,196,.14); border-color: #1E3A5F; color: #BFDBFE; }
body.dark-mode .desc-ia--erro { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #FCD34D; }
body.dark-mode .desc-ia--off { background: #1E293B; border-color: #334155; color: #CBD5E1; }
body.dark-mode .desc-kpi,
body.dark-mode .desc-mapa-box,
body.dark-mode .desc-lista-box,
body.dark-mode .desc-card { background: #1E293B; border-color: #334155; }
body.dark-mode .desc-kpi { border-left-color: var(--kpi-cor); }
body.dark-mode .desc-kpi-valor,
body.dark-mode .desc-box-cab h3,
body.dark-mode .desc-nome strong,
body.dark-mode .desc-vazio strong { color: #F1F5F9; }
body.dark-mode .desc-alerta { background: rgba(27,115,196,.14); border-color: #1E3A5F; color: #BFDBFE; }
body.dark-mode .desc-filtros select,
body.dark-mode .desc-busca { background: #0F172A; border-color: #334155; color: #E2E8F0; }
body.dark-mode .desc-camadas { background: #0F172A; }
body.dark-mode .desc-camada-btn.ativo { background: #334155; color: #93C5FD; }
body.dark-mode #desc-mapa .leaflet-tile-pane { filter: brightness(.72) invert(1) contrast(.9) hue-rotate(200deg) saturate(.35) brightness(.9); }
body.dark-mode .desc-legenda { color: #CBD5E1; }
body.dark-mode .desc-card--inadimplencia { border-left-color: #DC2626; }
body.dark-mode .desc-card--suspensao { border-left-color: #F59E0B; }
body.dark-mode .desc-card--cancelamento { border-left-color: #64748B; }
body.dark-mode .desc-card--queda_tecnica { border-left-color: #4BA3E3; }
body.dark-mode .desc-card--verificar { border-left-color: #8B5CF6; }
body.dark-mode .desc-card--vencimento_recente { border-left-color: #0891B2; }
body.dark-mode .desc-contrato { background: #0F172A; color: #94A3B8; }
body.dark-mode .desc-plano { color: #94A3B8; }
body.dark-mode .desc-tempo { color: #F87171; }
body.dark-mode .desc-motivo { background: #0F172A; color: #CBD5E1; }
body.dark-mode .desc-motivo--inadimplencia { background: rgba(220,38,38,.14); color: #FCA5A5; }
body.dark-mode .desc-motivo--queda_tecnica { background: rgba(27,115,196,.18); color: #93C5FD; }
body.dark-mode .desc-motivo--suspensao { background: rgba(245,158,11,.14); color: #FCD34D; }
body.dark-mode .desc-motivo--verificar { background: rgba(139,92,246,.16); color: #C4B5FD; }
body.dark-mode .desc-motivo--cancelamento { background: rgba(100,116,139,.18); color: #CBD5E1; }
body.dark-mode .desc-motivo--vencimento_recente { background: rgba(8,145,178,.16); color: #67E8F9; }
body.dark-mode .desc-fonte { background: rgba(148,163,184,.18); color: #CBD5E1; }
body.dark-mode .desc-fonte--ia { background: linear-gradient(135deg, #1B73C4, #00B4D8); color: #fff; }
body.dark-mode .desc-evid { background: #0F172A; border-color: #334155; }
body.dark-mode .desc-evid li { color: #CBD5E1; }
body.dark-mode .desc-evid b { color: #E2E8F0; }
body.dark-mode .desc-evid code { background: #334155; color: #E2E8F0; }
body.dark-mode .desc-neg { color: #FCA5A5; }
body.dark-mode .btn-sgp { border-color: #334155; color: #94A3B8; }
body.dark-mode .btn-sgp:hover { background: rgba(27,115,196,.2); color: #93C5FD; }
body.dark-mode .desc-st--1 { background: rgba(22,163,74,.18); color: #86EFAC; }
body.dark-mode .desc-st--4 { background: rgba(245,158,11,.18); color: #FCD34D; }
body.dark-mode .desc-st--3, body.dark-mode .desc-st--5 { background: rgba(100,116,139,.2); color: #CBD5E1; }
body.dark-mode .desc-st--2 { background: rgba(139,92,246,.18); color: #C4B5FD; }
body.dark-mode .desc-card--skeleton .skeleton { background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%); background-size: 200% 100%; }

/* Subitem ativo da sidebar no dark mode: o fundo claro do modo claro vazava
   (valia para todos os subitens — Técnicos, Plano de Contas...). V54 P2. */
body.dark-mode .nav-subitem.active { background: rgba(96,165,250,0.14); }
/* ═══════════════════════════════════════════════════════════════════════════
   V54 Parte 3 — Central de Ajuda (botão flutuante + chat do guia)
   Paleta LRM, a mesma que a V54 P2 trouxe para os Desconectados.
   ═══════════════════════════════════════════════════════════════════════════ */

.ajuda-escopo {
  --lrm-azul:        #1B73C4;
  --lrm-azul-claro:  #4BA3E3;
  --lrm-azul-escuro: #0D4F8B;
  --lrm-ciano:       #00B4D8;
}

/* O FAB mora no canto inferior direito — os toasts sobem para não brigar
   com ele (antes os dois ocupavam exatamente o mesmo ponto da tela).
   O `pointer-events: none` não é enfeite: o #toast fica SEMPRE no DOM, só com
   opacity 0, e uma caixa invisível de z-index 9999 no canto inferior direito
   engolia o clique do botão de ajuda. Aviso não recebe clique de ninguém. */
.toast, .toast-rich { bottom: 96px; }
.toast { pointer-events: none; }

/* ── Botão flutuante ──────────────────────────────────────────────────── */
.ajuda-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 4000;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--lrm-azul-claro), var(--lrm-azul));
  box-shadow: 0 8px 24px rgba(27, 115, 196, .38);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ajuda-fab:hover  { transform: scale(1.07); box-shadow: 0 12px 30px rgba(27, 115, 196, .48); }
.ajuda-fab:active { transform: scale(.97); }
.ajuda-fab:focus-visible { outline: 3px solid var(--lrm-ciano); outline-offset: 3px; }
.ajuda-fab i, .ajuda-fab svg { width: 26px; height: 26px; color: #fff; }
.ajuda-fab--aberto { background: linear-gradient(135deg, var(--lrm-azul), var(--lrm-azul-escuro)); }

/* Os dois ícones ficam no HTML e quem troca é o CSS. Reescrever o
   data-lucide a cada clique obrigava a varrer o documento inteiro com
   lucide.createIcons() e ainda deixava a classe do ícone antigo grudada. */
.ajuda-fab .ajuda-fab-i--aberto  { display: none; }
.ajuda-fab--aberto .ajuda-fab-i--fechado { display: none; }
.ajuda-fab--aberto .ajuda-fab-i--aberto  { display: block; }

/* ── Janela ───────────────────────────────────────────────────────────── */
.ajuda-janela {
  position: fixed; bottom: 92px; right: 24px; z-index: 4000;
  width: 380px; max-width: calc(100vw - 48px);
  height: 540px; max-height: calc(100vh - 140px);
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 60px rgba(15, 27, 45, .22);
  display: flex; flex-direction: column;
  font-family: 'DM Sans', sans-serif;
  animation: ajuda-abrir .22s cubic-bezier(.2, .8, .2, 1);
}
.ajuda-janela[hidden] { display: none; }
@keyframes ajuda-abrir {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.ajuda-header {
  background: linear-gradient(135deg, var(--lrm-azul), var(--lrm-azul-escuro));
  color: #fff; padding: 14px 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ajuda-header-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ajuda-logo {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .35); background: #fff;
}
.ajuda-header-info strong {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem; font-weight: 800; line-height: 1.2;
}
.ajuda-header-info span {
  display: block; font-size: .74rem; opacity: .88; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ajuda-header-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ajuda-header-acoes button {
  background: rgba(255, 255, 255, .16); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ajuda-header-acoes button:hover { background: rgba(255, 255, 255, .3); }
.ajuda-header-acoes i { width: 15px; height: 15px; }

/* ── Corpo ────────────────────────────────────────────────────────────── */
/* `position: relative` é o que faz o offsetTop dos balões ser medido DENTRO
   da rolagem — é assim que a primeira resposta sobe para o topo da janela. */
.ajuda-corpo {
  position: relative;
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; background: #F7FAFC;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.ajuda-corpo::-webkit-scrollbar { width: 8px; }
.ajuda-corpo::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 4px; }

.ajuda-msg {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: .875rem; line-height: 1.45; animation: ajuda-msg-entra .18s ease;
}
@keyframes ajuda-msg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ajuda-msg--bot  { background: #fff; border: 1px solid #E8EDF2; color: #334155; align-self: flex-start; border-bottom-left-radius: 5px; }
.ajuda-msg--user { background: var(--lrm-azul); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.ajuda-msg strong { font-weight: 700; }

.ajuda-legenda {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #94A3B8; margin: 6px 0 -2px; align-self: flex-start;
}

/* ── Chips de pergunta ────────────────────────────────────────────────── */
.ajuda-sugestoes { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.ajuda-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #D6E4F0; border-radius: 11px;
  padding: 9px 12px; font-family: inherit; font-size: .83rem; line-height: 1.35;
  color: var(--lrm-azul); font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ajuda-chip:hover { background: #EFF7FF; border-color: var(--lrm-azul-claro); }
.ajuda-chip:active { transform: scale(.99); }
.ajuda-chip i { width: 14px; height: 14px; flex-shrink: 0; color: var(--lrm-azul-claro); }
.ajuda-chip--slim { border-color: #E6EDF4; padding: 7px 11px; font-size: .8rem; color: #33526E; }
.ajuda-chip--slim:hover { color: var(--lrm-azul); }

.ajuda-todos {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .8rem; font-weight: 600; color: var(--lrm-azul);
  padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px;
}
.ajuda-todos:hover { color: var(--lrm-azul-escuro); }
.ajuda-todos i { width: 14px; height: 14px; }

/* ── Índice por categoria ─────────────────────────────────────────────── */
.ajuda-indice { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.ajuda-cat { display: flex; flex-direction: column; gap: 6px; }
.ajuda-cat-nome {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; font-weight: 800;
  color: #1A202C; padding-bottom: 5px; border-bottom: 1px solid #E2E8F0; margin-bottom: 2px;
}

/* ── Resposta ─────────────────────────────────────────────────────────── */
.ajuda-resposta {
  background: #fff; border: 1px solid #E8EDF2; border-left: 3px solid var(--lrm-azul-claro);
  border-radius: 12px; padding: 13px 14px; width: 100%;
  animation: ajuda-msg-entra .18s ease;
}
.ajuda-resposta--principal { border-left-color: var(--lrm-azul); box-shadow: 0 2px 10px rgba(27, 115, 196, .08); }
.ajuda-resp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.ajuda-resp-cat {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lrm-azul-claro);
}
.ajuda-resp-tambem { font-size: .64rem; color: #A0AEC0; font-style: italic; }
.ajuda-resp-caminho {
  display: flex; align-items: flex-start; gap: 6px;
  background: #F1F7FD; border-radius: 8px; padding: 7px 9px; margin-bottom: 9px;
  font-size: .78rem; font-weight: 600; color: var(--lrm-azul-escuro); line-height: 1.35;
}
.ajuda-resp-caminho i { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.ajuda-resp-texto { font-size: .865rem; color: #334155; line-height: 1.55; }
.ajuda-resp-texto strong { color: #1A202C; font-weight: 700; }
.ajuda-ir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  color: var(--lrm-azul); font-weight: 700; font-size: .82rem; text-decoration: none;
  background: #EFF7FF; padding: 7px 13px; border-radius: 9px;
  transition: background .15s ease, color .15s ease;
}
.ajuda-ir:hover { background: var(--lrm-azul); color: #fff; }
.ajuda-ir i { width: 15px; height: 15px; }

/* ── Campo de pergunta ────────────────────────────────────────────────── */
.ajuda-input {
  display: flex; gap: 8px; padding: 12px; flex-shrink: 0;
  border-top: 1px solid #E8EDF2; background: #fff;
}
.ajuda-input input {
  flex: 1; min-width: 0; padding: 10px 13px; border: 1.5px solid #D6E4F0;
  border-radius: 11px; font-family: inherit; font-size: .865rem; color: #1A202C;
}
.ajuda-input input::placeholder { color: #A0AEC0; }
.ajuda-input input:focus {
  outline: none; border-color: var(--lrm-azul);
  box-shadow: 0 0 0 3px rgba(27, 115, 196, .12);
}
.ajuda-input button {
  width: 42px; flex-shrink: 0; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, var(--lrm-azul-claro), var(--lrm-azul)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s ease;
}
.ajuda-input button:hover { filter: brightness(1.08); }
.ajuda-input button i { width: 17px; height: 17px; }

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ajuda-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
  .ajuda-fab i { width: 24px; height: 24px; }
  .ajuda-janela {
    width: calc(100vw - 20px); right: 10px; bottom: 80px;
    height: calc(100vh - 100px); max-height: none; border-radius: 16px;
  }
  .toast, .toast-rich { bottom: 80px; right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   V58 Parte 2 · Senha na área de Usuários (Caminho B — bcrypt)
   ═══════════════════════════════════════════════════════════════
   A senha é hash irreversível: a tela explica isso e oferece redefinir.
   Nenhum estilo aqui exibe senha — só o olho dos campos que o usuário digita.
   (V61 P3: mesmas regras, agora com os tokens do portal.) */
.senha-status {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--realce); border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  padding: 12px 14px; margin-bottom: 12px;
}
.senha-status svg { width: 18px; height: 18px; color: var(--lrm-azul); flex-shrink: 0; margin-top: 1px; }
.senha-status strong { display: block; font-size: 0.82rem; font-weight: 700; color: var(--tinta-900); margin-bottom: 2px; line-height: 1.35; }
.senha-status span { font-size: 0.75rem; color: var(--tinta-500); line-height: 1.4; }
.senha-aviso {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 0.78rem; font-weight: 600; color: #92400E;
  background: #FFFBEB; border: 1.5px solid #FDE68A; border-radius: var(--raio-sm); padding: 10px 12px;
}
.senha-aviso svg { flex-shrink: 0; }
.btn-redefinir {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  background: var(--superficie); color: var(--lrm-azul);
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  font: 700 .84rem 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn-redefinir:hover { background: var(--realce); border-color: var(--lrm-azul-claro); }
.btn-redefinir svg { width: 15px; height: 15px; }
.redefinir-painel {
  margin-top: 12px; padding: 16px; background: var(--fundo);
  border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
}
.redefinir-label { display: block; margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; color: var(--tinta-500); }
.redefinir-input {
  width: 100%; min-height: 46px; padding: 0 46px 0 14px;
  background: var(--superficie); color: var(--tinta-900);
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  font: 500 .92rem 'DM Sans', sans-serif; outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.redefinir-input:focus { border-color: var(--lrm-azul); box-shadow: var(--foco); }
.forca-barra { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.forca-barra span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s, background .2s; }
.redefinir-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.btn-cancelar-senha {
  min-height: 42px; padding: 0 18px;
  background: var(--superficie); color: var(--tinta-500);
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-sm);
  font: 700 .84rem 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-cancelar-senha:hover { background: var(--realce); color: var(--tinta-700); }
.btn-salvar-senha {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px;
  background: var(--grad-marca); color: white; border: none; border-radius: var(--raio-sm);
  font: 700 .84rem 'Plus Jakarta Sans', sans-serif; cursor: pointer;
  box-shadow: var(--sombra-marca);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.btn-salvar-senha:hover:not(:disabled) { transform: translateY(-1px); }
.btn-salvar-senha:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-salvar-senha svg { width: 15px; height: 15px; }
.equipe-sem-acao {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; min-height: 42px;
  font-size: 0.72rem; font-weight: 600; color: var(--tinta-500); line-height: 1.3;
}
.equipe-sem-acao svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Trilha de auditoria */
.auditoria-painel {
  margin-top: 24px; padding: 20px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-md); box-shadow: var(--sombra-sm);
}
.auditoria-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.auditoria-cab h4 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 800;
  color: var(--tinta-900); margin: 0;
}
.auditoria-item {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; margin-bottom: 6px; font-size: 0.78rem;
  background: var(--fundo); border-left: 3px solid #10B981; border-radius: 6px;
}
.auditoria-item--alerta { border-left-color: #EF4444; }
.auditoria-ts   { color: var(--tinta-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.auditoria-txt  { color: var(--tinta-900); }
.auditoria-meta { color: var(--tinta-500); font-size: 0.72rem; text-align: right; white-space: nowrap; }
.auditoria-vazio { text-align: center; padding: 24px; color: var(--tinta-500); font-size: 0.82rem; }
.auditoria-skel { display: flex; flex-direction: column; gap: 6px; }
.auditoria-skel .skel { height: 38px; border-radius: 6px; }

@media (max-width: 720px) {
  .auditoria-item { grid-template-columns: 1fr; gap: 4px; }
  .auditoria-meta { text-align: left; white-space: normal; }
}

body.dark-mode .senha-aviso { background: #422006; border-color: #713F12; color: #FCD34D; }

/* ═══════════════════════════════════════════════════════════════════════════
   V59 P2 · Editor de permissões por categoria (tela de Equipe)
   Paleta LRM: --lrm-azul #1B73C4 · --lrm-azul-claro #4BA3E3 · --lrm-ciano #00B4D8
   ═══════════════════════════════════════════════════════════════════════════ */
.perm-dica {
  margin: 0 0 12px; font-size: 0.78rem; color: #64748B; line-height: 1.5;
  font-family: 'DM Sans', sans-serif;
}
.perm-dica b { color: #475569; font-weight: 700; }

.perm-editor {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.perm-editor::-webkit-scrollbar { width: 8px; }
.perm-editor::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }

.perm-modulo {
  flex: 0 0 auto;              /* sem isto o flex column espreme as 14 linhas em 12px */
  border: 1.5px solid #E8EDF2; border-radius: 12px; overflow: hidden;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.perm-modulo--on {
  border-color: #B3D9F2; box-shadow: 0 1px 3px rgba(27, 115, 196, .08);
}
.perm-modulo-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: #F8FAFC;
}
.perm-modulo--on .perm-modulo-header { background: #F2F8FD; }

.perm-check-modulo {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font: 600 0.85rem 'DM Sans', sans-serif; color: #0F1B2D; min-width: 0;
}
.perm-check-modulo input { width: 15px; height: 15px; accent-color: #1B73C4; cursor: pointer; flex: 0 0 auto; }
.perm-check-modulo svg { width: 17px; height: 17px; color: #1B73C4; flex: 0 0 auto; }
.perm-check-modulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.perm-modulo-dir { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.perm-resumo {
  font: 600 0.7rem 'DM Sans', sans-serif; color: #1D4ED8;
  background: #EFF6FF; padding: 3px 8px; border-radius: 7px; white-space: nowrap;
}
.perm-resumo--parcial { color: #B45309; background: #FFFBEB; }
.perm-sem-cat { font: 500 0.7rem 'DM Sans', sans-serif; color: #94A3B8; white-space: nowrap; }

.perm-expandir {
  display: flex; align-items: center; gap: 4px; background: none; border: none;
  color: #64748B; font: 600 0.74rem 'DM Sans', sans-serif; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; transition: color .15s, background .15s;
}
.perm-expandir:hover { color: #1B73C4; background: #EFF6FF; }
.perm-expandir svg { width: 14px; height: 14px; transition: transform .18s; }
.perm-expandir--aberto svg { transform: rotate(180deg); }
.perm-expandir--aberto { color: #1B73C4; }

.perm-categorias {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 16px 14px 40px; border-top: 1px solid #EEF2F6; background: #fff;
}
.perm-modo {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 0.8rem 'DM Sans', sans-serif; color: #475569;
}
.perm-modo input { width: 14px; height: 14px; accent-color: #1B73C4; cursor: pointer; }
.perm-modo b { font-weight: 700; color: #0F1B2D; }

.perm-cat-lista {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0 2px 22px; margin-top: 2px;
}
/* "todas as categorias" escolhido: a lista fica visível (o admin vê o que o
   usuário vai ter) mas não dá para marcar — a marcação não teria efeito. */
.perm-cat-lista[data-bloqueada] { opacity: .45; pointer-events: none; }

.perm-cat-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 0.82rem 'DM Sans', sans-serif; color: #475569;
}
.perm-cat-item input { width: 14px; height: 14px; accent-color: #00B4D8; cursor: pointer; }
.perm-cat-item:hover { color: #1B73C4; }
.perm-cat-pai { font-style: normal; font-size: 0.72rem; color: #94A3B8; font-weight: 500; }

/* Chip do cartão da equipe quando o acesso é parcial */
.modulo-chip--parcial { background: #FFFBEB; color: #B45309; }
.modulo-chip--parcial em {
  font-style: normal; font-weight: 700; opacity: .75; margin-left: 5px;
  padding-left: 5px; border-left: 1px solid currentColor;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
body.dark-mode .perm-dica { color: #94A3B8; }
body.dark-mode .perm-dica b { color: #CBD5E1; }
body.dark-mode .perm-editor::-webkit-scrollbar-thumb { background: #475569; }
body.dark-mode .perm-modulo { background: #1E293B; border-color: #334155; }
body.dark-mode .perm-modulo--on { border-color: #1E3A5F; box-shadow: none; }
body.dark-mode .perm-modulo-header { background: #182235; }
body.dark-mode .perm-modulo--on .perm-modulo-header { background: #16263C; }
body.dark-mode .perm-check-modulo { color: #E2E8F0; }
body.dark-mode .perm-check-modulo svg { color: #4BA3E3; }
body.dark-mode .perm-resumo { color: #93C5FD; background: #1E3A5F; }
body.dark-mode .perm-resumo--parcial { color: #FCD34D; background: #422006; }
body.dark-mode .perm-sem-cat { color: #64748B; }
body.dark-mode .perm-expandir { color: #94A3B8; }
body.dark-mode .perm-expandir:hover,
body.dark-mode .perm-expandir--aberto { color: #4BA3E3; background: #1E3A5F; }
body.dark-mode .perm-categorias { background: #1E293B; border-top-color: #334155; }
body.dark-mode .perm-modo { color: #CBD5E1; }
body.dark-mode .perm-modo b { color: #F1F5F9; }
body.dark-mode .perm-cat-item { color: #CBD5E1; }
body.dark-mode .perm-cat-item:hover { color: #4BA3E3; }
body.dark-mode .perm-cat-pai { color: #64748B; }
body.dark-mode .modulo-chip--parcial { background: #422006; color: #FCD34D; }

/* Telas estreitas: o modal de Equipe é o lugar mais apertado da tela */
@media (max-width: 640px) {
  .perm-modulo-header { flex-wrap: wrap; }
  .perm-categorias { padding-left: 18px; }
  .perm-cat-lista { padding-left: 10px; }
  .perm-editor { max-height: 260px; }
}

/* O editor de permissões do modal não rola mais por conta própria: quem rola
   é o miolo do modal (uma rolagem só, e o "Salvar" fica parado no rodapé). */
.perm-editor { max-height: none; overflow: visible; padding-right: 0; }

/* ═══════════════════════════════════════════════════════════════════
   O PORTAL NO CELULAR (V61 P2; ampliado na V61 P3)
   Até 900px a barra lateral vira gaveta (abre pelo ☰ do topo) e o conteúdo
   usa a largura inteira. Acima de 900px nada disto vale: o desktop continua
   com a barra fixa. A P2 parava em 768px e o tablet em pé ficava com a
   barra comendo um terço da tela.
   ═══════════════════════════════════════════════════════════════════ */
.menu-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  /* 100vh no celular inclui a área atrás da barra de endereço: o rodapé do
     módulo (onde fica o botão "Próximo" do registro) caía para fora da tela.
     dvh é a altura realmente visível; navegador antigo fica no 100vh. */
  body, #main-app { height: 100vh; height: 100dvh; }

  /* ── Barra lateral em gaveta ── */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px); height: 100vh; height: 100dvh;
    transform: translateX(-104%); transition: transform .25s ease;
    box-shadow: none;
    z-index: 4600;
  }
  body.menu-aberto #sidebar { transform: none; box-shadow: var(--sombra-lg); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 4500; background: rgba(11, 31, 56, .4); }
  body.menu-aberto .sidebar-backdrop { display: block; }
  .nav-item, .nav-subitem { min-height: 48px; font-size: 15px; }
  .nav-submenu.open { max-height: 360px; }
  .btn-logout { width: 44px; height: 44px; }
  @media (prefers-reduced-motion: reduce) { #sidebar { transition: none; } }

  #content-area { width: 100%; min-width: 0; }

  /* ── Topo: ☰ · nome da tela · ajuda · usuário ── */
  #topbar { height: 56px; padding: 0 6px 0 4px; gap: 4px; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0; padding: 0;
    border: 0; background: none; border-radius: 12px;
    color: var(--tinta-900); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle:active { background: var(--realce); }
  .menu-toggle svg { width: 24px; height: 24px; }
  #topbar-parent { display: none; }
  .topbar-breadcrumb strong { font-size: 1.05rem; }
  .topbar-username, .topbar-user-chevron { display: none; }
  .topbar-actions { margin-left: 50px; }           /* o lugar do botão de ajuda */
  .topbar-user-wrap { padding: 6px; min-height: 48px; border: 0; }
  .topbar-avatar { width: 34px; height: 34px; }
  .user-dropdown { position: fixed; top: 60px; right: 8px; width: min(280px, calc(100vw - 16px)); z-index: 4400; }
  .user-dropdown__item { min-height: 48px; font-size: 15px; }
  .toggle-switch::after { content: ''; position: absolute; inset: -13px -10px; }   /* o interruptor tem 22px; a área de toque, 48 */

  /* A Central de Ajuda sai do canto de baixo: lá ela cobria o botão principal
     do módulo aberto (o "Próximo" do registro de rompimento). Vai para o topo. */
  .ajuda-fab { top: 7px; bottom: auto; right: 58px; width: 42px; height: 42px; box-shadow: none; }
  .ajuda-fab:hover, .ajuda-fab:active { transform: none; box-shadow: none; }
  .ajuda-fab i, .ajuda-fab svg { width: 22px; height: 22px; }
  .ajuda-janela { top: 64px; bottom: 10px; right: 10px; height: auto; max-height: none; }

  /* ── Dashboard: duas colunas ── */
  #dashboard-home { padding: 16px; }
  .dash-saudacao { margin-bottom: 22px; }
  .dash-saudacao h1 { font-size: 1.4rem; }
  .dash-saudacao p { font-size: .9rem; }
  .dash-category { margin-bottom: 24px; }
  .dash-category__desc { display: none; }
  .dash-module-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-module-card { padding: 16px; }
  .dash-module-card:hover { transform: none; }      /* no toque o "hover" gruda */
  .dash-card-icone { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; }
  .dash-card-icone svg { width: 22px; height: 22px; }
  .dash-card-seta { top: 16px; right: 14px; }
  .dash-sistema__grid { grid-template-columns: 1fr 1fr; }

  /* ── Páginas internas do portal ── */
  .pagina { padding: 16px; }
  #banco-page { padding: 16px !important; min-width: 0; }   /* o 32px vem inline no HTML */
  .pagina-cab { margin-bottom: 20px; }
  .pagina-cab h2 { font-size: 1.3rem; }
  .cartao { padding: 18px; }
  .campos-2 { grid-template-columns: 1fr; }
  #equipe-grid-email-senha { grid-template-columns: 1fr !important; }   /* o app.js escreve 1fr 1fr inline */
  .campo input, .campo-input, .redefinir-input { min-height: 50px; font-size: 16px; }   /* 16px: sem zoom no iPhone */
  .btn-olho { width: 44px; height: 44px; right: 3px; }
  .input-senha-wrap input, .redefinir-input { padding-right: 52px; }
  .btn, .btn-editar, .btn-excluir, .btn-redefinir, .btn-cancelar-senha, .btn-salvar-senha { min-height: 46px; }
  .btn-excluir { width: 46px; }
  .btn-icone { width: 44px; height: 44px; }
  .equipe-card:hover { transform: none; }
  .perfil-topo { align-items: flex-start; gap: 16px; }
  .perfil-topo__foto { width: 64px; height: 64px; }
  .perfil-topo__linha { flex-direction: column; }
  .banco-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .banco-tab { flex-shrink: 0; min-height: 44px; }

  /* ── Modal: folha que sobe de baixo, na largura da tela ── */
  .modal { padding: 0; align-items: flex-end; }
  .modal__painel {
    max-width: none; max-height: 94vh; max-height: 94dvh;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    animation-name: modal-sobe;
  }
  .modal__cab { padding: 16px 12px 10px 18px; }
  .modal__corpo { padding: 4px 18px 18px; }
  .modal__rodape { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .modal__rodape .btn { flex: 1; }
  .redefinir-acoes > button { flex: 1; justify-content: center; }

  /* Permissões: cada linha é um alvo de toque inteiro */
  .perm-modulo-header { min-height: 52px; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  /* o nome do módulo fica com a linha; o resumo e o botão "categorias" descem
     para a linha de baixo quando não cabem (antes o nome era cortado até sumir) */
  .perm-check-modulo { font-size: .92rem; min-height: 44px; flex: 1 1 auto; }
  .perm-modulo-dir { margin-left: auto; }
  .perm-check-modulo input { width: 20px; height: 20px; }
  .perm-expandir { min-height: 44px; padding: 4px 10px; font-size: .8rem; }
  .perm-modo, .perm-cat-item { min-height: 44px; font-size: .9rem; }
  .perm-modo input, .perm-cat-item input { width: 20px; height: 20px; }
  .perm-categorias { gap: 0; }
  .perm-cat-lista { gap: 0; }

  .frame-loading { padding: 16px; }
  .frame-skel__cards { grid-template-columns: 1fr 1fr; }
}
@keyframes modal-sobe {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* Celular: uma coluna, e o card deita (ícone ao lado do texto) para caberem
   mais sistemas na tela sem rolar. */
@media (max-width: 480px) {
  .dash-saudacao__data { display: none; }
  .dash-module-grid { grid-template-columns: 1fr; gap: 10px; }
  .dash-module-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
    padding: 14px 40px 14px 14px; min-height: 76px;
  }
  .dash-card-icone { grid-row: 1 / span 2; margin-bottom: 0; }
  .dash-module-card h3 { align-self: end; padding-right: 0; margin-bottom: 2px; font-size: 1rem; }
  .dash-module-card p { align-self: start; font-size: .8rem; }
  .dash-card-seta { top: 50%; right: 14px; margin-top: -9px; }
  .dash-module-card:hover .dash-card-seta { transform: none; }
  .dash-module-card::after { content: none; }
  .pagina-cab__acoes { width: 100%; }
  .pagina-cab__acoes .btn { flex: 1; }
  .equipe-card__top { flex-wrap: wrap; }
  .perfil-info { grid-template-columns: 1fr; }
}