/* Gestao de usuarios - padrao da CTI/SEGEFAZ, versao 1.0 (22/10/2026).
   Fonte unica: esta pasta. Os sistemas recebem COPIA (ver LEIAME.md, secao 8). Todos os seletores comecam por .cti-usr
   para nao brigar com o CSS da pagina. As cores de superficie vem das variaveis do proprio sistema (--surface, --border,
   --text...), com valor de reserva, para a tela herdar o tema claro ou escuro de cada aplicacao. */
.cti-usr {
  --cti-usr-verde: #006218;
  --cti-usr-ok: #047857;       --cti-usr-ok-fundo: rgba(16,185,129,.16);
  --cti-usr-aviso: #B45309;    --cti-usr-aviso-fundo: rgba(245,158,11,.18);
  --cti-usr-erro: #B91C1C;     --cti-usr-erro-fundo: rgba(239,68,68,.15);
  --cti-usr-neutro: #475569;   --cti-usr-neutro-fundo: rgba(100,116,139,.16);
  font-size: 13px; color: var(--text, #1E293B);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cti-usr {
    --cti-usr-ok: #6EE7B7; --cti-usr-aviso: #FCD34D; --cti-usr-erro: #FCA5A5; --cti-usr-neutro: #CBD5E1;
  }
}
:root[data-theme="dark"] .cti-usr { --cti-usr-ok: #6EE7B7; --cti-usr-aviso: #FCD34D; --cti-usr-erro: #FCA5A5; --cti-usr-neutro: #CBD5E1; }

/* Opcao "claro" (tabela({claro:true})): para sistemas de painel sempre claro, como o SAC, que nao seguem o tema escuro do sistema operacional. */
:root .cti-usr.cti-usr-claro { --cti-usr-ok: #047857; --cti-usr-aviso: #B45309; --cti-usr-erro: #B91C1C; --cti-usr-neutro: #475569; }

.cti-usr *, .cti-usr *::before, .cti-usr *::after { box-sizing: border-box; }
.cti-usr-aviso-topo { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--cti-usr-ok-fundo); color: var(--cti-usr-ok); border: 1px solid var(--cti-usr-ok); }
.cti-usr-aviso-topo.aberto { display: block; }
.cti-usr-aviso-topo code, .cti-usr-aviso-topo input { font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  padding: 4px 8px; border-radius: 4px; border: 1px solid currentColor; background: transparent; color: inherit; width: 160px; }
.cti-usr-aviso-topo button { margin-left: 6px; }

.cti-usr-tabela-wrap { overflow-x: auto; }
.cti-usr-tabela { width: 100%; border-collapse: collapse; }
.cti-usr-tabela th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 10px; color: var(--text-secondary, #64748B); border-bottom: 2px solid var(--cti-usr-verde); white-space: nowrap; }
.cti-usr-tabela td { padding: 10px; vertical-align: middle; border-bottom: 1px solid var(--border, #E2E8F0); }
.cti-usr-tabela tr.cti-usr-inativa td { opacity: .62; }
.cti-usr-login { font-weight: 600; }
.cti-usr-nome { min-width: 140px; }
.cti-usr-data, .cti-usr-ip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cti-usr-ip { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.cti-usr-vazio { color: var(--text-muted, #94A3B8); }

.cti-usr-selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; margin: 1px 4px 1px 0; }
.cti-usr-selo.ok { background: var(--cti-usr-ok-fundo); color: var(--cti-usr-ok); }
.cti-usr-selo.inativa { background: var(--cti-usr-neutro-fundo); color: var(--cti-usr-neutro); }
.cti-usr-selo.aviso { background: var(--cti-usr-aviso-fundo); color: var(--cti-usr-aviso); }
.cti-usr-selo.erro { background: var(--cti-usr-erro-fundo); color: var(--cti-usr-erro); }

.cti-usr-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cti-usr-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #CBD5E1); background: var(--surface, #fff); color: var(--text, #1E293B); white-space: nowrap; }
.cti-usr-btn:hover { border-color: var(--cti-usr-verde); }
.cti-usr-btn:focus-visible, .cti-usr input:focus-visible, .cti-usr select:focus-visible { outline: 2px solid var(--cti-usr-verde); outline-offset: 2px; }
.cti-usr-btn.perigo { color: var(--cti-usr-erro); }
.cti-usr-btn.primario { background: var(--cti-usr-verde); border-color: var(--cti-usr-verde); color: #fff; }

.cti-usr-novo { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border, #E2E8F0); }
.cti-usr-novo h3 { font-size: 14px; margin: 0 0 10px; color: var(--cti-usr-verde); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cti-usr-novo h3 { color: var(--cti-usr-ok); } }
:root[data-theme="dark"] .cti-usr-novo h3 { color: var(--cti-usr-ok); }
.cti-usr-novo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cti-usr-novo-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cti-usr input, .cti-usr select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 6px; min-width: 0;
  border: 1px solid var(--border, #CBD5E1); background: var(--bg, #fff); color: var(--text, #1E293B); }
.cti-usr-dica { font-size: 12px; color: var(--text-secondary, #64748B); margin: 6px 0 0; }
.cti-usr-rodape { margin-top: 16px; font-size: 11.5px; color: var(--text-muted, #94A3B8); }

@media (max-width: 720px) {
  .cti-usr-novo-grade { grid-template-columns: 1fr; }
  .cti-usr-tabela th { font-size: 10.5px; padding: 6px; }
  .cti-usr-tabela td { padding: 8px 6px; }
}