/* ============================================================
   auth-tema.css — compartido por las vistas de acceso
   (login, registro, completar registro, recuperar y nueva contraseña).
   Se carga DESPUÉS de login.css / signin.css.

   · Logo con ícono (como el header del sitio)
   · Botón de tema a la derecha de la barra superior
   · Tema claro: [data-theme="light"] lo pone tema.js con la
     misma preferencia del sitio (localStorage 'ns-theme')
   ============================================================ */

/* ---------- Logo: ícono + NeuralStack CODE ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.logo-icon {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------- Barra superior: "<" a la izquierda, tema a la derecha ---------- */
.auth-topbar {
    justify-content: space-between;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--gray-light);
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.2);
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--purple-light);
    border-color: var(--purple);
    background: rgba(139, 92, 246, 0.14);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12), 0 0 22px rgba(139, 92, 246, 0.45);
    outline: none;
}

.theme-toggle svg {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Oscuro (por defecto): luna visible · Claro: sol visible */
.theme-toggle .icon-sun                       { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.theme-toggle .icon-moon                      { opacity: 1; transform: none; }
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 1; transform: none; }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); }

/* ---------- Recuperar / nueva contraseña: tarjeta más ancha (título en una línea) ---------- */
.login-container--medium {
    max-width: 600px;
}

.login-container--medium .login-card {
    padding: 1.75rem 3rem 3rem;
}

@media (max-width: 600px) {
    .logo { font-size: 1.6rem; }
    .login-container--medium .login-card { padding: 1.25rem 1.5rem 2rem; }
    .logo-icon { width: 2.1rem; height: 2.1rem; }
    .theme-toggle { width: 38px; height: 38px; }
}

/* ============================================================
   Tema claro (misma paleta que index.css)
   ============================================================ */
[data-theme="light"] {
    --black: #F7F6FB;          /* fondo de página */
    --deep-black: #FFFFFF;     /* tarjetas */
    --dark-gray: #EFEDF7;
    --white: #15121F;          /* texto principal */
    --gray: #6B6577;
    --gray-light: #3F3A4C;
    --purple-light: #7C3AED;   /* el lila claro no contrasta sobre blanco */
    color-scheme: light;
}

[data-theme="light"] body {
    transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .gradient-orb { opacity: 0.1; }
[data-theme="light"] .purple-line  { opacity: 0.18; }

[data-theme="light"] .login-card,
[data-theme="light"] .register-card {
    border-color: rgba(124, 58, 237, 0.16);
    box-shadow: 0 20px 60px rgba(80, 60, 120, 0.14);
}

/* Campos, selects y botones translúcidos: sobre blanco necesitan un tinte visible */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .btn-social,
[data-theme="light"] .btn-back,
[data-theme="light"] .choice-card,
[data-theme="light"] .provider-logo {
    background: #FBFAFE;
    border-color: rgba(124, 58, 237, 0.24);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus {
    background: #FFFFFF;
}

[data-theme="light"] .form-input[readonly] {
    background: #F3F1F9;
}

[data-theme="light"] .form-select option {
    background: #FFFFFF;
    color: #15121F;
}

[data-theme="light"] .strength-bar {
    background: rgba(21, 18, 31, 0.1);
}

/* Texto blanco sobre morado: se queda blanco en ambos temas */
[data-theme="light"] .btn-primary,
[data-theme="light"] .wizard-step.is-active .wizard-step-num {
    color: #FFFFFF;
}

[data-theme="light"] .benefits-badge,
[data-theme="light"] .oauth-banner {
    background: rgba(124, 58, 237, 0.06);
}

/* ---------- Nota legal bajo Google / GitHub (login y registro) ---------- */
.legal-note {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--gray);
}

.legal-note a {
    color: var(--purple-light);
    text-decoration: none;
    font-weight: 500;
}

.legal-note a:hover {
    text-decoration: underline;
}