/* SWSIS — login neumórfico (16/09/2026), mesmo esquema do login do SIS SanWeb.
   Arquivo próprio da página de login; carregado DEPOIS do template (grafite),
   que não é alterado. Card centralizado no computador, tela cheia no celular.
   Fundo: a mesma foto do escritório do SIS, em cinza, bem leve — e a cor de
   destaque muda pelo grupo do segmento do cliente (Beleza, Saúde, Técnico...),
   pelo atributo data-area no <body>, pra cada área ter a sua cara. */
:root {
  --nm-fundo: #2a2a2a;
  --nm-sup: #353535;
  --nm-luz: rgb(255 255 255 / .055);
  --nm-sombra: rgb(0 0 0 / .5);
  --nm-txt: #f1f1f1;
  --nm-txt-sub: #b9b9b9;
  --nm-destaque: #34d399;
  --nm-alto: 9px 9px 20px var(--nm-sombra), -9px -9px 20px var(--nm-luz);
  --nm-baixo: inset 6px 6px 12px var(--nm-sombra), inset -6px -6px 12px var(--nm-luz);
  /* Intensidade da foto de fundo: aumente a opacidade pra ela aparecer mais. */
  --nm-foto-opacidade: .16;
}

/* Cor de destaque por área (grupo do segmento em Nichos::PACOTES) — mesma foto,
   o hue-rotate muda o tom pra cada área ter identidade sem precisar de foto nova. */
body[data-area="beleza"]        { --nm-destaque: #f472b6; }
body[data-area="saude"]         { --nm-destaque: #22d3ee; }
body[data-area="tecnico"]       { --nm-destaque: #fb923c; }
body[data-area="servicos"]      { --nm-destaque: #a78bfa; }
body[data-area="comercio"]      { --nm-destaque: #facc15; }
body[data-area="ensino"]        { --nm-destaque: #60a5fa; }
body[data-area="escritorio"]    { --nm-destaque: #818cf8; }
body[data-area="producao"]      { --nm-destaque: #fb7185; }
body[data-area="alimentacao"]   { --nm-destaque: #fbbf24; }
body[data-area="hospedagem"]    { --nm-destaque: #2dd4bf; }
body[data-area="outros"]        { --nm-destaque: #34d399; }
body[data-area^="beleza"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.25) hue-rotate(280deg); }
body[data-area^="saude"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.25) hue-rotate(150deg); }
body[data-area^="tecnico"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(-20deg); }
body[data-area^="servicos"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(220deg); }
body[data-area^="comercio"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(10deg); }
body[data-area^="ensino"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(180deg); }
body[data-area^="escritorio"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(200deg); }
body[data-area^="producao"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(-40deg); }
body[data-area^="alimentacao"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.35) hue-rotate(0deg); }
body[data-area^="hospedagem"]::before { filter: grayscale(1) brightness(1.35) contrast(.85) sepia(.3)  hue-rotate(130deg); }

html, body { min-height: 100%; }
body.nm-login {
  position: relative; margin: 0; min-height: 100dvh; display: grid; place-items: center;
  background: var(--nm-fundo); color: var(--nm-txt);
  font-family: var(--sw-f-san, system-ui, sans-serif);
}

/* Foto do escritório: cinza, clara e bem apagada, fixa atrás de tudo (o filtro muda por área acima). */
body.nm-login::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/images/login-fundo.webp") center / cover no-repeat;
  filter: grayscale(1) brightness(1.35) contrast(.85);
  opacity: var(--nm-foto-opacidade);
}

.nm-card {
  position: relative; z-index: 1;
  width: min(40rem, calc(100% - 3.2rem)); box-sizing: border-box;
  padding: 4.8rem 4rem 4rem; border-radius: 3.2rem;
  background: var(--nm-sup);
  box-shadow: 18px 18px 40px rgb(0 0 0 / .55), -12px -12px 32px rgb(255 255 255 / .04);
}

/* Os elementos em relevo usam fundo transparente: pegam a cor do card e,
   no celular (card translúcido), deixam a foto aparecer por igual. */
.nm-logo {
  width: 12.8rem; height: 12.8rem; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: transparent; box-shadow: var(--nm-alto);
}
.nm-logo span {
  width: 9.6rem; height: 9.6rem; border-radius: 50%; display: grid; place-items: center;
  background: transparent; box-shadow: var(--nm-baixo);
}
.nm-logo img { width: 4.8rem; height: 4.8rem; object-fit: contain; }

.nm-titulo { margin: 0; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--nm-txt); }
.nm-sub { margin: .6rem 0 3.2rem; text-align: center; font-size: 1.4rem; color: var(--nm-txt-sub); }

.nm-form { display: flex; flex-direction: column; gap: 2rem; }
.nm-campo label { display: block; margin: 0 0 .8rem 2rem; font-size: 1.3rem; color: var(--nm-txt-sub); }

.nm-poco {
  display: flex; align-items: center; min-height: 5.6rem; padding: 0 .8rem 0 2rem;
  border-radius: 99rem; background: transparent; box-shadow: var(--nm-baixo);
  transition: box-shadow .2s ease;
}
.nm-poco:focus-within { box-shadow: var(--nm-baixo), 0 0 0 2px color-mix(in srgb, var(--nm-destaque) 55%, transparent); }
.nm-poco input {
  flex: 1; min-width: 0; height: 5.6rem; border: 0; outline: 0; background: transparent;
  color: var(--nm-txt); font: inherit; font-size: 1.6rem; font-weight: 600; box-shadow: none;
}
.nm-poco input::placeholder { color: rgb(255 255 255 / .28); font-weight: 400; }
/* Edge desenha um olho próprio dentro do campo de senha — some com ele pra não duplicar com o nosso. */
.nm-poco input::-ms-reveal, .nm-poco input::-ms-clear { display: none; }
.nm-poco input:-webkit-autofill { -webkit-text-fill-color: var(--nm-txt); transition: background-color 99999s ease; caret-color: var(--nm-txt); }

.nm-olho {
  width: 4.4rem; height: 4.4rem; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--nm-txt-sub); font-size: 2.2rem;
}
.nm-olho:hover, .nm-olho:focus-visible { color: var(--nm-txt); outline: 0; box-shadow: var(--nm-alto); }

.nm-lembrar { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 0 1.2rem; font-size: 1.4rem; color: var(--nm-txt-sub); cursor: pointer; user-select: none; }
.nm-lembrar input {
  appearance: none; -webkit-appearance: none; width: 2.4rem; height: 2.4rem; margin: 0; border: 0; border-radius: .7rem;
  background: transparent; box-shadow: var(--nm-baixo); cursor: pointer; display: grid; place-items: center;
}
.nm-lembrar input::after { content: ''; width: 1rem; height: 1rem; border-radius: .3rem; background: var(--nm-destaque); transform: scale(0); transition: transform .15s ease; }
.nm-lembrar input:checked::after { transform: scale(1); }
.nm-lembrar input:focus-visible { outline: 2px solid var(--nm-destaque); outline-offset: 2px; }

.nm-acao { display: flex; flex-direction: column; }
.nm-btn {
  margin-top: 1.2rem; height: 6rem; border: 0; border-radius: 99rem; cursor: pointer;
  background: transparent; box-shadow: var(--nm-alto); color: var(--nm-txt);
  font: inherit; font-size: 2rem; font-weight: 800; letter-spacing: .01em;
  transition: box-shadow .18s ease, color .18s ease, transform .1s ease;
}
.nm-btn:hover, .nm-btn:focus-visible { color: var(--nm-destaque); outline: 0; }
.nm-btn:active { box-shadow: var(--nm-baixo); transform: scale(.995); }
.nm-btn[disabled] { opacity: .6; cursor: progress; }

.nm-erro { margin-bottom: .4rem; }

/* ── Entrada da página (sw-ani "mount" do SWCore) ──────────────────────────
   Na entrada "mount" o SWCore usa --sw-spd-rev (duração), --sw-dist (distância)
   e --sw-delay (atraso). O card aparece primeiro e o conteúdo sobe em sequência. */
.nm-card[sw-ani] { --sw-spd-rev: .6s; }
.nm-card [sw-ani] { --sw-spd-rev: .55s; --sw-dist: 1.6rem; }
/* O estado final do SWCore (.is-in) força clip-path: inset(0) !important, que CORTA
   as sombras externas do relevo (logo, card e a sombra do botão dentro do .nm-acao).
   Aqui o corte é desligado depois da entrada — seletor mais específico vence o do SWCore. */
.nm-login [sw-ani].is-in { clip-path: none !important; }
.nm-logo[sw-ani]    { --sw-delay: .15s; }
.nm-titulo[sw-ani]  { --sw-delay: .24s; }
.nm-sub[sw-ani]     { --sw-delay: .3s; }
.nm-c1[sw-ani]      { --sw-delay: .38s; }
.nm-c2[sw-ani]      { --sw-delay: .46s; }
.nm-lembrar[sw-ani] { --sw-delay: .54s; }
.nm-acao[sw-ani]    { --sw-delay: .62s; }
.nm-digital-wrap[sw-ani] { --sw-delay: .7s; }

/* ── Entrar com digital ou rosto (WebAuthn) ────────────────────────────────
   Secundário ao "Entrar": pílula afundada, ícone de digital em destaque.
   O contêiner começa com [hidden] e só aparece em aparelho que suporta. */
.nm-digital {
  width: 100%; min-height: 5.2rem; margin-top: .4rem; border: 0; border-radius: 99rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: transparent; box-shadow: var(--nm-baixo); color: var(--nm-txt-sub);
  font: inherit; font-size: 1.5rem; font-weight: 700;
  transition: color .18s ease, box-shadow .18s ease;
}
.nm-digital i { font-size: 2.4rem; color: var(--nm-destaque); }
.nm-digital:hover, .nm-digital:focus-visible {
  color: var(--nm-txt); outline: 0;
  box-shadow: var(--nm-baixo), 0 0 0 2px color-mix(in srgb, var(--nm-destaque) 45%, transparent);
}
.nm-digital[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 600px) {
  :root { --nm-foto-opacidade: .2; }
  body.nm-login { place-items: stretch; }
  .nm-card {
    width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none;
    background: color-mix(in srgb, var(--nm-sup) 86%, transparent);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(3.2rem + env(safe-area-inset-top)) 2.4rem calc(3.2rem + env(safe-area-inset-bottom));
  }
}

/* ── Celular: compacto para caber inteiro na tela ──────────────────────────
   No celular a barra do navegador come parte da altura. Com o botão da digital
   o conteúdo passava de ~640px; aqui fica em ~520px (cabe em telas curtas). */
@media (max-width: 600px), (max-height: 760px) {
  .nm-card { padding-top: calc(2.4rem + env(safe-area-inset-top)); padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
  .nm-logo { width: 9.6rem; height: 9.6rem; margin-bottom: 1.6rem; }
  .nm-logo span { width: 7.2rem; height: 7.2rem; }
  .nm-logo img { width: 3.6rem; height: 3.6rem; }
  .nm-titulo { font-size: 2.2rem; }
  .nm-sub { margin: .4rem 0 2rem; }
  .nm-form { gap: 1.4rem; }
  .nm-campo label { margin-bottom: .6rem; }
  .nm-poco { min-height: 5rem; }
  .nm-poco input { height: 5rem; }
  .nm-lembrar { margin-top: .2rem; }
  .nm-btn { height: 5.2rem; margin-top: .6rem; font-size: 1.8rem; }
  .nm-digital { min-height: 4.6rem; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-poco, .nm-btn, .nm-lembrar input::after { transition: none; }
  /* Quem pediu menos movimento vê a tela pronta, sem entrada animada. */
  .nm-login [sw-ani] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── Quadro da demonstração (25/09/2026) ──────────────────────────────────
   Só em demo.swsis.online (login.php testa Tenant::slug() === 'demo'): diz o
   acesso público e tem o botão que preenche os campos. Afundado como os campos,
   com a cor de destaque da área na borda. O login é sempre escuro. */
.nm-demo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1.2rem;
  padding: 1.4rem 1.6rem; border-radius: 2rem; box-shadow: var(--nm-baixo);
  border: 1px solid color-mix(in srgb, var(--nm-destaque) 45%, transparent);
}
.nm-demo__icone { font-size: 2.4rem; color: var(--nm-destaque); }
.nm-demo__texto { display: grid; gap: .2rem; min-width: 0; font-size: 1.35rem; color: var(--nm-txt-sub); overflow-wrap: anywhere; }
.nm-demo__texto strong { font-size: 1.45rem; color: var(--nm-txt); }
.nm-demo__texto b { color: var(--nm-txt); font-weight: 700; }
.nm-demo__btn {
  grid-column: 1 / -1; min-height: 4.4rem; margin-top: .4rem; border: 0; border-radius: 99rem; cursor: pointer;
  background: transparent; box-shadow: var(--nm-alto); color: var(--nm-destaque);
  font: inherit; font-size: 1.45rem; font-weight: 700;
  transition: box-shadow .18s ease, color .18s ease;
}
.nm-demo__btn:hover, .nm-demo__btn:focus-visible { color: var(--nm-txt); outline: 0; box-shadow: var(--nm-alto), 0 0 0 2px color-mix(in srgb, var(--nm-destaque) 55%, transparent); }
.nm-demo__btn:active { box-shadow: var(--nm-baixo); }
.nm-demo[sw-ani] { --sw-delay: .3s; }
@media (max-width: 600px), (max-height: 760px) {
  .nm-demo { padding: 1.1rem 1.4rem; }
  .nm-demo__btn { min-height: 4rem; }
}

/* 16/09/2026: só a logo, sem título/subtítulo por baixo (pedido do Sandro) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nm-logo { margin-bottom: 3.6rem; }