/* ══════════════════════════════════════════════════════════════════════════
   GERAR SENHA DO PACIENTE — botão da coluna Ações e modal
   ══════════════════════════════════════════════════════════════════════════

   Diretriz corporativa do pedido: fundo PRETO ABSOLUTO (#000000); bordas do
   pop-up, contornos dos inputs e botões de ação na liga DOURADO (#FFD700) →
   AMARELO CARAMELO (#D4A373); retângulos finos com cantos de 8 a 12 px;
   vidro jateado PLANO (backdrop-filter, sem brilho, sem forma amebóide);
   sombras limpas; sans-serif do sistema. Mesmos tokens de
   importacao-pacientes.css e acesso-seguro.css — nada de cor nova.

   ESCOPO. Tudo vive sob `#modal.senha-paciente` (classe posta por
   js/senha-paciente.js e retirada quando o modal fecha) ou sob
   `.sp-btn-linha` (o botão dentro da tabela). Nenhuma regra alcança outra
   tela. A borda em degradê é um ::before de 1 px recortado por máscara
   (border-image não respeita border-radius; degradê no background mataria o
   vidro).

   O botão da linha NÃO tem backdrop-filter: com 1.800 linhas na Lista, vidro
   em botão de tabela é o que fazia a rolagem engasgar (liquid-glass-erp.css,
   seção 11). */

#modal.senha-paciente {
  --sp-preto: #000000;
  --sp-ouro: #FFD700;
  --sp-caramelo: #D4A373;
  --sp-liga: linear-gradient(135deg, var(--sp-ouro) 0%, var(--sp-caramelo) 100%);
  --sp-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, .14) 0%, rgba(212, 163, 115, .14) 100%);
  --sp-vidro: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --sp-fosco: blur(18px) saturate(150%);
  --sp-borda: rgba(255, 215, 0, .28);
  --sp-texto: #F5F1E6;
  --sp-texto-fraco: rgba(245, 241, 230, .64);
  --sp-canto-1: 12px;
  --sp-canto-2: 10px;
  --sp-canto-3: 8px;
  --sp-alerta: #FF6B5E;
  --sp-verde: #4CD97B;
  --sp-fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
              'Inter', Arial, sans-serif;

  background: rgba(0, 0, 0, .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#modal.senha-paciente .modal {
  position: relative;
  background: var(--sp-preto);
  background-image: var(--sp-vidro);
  -webkit-backdrop-filter: var(--sp-fosco);
  backdrop-filter: var(--sp-fosco);
  border: none;
  border-radius: var(--sp-canto-1);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .05) inset;
  color: var(--sp-texto);
  font-family: var(--sp-fonte);
  max-width: 560px;
}
#modal.senha-paciente .modal::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--sp-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;
}
#modal.senha-paciente h3 {
  color: var(--sp-ouro);
  font-family: var(--sp-fonte);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 18px;
  margin: 0 0 14px;
}
#modal.senha-paciente .modal-close { color: var(--sp-caramelo); }
#modal.senha-paciente .modal-close:hover { color: var(--sp-ouro); }

/* ── corpo ─────────────────────────────────────────────────────────────── */
.sp-modulo { display: grid; gap: 14px; font-size: 14px; line-height: 1.45; }
.sp-modulo p { margin: 0; }
.sp-intro { color: var(--sp-texto-fraco); }
.sp-intro strong { color: var(--sp-texto); font-weight: 600; }

/* estado do acesso (sem senha / provisória pendente / definitiva ativa) */
.sp-estado {
  padding: 10px 14px;
  border-radius: var(--sp-canto-2);
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--sp-vidro);
  color: var(--sp-texto-fraco);
  font-size: 13px;
}
.sp-estado strong { color: var(--sp-texto); font-weight: 600; }
.sp-selo {
  display: inline-block; margin-right: 6px;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--sp-borda);
  background: rgba(255, 215, 0, .06);
  font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--sp-ouro);
}
.sp-selo.ok { color: var(--sp-verde); border-color: rgba(76, 217, 123, .45); background: rgba(76, 217, 123, .08); }
.sp-selo.alerta { color: var(--sp-alerta); border-color: rgba(255, 107, 94, .45); background: rgba(255, 107, 94, .08); }

/* campos: retângulo fino, vidro plano, contorno na liga (mais forte no foco) */
.sp-campo { display: grid; gap: 6px; }
.sp-campo > span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sp-caramelo);
}
.sp-campo small { font-size: 12px; color: var(--sp-texto-fraco); }
.sp-campo small.sp-falta { color: var(--sp-ouro); }
#modal.senha-paciente .sp-campo input {
  width: 100%; box-sizing: border-box;
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--sp-canto-3);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sp-preto), var(--sp-preto)) padding-box,
    linear-gradient(135deg, rgba(255, 215, 0, .55), rgba(212, 163, 115, .45)) border-box;
  color: var(--sp-texto);
  font: 400 15px/1.3 var(--sp-fonte);
  transition: background .15s, box-shadow .15s;
}
#modal.senha-paciente .sp-campo input::placeholder { color: rgba(245, 241, 230, .35); }
#modal.senha-paciente .sp-campo input:focus {
  outline: none;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) padding-box,
    var(--sp-liga) border-box;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .16);
}
#modal.senha-paciente .sp-campo input:read-only {
  color: var(--sp-texto-fraco);
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(135deg, rgba(255, 215, 0, .25), rgba(212, 163, 115, .2)) border-box;
  cursor: default;
}
#modal.senha-paciente .sp-campo input.invalido {
  background:
    linear-gradient(var(--sp-preto), var(--sp-preto)) padding-box,
    linear-gradient(135deg, rgba(255, 107, 94, .9), rgba(255, 107, 94, .6)) border-box;
}
#modal.senha-paciente .sp-campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--sp-texto);
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
}

/* a senha gerada: monoespaçada, espaçada, dourada, selecionável de uma vez */
.sp-senha-linha { display: flex; gap: 8px; align-items: stretch; }
#modal.senha-paciente .sp-senha-linha input#sp-senha {
  flex: 1 1 auto;
  font: 700 20px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  letter-spacing: .16em;
  color: var(--sp-ouro);
  text-align: center;
  background:
    linear-gradient(rgba(255, 215, 0, .06), rgba(255, 215, 0, .06)) padding-box,
    var(--sp-liga) border-box;
  border-style: dashed;
  -webkit-user-select: all; user-select: all;
}
.sp-senha-linha .sp-btn { flex: none; padding-inline: 14px; }

/* resultado do envio */
.sp-envio {
  display: grid; gap: 2px;
  padding: 10px 14px;
  border-radius: var(--sp-canto-2);
  border: 1px solid;
  font-size: 13px;
}
.sp-envio strong { font-weight: 600; }
.sp-envio.ok { border-color: rgba(76, 217, 123, .45); background: rgba(76, 217, 123, .08); color: var(--sp-verde); }
.sp-envio.ok span { color: var(--sp-texto-fraco); }
.sp-envio.falha { border-color: rgba(255, 107, 94, .45); background: rgba(255, 107, 94, .1); color: var(--sp-alerta); }
.sp-envio.falha span { color: #f8b4b4; }

.sp-link { display: grid; gap: 4px; }
.sp-link span { font-size: 12px; color: var(--sp-texto-fraco); }
.sp-link code {
  display: block;
  padding: 8px 12px;
  border-radius: var(--sp-canto-3);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font: 400 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--sp-caramelo);
  word-break: break-all;
  -webkit-user-select: all; user-select: all;
}

.sp-aviso {
  padding: 10px 14px;
  border-radius: var(--sp-canto-2);
  border: 1px solid rgba(212, 163, 115, .35);
  background: rgba(212, 163, 115, .08);
  color: #e3cdb4;
  font-size: 13px;
}
/* v3: aviso vermelho do servidor de e-mail (acima do botão) e detalhe técnico */
.sp-aviso.alerta {
  display: grid; gap: 4px;
  border-color: rgba(255, 107, 94, .45);
  background: rgba(255, 107, 94, .08);
  color: #f3c2bd;
}
.sp-aviso.alerta strong { color: var(--sp-alerta); font-weight: 600; }
.sp-aviso.alerta small, .sp-envio small { font-size: 12px; color: var(--sp-texto-fraco); word-break: break-word; }
.sp-btn-mini { justify-self: start; margin-top: 4px; padding: 6px 12px; font-size: 12.5px; }
.sp-btn-mini:disabled { opacity: .6; cursor: default; }
.sp-erro {
  padding: 10px 14px;
  border-radius: var(--sp-canto-3);
  border: 1px solid rgba(255, 107, 94, .45);
  background: rgba(255, 107, 94, .10);
  color: var(--sp-alerta);
  font-size: 13px;
}
.sp-erro[hidden] { display: none; }
.sp-nota { font-size: 12.5px; color: var(--sp-texto-fraco); }

/* ── botões de ação do modal ───────────────────────────────────────────── */
.sp-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.sp-btn {
  position: relative;
  padding: 10px 18px;
  border-radius: var(--sp-canto-3);
  border: none;
  font-family: var(--sp-fonte);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .12s, filter .15s, opacity .15s;
}
.sp-btn:active { transform: translateY(1px); }
.sp-btn:disabled { opacity: .45; cursor: not-allowed; }
.sp-btn-ouro { background: var(--sp-liga); color: var(--sp-preto); }
.sp-btn-ouro:not(:disabled):hover { filter: brightness(1.08); }
.sp-btn-ghost { background: transparent; color: var(--sp-texto); }
.sp-btn-ghost::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .7), rgba(212, 163, 115, .6));
  -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;
}
.sp-btn-ghost:not(:disabled):hover { background: var(--sp-liga-suave); }
#modal.senha-paciente .sp-btn:focus-visible { outline: 2px solid var(--sp-ouro); outline-offset: 2px; }

/* ── o botão de destaque na coluna Ações (fora do modal, na tela clara) ──
   Preto com texto dourado e borda na liga: destaca sem competir com os
   `.btn-ghost` da linha. SEM backdrop-filter (ver o cabeçalho). */
.sp-btn-linha {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: #000;
  color: #FFD700;
  border: none;
  font-weight: 600;
  white-space: nowrap;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.sp-btn-linha::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, #FFD700, #D4A373);
  -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;
}
.sp-btn-linha:hover { background: #111; color: #ffe34d; }
.sp-btn-linha:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }
.sp-btn-icone { font-size: 13px; line-height: 1; color: #D4A373; }

/* ── pedido da home: alerta junto ao nome + faixa acima da tabela (06/10/2026) ──
   Mesma liga e mesmo preto do botão da linha; o que chama o olho é o PULSO
   do ponto dourado (só transform/opacity: o compositor anima sem repintar a
   tabela). SEM backdrop-filter, pelo mesmo motivo do botão. */
.sp-alerta-pedido,
.sp-pedidos,
.sp-pedido-nota {
  --spa-ouro: #FFD700;
  --spa-caramelo: #D4A373;
  --spa-fonte: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Inter',
               'Helvetica Neue', Arial, sans-serif;
}
.sp-alerta-pedido {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: 100%;
  margin: 6px 0 0;
  padding: 5px 11px 5px 9px;
  border: none; border-radius: 8px;
  background: #000;
  color: var(--spa-ouro);
  font: 600 12.5px/1.3 var(--spa-fonte);
  text-align: left; white-space: normal;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, .45);
  animation: sp-alerta-halo 2.4s ease-out infinite;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.sp-alerta-pedido::before,
.sp-pedidos::before,
.sp-pedido-chip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--spa-ouro), var(--spa-caramelo));
  -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;
}
.sp-alerta-pedido:hover { background: #111; color: #ffe34d; }
.sp-alerta-pedido:focus-visible,
.sp-pedido-chip:focus-visible { outline: 2px solid var(--spa-ouro); outline-offset: 2px; }
.sp-alerta-texto { text-decoration: underline; text-decoration-color: rgba(212, 163, 115, .6); text-underline-offset: 3px; }

.sp-alerta-pulso {
  position: relative; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #D4A373);
}
.sp-alerta-pulso::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #FFD700;
  animation: sp-alerta-pulso 1.6s ease-out infinite;
}
@keyframes sp-alerta-pulso {
  0% { transform: scale(1); opacity: .75; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes sp-alerta-halo {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, .40); }
  70% { box-shadow: 0 0 0 7px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* faixa acima da tabela: retângulo fino, preto absoluto, contorno na liga */
.sp-pedidos {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #000;
  color: #F5F1E6;
  font-family: var(--spa-fonte);
}
.sp-pedidos-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sp-pedidos-topo strong { color: var(--spa-ouro); font-size: 14px; font-weight: 600; }
.sp-pedidos-dica { color: rgba(245, 241, 230, .64); font-size: 12.5px; }
.sp-pedidos-lista {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
  max-height: 168px; overflow-y: auto;
}
.sp-pedido-chip {
  position: relative;
  display: grid; gap: 1px;
  padding: 6px 12px;
  border: none; border-radius: 8px;
  background: #0a0a0a;
  color: #F5F1E6;
  font: 500 13px/1.3 var(--spa-fonte);
  text-align: left; cursor: pointer;
}
.sp-pedido-chip:hover { background: #141414; }
.sp-pedido-nome { color: var(--spa-ouro); font-weight: 600; }
.sp-pedido-quando { color: var(--spa-caramelo); font-size: 11.5px; }

/* no modal: o pedido que trouxe a recepção até aqui */
#modal.senha-paciente .sp-pedido-nota {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--sp-canto-2);
  border: 1px solid rgba(255, 215, 0, .45);
  background: var(--sp-liga-suave);
  font-size: 13px; color: var(--sp-texto-fraco);
}
#modal.senha-paciente .sp-pedido-nota .sp-alerta-pulso { margin-top: 4px; }
#modal.senha-paciente .sp-pedido-nota strong { display: block; color: var(--sp-ouro); font-weight: 600; margin-bottom: 2px; }

@media (max-width: 640px) {
  .sp-acoes { flex-direction: column-reverse; }
  .sp-btn { width: 100%; }
  .sp-senha-linha { flex-direction: column; }
  #modal.senha-paciente .sp-senha-linha input#sp-senha { font-size: 17px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn, #modal.senha-paciente .sp-campo input { transition: none; }
  /* sem movimento: o alerta fica em destaque pela cor e pelo anel fixo */
  .sp-alerta-pedido { animation: none; box-shadow: 0 0 0 2px rgba(255, 215, 0, .35); }
  .sp-alerta-pulso::after { animation: none; opacity: 0; }
}