/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./src/components/auth/login-shell.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Shell visual da tela de login (protótipo aprovado
 * "mais-saude-login-SALURG-cache-corrigido.html", seguido à risca).
 *
 * Duas peças: o CONTEÚDO em L invertido (foto de Salvador + marca SALURG) e o
 * PAINEL de login encaixado no vão do canto inferior direito. O recorte é uma
 * máscara SVG calculada em JS a partir do tamanho real do painel (ele expande
 * no mount), por isso o `--recorte` vem de lá.
 *
 * O `--gap` do protótipo é 0: as peças ocupam a tela inteira, sem a moldura
 * clara externa que a versão anterior tinha. As bordas de CRISTAL continuam —
 * a do card maior (stroke seguindo o L) e a de 4px do painel. O radar cônico
 * que girava no fundo do painel foi removido pelo próprio protótipo.
 *
 * Cores: esta tela é uma superfície de marca (azul-marinho SALURG + ciano),
 * fora do tema claro/escuro do dashboard — por isso os hex literais, como já
 * acontecia no login anterior. Ver CLAUDE.md §12.3 (exceção de cor de marca).
 */

.login-shell_shell__U3rYA {
  --cardGap: 8px;          /* vão escuro entre o conteúdo e o painel */
  --panelW: 400px;         /* largura do painel aberto */
  --panelH: 566px;         /* altura do painel aberto */
  /* `--gap` do protótipo é 0: as peças ocupam a tela toda, sem moldura externa.
     Por isso o conteúdo não arredonda canto, e só o card de login arredonda. */
  --loginRadius: 26px;

  position: fixed;
  inset: 0;
  overflow: hidden;
  /* o vão entre as peças mostra este fundo: escuro, nunca branco */
  background: #08182b;
}

/* ===== peça 1: conteúdo, com o vão recortado na lateral direita ===== */
.login-shell_content__Zp0FM {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a1f3a;
  -webkit-mask: var(--recorte);
  mask: var(--recorte);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Borda de cristal do card maior, sobreposta ao contorno em L. Recortada pela
 * MESMA máscara do conteúdo: sem isso o traço fecharia o retângulo por trás do
 * painel de login, cruzando o vão.
 */
.login-shell_contentBorder__89FIo {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  -webkit-mask: var(--recorte);
  mask: var(--recorte);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.login-shell_photos__E3kib {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.login-shell_photo___nTZ0 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  will-change: clip-path, transform, opacity;
}

.login-shell_photoNext__Ewzgz {
  clip-path: inset(0 100% 0 0);
}

/* lâmina de cristal que atravessa a foto revelando a próxima */
.login-shell_glassSweep__PbY9U {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: -42%;
  width: 36%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 42px / 64px;
  box-shadow:
    inset 34px 0 58px -34px rgba(255, 255, 255, 0.5),
    inset -34px 0 58px -34px rgba(255, 255, 255, 0.44),
    0 10px 30px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 18%,
    rgba(190, 230, 245, 0.15) 34%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(190, 230, 245, 0.16) 63%,
    rgba(255, 255, 255, 0.08) 82%,
    rgba(255, 255, 255, 0.03) 100%
  );
  backdrop-filter: blur(3px) brightness(1.05) saturate(1.07);
  -webkit-backdrop-filter: blur(3px) brightness(1.05) saturate(1.07);
}

.login-shell_glassSweep__PbY9U::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.08) 14%,
      rgba(255, 255, 255, 0.02) 28%,
      transparent 55%
    ),
    radial-gradient(130% 100% at 0% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(120% 90% at 100% 100%, rgba(127, 233, 217, 0.1) 0%, transparent 48%);
}

.login-shell_glassSweep__PbY9U::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -18%;
  width: 28%;
  border-radius: 32px;
  transform: skewX(-10deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  filter: blur(6px);
  opacity: 0.92;
}

.login-shell_overlay__KGZr5 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(150deg, #0a1f3a99, #0d284680 55%, #081627b3);
}

/*
 * Traçado de eletrocardiograma que pulsa junto com a troca das fotos
 * (protótipo "mais-saude-login-SALURG-cache-corrigido.html").
 *
 * Ele NÃO é decoração solta: só existe enquanto a lâmina de cristal atravessa a
 * tela — a linha se desenha no mesmo progresso da transição e apaga no fim. Com
 * uma foto só (entidade com imagem própria) não há transição, então não há
 * batida. `mix-blend-mode: screen` faz o traço brilhar sobre a foto em vez de
 * riscá-la.
 */
.login-shell_ekgOverlay__s0TOZ {
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  height: 120px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

/* indo para a foto anterior, a batida corre no sentido inverso */
.login-shell_ekgInvertido__xfUAE .login-shell_ekgSvg__bcFUr {
  transform: scaleX(-1);
}

.login-shell_ekgSvg__bcFUr {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(75, 230, 255, 0.35));
  transform-origin: center center;
}

/* a linha apagada de fundo: dá o "papel milimetrado" por onde o pulso passa */
.login-shell_ekgTrilha__CTuda {
  fill: none;
  stroke: rgba(170, 225, 240, 0.18);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-shell_ekgBrilho__NKGNt {
  fill: none;
  stroke: rgba(58, 235, 255, 0.42);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(4px);
}

.login-shell_ekgLinha__X9sIC {
  fill: none;
  stroke: url(#ekgGradienteLogin);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1100px) {
  .login-shell_ekgOverlay__s0TOZ {
    top: 56%;
    height: 102px;
  }
}

@media (max-width: 860px) {
  .login-shell_ekgOverlay__s0TOZ {
    top: 60%;
    height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell_ekgOverlay__s0TOZ {
    display: none;
  }
}

/* ===== identidade SALURG ===== */
.login-shell_brandStage__ROY3M {
  position: absolute;
  left: 2.5%;
  right: calc(var(--panelW) + var(--cardGap) + 2.5%);
  top: 4%;
  bottom: 4%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  pointer-events: none;
  padding: 20px 28px 28px;
  transform: translateY(-10px);
}

/* halo amplo que organiza a marca sem criar um segundo card */
.login-shell_brandStage__ROY3M::before {
  content: '';
  position: absolute;
  width: min(58vw, 760px);
  height: min(56vh, 470px);
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  /*
   * Reforcado quando a placa da logo saiu: com a arte direto na foto, e este
   * halo que garante leitura de marca escura sobre foto clara (a fachada da UPA
   * e bem mais clara que as outras tres). Ele escurece a FOTO de forma difusa,
   * sem desenhar caixa nem borda em volta da marca.
   */
  background: radial-gradient(
    ellipse at center,
    rgba(3, 34, 82, 0.34) 0%,
    rgba(4, 39, 88, 0.18) 42%,
    rgba(4, 28, 68, 0) 72%
  );
  filter: blur(22px);
  z-index: -2;
}

.login-shell_mark__9YEoA {
  width: clamp(205px, 18vw, 270px);
  aspect-ratio: 805 / 821;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  animation: login-shell_markPinwheelIn__H6FqM 3.05s linear both;
  backface-visibility: hidden;
}

.login-shell_markHalo__P4qe_ {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(29, 192, 255, 0.25) 0%,
    rgba(20, 111, 235, 0.13) 40%,
    rgba(4, 28, 75, 0) 72%
  );
  filter: blur(11px);
  opacity: 0;
  animation: login-shell_markHaloIn__2NKxH 0.7s ease-out 2.45s forwards;
}

.login-shell_markImg__yYby7 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0, 18, 62, 0.42)) drop-shadow(0 5px 10px rgba(0, 139, 255, 0.16));
  user-select: none;
  -webkit-user-drag: none;
}

/* entra girando sempre na mesma direção, crescendo e desacelerando até parar */
@keyframes login-shell_markPinwheelIn__H6FqM {
  0%   { transform: rotate(-1260deg) scale(0.1);  opacity: 0;    filter: blur(10px) saturate(1.22); }
  8%   { transform: rotate(-1160deg) scale(0.16); opacity: 0.55; filter: blur(8px) saturate(1.2); }
  20%  { transform: rotate(-980deg) scale(0.3);   opacity: 0.88; filter: blur(5px) saturate(1.16); }
  36%  { transform: rotate(-760deg) scale(0.48);  opacity: 1;    filter: blur(2.8px) saturate(1.12); }
  56%  { transform: rotate(-470deg) scale(0.68);  filter: blur(1.2px) saturate(1.08); }
  74%  { transform: rotate(-220deg) scale(0.84);  filter: blur(0.35px) saturate(1.04); }
  88%  { transform: rotate(-80deg) scale(0.94);   filter: blur(0) saturate(1.02); }
  96%  { transform: rotate(-20deg) scale(0.985);  opacity: 1;    filter: blur(0) saturate(1.01); }
  100% { transform: rotate(0deg) scale(1);        opacity: 1;    filter: blur(0) saturate(1); }
}

@keyframes login-shell_markHaloIn__2NKxH {
  to { opacity: 0.76; }
}

.login-shell_name__RO_qj {
  width: clamp(350px, 30vw, 470px);
  max-width: 68%;
  height: auto;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0;
  animation: login-shell_nameIn__uxsnu 0.9s cubic-bezier(0.18, 0.82, 0.22, 1) 3.1s forwards;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes login-shell_nameIn__uxsnu {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(6px) drop-shadow(0 13px 22px rgba(0, 20, 66, 0.18));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 13px 22px rgba(0, 20, 66, 0.3));
  }
}

/*
 * Logomarca cadastrada em Cadastros → Entidade, sobre placa clara.
 *
 * A placa não é enfeite: a logomarca de um município é arte de terceiro, quase
 * sempre desenhada para fundo branco (texto escuro, contorno fino). Direto na
 * foto ela some — o design anterior desta tela já usava placa clara pelo mesmo
 * motivo. A marca SALURG padrão NÃO usa placa: as imagens dela foram feitas
 * para o fundo escuro.
 */
/*
 * SEM PLACA E SEM FUNDO. A versao anterior punha a logo sobre um retangulo
 * branco para garantir contraste; com PNG transparente aquilo virava uma caixa
 * branca em volta da arte -- exatamente o que nao se quer. A arte entra direto
 * sobre a foto, com o alfa preservado.
 *
 * O unico realce e uma sombra ESCURA -- e ela vem do proprio keyframe `nameIn`,
 * que termina em `drop-shadow(0 13px 22px rgba(0,20,66,.3))` e, sendo
 * `forwards`, MANDA no estado final. Declarar `filter` aqui seria codigo morto:
 * o keyframe sobrescreve. E o mesmo tratamento que o prototipo da ao nome do
 * SALURG, e nada de brilho claro em volta -- leria como halo branco, que e da
 * mesma familia do problema.
 *
 * Para arte escura sobre foto clara, quem carrega o contraste e o halo escuro e
 * difuso do `.brandStage` -- escurece a FOTO, nao cria moldura na marca.
 */
.login-shell_logoEntidade__VkgEQ {
  flex: 0 0 auto;
  opacity: 0;
  animation: login-shell_nameIn__uxsnu 0.9s cubic-bezier(0.18, 0.82, 0.22, 1) 0.25s forwards;
  display: block;
  max-width: 74%;
  max-height: min(40vh, 300px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* título/subtítulo configuráveis da entidade (Cadastros → Configurações) */
.login-shell_tagline__zpksh {
  max-width: min(520px, 78%);
  text-align: center;
  color: #fff;
  opacity: 0;
  animation: login-shell_taglineIn__XT2po 0.8s ease-out 3.5s forwards;
}

.login-shell_taglineTitle__IB8A3 {
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-shadow: 0 8px 22px rgba(0, 16, 44, 0.55);
}

.login-shell_taglineTitle__IB8A3 strong {
  font-weight: 800;
}

.login-shell_taglineText__APGmV {
  margin-top: 8px;
  font-weight: 300;
  font-size: clamp(12.5px, 1vw, 15px);
  line-height: 1.55;
  color: #cfe8ee;
  text-shadow: 0 6px 18px rgba(0, 16, 44, 0.5);
}

@keyframes login-shell_taglineIn__XT2po {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/*
 * Com a logomarca da entidade não há a sequência do SALURG (giro de 3,05s +
 * nome), então a chamada não tem por que esperar por ela.
 */
.login-shell_brandStageEntidade__672Rr .login-shell_tagline__zpksh {
  animation-delay: 0.95s;
}

/* ===== peça 2: painel de login (direita, centralizado na altura) ===== */
.login-shell_panel__osibl {
  position: absolute;
  /* canto inferior direito, colado nas bordas (o `--gap` do protótipo é 0) */
  right: 0;
  bottom: 0;
  /* estado recolhido: pílula "Acessar o sistema" */
  width: 220px;
  height: 56px;
  z-index: 6;
  padding: 8px;
  /*
   * Moldura metálica de vidro do protótipo: o painel colorido pinta a
   * `padding-box` e o gradiente de cristal pinta a `border-box`, atravessando a
   * borda transparente de 4px. É o que dá o brilho de vidro lapidado na quina.
   */
  background:
    linear-gradient(160deg, #0d2846f2, #0a1f3af2 55%, #08182bf7) padding-box,
    linear-gradient(
      135deg,
      #ffffff 0%,
      #8ea6b0 14%,
      #f2fafc 30%,
      #6d8791 46%,
      #eaf6f8 60%,
      #7d97a1 76%,
      #ffffff 90%,
      #9fb9c4 100%
    ) border-box;
  border: 4px solid transparent;
  border-radius: var(--loginRadius);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px #00000055, inset 0 1px 0 #ffffff40, inset 0 0 40px #7fe9d914;
  transition:
    width 0.7s cubic-bezier(0.4, 0.1, 0.2, 1),
    height 0.7s cubic-bezier(0.4, 0.1, 0.2, 1),
    box-shadow 0.4s;
}

.login-shell_panelOpen__P6rP2 {
  width: var(--panelW);
  height: var(--panelH);
  box-shadow:
    0 30px 70px #00000066,
    inset 0 1px 0 #ffffff55,
    inset 0 0 60px #7fe9d91f,
    0 0 22px #bfeef433,
    inset 0 0 0 1px #ffffff33;
}

/* reflexos de vidro internos (não são borda: ficam DENTRO do painel) */
.login-shell_panelOpen__P6rP2::before,
.login-shell_panelOpen__P6rP2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.login-shell_panelOpen__P6rP2::before {
  background:
    radial-gradient(140% 100% at -15% -25%, #ffffff30 0%, #ffffff12 26%, transparent 50%),
    linear-gradient(135deg, #ffffff1c 0%, transparent 34%);
}

.login-shell_panelOpen__P6rP2::after {
  background:
    linear-gradient(180deg, #ffffff1f 0%, transparent 14%),
    radial-gradient(90% 60% at 80% 115%, #7fe9d918 0%, transparent 60%);
}

/* pílula do estado recolhido */
.login-shell_collapsedPill__GXWYS {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #eafff7;
  font-weight: 600;
  font-size: 14px;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.login-shell_panelOpen__P6rP2 .login-shell_collapsedPill__GXWYS {
  opacity: 0;
}

/* corpo do formulário */
.login-shell_panelBody__9p9zP {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.login-shell_panelOpen__P6rP2 .login-shell_panelBody__9p9zP {
  opacity: 1;
}

/* ===== empilhado no mobile: sem recorte ===== */
@media (max-width: 860px) {
  .login-shell_shell__U3rYA {
    position: relative;
    inset: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .login-shell_content__Zp0FM {
    position: relative;
    inset: auto;
    min-height: 40vh;
    -webkit-mask: none;
    mask: none;
  }

  .login-shell_brandStage__ROY3M {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    min-height: 40vh;
    padding: 30px 18px 34px;
    gap: 16px;
    transform: none;
  }

  .login-shell_brandStage__ROY3M::before {
    width: 90vw;
    height: 34vh;
    top: 48%;
  }

  .login-shell_mark__9YEoA {
    width: min(220px, 54vw);
  }

  .login-shell_name__RO_qj {
    width: min(430px, 82vw);
    max-width: 86%;
  }

  .login-shell_logoEntidade__VkgEQ {
    max-width: 86%;
    max-height: 24vh;
  }

  .login-shell_tagline__zpksh {
    max-width: 92%;
  }

  /* O protótipo só solta o posicionamento no empilhado: a moldura de cristal e
     o raio do card seguem valendo. */
  .login-shell_panel__osibl {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    transition: none;
  }

  .login-shell_contentBorder__89FIo {
    display: none;
  }

  .login-shell_panelBody__9p9zP {
    opacity: 1;
    overflow: visible;
    padding: 24px 22px 34px;
  }

  .login-shell_collapsedPill__GXWYS {
    display: none;
  }

  .login-shell_glassSweep__PbY9U {
    width: 40%;
    left: -46%;
  }
}

/* telas desktop mais baixas: preserva o respiro da marca */
@media (max-height: 760px) and (min-width: 861px) {
  .login-shell_shell__U3rYA {
    --panelH: 520px;
  }

  .login-shell_brandStage__ROY3M {
    gap: 16px;
    top: 2%;
    bottom: 2%;
    transform: translateY(-5px);
  }

  .login-shell_mark__9YEoA {
    width: clamp(190px, 34vh, 235px);
  }

  .login-shell_name__RO_qj {
    width: clamp(330px, 29vw, 430px);
    max-width: 66%;
  }

  .login-shell_logoEntidade__VkgEQ {
    max-height: min(34vh, 220px);
  }
}

/* desktops estreitos / notebooks */
@media (max-width: 1180px) and (min-width: 861px) {
  .login-shell_brandStage__ROY3M {
    left: 1.5%;
    right: calc(var(--panelW) + var(--cardGap) + 1.5%);
    gap: 18px;
    padding-inline: 12px;
  }

  .login-shell_mark__9YEoA {
    width: clamp(190px, 34vh, 245px);
  }

  .login-shell_name__RO_qj {
    width: clamp(325px, 36vw, 430px);
    max-width: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell_mark__9YEoA,
  .login-shell_markHalo__P4qe_,
  .login-shell_name__RO_qj,
  .login-shell_logoEntidade__VkgEQ,
  .login-shell_tagline__zpksh {
    animation: none;
  }

  .login-shell_mark__9YEoA {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .login-shell_markHalo__P4qe_ {
    opacity: 0.82;
  }

  .login-shell_name__RO_qj,
  .login-shell_logoEntidade__VkgEQ,
  .login-shell_tagline__zpksh {
    opacity: 1;
    transform: none;
  }

  .login-shell_panel__osibl {
    transition: none;
  }
}