/* ==========================================================================
   medcenter — tela de acesso

   Estilo neumórfico azul: profundidade por sombra, não por borda. A regra que
   sustenta o efeito é ter DUAS sombras em tudo — uma escura embaixo/direita e
   um brilho claro em cima/esquerda — simulando uma luz vinda do alto à
   esquerda. Quando essa direção é respeitada em todos os elementos, o conjunto
   parece esculpido; quando um elemento foge, parece colado.

   Carregado só nas telas de acesso (login e afins), nunca no painel: são
   centenas de linhas de efeito que a área de trabalho não usa.

   Os dois temas existem. O escuro é o principal, mas quem trabalha em sala
   clara não deve levar uma tela quase preta na cara — o claro traduz o mesmo
   desenho para vidro azul sobre fundo claro.
   ========================================================================== */

.sb-acesso {
  --lg-fundo-1:   #01050f;
  --lg-fundo-2:   #04173d;
  --lg-fundo-3:   #072a6b;
  --lg-cartao-1:  #1a5ae0;
  --lg-cartao-2:  #0d3aa0;
  --lg-cartao-3:  #0a2c80;
  --lg-brilho:    #6cb2ff;
  --lg-luz:       rgba(255, 255, 255, .22);
  --lg-sombra:    rgba(0, 8, 30, .55);
  --lg-texto:     #eaf2ff;
  --lg-texto-fraco: rgba(212, 230, 255, .62);
  --lg-borda:     rgba(140, 190, 255, .22);

  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
  background: var(--lg-fundo-1);
  color: var(--lg-texto);
}

/* Tema claro: mesmo desenho, vidro azul sobre fundo claro. */
[data-bs-theme="light"] .sb-acesso {
  --lg-fundo-1:   #dfe9fb;
  --lg-fundo-2:   #c2d8f8;
  --lg-fundo-3:   #9dc0f5;
  --lg-cartao-1:  #ffffff;
  --lg-cartao-2:  #eaf1fe;
  --lg-cartao-3:  #dce8fc;
  --lg-brilho:    #1c62e0;
  --lg-luz:       rgba(255, 255, 255, .95);
  --lg-sombra:    rgba(28, 62, 130, .18);
  --lg-texto:     #0b2557;
  --lg-texto-fraco: rgba(11, 37, 87, .6);
  --lg-borda:     rgba(28, 98, 224, .16);
}

/* --------------------------------------------------------------------------
   Fundo: faixas de luz desfocadas.

   São gradientes com blur pesado, não imagens — não há o que baixar, e a peça
   acompanha qualquer tamanho de tela sem recorte.
   -------------------------------------------------------------------------- */

.sb-acesso::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 55% at 12% 18%,  var(--lg-fundo-3) 0%, transparent 62%),
    radial-gradient(45% 40% at 88% 12%,  var(--lg-cartao-2) 0%, transparent 60%),
    radial-gradient(50% 45% at 78% 92%,  var(--lg-fundo-3) 0%, transparent 62%),
    radial-gradient(35% 30% at 22% 88%,  var(--lg-cartao-1) 0%, transparent 58%),
    linear-gradient(150deg, var(--lg-fundo-1) 0%, var(--lg-fundo-2) 55%, var(--lg-fundo-1) 100%);
  filter: blur(38px) saturate(135%);
  animation: lgRespirar 22s ease-in-out infinite alternate;
}

@keyframes lgRespirar {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(2%, -2%, 0); }
}

/* Molduras finas ao fundo, como no desenho de referência. Puramente
   decorativas — escondidas de leitor de tela. */
.sb-moldura {
  position: absolute;
  border: 1px solid var(--lg-borda);
  border-radius: 28px;
  pointer-events: none;
  opacity: .5;
}
.sb-moldura.m1 { inset: 3% 6%; }
.sb-moldura.m2 { inset: 7% 12%; border-radius: 36px; opacity: .3; }

/* Pontinhos de luz nos cantos das molduras. */
.sb-ponto {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lg-brilho);
  box-shadow: 0 0 14px 3px var(--lg-brilho);
  opacity: .8;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cartão
   -------------------------------------------------------------------------- */

.sb-acesso-caixa {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
}

.sb-acesso-cartao {
  position: relative;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--lg-borda);
  border-radius: 30px;
  background: linear-gradient(158deg, var(--lg-cartao-1) 0%, var(--lg-cartao-2) 48%, var(--lg-cartao-3) 100%);
  box-shadow:
    0 44px 80px -24px var(--lg-sombra),
    0 8px 24px -12px var(--lg-sombra),
    inset 0 1px 0 var(--lg-luz),
    inset 0 -1px 0 rgba(0, 0, 0, .22);
  overflow: hidden;
}

/* Reflexo diagonal sutil no topo do cartão. */
.sb-acesso-cartao::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent);
  pointer-events: none;
}

.sb-acesso-cartao > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- marca */

.sb-acesso-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin-block-end: 1.75rem;
}

.sb-acesso-marca-icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.05rem;
  color: var(--lg-texto);
  background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06));
  box-shadow:
    inset 0 1px 0 var(--lg-luz),
    0 6px 14px -6px var(--lg-sombra);
}

.sb-acesso-marca-nome {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.sb-acesso-marca-nome small {
  display: block;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}

/* ---------------------------------------------------------------- emblema */

/* Círculo rebaixado, como se fosse escavado no cartão: sombra interna forte em
   cima e brilho interno embaixo — o inverso do que a superfície recebe. */
.sb-acesso-emblema {
  width: 116px;
  height: 116px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  color: var(--lg-brilho);
  background: linear-gradient(160deg, var(--lg-cartao-3), var(--lg-cartao-2));
  box-shadow:
    inset 0 8px 18px rgba(0, 0, 0, .38),
    inset 0 -6px 14px rgba(255, 255, 255, .10),
    0 0 0 9px rgba(255, 255, 255, .045),
    0 0 0 10px rgba(255, 255, 255, .02),
    0 18px 34px -16px var(--lg-sombra);
}
[data-bs-theme="light"] .sb-acesso-emblema {
  box-shadow:
    inset 0 8px 18px rgba(28, 62, 130, .14),
    inset 0 -6px 14px rgba(255, 255, 255, .9),
    0 0 0 9px rgba(28, 98, 224, .05),
    0 14px 28px -16px var(--lg-sombra);
}

/* ------------------------------------------------------------------ textos */

.sb-acesso-cartao h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.025em;
  margin-block-end: .25rem;
}

.sb-acesso-sub {
  font-size: .875rem;
  color: var(--lg-texto-fraco);
  margin-block-end: 1.5rem;
}

/* ------------------------------------------------------------------ campos */

.sb-acesso-campo { position: relative; margin-block-end: 1rem; }

.sb-acesso-campo > .bi {
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 1.0625rem;
  color: var(--lg-texto-fraco);
  pointer-events: none;
  transition: color 180ms ease;
  z-index: 2;
}

.sb-acesso-campo input {
  width: 100%;
  height: 56px;
  padding-inline: 3.25rem 1.25rem;
  border: 1px solid var(--lg-borda);
  border-radius: 999px;
  color: var(--lg-texto);
  font-size: .9375rem;
  background: linear-gradient(160deg, rgba(3, 22, 66, .45), rgba(16, 62, 156, .25));
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .09);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
[data-bs-theme="light"] .sb-acesso-campo input {
  background: linear-gradient(160deg, rgba(28, 62, 130, .06), rgba(255, 255, 255, .7));
  box-shadow:
    inset 0 2px 6px rgba(28, 62, 130, .12),
    inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.sb-acesso-campo input::placeholder { color: var(--lg-texto-fraco); }

.sb-acesso-campo input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--lg-brilho) 65%, transparent);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .3),
    0 0 0 4px color-mix(in srgb, var(--lg-brilho) 18%, transparent);
}
/* `> .bi` alcança só o ícone da esquerda. O seletor de irmão (`input ~ .bi`)
   pegaria também o olho de mostrar senha, que vem depois do campo no HTML. */
.sb-acesso-campo:focus-within > .bi { color: var(--lg-brilho); }

/* Campo com senha tem espaço à direita para o olho. */
.sb-acesso-campo.tem-acao input { padding-inline-end: 3.25rem; }

.sb-acesso-campo .sb-ver-senha {
  position: absolute;
  inset-inline-end: .5rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lg-texto-fraco);
  font-size: 1.0625rem;
  transition: background 180ms ease, color 180ms ease;
  z-index: 3;
}
.sb-acesso-campo .sb-ver-senha:hover {
  background: rgba(255, 255, 255, .10);
  color: var(--lg-texto);
}

/* ------------------------------------------------------------------- botão */

.sb-acesso-botao {
  width: 100%;
  height: 58px;
  margin-block-start: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--lg-brilho) 40%, transparent);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--lg-brilho) 78%, #fff 6%) 0%,
    color-mix(in srgb, var(--lg-brilho) 62%, #0a2c80 34%) 100%);
  box-shadow:
    0 14px 30px -10px color-mix(in srgb, var(--lg-brilho) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 6px rgba(0, 0, 0, .18);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}
.sb-acesso-botao:hover {
  filter: brightness(1.08);
  box-shadow:
    0 18px 40px -10px color-mix(in srgb, var(--lg-brilho) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Afunda ao clicar: o botão deixa de ser uma superfície elevada e passa a ser
   uma escavada. É o gesto que dá a sensação física do neumorfismo. */
.sb-acesso-botao:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 16px -8px color-mix(in srgb, var(--lg-brilho) 60%, transparent),
    inset 0 3px 8px rgba(0, 0, 0, .3);
}
.sb-acesso-botao:disabled { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ avisos */

.sb-acesso-aviso {
  display: flex;
  gap: .625rem;
  padding: .75rem .9375rem;
  margin-block-end: 1.25rem;
  border-radius: 14px;
  font-size: .8125rem;
  line-height: 1.45;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sb-acesso-aviso .bi { flex-shrink: 0; font-size: 1rem; margin-block-start: .0625rem; }

.sb-acesso-aviso.erro {
  border-color: rgba(255, 130, 130, .38);
  background: rgba(180, 30, 40, .22);
  color: #ffd9d9;
}
.sb-acesso-aviso.atencao {
  border-color: rgba(255, 210, 120, .34);
  background: rgba(150, 100, 10, .2);
  color: #ffe9c2;
}
[data-bs-theme="light"] .sb-acesso-aviso.erro    { background: #fde8e8; color: #8a1520; border-color: #f3bcbc; }
[data-bs-theme="light"] .sb-acesso-aviso.atencao { background: #fdf3dd; color: #7a5209; border-color: #f0dcae; }

/* ------------------------------------------------------------------ rodapé */

.sb-acesso-rodape {
  margin-block-start: 1.75rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--lg-texto-fraco);
}
.sb-acesso-rodape a { color: inherit; text-decoration: none; }
.sb-acesso-rodape a:hover { color: var(--lg-texto); text-decoration: underline; }

.sb-acesso-tema {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lg-borda);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--lg-texto);
  font-size: 1.0625rem;
  backdrop-filter: blur(8px);
  transition: background 180ms ease;
}
.sb-acesso-tema:hover { background: rgba(255, 255, 255, .15); }

/* Foco visível também aqui — o fundo escuro engole o padrão do navegador. */
.sb-acesso :focus-visible {
  outline: 2px solid var(--lg-brilho);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- responsivo */

@media (max-width: 480px) {
  .sb-acesso { padding: 1.25rem .875rem; }
  .sb-acesso-cartao { padding: 1.75rem 1.25rem 1.5rem; border-radius: 24px; }
  .sb-acesso-emblema { width: 92px; height: 92px; font-size: 2rem; margin-block-end: 1.25rem; }
  .sb-acesso-cartao h1 { font-size: 1.3125rem; }
  .sb-moldura { display: none; }
  .sb-acesso-campo input { height: 52px; }
  .sb-acesso-botao { height: 54px; }
}

/* Tela baixa (celular deitado): o emblema é o primeiro a sair, porque é
   decoração — o formulário não pode ficar fora da área visível. */
@media (max-height: 640px) {
  .sb-acesso-emblema { display: none; }
  .sb-acesso-marca { margin-block-end: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-acesso::before { animation: none; }
}