/* ══════════════════════════════════════════════════════════════════════════
   PERFIS OFICIAIS — seletor de perfil de acesso (Usuários da Equipe)
   ══════════════════════════════════════════════════════════════════════════

   Identidade fixada pelo dono para as interfaces de acesso: fundo PRETO
   ABSOLUTO (#000000), bordas, destaques e botão de confirmação na liga
   DOURADO (#FFD700) → AMARELO CARAMELO (#D4A373), retângulos finos com cantos
   de 8 a 12 px, "vidro jateado" plano (backdrop-filter) e tipografia
   SANS-SERIF DO SISTEMA (SF Pro, Segoe, Roboto, Inter) — a Quiche Sans fica
   fora das telas de preenchimento operacional. Textos descritivos longos
   são JUSTIFICADOS (text-align: justify) para não abrir "rios" de branco.

   ESCOPO. Tudo aqui vive sob `.po-*` (o seletor, montado por
   js/perfis-oficiais.js dentro do modal `#modal.acesso-seguro` da tela de
   usuários) e sob `.po-camada` (a lista, que é um "portal" no fim do <body>:
   o modal tem overflow:auto e cortaria uma lista posicionada dentro dele).
   Nada aqui alcança as demais telas do ERP.

   RESTRIÇÕES DO AMBIENTE. `style-src 'self'` (helmet, server.js): nenhum
   <style> criado por script — todo o visual mora neste arquivo, e o JS só
   mexe em `el.style.top/left/width` (CSSOM, que a CSP não bloqueia).

   BORDA EM DEGRADÊ SEM PERDER O VIDRO: mesma receita de
   importacao-pacientes.css — um ::before de 1 px com o degradê, recortado
   por máscara (padding-box XOR border-box), e o miolo continua translúcido. */

.po-seletor, .po-camada, .po-nota, .po-delegacao, .po-rotulo {
  --po-preto: #000000;
  --po-ouro: #FFD700;
  --po-caramelo: #D4A373;
  --po-liga: linear-gradient(135deg, var(--po-ouro) 0%, var(--po-caramelo) 100%);
  --po-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, .14) 0%, rgba(212, 163, 115, .14) 100%);
  --po-vidro: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --po-fosco: blur(18px) saturate(150%);
  --po-texto: #F5F1E6;
  --po-texto-fraco: rgba(245, 241, 230, .64);
  --po-canto-1: 12px;   /* lista */
  --po-canto-2: 10px;   /* gatilho, caixa de delegação */
  --po-canto-3: 8px;    /* opção, selo de código, botão */
  --po-fonte: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue',
              Inter, Arial, sans-serif;
}

/* O <select> continua sendo o campo do formulário (FormData lê dele); só
   não aparece. `display:none` mantém o valor — o que o apagaria do FormData
   seria `disabled`, e por isso o seletor bloqueado NÃO desabilita o select. */
.po-oculto { display: none !important; }
.po-escondido { display: none !important; }

.po-campo { margin-bottom: 14px; }
.po-rotulo {
  display: block;
  font: 400 13px/1.3 var(--po-fonte);
  color: var(--po-texto);
  margin-bottom: 6px;
}

/* ── gatilho (o campo fechado) ─────────────────────────────────────────── */
.po-gatilho {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: none;
  border-radius: var(--po-canto-2);
  background: var(--po-preto);
  background-image: var(--po-vidro);
  -webkit-backdrop-filter: var(--po-fosco);
  backdrop-filter: var(--po-fosco);
  color: var(--po-texto);
  font: 500 14.5px/1.3 var(--po-fonte);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.po-gatilho::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .7), rgba(212, 163, 115, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.po-gatilho:hover:not(.bloqueado), .po-gatilho[aria-expanded="true"] { background-image: var(--po-liga-suave); }
.po-gatilho[aria-expanded="true"]::before, .po-gatilho:hover:not(.bloqueado)::before { background: var(--po-liga); }
.po-gatilho:focus-visible { outline: 2px solid var(--po-ouro); outline-offset: 2px; }
.po-gatilho.bloqueado { cursor: not-allowed; }
.po-gatilho.bloqueado .po-nome { color: var(--po-texto-fraco); }
.po-gatilho.bloqueado::before { background: rgba(212, 163, 115, .35); }

.po-codigo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--po-ouro);
  background: rgba(255, 215, 0, .12);
  border-radius: var(--po-canto-3);
  padding: 3px 8px;
  line-height: 1.2;
}
.po-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-seta {
  width: 9px; height: 9px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--po-caramelo);
  border-bottom: 2px solid var(--po-caramelo);
  transform: rotate(45deg);
  transition: transform .15s;
}
.po-gatilho[aria-expanded="true"] .po-seta { transform: rotate(225deg); margin-top: 4px; }
.po-gatilho.bloqueado .po-seta { opacity: .35; }

/* ── a lista (portal, position:fixed calculado pelo JS) ────────────────── */
/* `!important` e seletor com o pai DE PROPÓSITO: o tema liquid-glass do ERP
   aplica `position: relative` aos filhos do <body>, e a camada É um filho do
   <body> (portal). Medido em Chrome headless: sem isto a lista "abre" como
   bloco relativo no fim da página, fora da tela. Um portal só é portal se
   for `fixed`. */
body > .po-camada, .po-camada { position: fixed !important; z-index: 2147483000 !important; inset: auto; }
/* z-index acima do `.portal-overlay` do liquid-glass (o modal): a lista abre
   DENTRO do modal e tem de ficar na frente dele, não atrás do seu vidro. */
.po-lista {
  position: relative;
  margin: 0;
  padding: 6px;
  border-radius: var(--po-canto-1);
  background: rgba(0, 0, 0, .88);
  background-image: var(--po-vidro);
  -webkit-backdrop-filter: var(--po-fosco);
  backdrop-filter: var(--po-fosco);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .05) inset;
  color: var(--po-texto);
  font-family: var(--po-fonte);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.po-lista::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--po-liga);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.po-lista:focus-visible { box-shadow: 0 22px 60px rgba(0, 0, 0, .75), 0 0 0 2px var(--po-ouro); }

.po-opcao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--po-canto-3);
  cursor: pointer;
  transition: background .12s;
}
.po-opcao + .po-opcao { margin-top: 2px; }
.po-opcao:hover, .po-opcao.ativa { background: var(--po-liga-suave); }
.po-opcao[aria-selected="true"] {
  background: rgba(255, 215, 0, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .38);
}
.po-opcao .po-codigo { margin-top: 1px; }
.po-texto { min-width: 0; }
.po-opcao .po-nome { display: block; font-size: 14px; white-space: normal; }
.po-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--po-texto-fraco);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.po-marca {
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--po-liga);
  color: var(--po-preto);
  display: none;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.po-marca::after { content: '✓'; }
.po-opcao[aria-selected="true"] .po-marca { display: grid; }

/* ── notas e caixa de delegação ────────────────────────────────────────── */
.po-nota {
  margin: 6px 0 0;
  font: 400 12.5px/1.55 var(--po-fonte);
  color: var(--po-texto-fraco);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.po-nota:empty { display: none; }
.po-nota strong { color: var(--po-texto); font-weight: 600; }
.po-nota.po-alerta { color: #f5c6a5; }
.po-justificado { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

.po-delegacao {
  position: relative;
  border-radius: var(--po-canto-2);
  padding: 12px 14px;
  margin: 6px 0 14px;
  background: var(--po-vidro);
  font-family: var(--po-fonte);
}
.po-delegacao::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .55), rgba(212, 163, 115, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.po-delegacao label { color: var(--po-ouro); font-family: var(--po-fonte); }
.po-delegacao input[type="checkbox"] { accent-color: var(--po-ouro); }

/* ── selo na lista de usuários ─────────────────────────────────────────── */
.badge.po-gere { background: #1a1400; color: var(--po-ouro, #FFD700); border: 1px solid rgba(255, 215, 0, .45); }

/* ── o botão de confirmação do modal de usuário (Salvar) ───────────────── */
#modal.acesso-seguro .form-actions .btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  color: #000000;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Inter, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}
#modal.acesso-seguro .form-actions .btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
#modal.acesso-seguro .form-actions .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
#modal.acesso-seguro .form-actions .btn-primary:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }
#modal.acesso-seguro .form-actions .btn-ghost {
  border-color: rgba(212, 163, 115, .5);
  color: #D4A373;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Inter, Arial, sans-serif;
}
#modal.acesso-seguro .form-actions .btn-ghost:hover { background: rgba(212, 163, 115, .1); color: #FFD700; }

@media (prefers-reduced-motion: reduce) {
  .po-gatilho, .po-seta, .po-opcao { transition: none; }
}