/* PruCord — pele "liquid glass" das telas de autenticação.
 *
 * Par do `glass.css`, para as telas que carregam `auth.css` (login,
 * recuperação de senha). Entra depois dela e vale sempre.
 *
 * Aqui a inversão é maior que no app: o cartão de auth do appVistoria é
 * branco sólido sobre gradiente escuro, e o vidro pede o contrário — cartão
 * translúcido escuro, texto claro. Por isso esta folha mexe em mais coisa que
 * a do app, onde bastou trocar os tokens.
 */

:root {
  --ga-txt: #f2f5fa;
  --ga-dim: #b9c3d6;
  --ga-mute: #8493ab;
  --ga-hair: rgba(255, 255, 255, .12);
  --ga-luz: inset 0 1px 0 rgba(255, 255, 255, .18);
  --ga-mola: cubic-bezier(.34, 1.4, .64, 1);
}

html.auth,
body.auth { color: var(--ga-txt); color-scheme: dark; }

/* O mesmo fundo vivo do app, para login e sala não parecerem dois produtos. */
:root .auth-bg {
  position: relative;
  background: #05070f;
  isolation: isolate;
}
:root .auth-bg::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 18% 22%, rgba(56, 189, 248, .30), transparent 68%),
    radial-gradient(38% 42% at 82% 16%, rgba(129, 140, 248, .26), transparent 68%),
    radial-gradient(46% 50% at 72% 84%, rgba(45, 212, 191, .18), transparent 70%),
    radial-gradient(40% 44% at 26% 88%, rgba(217, 70, 239, .16), transparent 70%),
    #05070f;
  filter: blur(40px);
  animation: deriva-auth 46s ease-in-out infinite alternate;
}
:root .auth-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent, rgba(2, 4, 12, .55) 78%);
}
@keyframes deriva-auth {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* --------------------------------------------------------------- cartões */
:root .auth-card,
:root .modal-card {
  background: rgba(18, 24, 42, .60);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  box-shadow: var(--ga-luz), 0 40px 80px -24px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
}
:root .auth-brand {
  color: #fff;
  text-shadow: 0 2px 20px rgba(56, 189, 248, .45);
}
:root .auth-sub,
:root .auth-intro,
:root .auth-switch,
:root .auth-hint { color: var(--ga-dim); }
:root .auth-label { color: var(--ga-dim); }
:root .auth-foot p { color: rgba(184, 197, 216, .55); }

/* --------------------------------------------------------------- campos */
:root .auth-input {
  background: rgba(4, 8, 18, .42);
  border: 1px solid var(--ga-hair);
  border-radius: 12px;
  color: var(--ga-txt);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
:root .auth-input::placeholder { color: var(--ga-mute); }
:root .auth-input:focus {
  border-color: rgba(56, 189, 248, .7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 3px rgba(56, 189, 248, .18);
}
:root .auth-input-lido {
  background: rgba(255, 255, 255, .06); color: var(--ga-mute); border-color: var(--ga-hair);
}

/* --------------------------------------------------------------- botões */
:root .auth-btn,
:root .auth-btn-outline,
:root .auth-btn-ghost {
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .22s var(--ga-mola);
}
:root .auth-btn {
  background: linear-gradient(180deg, rgba(125, 211, 252, .95), rgba(14, 165, 233, .92));
  border-color: rgba(186, 230, 253, .45);
  color: #04121c;
  font-weight: 600;
  box-shadow: var(--ga-luz), 0 10px 28px -10px rgba(14, 165, 233, .85);
}
:root .auth-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(165, 228, 255, .98), rgba(56, 189, 248, .95));
  border-color: rgba(224, 242, 254, .6);
  transform: translateY(-1px);
}
:root .auth-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

:root .auth-btn-outline,
:root .auth-btn-ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--ga-hair);
  color: var(--ga-txt);
  box-shadow: var(--ga-luz);
}
:root .auth-btn-outline:hover:not(:disabled),
:root .auth-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}
:root .auth-link { color: #7dd3fc; }

/* ----------------------------------------------------- abas e separador */
:root .auth-tabs { border-bottom-color: var(--ga-hair); }
:root .auth-tab { color: var(--ga-mute); }
:root .auth-tab:hover { color: var(--ga-txt); }
:root .auth-tab.is-active { color: #7dd3fc; border-bottom-color: #38bdf8; }
:root .auth-or::before,
:root .auth-or::after { background: var(--ga-hair); }
:root .auth-or span { color: var(--ga-mute); }

/* -------------------------------------------------------------- avisos */
/* Os dois nomes recebem o mesmo tratamento: o showMsg() do api.js emite
   `.msg`, e os formulários de recuperação emitem `.auth-msg`. */
:root .auth-msg,
:root .msg { border-radius: 12px; }
:root .auth-msg.error,
:root .msg.error { background: rgba(244, 63, 94, .16); border-color: rgba(253, 164, 175, .35); color: #ffd3d9; }
:root .auth-msg.info,
:root .msg.info { background: rgba(56, 189, 248, .14); border-color: rgba(125, 211, 252, .35); color: #cbeeff; }
:root .auth-msg.ok,
:root .msg.ok { background: rgba(34, 197, 94, .14); border-color: rgba(134, 239, 172, .35); color: #ccf7db; }
:root .auth-aviso { background: rgba(245, 158, 11, .15); border-color: rgba(253, 230, 138, .35); color: #fde9bd; }
:root .auth-ok-inline { background: rgba(34, 197, 94, .14); border-color: rgba(134, 239, 172, .35); color: #ccf7db; }

/* -------------------------------------------------------------- modais */
:root .modal {
  background: rgba(2, 4, 12, .55);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}
:root .modal-head { border-bottom-color: var(--ga-hair); }
:root .modal-title,
:root .auth-sucesso-titulo { color: var(--ga-txt); }
:root .modal-close { color: var(--ga-mute); }
:root .modal-close:hover { color: var(--ga-txt); }

/* ------------------------------------------------------- degradações */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root .auth-card,
  :root .modal-card { background: #141b2e; }
  :root .modal { background: rgba(2, 4, 12, .88); }
}
@media (prefers-reduced-motion: reduce) {
  :root .auth-bg::before { animation: none; }
  :root .auth-btn:hover:not(:disabled),
  :root .auth-btn-outline:hover:not(:disabled),
  :root .auth-btn-ghost:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .auth-bg::before { display: none; }
  :root .auth-card,
  :root .modal-card { background: #141b2e; }
}