/* ============================================================================
   /login/css/auth.css
   Estilos del módulo de autenticación — Weeket
   ============================================================================ */

:root {
    --wk-primary:    #005BAB;
    --wk-secondary:  #F8941D;
    --wk-dark:       #2D3436;
    --wk-light:      #f0f4f8;
    --wk-border:     #d1dce8;
    --wk-radius:     14px;
    --wk-shadow:     0 12px 40px rgba(0,91,171,.15);
    --wk-transition: all .25s ease;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body.auth-page {
    min-height: 100vh;
    background: var(--wk-light);
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────── */

.auth-card {
    background: #fff;
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.auth-card--wide  { max-width: 520px; }
.auth-card--bo    { border-top: 5px solid var(--wk-secondary); }

/* ── Cabecera de la tarjeta (fondo blanco, borde superior azul) ──────────── */

.auth-card-header {
    background: #fff;
    border-top: 4px solid var(--wk-primary);
    padding: 1.5rem 2rem 1.25rem;
    text-align: center;
}

.auth-card-logo {
    height: 52px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ── Cuerpo de la tarjeta ────────────────────────────────────────────────── */

.auth-card-body {
    padding: 1.75rem 2rem 2rem;
}

/* ── Títulos ─────────────────────────────────────────────────────────────── */

.auth-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--wk-dark);
    margin: 0 0 .25rem;
    text-align: center;
}

.auth-subtitle {
    font-size: .92rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

.auth-form .form-label,
.auth-card-body .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--wk-dark);
    margin-bottom: .3rem;
}

.auth-card-body .form-control,
.auth-card-body .form-select {
    border-radius: 8px;
    border: 1.5px solid var(--wk-border);
    padding: .6rem .85rem;
    font-size: .95rem;
    transition: var(--wk-transition);
    color: var(--wk-dark);
}

.auth-card-body .form-control:focus,
.auth-card-body .form-select:focus {
    border-color: var(--wk-primary);
    box-shadow: 0 0 0 3px rgba(0,91,171,.12);
    outline: none;
}

.auth-card-body .form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.1);
}

/* Input con icono del ojo */
.auth-pass-wrap {
    position: relative;
}

.auth-pass-wrap .form-control {
    padding-right: 2.75rem;
}

.auth-pass-toggle {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9aa5b1;
    padding: 0;
    font-size: .95rem;
    line-height: 1;
    z-index: 5;
    transition: color .2s;
}

.auth-pass-toggle:hover { color: var(--wk-primary); }

/* Error bajo el campo */
.auth-field-error {
    font-size: .78rem;
    color: #dc3545;
    margin-top: .25rem;
    display: none;
}

.auth-field-error.visible { display: block; }

/* ── Botón principal ─────────────────────────────────────────────────────── */

.btn-auth {
    background: var(--wk-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .7rem 1.5rem;
    font-size: .97rem;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: background .2s, transform .12s;
    text-align: center;
    letter-spacing: .01em;
}

.btn-auth:hover  { background: #004a8c; color: #fff; text-decoration: none; }
.btn-auth:active { transform: scale(.98); }
.btn-auth:disabled { background: #8ab4d4; cursor: not-allowed; }

.btn-auth .spinner-border {
    width: .95rem;
    height: .95rem;
    border-width: 2px;
    vertical-align: middle;
}

/* ── Alerta global ───────────────────────────────────────────────────────── */

.auth-alert {
    border-radius: 8px;
    font-size: .88rem;
    padding: .7rem .9rem;
    margin-bottom: 1.1rem;
    display: none;
}

.auth-alert.visible { display: block; }

/* ── Link "¿Olvidaste tu contraseña?" (junto al label del campo) ────────── */

.auth-forgot-link {
    font-size: .8rem;
    color: var(--wk-primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-forgot-link:hover { text-decoration: underline; }

/* ── Links de navegación ─────────────────────────────────────────────────── */

.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: .88rem;
    color: #6c757d;
}

.auth-links a {
    color: var(--wk-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-links a:hover { text-decoration: underline; }

/* ── Turnstile ───────────────────────────────────────────────────────────── */

.auth-turnstile {
    display: flex;
    justify-content: center;
}

/* ── Términos ────────────────────────────────────────────────────────────── */

.auth-terms {
    font-size: .83rem;
    color: #495057;
    line-height: 1.5;
}

.auth-terms a { color: var(--wk-primary); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

/* ── Iconos de estado (activation, success) ──────────────────────────────── */

.auth-status-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.9rem;
}

.auth-status-icon--success { background: #d4edda; color: #155724; }
.auth-status-icon--error   { background: #f8d7da; color: #721c24; }
.auth-status-icon--info    { background: #cce5ff; color: #004085; }

/* ── Steps (register_success) ────────────────────────────────────────────── */

.auth-steps {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.auth-steps li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px solid #f0f3f7;
    font-size: .92rem;
    color: #444;
}

.auth-steps li:last-child { border-bottom: none; }

.auth-step-num {
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wk-primary);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ── Sugerencia de perfil ────────────────────────────────────────────────── */

.prof-sug-icon {
    font-size: 2.75rem;
    color: var(--wk-primary);
    text-align: center;
    margin-bottom: 1rem;
}

.prof-sug-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 1.5rem;
}

.btn-sug-primary {
    background: var(--wk-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .7rem 1.5rem;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background .2s;
}

.btn-sug-primary:hover { background: #004a8c; color: #fff; }

.btn-sug-secondary {
    background: #fff;
    color: var(--wk-primary);
    border: 2px solid var(--wk-primary);
    border-radius: 8px;
    padding: .6rem 1.5rem;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background .2s, color .2s;
}

.btn-sug-secondary:hover { background: var(--wk-primary); color: #fff; }

.btn-sug-skip {
    background: #fff;
    color: var(--wk-secondary);
    border: 2px solid var(--wk-secondary);
    border-radius: 8px;
    padding: .6rem 1.5rem;
    font-weight: 700;
    font-size: .97rem;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background .2s, color .2s;
}

.btn-sug-skip:hover {
    background: var(--wk-secondary);
    color: #fff;
    text-decoration: none;
}

/* ── Página de fondo para modal post-login ───────────────────────────────── */

/*
 * Fondo claro (igual que auth-page normal).
 * El tono azul suave lo aplica el backdrop de Bootstrap sobreescrito más abajo.
 */
body.auth-page--modal-bg {
    background: var(--wk-light);
}

/* Sustituye el oscuro backdrop de Bootstrap por un tinte azul-primario suave */
body.auth-page--modal-bg .modal-backdrop {
    background-color: var(--wk-primary);
    opacity: .18 !important;
}

/* Silueta borrosa de una login card — deja claro que el modal flota sobre algo */
.auth-backdrop-hint {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}

.auth-backdrop-hint__card {
    width: 440px;
    max-width: 90vw;
    height: 490px;
    background: #fff;
    border-radius: var(--wk-radius);
    border-top: 4px solid var(--wk-primary);
    box-shadow: var(--wk-shadow);
    opacity: .6;
    filter: blur(3px);
}

/* Integrar el modal-content con el estilo de tarjeta auth (quitar bordes Bootstrap) */
.auth-modal-content {
    border: none;
    border-radius: var(--wk-radius);
    box-shadow: 0 20px 60px rgba(0,91,171,.25);
    overflow: hidden;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.auth-back-link {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    font-size: .83rem;
}
.auth-back-link a {
    color: #aab4be;
    text-decoration: none;
    transition: color .15s;
}
.auth-back-link a:hover {
    color: var(--wk-primary);
    text-decoration: none;
}

.auth-footer {
    text-align: center;
    padding: 1rem;
    font-size: .78rem;
    color: #b0bec5;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .auth-card-body { padding: 1.4rem 1.25rem 1.5rem; }
    .auth-title { font-size: 1.25rem; }
}