/* ==========================================================
   AUTH.CSS — Formularios (Tema claro · Estilo Patek)
   ========================================================== */

:root {
    --auth-bg: #f8f7f4;
    --auth-card-bg: #ffffff;
    --auth-border: rgba(0,0,0,0.1);
    --auth-text: #1a1a1a;
    --auth-muted: #5a5a5a;
    --auth-accent: #c6a664;
    --auth-accent-hover: #b79846;
    --auth-shadow: 0 3px 12px rgba(0,0,0,0.07);
    --auth-radius: 12px;
}

/* === ESTILO GLOBAL PARA PÁGINAS DE AUTENTICACIÓN === */
body.login-page,
body.register-page,
body.auth-page {
    background: var(--auth-bg);
    font-family: 'Lato', sans-serif;
    color: var(--auth-text);
}

/* ==========================================================
   TARJETA BASE
   ========================================================== */
.login-container,
.reg-container,
.auth-card {
    max-width: 460px;
    margin: 80px auto;
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 32px 32px;
    box-shadow: var(--auth-shadow);
    transition: box-shadow .25s ease;
}

.login-container:hover,
.reg-container:hover,
.auth-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

.login-container h2,
.reg-container h2,
.auth-title {
    text-align: center;
    margin-top: 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ==========================================================
   INPUTS
   ========================================================== */

.login-container input,
.reg-container input,
.auth-input {
    width: 100%;
    padding: 12px;
    margin: 10px 0 18px;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-card-bg);
    color: var(--auth-text);
    font-size: 1rem;
    transition: border .25s, box-shadow .25s;
}

.login-container input:focus,
.reg-container input:focus,
.auth-input:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 2px rgba(198,166,100,0.25);
    outline: none;
}

/* ==========================================================
   BOTONES
   ========================================================== */

.login-container button,
.reg-container button,
.auth-btn-primary {
    width: 100%;
    padding: 12px;
    background: var(--auth-accent);
    color: #111;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    transition: background .25s ease, box-shadow .25s ease;
}

.login-container button:hover,
.reg-container button:hover,
.auth-btn-primary:hover {
    background: var(--auth-accent-hover);
    box-shadow: 0 3px 10px rgba(183,152,70,0.28);
}

/* ==========================================================
   ERRORES
   ========================================================== */
.error {
    background: #fff3f3;
    color: #b33434;
    border: 1px solid #f0c2c2;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
}

/* ==========================================================
   ENLACES
   ========================================================== */
.auth-link,
.login-container p,
.reg-container p {
    text-align: center;
    margin-top: 18px;
    font-size: 0.95rem;
}

.auth-link a,
.login-container a,
.reg-container a {
    color: var(--auth-accent);
    font-weight: 600;
    transition: color .25s;
}

.auth-link a:hover,
.login-container a:hover,
.reg-container a:hover {
    color: var(--auth-accent-hover);
}

/* ==========================================================
   RESET-PASSWORD & FORGOT-PASSWORD
   ========================================================== */

.auth-container {
    max-width: 480px;
    margin: 80px auto;
    padding: 20px;
}

/* --------------------------------------------------
   FLASH MESSAGES — Modo Claro (Patek Light)
   -------------------------------------------------- */
/* Important: limitar al modo claro para que auth-dark.css gane en tema oscuro */
body:not(.dark) .flash {
    margin: 0 auto 18px auto;
    max-width: 380px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
    backdrop-filter: blur(6px);
    animation: flashFade 0.35s ease-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

body:not(.dark) .flash-success {
    background: rgba(198, 166, 100, 0.12);
    color: #8b6a2a;
    border: 1px solid rgba(198, 166, 100, 0.20);
}

body:not(.dark) .flash-error {
    background: rgba(255, 90, 90, 0.08);
    color: #C64545;
    border: 1px solid rgba(255, 90, 90, 0.18);
}

body:not(.dark) .flash-info {
    background: rgba(80, 120, 255, 0.08);
    color: #4060C9;
    border: 1px solid rgba(80, 120, 255, 0.18);
}

body:not(.dark) .flash-warning {
    background: rgba(240, 190, 60, 0.10);
    color: #A37A15;
    border: 1px solid rgba(240, 190, 60, 0.22);
}

@keyframes flashFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}