/*
 * Tela de login padrão da suíte NEXXUS (a do PLM): coluna do formulário + painel lateral.
 * CSS puro, sem framework, para os módulos que não usam Tailwind (Nexxus, SelfPedido, Booking).
 * Copie este arquivo para o módulo (nexxus-auth.css) e use as classes .nx-*.
 * Claro por padrão; escuro por preferência do sistema ou por data-theme="dark" no <html>.
 */
.nx-auth {
  --nx-canvas: 237 240 245; --nx-surface: 255 255 255; --nx-on-accent: 255 255 255;
  --nx-n-50: 236 240 246; --nx-n-200: 203 211 223; --nx-n-300: 167 178 196; --nx-n-400: 126 140 160;
  --nx-n-600: 74 88 108; --nx-n-700: 52 64 82; --nx-n-800: 30 41 59; --nx-n-900: 23 32 46;
  --nx-a-600: 37 87 214; --nx-a-700: 29 71 179; --nx-a-800: 23 58 148;
  --nx-bad: 176 35 24; --nx-bad-bg: 253 231 229; --nx-ok: 20 105 63; --nx-ok-bg: 226 243 233;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .nx-auth {
    --nx-canvas: 13 17 23; --nx-surface: 21 26 34; --nx-on-accent: 11 16 32;
    --nx-n-50: 27 33 43; --nx-n-200: 51 61 75; --nx-n-300: 77 89 105; --nx-n-400: 125 139 160;
    --nx-n-600: 169 181 198; --nx-n-700: 195 205 219; --nx-n-800: 219 226 236; --nx-n-900: 230 235 243;
    --nx-a-600: 123 160 255; --nx-a-700: 155 183 255; --nx-a-800: 185 205 255;
    --nx-bad: 255 131 121; --nx-bad-bg: 61 23 20; --nx-ok: 85 208 138; --nx-ok-bg: 17 48 31;
    color-scheme: dark;
  }
}
html[data-theme="dark"] .nx-auth {
  --nx-canvas: 13 17 23; --nx-surface: 21 26 34; --nx-on-accent: 11 16 32;
  --nx-n-50: 27 33 43; --nx-n-200: 51 61 75; --nx-n-300: 77 89 105; --nx-n-400: 125 139 160;
  --nx-n-600: 169 181 198; --nx-n-700: 195 205 219; --nx-n-800: 219 226 236; --nx-n-900: 230 235 243;
  --nx-a-600: 123 160 255; --nx-a-700: 155 183 255; --nx-a-800: 185 205 255;
  --nx-bad: 255 131 121; --nx-bad-bg: 61 23 20; --nx-ok: 85 208 138; --nx-ok-bg: 17 48 31;
  color-scheme: dark;
}

.nx-auth, .nx-auth *, .nx-auth *::before, .nx-auth *::after { box-sizing: border-box; }
.nx-auth {
  display: grid; min-height: 100vh; min-height: 100dvh; margin: 0;
  background: rgb(var(--nx-canvas)); color: rgb(var(--nx-n-900));
  font-family: var(--font-geist-sans, ui-sans-serif), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { .nx-auth { grid-template-columns: 5fr 6fr; } }

.nx-auth__main { display: grid; align-content: center; justify-items: center; gap: 32px; padding: 40px 24px; }
.nx-auth__col { display: grid; width: 100%; max-width: 380px; gap: 32px; }
.nx-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--nx-n-900)); text-decoration: none; }

.nx-form { display: grid; width: 100%; max-width: 380px; gap: 20px; margin: 0; }
.nx-form h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: rgb(var(--nx-n-900)); }
.nx-form .nx-sub { margin: 4px 0 0; font-size: 14px; color: rgb(var(--nx-n-600)); }

.nx-field { display: block; }
.nx-field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: rgb(var(--nx-n-800)); }
.nx-input {
  display: block; width: 100%; height: 36px; padding: 0 12px; font: inherit; font-size: 14px;
  color: rgb(var(--nx-n-900)); background: rgb(var(--nx-surface));
  border: 1px solid rgb(var(--nx-n-300)); border-radius: 6px; transition: border-color .15s, box-shadow .15s;
}
.nx-input::placeholder { color: rgb(var(--nx-n-400)); }
.nx-input:hover { border-color: rgb(var(--nx-n-400)); }
.nx-input:focus { outline: none; border-color: rgb(var(--nx-a-600)); box-shadow: 0 0 0 3px rgb(var(--nx-a-600) / .25); }

.nx-alert { margin: 0; padding: 8px 12px; border-radius: 6px; font-size: 13px; background: rgb(var(--nx-bad-bg)); color: rgb(var(--nx-bad)); }
.nx-alert--ok { background: rgb(var(--nx-ok-bg)); color: rgb(var(--nx-ok)); }
.nx-alert div + div { margin-top: 2px; }

.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
  border-radius: 6px; border: 1px solid rgb(var(--nx-a-600)); background: rgb(var(--nx-a-600)); color: rgb(var(--nx-on-accent));
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.nx-btn:hover { background: rgb(var(--nx-a-700)); border-color: rgb(var(--nx-a-700)); }
.nx-btn:active { background: rgb(var(--nx-a-800)); transform: translateY(1px); }
.nx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--nx-a-600) / .25); }
.nx-btn[disabled] { opacity: .5; cursor: not-allowed; }
.nx-btn--secondary { background: rgb(var(--nx-surface)); border-color: rgb(var(--nx-n-300)); color: rgb(var(--nx-n-700)); }
.nx-btn--secondary:hover { background: rgb(var(--nx-n-50)); border-color: rgb(var(--nx-n-300)); }
.nx-btn--secondary:active { background: rgb(var(--nx-n-50)); }

.nx-divider { position: relative; padding: 4px 0; text-align: center; font-size: 12px; color: rgb(var(--nx-n-600)); }
.nx-divider span { position: relative; z-index: 1; padding: 0 8px; background: rgb(var(--nx-canvas)); }
.nx-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgb(var(--nx-n-200)); }

.nx-link { color: rgb(var(--nx-a-600)); font-weight: 500; text-decoration: none; }
.nx-link:hover { text-decoration: underline; }
.nx-foot { margin: 0; text-align: center; font-size: 13px; color: rgb(var(--nx-n-600)); }

.nx-auth__aside {
  display: none; align-content: center; justify-items: start; gap: 16px; padding: 48px;
  background: rgb(var(--nx-surface)); border-left: 1px solid rgb(var(--nx-n-200));
}
@media (min-width: 1024px) { .nx-auth__aside { display: grid; } }
.nx-auth__aside h2 { margin: 0; max-width: 18ch; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: rgb(var(--nx-n-900)); }
.nx-auth__aside p { margin: 0; max-width: 44ch; font-size: 14px; color: rgb(var(--nx-n-600)); }

.nx-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(var(--nx-n-700)); cursor: pointer; }
.nx-check input { width: 16px; height: 16px; margin: 0; accent-color: rgb(var(--nx-a-600)); cursor: pointer; }
.nx-field-error { display: block; margin-top: 4px; font-size: 12px; color: rgb(var(--nx-bad)); }

/* Abas de método de acesso (usadas pelo Booking: senha / código / link) */
.nx-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid rgb(var(--nx-n-200)); border-radius: 8px; background: rgb(var(--nx-surface)); }
.nx-tabs button {
  flex: 1; height: 28px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  color: rgb(var(--nx-n-600)); background: transparent; border: 0; border-radius: 5px;
}
.nx-tabs button:hover { color: rgb(var(--nx-n-900)); }
.nx-tabs button[aria-selected="true"] { background: rgb(var(--nx-n-50)); color: rgb(var(--nx-n-900)); box-shadow: inset 0 0 0 1px rgb(var(--nx-n-200)); }
.nx-tabs button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--nx-a-600) / .25); }

/* Contas de demonstração */
.nx-demo { display: grid; gap: 6px; padding: 12px; border: 1px dashed rgb(var(--nx-n-300)); border-radius: 8px; font-size: 13px; }
.nx-demo strong { font-weight: 600; color: rgb(var(--nx-n-800)); }
.nx-demo button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: rgb(var(--nx-n-700)); background: rgb(var(--nx-surface)); border: 1px solid rgb(var(--nx-n-200)); border-radius: 6px; }
.nx-demo button:hover, .nx-demo button.is-selected { border-color: rgb(var(--nx-a-600)); }
.nx-demo small { color: rgb(var(--nx-n-600)); }