/* ========================================
   Arquivo: css/painel.css (antes css/superadmin.css)
   Design system do shell administrativo — compartilhado por /superadmin
   (Área do Desenvolvedor) e /portal (Portal do Contratante) — tema escuro,
   layout de 3 colunas (menu lateral · conteúdo · painel de resumo) e,
   abaixo de 921px, navegação no padrão Android/Material 3: barra
   superior compacta + barra de navegação inferior com indicador em
   pílula + "Mais" abrindo uma bottom sheet com o menu completo.
   Shell montado por include/superadmin_cabecalho.php / portal_cabecalho.php e
   os respectivos _rodape.php; comportamento em js/painel.js. Classes com
   prefixo sa- são do shell (valem nas duas áreas).
   ======================================== */

:root {
  color-scheme: dark;
  --sa-bg: #16171a;
  --sa-superficie: #1c1d21;
  --sa-card: #212226;
  --sa-campo: #18191c;
  --sa-borda: #303238;
  --sa-borda-forte: #43464e;
  --sa-texto: #e8e9ec;
  --sa-texto-sub: #a4a7ae;
  --sa-texto-fraco: #71757d;
  --sa-acento: #3b82f6;
  --sa-acento-forte: #2563eb;
  --sa-acento-suave: rgba(59, 130, 246, .16);
  --sa-verde: #22c55e;
  --sa-vermelho: #f87171;
  --sa-amarelo: #fbbf24;
  --sa-raio: 10px;
  --sa-raio-grande: 14px;
  --sa-topo-altura: 56px;
  --sa-menu-largura: 236px;
  --sa-lateral-largura: 300px;
  --sa-nav-altura: 72px;
  --sa-transicao: .18s cubic-bezier(.2, .8, .2, 1);
  --sa-sombra: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sa-body {
  margin: 0; background: var(--sa-bg); color: var(--sa-texto);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* ---------- Barras de rolagem (global) ---------- */
* {
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: var(--sa-borda-forte) transparent;
}
*::-webkit-scrollbar {
  width: 6px;                            /* vertical */
  height: 6px;                           /* horizontal */
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--sa-borda-forte);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #555964;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

a { color: var(--sa-acento); }
code { font-size: .85em; background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; }
::selection { background: var(--sa-acento-suave); }
:focus-visible { outline: 2px solid var(--sa-acento); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.sa-topo {
  position: sticky; top: 0; z-index: 40; height: var(--sa-topo-altura);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(28, 29, 33, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sa-borda);
}
.sa-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sa-texto); min-width: 0; }
.sa-marca-icone {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, #60a5fa, var(--sa-acento-forte) 60%, #7c3aed);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}
.sa-marca-icone.portal { background: linear-gradient(135deg, #f5d97a, #d4af37 55%, #9c6b1d); color: #1a1305; box-shadow: 0 4px 14px rgba(212,175,55,.35); }
.sa-marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sa-marca-texto strong { font-size: .92rem; white-space: nowrap; }
.sa-marca-texto span { font-size: .72rem; color: var(--sa-texto-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-topo-titulo-movel { display: none; }
.sa-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sa-status { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--sa-texto-sub); padding: 0 6px; white-space: nowrap; }
.sa-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-verde); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.sa-status.local::before { background: var(--sa-amarelo); box-shadow: 0 0 0 3px rgba(251,191,36,.18); }
.sa-status.parado::before { background: var(--sa-texto-fraco); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.sa-usuario { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--sa-borda); }
.sa-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #2b2d33; color: var(--sa-texto); font-weight: 700; font-size: .78rem; border: 1px solid var(--sa-borda-forte);
}
.sa-usuario-nome { font-size: .82rem; color: var(--sa-texto-sub); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Corpo em colunas ---------- */
.sa-corpo {
  display: grid; grid-template-columns: var(--sa-menu-largura) minmax(0, 1fr);
  min-height: calc(100vh - var(--sa-topo-altura));
}
.sa-corpo.com-lateral { grid-template-columns: var(--sa-menu-largura) minmax(0, 1fr) var(--sa-lateral-largura); }

.sa-menu {
  position: sticky; top: var(--sa-topo-altura); height: calc(100vh - var(--sa-topo-altura));
  overflow-y: auto; padding: 12px 10px 20px; background: var(--sa-superficie); border-right: 1px solid var(--sa-borda);
  display: flex; flex-direction: column; gap: 2px;
}
.sa-menu-grupo { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-texto-fraco); padding: 14px 10px 6px; }
.sa-menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
  color: var(--sa-texto-sub); text-decoration: none; font-size: .88rem; font-weight: 500;
  transition: background var(--sa-transicao), color var(--sa-transicao), transform var(--sa-transicao);
}
.sa-menu a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sa-menu a:hover { background: rgba(255,255,255,.05); color: var(--sa-texto); }
.sa-menu a:active { transform: scale(.98); }
.sa-menu a.ativo { background: var(--sa-acento-forte); color: #fff; font-weight: 650; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.sa-menu a.ativo svg { opacity: 1; }
.sa-menu .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sa-vermelho); color: #1a0b0b; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.sa-menu a.ativo .contador { background: #fff; color: var(--sa-acento-forte); }
.sa-menu-rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sa-borda); display: flex; flex-direction: column; gap: 2px; }

.sa-principal { min-width: 0; padding: 8px }
.sa-cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sa-cabecalho-pagina h1 { margin: 0; font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; }
.sa-cabecalho-pagina p { margin: 3px 0 0; color: var(--sa-texto-sub); font-size: .84rem; }
.sa-cabecalho-pagina .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.sa-lateral {
  position: sticky; top: var(--sa-topo-altura); align-self: start; max-height: calc(100vh - var(--sa-topo-altura));
  overflow-y: auto; padding: 18px 16px 30px 0; display: flex; flex-direction: column; gap: 14px;
}

/* ---------- Cards e grade ---------- */
.sa-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin-bottom: 16px; }
.sa-grade.duas { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sa-grade.tres { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sa-grade.principal-lateral { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.sa-card {
  background: var(--sa-card); border: 1px solid var(--sa-borda); border-radius: var(--sa-raio-grande);
  padding: 16px 16px 18px; min-width: 0;
  animation: sa-entrar .35s cubic-bezier(.2, .8, .2, 1) both;
}
.sa-card + .sa-card { margin-top: 0; }
.sa-card-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #cfd2d8;
}
.sa-card-desc { margin: -4px 0 14px; font-size: .8rem; color: var(--sa-texto-sub); }
.sa-card.destaque { border-color: rgba(59,130,246,.45); box-shadow: inset 0 0 0 1px rgba(59,130,246,.15); }
.sa-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sa-borda); }
@keyframes sa-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Métricas (painel) ---------- */
.sa-metricas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.sa-metrica { background: var(--sa-card); border: 1px solid var(--sa-borda); border-radius: var(--sa-raio-grande); padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color var(--sa-transicao), transform var(--sa-transicao); animation: sa-entrar .35s both; }
a.sa-metrica:hover { border-color: var(--sa-borda-forte); transform: translateY(-2px); }
.sa-metrica .rotulo { font-size: .72rem; color: var(--sa-texto-sub); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.sa-metrica .valor { color: var(--sa-texto); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sa-metrica .extra { font-size: .76rem; color: var(--sa-texto-fraco); }

/* ---------- Formulários ---------- */
.sa-campos { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sa-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sa-campo.largo { grid-column: 1 / -1; }
.sa-campo > label, .sa-rotulo { font-size: .78rem; color: var(--sa-texto-sub); font-weight: 500; }
.sa-campo .dica { font-size: .72rem; color: var(--sa-texto-fraco); }
.sa-body input[type="text"], .sa-body input[type="email"], .sa-body input[type="password"], .sa-body input[type="date"], .sa-body input[type="time"],
.sa-body input[type="number"], .sa-body input[type="url"], .sa-body input[type="search"], .sa-body input[type="tel"], .sa-body input[type="file"], .sa-body select, .sa-body textarea {
  width: 100%; padding: 9px 11px; background: var(--sa-campo); color: var(--sa-texto);
  border: 1px solid var(--sa-borda); border-radius: 8px; font: inherit; font-size: .9rem;
  transition: border-color var(--sa-transicao), box-shadow var(--sa-transicao);
}
.sa-body textarea { min-height: 120px; resize: vertical; }
.sa-body input:focus, .sa-body select:focus, .sa-body textarea:focus { outline: none; border-color: var(--sa-acento); box-shadow: 0 0 0 3px var(--sa-acento-suave); }
.sa-body input::placeholder, .sa-body textarea::placeholder { color: var(--sa-texto-fraco); }
.sa-body input[type="file"] { padding: 7px; }
.sa-body input[type="file"]::file-selector-button { background: #2b2d33; color: var(--sa-texto); border: 1px solid var(--sa-borda-forte); border-radius: 6px; padding: 5px 10px; margin-right: 10px; cursor: pointer; font: inherit; font-size: .82rem; }
.sa-com-botao { display: flex; gap: 6px; }
.sa-com-botao > input { flex: 1; min-width: 0; }
.sa-check { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--sa-texto); cursor: pointer; }
.sa-check input { width: 16px; height: 16px; accent-color: var(--sa-acento); margin: 0; }

/* Interruptor (ativo/inativo) */
.sa-interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: .84rem; color: var(--sa-texto-sub); user-select: none; }
.sa-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-interruptor .trilho { width: 38px; height: 22px; border-radius: 999px; background: #3a3c43; position: relative; transition: background var(--sa-transicao); flex-shrink: 0; }
.sa-interruptor .trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d1d5db; transition: transform var(--sa-transicao), background var(--sa-transicao); }
.sa-interruptor input:checked + .trilho { background: var(--sa-acento-forte); }
.sa-interruptor input:checked + .trilho::after { transform: translateX(16px); background: #fff; }
.sa-interruptor input:focus-visible + .trilho { outline: 2px solid var(--sa-acento); outline-offset: 2px; }

/* ---------- Botões ---------- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--sa-borda-forte);
  background: #26282d; color: var(--sa-texto); font: inherit; font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--sa-transicao), border-color var(--sa-transicao), transform var(--sa-transicao), opacity var(--sa-transicao);
}
.sa-btn svg { width: 16px; height: 16px; }
.sa-btn:hover { background: #2e3036; border-color: #555964; }
.sa-btn:active { transform: scale(.97); }
.sa-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sa-btn.primario { background: var(--sa-acento-forte); border-color: var(--sa-acento-forte); color: #fff; }
.sa-btn.primario:hover { background: var(--sa-acento); border-color: var(--sa-acento); }
.sa-btn.perigo { color: #fecaca; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.sa-btn.perigo:hover { background: rgba(248,113,113,.16); }
.sa-btn.fantasma { background: transparent; border-color: transparent; color: var(--sa-texto-sub); }
.sa-btn.fantasma:hover { background: rgba(255,255,255,.05); color: var(--sa-texto); }
.sa-btn.icone { padding: 8px; width: 36px; height: 36px; }
.sa-btn.icone[aria-pressed="true"] { background: var(--sa-acento-suave); border-color: rgba(59,130,246,.55); color: #93c5fd; }
.sa-btn.bloco { width: 100%; }
.sa-btn.pequeno { padding: 5px 10px; font-size: .78rem; }

/* ---------- Selos, alertas, listas ---------- */
.sa-selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 750; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.sa-selo.ok { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
.sa-selo.off { color: var(--sa-texto-sub); background: rgba(255,255,255,.04); border-color: var(--sa-borda-forte); }
.sa-selo.alerta { color: #fcd34d; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); }
.sa-selo.erro { color: #fca5a5; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.sa-selo.info { color: #93c5fd; background: var(--sa-acento-suave); border-color: rgba(59,130,246,.35); }

.sa-alerta { padding: 10px 14px; border-radius: var(--sa-raio); font-size: .84rem; margin-bottom: 14px; border: 1px solid; }
.sa-alerta.ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); color: #bbf7d0; }
.sa-alerta.aviso { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); color: #fde68a; }
.sa-alerta.erro { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); color: #fecaca; }
.sa-alerta a { color: inherit; font-weight: 700; }

.sa-lista { list-style: none; margin: 0; padding: 0; }
.sa-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: .84rem; border-bottom: 1px dashed rgba(255,255,255,.05); }
.sa-lista li:last-child { border-bottom: none; }
.sa-lista li span:first-child { color: var(--sa-texto); min-width: 0; }
.sa-lista li span:last-child { color: var(--sa-texto-sub); font-variant-numeric: tabular-nums; text-align: right; }
.sa-validacao li { justify-content: flex-start; align-items: flex-start; }
.sa-validacao .marca { width: 16px; flex-shrink: 0; font-weight: 800; }
.sa-validacao .ok .marca { color: var(--sa-verde); }
.sa-validacao .falha .marca { color: var(--sa-vermelho); }
.sa-validacao .aviso .marca { color: var(--sa-amarelo); }
.sa-validacao li span:last-child { text-align: left; color: var(--sa-texto); }
.sa-validacao small { display: block; color: var(--sa-texto-fraco); font-size: .72rem; }
.sa-acoes-rapidas { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Abas ---------- */
.sa-abas { display: flex; gap: 4px; padding: 4px; background: var(--sa-superficie); border: 1px solid var(--sa-borda); border-radius: 12px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.sa-abas::-webkit-scrollbar { display: none; }
.sa-abas a, .sa-abas button { flex: 0 0 auto; padding: 8px 14px; border-radius: 9px; border: none; background: transparent; color: var(--sa-texto-sub); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--sa-transicao), color var(--sa-transicao); }
.sa-abas a:hover, .sa-abas button:hover { color: var(--sa-texto); }
.sa-abas .ativa { background: #2b2d33; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.sa-painel-aba[hidden] { display: none; }

/* ---------- Tabela ---------- */
.sa-tabela-wrap { overflow-x: auto; border: 1px solid var(--sa-borda); border-radius: var(--sa-raio-grande); background: var(--sa-card); }
table.sa-tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.sa-tabela th { text-align: left; padding: 10px 14px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sa-texto-sub); border-bottom: 1px solid var(--sa-borda); background: var(--sa-superficie); white-space: nowrap; }
table.sa-tabela td { padding: 11px 14px; border-bottom: 1px solid var(--sa-borda); vertical-align: middle; }
table.sa-tabela tr:last-child td { border-bottom: none; }
table.sa-tabela tbody tr { transition: background var(--sa-transicao); }
table.sa-tabela tbody tr:hover { background: rgba(255,255,255,.025); }
.sa-vazio { text-align: center; color: var(--sa-texto-fraco); padding: 40px 16px; }

/* ---------- Toast ---------- */
.sa-toasts { position: fixed; z-index: 90; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.sa-toast { pointer-events: auto; min-width: 220px; max-width: 360px; padding: 11px 14px; border-radius: 10px; background: #2b2d33; border: 1px solid var(--sa-borda-forte); color: var(--sa-texto); font-size: .85rem; box-shadow: var(--sa-sombra); animation: sa-toast .25s both; }
.sa-toast.ok { border-left: 3px solid var(--sa-verde); }
.sa-toast.erro { border-left: 3px solid var(--sa-vermelho); }
@keyframes sa-toast { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Navegação inferior + bottom sheet (só no celular) ---------- */
.sa-nav-inferior, .sa-folha, .sa-scrim { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1279px) {
  .sa-corpo.com-lateral { grid-template-columns: var(--sa-menu-largura) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sa-corpo.com-lateral .sa-menu { grid-row: 1 / span 2; }
  .sa-corpo.com-lateral .sa-lateral { grid-column: 2; position: static; max-height: none; overflow: visible; padding: 0 24px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

@media (max-width: 920px) {
  body.sa-body { padding-bottom: calc(var(--sa-nav-altura) + env(safe-area-inset-bottom)); }
  .sa-topo { padding: 0 12px; gap: 10px; }
  .sa-marca-texto, .sa-usuario, .sa-topo-acoes .sa-status-texto-longo { display: none; }
  .sa-topo-titulo-movel { display: block; font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sa-corpo, .sa-corpo.com-lateral { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .sa-menu { display: none; }
  .sa-principal { padding: 14px 14px 24px; }
  .sa-cabecalho-pagina h1 { display: none; } /* o título já está na barra superior */
  .sa-cabecalho-pagina { margin-bottom: 12px; }
  .sa-cabecalho-pagina .acoes { width: 100%; }
  .sa-cabecalho-pagina .acoes .sa-btn { flex: 1 1 auto; }
  .sa-corpo.com-lateral .sa-lateral { grid-column: 1; padding: 0 14px 24px; grid-template-columns: minmax(0, 1fr); }
  .sa-grade, .sa-grade.duas, .sa-grade.tres, .sa-grade.principal-lateral { grid-template-columns: minmax(0, 1fr); }
  .sa-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-toasts { left: 12px; right: 12px; bottom: calc(var(--sa-nav-altura) + 12px + env(safe-area-inset-bottom)); }
  .sa-toast { max-width: none; }

  /* Barra de navegação inferior — Material 3 */
  .sa-nav-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    height: calc(var(--sa-nav-altura) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(28, 29, 33, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--sa-borda);
  }
  .sa-nav-inferior a, .sa-nav-inferior button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; color: var(--sa-texto-sub); text-decoration: none;
    font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .01em; cursor: pointer;
    -webkit-tap-highlight-color: transparent; position: relative;
  }
  .sa-nav-inferior .pilula {
    width: 58px; height: 30px; border-radius: 999px; display: grid; place-items: center; position: relative;
    transition: background var(--sa-transicao), transform var(--sa-transicao);
  }
  .sa-nav-inferior svg { width: 22px; height: 22px; }
  .sa-nav-inferior .ativo { color: var(--sa-texto); }
  .sa-nav-inferior .ativo .pilula { background: var(--sa-acento-suave); color: #93c5fd; animation: sa-pilula .28s cubic-bezier(.2,.8,.2,1); }
  .sa-nav-inferior a:active .pilula, .sa-nav-inferior button:active .pilula { transform: scale(.92); background: rgba(255,255,255,.08); }
  .sa-nav-inferior .contador { position: absolute; top: -2px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--sa-vermelho); color: #1a0b0b; font-size: .62rem; font-weight: 800; display: grid; place-items: center; }
  @keyframes sa-pilula { from { transform: scaleX(.4); opacity: .3; } to { transform: none; opacity: 1; } }

  /* Scrim + bottom sheet ("Mais") */
  .sa-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .22s; }
  .sa-scrim.aberto { opacity: 1; pointer-events: auto; }
  .sa-folha {
    display: flex; flex-direction: column; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    max-height: 86vh; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    background: #202125; border-top: 1px solid var(--sa-borda-forte); border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.45); transform: translateY(105%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden;
  }
  .sa-folha.aberta { transform: translateY(0); visibility: visible; }
  .sa-folha:focus { outline: none; }
  .sa-folha.arrastando { transition: none; }
  .sa-folha-alca { width: 36px; height: 4px; border-radius: 999px; background: #5b5f68; margin: 6px auto 14px; flex-shrink: 0; cursor: grab; }
  .sa-folha-usuario { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--sa-borda); margin-bottom: 12px; }
  .sa-folha-usuario .sa-avatar { width: 40px; height: 40px; font-size: .9rem; }
  .sa-folha-usuario strong { display: block; font-size: .95rem; }
  .sa-folha-usuario span { font-size: .78rem; color: var(--sa-texto-sub); }
  .sa-folha-titulo { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-texto-fraco); margin: 6px 4px 8px; }
  .sa-folha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .sa-folha-grade a {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px;
    border-radius: 16px; background: #26282d; color: var(--sa-texto); text-decoration: none;
    font-size: .74rem; font-weight: 600; text-align: center; position: relative;
    -webkit-tap-highlight-color: transparent; transition: background var(--sa-transicao), transform var(--sa-transicao);
  }
  .sa-folha-grade a svg { width: 24px; height: 24px; color: #93c5fd; }
  .sa-folha-grade a:active { transform: scale(.96); background: #2e3036; }
  .sa-folha-grade a.ativo { background: var(--sa-acento-suave); outline: 1px solid rgba(59,130,246,.4); }
  .sa-folha-grade .contador { position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--sa-vermelho); color: #1a0b0b; font-size: .64rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
  .sa-folha .sa-btn { margin-top: 6px; }
  body.sa-folha-aberta { overflow: hidden; }
}

@media (max-width: 380px) {
  .sa-metricas { grid-template-columns: minmax(0, 1fr); }
  .sa-folha-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Nome do usuário no topo = link para "Minha conta" (revisão geral, migration 16) */
a.sa-usuario-nome { color: inherit; text-decoration: none; }
a.sa-usuario-nome:hover { color: var(--sa-texto); text-decoration: underline; text-underline-offset: 3px; }

/* Configurações → Integrações: verificadores de CPF em guias (só um ativo; o ativo fica em verde) */
.sa-guias-cpf { grid-column: 1 / -1; }
.sa-guias-cpf-barra { display: flex; gap: 6px; padding: 4px; margin: 4px 0 14px; background: var(--sa-superficie); border: 1px solid var(--sa-borda); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.sa-guias-cpf-barra::-webkit-scrollbar { display: none; }
.sa-guia-cpf { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--sa-texto-sub); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--sa-transicao), color var(--sa-transicao), border-color var(--sa-transicao); }
.sa-guia-cpf:hover { color: var(--sa-texto); }
.sa-guia-cpf:focus-visible { outline: 2px solid var(--sa-acento); outline-offset: 2px; }
.sa-guia-cpf .situacao { font-size: .7rem; font-weight: 500; min-height: 1em; }
.sa-guia-cpf.selecionada { background: #2b2d33; color: #fff; border-color: var(--sa-borda-forte); }
.sa-guia-cpf.mecanismo-ativo { background: rgba(34, 197, 94, .14); color: #bbf7d0; border-color: rgba(34, 197, 94, .55); }
.sa-guia-cpf.mecanismo-ativo .situacao { color: var(--sa-verde); }
.sa-guia-cpf.mecanismo-ativo.selecionada { background: rgba(34, 197, 94, .26); color: #fff; border-color: var(--sa-verde); box-shadow: 0 0 0 1px var(--sa-verde) inset; }
.sa-guia-cpf.pendente .situacao { color: var(--sa-amarelo); }
.sa-guia-cpf.mecanismo-ativo.pendente { border-style: dashed; }
.sa-guias-cpf .sa-guia-cpf-painel > .sa-card { background: transparent; border: none; box-shadow: none; padding: 0; }
@media (max-width: 600px) { .sa-guia-cpf { min-width: 0; flex: 1 0 45%; } .sa-guias-cpf-barra { flex-wrap: wrap; } }

/* Configurações → Integrações: teste real de envio (SMTP / Clickatell) */
.sa-teste-envio { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--sa-borda); }
.sa-teste-envio .teste-resultado { margin-top: 8px; border: 1px solid var(--sa-borda); border-radius: var(--sa-raio); padding: 10px 12px; background: var(--sa-campo); }
.sa-teste-envio .teste-resultado.ok { border-color: rgba(34, 197, 94, .5); }
.sa-teste-envio .teste-resultado.erro { border-color: rgba(248, 113, 113, .55); }
.sa-teste-envio .teste-resumo { margin: 0 0 6px; font-size: .85rem; font-weight: 600; }
.sa-teste-envio .teste-resultado.ok .teste-resumo { color: #bbf7d0; }
.sa-teste-envio .teste-resultado.erro .teste-resumo { color: #fecaca; }
.sa-teste-envio .teste-detalhe { margin: 0; max-height: 220px; overflow: auto; font-size: .72rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all; color: var(--sa-texto-sub); }