/* ==========================================================
   AUTH-DARK.CSS — Formularios (Tema oscuro Patek)
   ========================================================== */

:root {
    --auth-dark-bg: #161616;
    --auth-dark-bg-2: #1e1e1e;
    --auth-dark-input: #222;
    --auth-dark-text: #f2f1ee;
    --auth-dark-muted: #b9b8b4;
    --auth-dark-border: rgba(255,255,255,0.06);
    --auth-dark-accent: #c6a664;
    --auth-dark-accent-hover: #d8be75;
    --auth-dark-shadow: 0 4px 18px rgba(0,0,0,0.3);
    --auth-dark-radius: 14px;
}

/* Fondo general */
html.dark body.login-page,
html.dark body.register-page,
html.dark body.auth-page {
    background: var(--auth-dark-bg);
    color: var(--auth-dark-text);
    font-family: 'Lato', sans-serif;
}

/* ==========================================================
   TARJETAS
   ========================================================== */
html.dark .login-container,
html.dark .reg-container,
html.dark .auth-card {
    background: var(--auth-dark-bg-2) !important;
    border: 1px solid var(--auth-dark-border) !important;
    border-radius: var(--auth-dark-radius) !important;
    box-shadow: var(--auth-dark-shadow) !important;
    padding: 32px 32px !important;
    color: var(--auth-dark-text);
}

html.dark .login-container h2,
html.dark .reg-container h2,
html.dark .auth-title {
    color: var(--auth-dark-text) !important;
    opacity: 0.96;
}

/* ==========================================================
   INPUTS
   ========================================================== */
html.dark .login-container input,
html.dark .reg-container input,
html.dark .auth-input {
    background: var(--auth-dark-input) !important;
    color: var(--auth-dark-text) !important;
    border: 1px solid var(--auth-dark-border) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

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

/* ==========================================================
   BOTONES
   ========================================================== */
html.dark .login-container button,
html.dark .reg-container button,
html.dark .auth-btn-primary {
    background: var(--auth-dark-accent) !important;
    color: #111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 12px !important;
    transition: background .25s ease;
}

html.dark .login-container button:hover,
html.dark .reg-container button:hover,
html.dark .auth-btn-primary:hover {
    background: var(--auth-dark-accent-hover) !important;
}

/* ==========================================================
   ERRORES
   ========================================================== */
html.dark .error {
    background: rgba(255,60,60,0.12) !important;
    border: 1px solid rgba(255,60,60,0.25) !important;
    color: #ff9999 !important;
}

/* ==========================================================
   ENLACES
   ========================================================== */
html.dark .auth-link a,
html.dark .login-container a,
html.dark .reg-container a {
    color: var(--auth-dark-accent) !important;
    opacity: 0.85;
    font-weight: 600;
}

html.dark .auth-link a:hover,
html.dark .login-container a:hover,
html.dark .reg-container a:hover {
    opacity: 1;
    color: var(--auth-dark-accent-hover) !important;
}

/* --------------------------------------------------
   FLASH MESSAGES — Modo Oscuro (Patek Sereno)
-------------------------------------------------- */
body.dark .flash {
    margin: 0 auto 28px auto !important;
    max-width: 420px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
    font-weight: 500 !important;
    backdrop-filter: blur(6px) !important;
    animation: flashFade 0.35s ease-out !important;
    display: block !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

/* Success */
/* Success — versión SERENO (más elegante, menos verde fuerte) */
body.dark .flash-success {
    background: rgba(198, 166, 100, 0.12) !important;  /* dorado suave */
    color: #e8d7ae !important;                        /* dorado claro */
    border: 1px solid rgba(198, 166, 100, 0.28) !important;
    box-shadow: 0 0 8px rgba(198, 166, 100, 0.15) !important;
    text-align: center !important;
    margin-bottom: 26px !important;
}


/* Error */
body.dark .flash-error {
    background: rgba(255, 80, 80, 0.18) !important;
    color: #ffb0b0 !important;
    border: 1px solid rgba(255, 80, 80, 0.35) !important;
}

/* Info */
body.dark .flash-info {
    background: rgba(120, 160, 255, 0.18) !important;
    color: #b9caff !important;
    border: 1px solid rgba(120, 160, 255, 0.32) !important;
}

/* Warning */
body.dark .flash-warning {
    background: rgba(255, 210, 70, 0.18) !important;
    color: #ffe9aa !important;
    border: 1px solid rgba(255, 210, 70, 0.32) !important;
}