/* =========================================================================
 * acesso-seguro.css — identidade visual dos fluxos de SENHA e ACESSO
 * Clínica Dr. Reges Jr.
 * -------------------------------------------------------------------------
 * Preto absoluto (#000), dourado (#FFD700) e amarelo caramelo (#D4A373),
 * vidro jateado plano, retângulos de cantos levemente arredondados (8–12px)
 * e tipografia sans-serif do sistema. É a diretriz corporativa aplicada às
 * telas em que a pessoa cria, troca ou recebe uma senha.
 *
 * ═════════════════════════════════════════════════════════════════════════
 *  POR QUE SÓ ESTAS TELAS, E NÃO O ERP INTEIRO
 * ═════════════════════════════════════════════════════════════════════════
 * O restante do sistema é claro (`--fundo: #f4f7f9`), com tipografia serif
 * (Tinos) e azul de apoio. Repintar tudo de preto seria outro projeto, com
 * outro orçamento de revisão: cada tabela, gráfico, badge e impressão do ERP
 * teria de ser reavaliada quanto a contraste — inclusive o contracheque e as
 * telas de prontuário, que são impressas em papel branco.
 *
 * O escopo aqui é deliberado e tem uma lógica de uso: as telas de senha são
 * as que precisam parecer DIFERENTES do resto. Quem está criando uma senha
 * definitiva deve perceber que saiu do fluxo normal de trabalho e entrou num
 * ato de segurança — e o contraste do preto com o resto do sistema faz esse
 * aviso antes de qualquer texto.
 *
 * ═════════════════════════════════════════════════════════════════════════
 *  TRÊS RESTRIÇÕES DO AMBIENTE QUE MOLDARAM ESTE ARQUIVO
 * ═════════════════════════════════════════════════════════════════════════
 * 1. `style-src 'self'` (helmet, server.js) — sem `'unsafe-inline'`. Um
 *    `<style>` criado por script é RECUSADO pelo navegador. Todo o visual
 *    mora aqui, servido como arquivo; nenhum JS deste módulo escreve CSS.
 *    (Mesma restrição que moldou `reges-senha.css`.)
 * 2. `default-src 'self'` — nenhuma CDN carrega. Nada de fonte externa: a
 *    pilha abaixo é a do sistema operacional, que é também o que a diretriz
 *    corporativa pede.
 * 3. O `:focus-visible` de todos os campos é DOURADO e grosso o suficiente
 *    para ser visto sobre preto. Sobre fundo escuro, o anel de foco padrão
 *    do navegador (azul fino) some — e sem foco visível a página fica
 *    inutilizável por teclado, que é como parte da equipe preenche
 *    formulário longo.
 * ==========================================================================*/

:root {
  --as-preto: #000000;
  --as-carvao: #0a0a0a;
  --as-dourado: #FFD700;
  --as-caramelo: #D4A373;
  --as-texto: #ece9e2;
  --as-texto-fraco: #9c968c;
  --as-ok: #4ade80;
  --as-erro: #f87171;

  /* O "vidro jateado PLANO": translucidez + desfoque, sem gradiente, sem
     brilho especular e sem sombra colorida. A borda de 1px em dourado a 22%
     é o que dá o recorte do retângulo sem virar moldura dourada maciça. */
  --as-vidro: rgba(255, 255, 255, .045);
  --as-vidro-borda: rgba(255, 215, 0, .22);
  --as-raio: 12px;
  --as-raio-min: 8px;

  --as-fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
              Arial, 'Noto Sans', sans-serif;
}

/*
 * ═════════════════════════════════════════════════════════════════════════
 *  box-sizing PRÓPRIO — a página pública não herda o reset do ERP
 * ═════════════════════════════════════════════════════════════════════════
 * `style.css` abre com `* { box-sizing: border-box }`, e todo o resto do
 * sistema vive debaixo disso. `definir-senha.html` NÃO carrega aquela folha
 * (é uma página de dois campos, servida para quem ainda não tem sessão), e
 * portanto cai no `content-box` padrão do navegador.
 *
 * A consequência foi medida em Chrome a 390px de largura: `.as-cartao` com
 * `width:100%` mais `padding: 28px 26px` mediu 392px numa tela de 390 e a
 * página ganhou rolagem horizontal — no aparelho em que a maior parte da
 * equipe abre o link, direto do e-mail. Em 1440px nada disso aparecia.
 *
 * O escopo é só o que este arquivo desenha; um `*` aqui alcançaria o ERP
 * inteiro quando a folha é carregada pelo `index.html`.
 */
.as-pagina, .as-cartao, .as-campo, .as-campo input,
.as-vidro, .as-acoes-senha, .as-aviso, .as-segredo, .as-link, .as-btn {
  box-sizing: border-box;
}

/* ─────────────────────── Superfície de vidro (base) ─────────────────────── */

.as-vidro {
  background: var(--as-vidro);
  border: 1px solid var(--as-vidro-borda);
  border-radius: var(--as-raio);
  /* `backdrop-filter` é progressivo: onde não houver suporte, fica o
     `background` translúcido sobre o preto — que continua legível. Nada
     depende do desfoque para funcionar. */
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* ═══════════════════ 1. O MODAL DO ERP, TEMATIZADO ═══════════════════════
 * Ativado por `#modal.acesso-seguro` — a classe é posta por `app.js` ao
 * abrir, e retirada ao fechar. Sem ela, o modal continua claro como sempre.
 * Por isso tudo aqui é descendente de `.acesso-seguro`: nenhuma regra deste
 * arquivo alcança um modal comum.
 * ========================================================================= */

#modal.acesso-seguro { background: rgba(0, 0, 0, .78); }

#modal.acesso-seguro .modal {
  background: var(--as-carvao);
  border: 1px solid var(--as-vidro-borda);
  border-radius: var(--as-raio);
  /* Sombra PRETA, não a azulada de `--sombra`: sobre fundo preto uma sombra
     colorida vira um halo sujo em torno da caixa. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .75);
  color: var(--as-texto);
  font-family: var(--as-fonte);
}

#modal.acesso-seguro h3 { color: var(--as-dourado); font-weight: 700; letter-spacing: .01em; }
#modal.acesso-seguro .modal-close { color: var(--as-caramelo); }
#modal.acesso-seguro .modal-close:hover { color: var(--as-dourado); }
#modal.acesso-seguro form label { color: var(--as-texto); font-family: var(--as-fonte); }

#modal.acesso-seguro form input,
#modal.acesso-seguro form select {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--as-raio-min);
  color: var(--as-texto);
  font-family: var(--as-fonte);
}
#modal.acesso-seguro form input::placeholder { color: #6f6a63; }
#modal.acesso-seguro form input:focus,
#modal.acesso-seguro form select:focus {
  outline: 2px solid var(--as-dourado);
  border-color: var(--as-dourado);
}

/* O olho de revelar senha (`reges-senha.js`) herda a cor do texto; sobre
   preto ele precisa do caramelo para não desaparecer dentro do campo. */
#modal.acesso-seguro .rs-olho { color: var(--as-caramelo); }
#modal.acesso-seguro .rs-olho:hover { color: var(--as-dourado); }

/* ══════════════════════════ 2. BOTÕES ════════════════════════════════════ */

.as-btn {
  font-family: var(--as-fonte);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--as-raio-min);
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}

/* Dourado sólido com texto PRETO. Dourado sobre branco, ou branco sobre
   dourado, não passa em contraste — #FFD700 é uma cor clara (luminância
   ~0.84), e o único texto legível sobre ela é escuro. */
.as-btn-ouro { background: var(--as-dourado); color: #000; }
.as-btn-ouro:hover:not(:disabled) { background: #ffe34d; }

.as-btn-caramelo { background: var(--as-caramelo); color: #16100a; }
.as-btn-caramelo:hover:not(:disabled) { background: #e0b78d; }

.as-btn-contorno {
  background: transparent;
  border-color: var(--as-vidro-borda);
  color: var(--as-caramelo);
}
.as-btn-contorno:hover:not(:disabled) { border-color: var(--as-dourado); color: var(--as-dourado); }

/*
 * O BOTÃO DESABILITADO PRECISA PARECER DESABILITADO.
 *
 * É o estado em que o formulário de senha passa a maior parte do tempo — ele
 * só libera quando as cinco regras estão cumpridas. Com o dourado a 45% e o
 * cursor de recusa, a pessoa entende que falta alguma coisa e volta a olhar o
 * checklist, em vez de clicar três vezes achando que a tela travou.
 */
.as-btn:disabled { opacity: .45; cursor: not-allowed; }

.as-btn:focus-visible { outline: 2px solid var(--as-dourado); outline-offset: 2px; }

/* ═════════════════ 3. CHECKLIST DE REGRAS DE SENHA ═══════════════════════ */

.as-regras { list-style: none; margin: 10px 0 0; padding: 0; }

.as-regra {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  font: 400 13px/1.45 var(--as-fonte);
  color: var(--as-texto-fraco);
  transition: color .15s;
}
.as-regra.cumprida { color: var(--as-ok); }

/*
 * O MARCADOR É UM CARACTERE, NÃO SÓ UMA COR.
 *
 * `○` quando falta, `✓` quando cumprida — trocado por `app.js`/`definir-senha`
 * junto com a classe. Um checklist que muda só de cor é invisível para quem
 * tem daltonismo (8% dos homens), e o verde sobre preto é justamente o par
 * que mais se perde. A forma diz o mesmo que a cor.
 */
.as-regra-marca {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}

/* ══════════════════ 4. AVISOS, SEGREDOS E BLOCOS ════════════════════════ */

.as-aviso {
  border-radius: var(--as-raio-min);
  padding: 12px 14px;
  margin: 12px 0;
  font: 400 13px/1.55 var(--as-fonte);
  border: 1px solid;
}
.as-aviso-ouro { background: rgba(255, 215, 0, .07); border-color: rgba(255, 215, 0, .3); color: #e8dcb0; }
.as-aviso-caramelo { background: rgba(212, 163, 115, .08); border-color: rgba(212, 163, 115, .32); color: #e3cdb4; }
.as-aviso-erro { background: rgba(248, 113, 113, .09); border-color: rgba(248, 113, 113, .35); color: #f8b4b4; }
.as-aviso strong { color: var(--as-dourado); }
.as-aviso-erro strong { color: #fca5a5; }

/*
 * A CAIXA DA SENHA TEMPORÁRIA — monoespaçada, grande, com espaço entre os
 * caracteres. Esta senha é LIDA EM VOZ ALTA ou copiada à mão de uma tela para
 * um teclado, e `l`/`1`/`I` e `O`/`0` são o erro clássico dessa leitura.
 * `utils/senhaForte.js` já tirou os ambíguos do alfabeto; aqui a fonte
 * monoespaçada e o `letter-spacing` terminam o serviço, separando o que é
 * caractere do que é caractere.
 */
.as-segredo {
  display: block;
  font: 700 21px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  letter-spacing: .16em;
  color: var(--as-dourado);
  background: rgba(255, 215, 0, .06);
  border: 1px dashed rgba(255, 215, 0, .4);
  border-radius: var(--as-raio-min);
  padding: 14px 16px;
  margin: 10px 0;
  text-align: center;
  /* Seleção do texto inteiro com um duplo-clique, e quebra em telas estreitas
     em vez de estourar a largura do modal. */
  /* `-webkit-` junto: sem ele o Safari (iOS incluído) ignora a regra, e o
     duplo-toque não seleciona a senha inteira — justamente no aparelho em que
     ela mais precisa ser copiada de uma vez. */
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
}

/* Link longo (o de recuperação, quando o e-mail falha) dentro de uma caixa
   que rola em vez de esticar o modal. */
.as-link {
  display: block;
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--as-caramelo);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--as-raio-min);
  padding: 10px 12px;
  margin: 8px 0;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.as-nota { font: 400 12.5px/1.55 var(--as-fonte); color: var(--as-texto-fraco); margin: 8px 0 0; }
.as-nota strong { color: var(--as-texto); }

/* ════════ 5. AS AÇÕES DE SENHA DENTRO DO FORMULÁRIO DE USUÁRIO ══════════ */

/*
 * O painel dos dois botões dentro de "Editar Usuário". Ocupa a linha inteira
 * e tem moldura própria pela mesma razão da caixa de `pode_excluir` ao lado
 * (ver `formUsuario` em app.js): não são campos como os outros. Um botão que
 * invalida a credencial de alguém não pode parecer mais um controle do
 * formulário, espremido ao lado do cargo.
 */
.as-acoes-senha {
  border: 1px solid var(--as-vidro-borda);
  border-radius: var(--as-raio);
  background: rgba(255, 215, 0, .04);
  padding: 14px 16px;
  margin: 6px 0 14px;
}
.as-acoes-senha h4 {
  font: 700 12px/1.4 var(--as-fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-caramelo);
  margin: 0 0 4px;
}
.as-acoes-senha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.as-acoes-senha .as-btn { flex: 1 1 200px; }

/* ══════════════════ 6. A PÁGINA PÚBLICA definir-senha.html ══════════════ */

/*
 * Aqui o tema vale para o documento inteiro — é uma página própria, servida
 * fora do `index.html` do ERP, para quem ainda não tem sessão. Ela não carrega
 * `style.css`, então tudo o que precisa está neste arquivo.
 */
body.as-pagina {
  margin: 0;
  min-height: 100vh;
  background: var(--as-preto);
  color: var(--as-texto);
  font-family: var(--as-fonte);
  display: grid;
  place-items: center;
  /* `safe-area-inset` para o iPhone com notch: parte da equipe abre este link
     no celular, direto do e-mail, e sem isto o topo do cartão fica sob a
     barra de status. */
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
}

.as-cartao {
  width: 100%;
  max-width: 460px;
  background: var(--as-carvao);
  border: 1px solid var(--as-vidro-borda);
  border-radius: var(--as-raio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  padding: 28px 26px;
}

.as-marca {
  font: 700 11px/1.4 var(--as-fonte);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--as-caramelo);
  margin: 0 0 8px;
}
.as-cartao h1 { font: 700 22px/1.3 var(--as-fonte); color: var(--as-dourado); margin: 0 0 6px; }
.as-cartao h1 + p { font: 400 14px/1.6 var(--as-fonte); color: var(--as-texto-fraco); margin: 0 0 20px; }

.as-campo { display: block; margin-bottom: 16px; }
.as-campo > span { display: block; font: 600 13px/1.4 var(--as-fonte); color: var(--as-texto); margin-bottom: 6px; }
.as-campo input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;
  font: 400 15px/1.3 var(--as-fonte);
  color: var(--as-texto);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--as-raio-min);
}
.as-campo input:focus { outline: 2px solid var(--as-dourado); border-color: var(--as-dourado); }
/* Campo que o navegador autopreenche volta branco com texto preto no Chrome;
   a sombra interna gigante é o único jeito conhecido de repintar isso. */
.as-campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--as-texto);
  -webkit-box-shadow: 0 0 0 1000px #151310 inset;
}

.as-acoes { margin-top: 20px; }
.as-acoes .as-btn { width: 100%; padding: 13px 18px; font-size: 15px; }

.as-rodape {
  margin: 18px 0 0;
  font: 400 12px/1.6 var(--as-fonte);
  color: #6f6a63;
  text-align: center;
}

/* Telas pequenas: o cartão perde a moldura lateral e ganha a largura toda.
   Em 320px de largura, 26px de padding de cada lado comem 16% da tela. */
@media (max-width: 420px) {
  .as-cartao { padding: 22px 18px; }
  .as-segredo { font-size: 18px; letter-spacing: .12em; }
  .as-acoes-senha .as-btn { flex: 1 1 100%; }
}

/*
 * Quem configurou o sistema para reduzir animação não recebe transição
 * nenhuma. As daqui são curtas e discretas, mas a regra do usuário vale
 * sobre a preferência do designer — inclusive porque parte delas roda em
 * mudança de cor, que é o gatilho mais comum de desconforto vestibular.
 */
@media (prefers-reduced-motion: reduce) {
  .as-btn, .as-regra { transition: none; }
}