/* ========== AUTUMN MODE - THEME OVERRIDE ========== */
/* Activar este CSS para Noviembre (Otoño) */
/* Paleta profesional: Stone 400-500, Neutral 600-700, toques sutiles de Amber 700 */

.login-cyber.autumn-mode {
    background: linear-gradient(180deg, #1c1917 0%, #292524 50%, #1c1917 100%) !important;
    position: relative;
}

/* Efecto de resplandor sutil otoñal */
.login-cyber.autumn-mode::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 15%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(168, 162, 158, 0.05) 0%, rgba(120, 113, 108, 0.03) 30%, transparent 70%);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 1;
    animation: autumnGlow 5s ease-in-out infinite;
}

@keyframes autumnGlow {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.1); }
}

/* Canvas de partículas - efecto sutil */
.login-cyber.autumn-mode #particlesCanvas {
    filter: brightness(1.05) sepia(0.08);
}

/* Toggle theme - tono tierra profesional */
.login-cyber.autumn-mode .theme-toggle {
    background: rgba(168, 162, 158, 0.12) !important;
    border: 2px solid rgba(120, 113, 108, 0.25) !important;
    animation: leafFloat 3s ease-in-out infinite;
}

.login-cyber.autumn-mode .theme-toggle:hover {
    background: rgba(168, 162, 158, 0.20) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 0 15px rgba(168, 162, 158, 0.15);
}

.login-cyber.autumn-mode .theme-toggle i {
    color: #a8a29e !important;
    filter: drop-shadow(0 0 3px rgba(168, 162, 158, 0.25));
}

@keyframes leafFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Card - diseño sobrio y profesional */
.login-cyber.autumn-mode .login-cyber-card {
    background: rgba(28, 25, 23, 0.88) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 162, 158, 0.18) !important;
    box-shadow:
        0 0 35px rgba(120, 113, 108, 0.10),
        inset 0 0 50px rgba(168, 162, 158, 0.03),
        0 10px 50px rgba(0, 0, 0, 0.5) !important;
    animation: cardGlowAutumn 4s ease-in-out infinite, slideIn 0.6s ease-out !important;
    position: relative;
    overflow: visible;
}

/* Decoración de esquinas - muy sutil */
.login-cyber.autumn-mode .login-cyber-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg,
        rgba(168, 162, 158, 0.06) 0%,
        transparent 20%,
        transparent 80%,
        rgba(120, 113, 108, 0.06) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Pequeña hoja decorativa muy sutil */
.login-cyber.autumn-mode .login-cyber-card::after {
    content: '🍂';
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 13px;
    opacity: 0.12;
    animation: leafFall 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardGlowAutumn {
    0%, 100% {
        box-shadow:
            0 0 35px rgba(120, 113, 108, 0.10),
            inset 0 0 50px rgba(168, 162, 158, 0.03),
            0 10px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(168, 162, 158, 0.18);
    }
    50% {
        box-shadow:
            0 0 40px rgba(168, 162, 158, 0.12),
            inset 0 0 55px rgba(120, 113, 108, 0.04),
            0 12px 55px rgba(0, 0, 0, 0.55);
        border-color: rgba(168, 162, 158, 0.22);
    }
}

@keyframes leafFall {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.12;
    }
    50% {
        transform: translateY(2px) rotate(-5deg);
        opacity: 0.18;
    }
}

/* Logo - hexágono tierra profesional */
.login-cyber.autumn-mode .logo-cyber-hexagon {
    background: linear-gradient(135deg, rgba(168, 162, 158, 0.18) 0%, rgba(120, 113, 108, 0.12) 100%) !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    box-shadow:
        0 0 25px rgba(168, 162, 158, 0.20),
        inset 0 0 15px rgba(120, 113, 108, 0.08) !important;
    animation: hexagonPulse 6s ease-in-out infinite !important;
}

@keyframes hexagonPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.login-cyber.autumn-mode .logo-cyber-icon {
    background: transparent !important;
    box-shadow: none !important;
}

.login-cyber.autumn-mode .logo-cyber-icon i {
    color: #a8a29e !important;
    filter: drop-shadow(0 0 5px rgba(168, 162, 158, 0.35));
    animation: iconShimmer 3s ease-in-out infinite;
}

@keyframes iconShimmer {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(168, 162, 158, 0.35)); }
    50% { filter: drop-shadow(0 0 6px rgba(168, 162, 158, 0.40)); }
}

/* Títulos - tonos tierra profesionales */
.login-cyber.autumn-mode .brand-cyber-title {
    background: linear-gradient(135deg, #a8a29e 0%, #78716c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 6px rgba(168, 162, 158, 0.25));
    animation: autumnTitleGlow 3s ease-in-out infinite;
}

@keyframes autumnTitleGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(168, 162, 158, 0.25)); }
    50% { filter: drop-shadow(0 0 8px rgba(168, 162, 158, 0.30)); }
}

.login-cyber.autumn-mode .brand-cyber-subtitle {
    color: #d6d3d1 !important;
    text-shadow:
        0 0 6px rgba(214, 211, 209, 0.20),
        0 0 12px rgba(168, 162, 158, 0.15);
    animation: subtitleWarmth 4s ease-in-out infinite;
}

@keyframes subtitleWarmth {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.95; }
}

/* Inputs - diseño profesional tierra */
.login-cyber.autumn-mode .input-cyber-wrapper {
    background: rgba(28, 25, 23, 0.35) !important;
    border: 1px solid rgba(168, 162, 158, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 12px rgba(120, 113, 108, 0.06) !important;
    transition: all 0.3s ease;
}

.login-cyber.autumn-mode .form-cyber-input {
    border: none !important;
    background: transparent !important;
}

.login-cyber.autumn-mode .input-cyber-wrapper:focus-within {
    border-color: rgba(168, 162, 158, 0.35) !important;
    box-shadow: 0 0 18px rgba(168, 162, 158, 0.12) !important;
    background: rgba(28, 25, 23, 0.50) !important;
}

.login-cyber.autumn-mode .form-cyber-input:focus {
    box-shadow: none !important;
}

.login-cyber.autumn-mode .input-cyber-icon {
    color: #a8a29e !important;
    filter: drop-shadow(0 0 2px rgba(168, 162, 158, 0.25));
}

.login-cyber.autumn-mode .form-cyber-input {
    color: #e7e5e4 !important;
}

.login-cyber.autumn-mode .form-cyber-input::placeholder {
    color: rgba(214, 211, 209, 0.30) !important;
}

/* Checkbox - tierra sutil */
.login-cyber.autumn-mode .cyber-checkbox-input:checked {
    background: linear-gradient(135deg, #78716c 0%, #a8a29e 100%) !important;
    border-color: #a8a29e !important;
    box-shadow: 0 0 10px rgba(168, 162, 158, 0.25) !important;
}

.login-cyber.autumn-mode .cyber-checkbox-label {
    color: #d6d3d1 !important;
}

/* Botón submit - profesional y sobrio */
.login-cyber.autumn-mode .btn-cyber-submit {
    background: linear-gradient(135deg, #78716c 0%, #57534e 100%) !important;
    border: 1px solid rgba(168, 162, 158, 0.35) !important;
    box-shadow:
        0 0 20px rgba(120, 113, 108, 0.15),
        inset 0 0 12px rgba(168, 162, 158, 0.08) !important;
    animation: harvestGlow 4s ease-in-out infinite;
}

.login-cyber.autumn-mode .btn-cyber-submit:hover {
    background: linear-gradient(135deg, #57534e 0%, #44403c 100%) !important;
    border-color: rgba(168, 162, 158, 0.45) !important;
    box-shadow:
        0 0 25px rgba(168, 162, 158, 0.20),
        inset 0 0 15px rgba(120, 113, 108, 0.10) !important;
    transform: translateY(-2px) scale(1.01);
}

@keyframes harvestGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(120, 113, 108, 0.15),
            inset 0 0 12px rgba(168, 162, 158, 0.08);
    }
    50% {
        box-shadow:
            0 0 22px rgba(168, 162, 158, 0.18),
            inset 0 0 14px rgba(120, 113, 108, 0.10);
    }
}

.login-cyber.autumn-mode .btn-cyber-submit .btn-cyber-content i {
    color: #fafaf9 !important;
    filter: drop-shadow(0 0 3px rgba(250, 250, 249, 0.30));
}

/* Divider - línea tierra */
.login-cyber.autumn-mode .cyber-divider {
    color: #a8a29e !important;
}

.login-cyber.autumn-mode .cyber-divider::before,
.login-cyber.autumn-mode .cyber-divider::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(168, 162, 158, 0.18) 25%,
        rgba(214, 211, 209, 0.20) 50%,
        rgba(168, 162, 158, 0.18) 75%,
        transparent
    ) !important;
}

/* Footer - tema tierra profesional */
.login-cyber.autumn-mode .footer-cyber-text {
    color: #d6d3d1 !important;
}

.login-cyber.autumn-mode .footer-cyber-link {
    background: rgba(120, 113, 108, 0.08) !important;
    border: 1px solid rgba(168, 162, 158, 0.15) !important;
    color: #a8a29e !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease;
}

.login-cyber.autumn-mode .footer-cyber-link:hover {
    background: rgba(120, 113, 108, 0.14) !important;
    border-color: rgba(168, 162, 158, 0.28) !important;
    box-shadow: 0 0 12px rgba(120, 113, 108, 0.12) !important;
    transform: translateY(-2px);
}

.login-cyber.autumn-mode .footer-cyber-link i {
    color: #a8a29e !important;
    filter: drop-shadow(0 0 2px rgba(168, 162, 158, 0.25));
}

/* Loading state */
.login-cyber.autumn-mode .btn-cyber-submit.loading-cyber::after {
    border-color: #fafaf9 transparent transparent transparent !important;
}

/* ========== LIGHT MODE - PROFESIONAL Y SOBRIO ========== */
.login-cyber.autumn-mode.light-mode-cyber {
    background: linear-gradient(180deg, #e7e5e4 0%, #d6d3d1 50%, #e7e5e4 100%) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .login-cyber-card {
    background: rgba(250, 250, 249, 0.95) !important;
    border: 1px solid rgba(120, 113, 108, 0.25) !important;
    box-shadow:
        0 0 25px rgba(87, 83, 78, 0.12),
        inset 0 0 35px rgba(168, 162, 158, 0.06),
        0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .login-cyber-card::before {
    background: linear-gradient(135deg,
        rgba(120, 113, 108, 0.15) 0%,
        transparent 20%,
        transparent 80%,
        rgba(168, 162, 158, 0.15) 100%);
}

.login-cyber.autumn-mode.light-mode-cyber .login-cyber-card::after {
    opacity: 0.20;
}

.login-cyber.autumn-mode.light-mode-cyber .brand-cyber-title {
    background: linear-gradient(135deg, #44403c 0%, #57534e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 3px rgba(68, 64, 60, 0.15));
}

.login-cyber.autumn-mode.light-mode-cyber .brand-cyber-subtitle {
    color: #57534e !important;
    text-shadow: 0 0 3px rgba(87, 83, 78, 0.12);
}

.login-cyber.autumn-mode.light-mode-cyber .input-cyber-wrapper {
    background: rgba(231, 229, 228, 0.50) !important;
    border-color: rgba(120, 113, 108, 0.30) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .input-cyber-wrapper:focus-within {
    border-color: rgba(87, 83, 78, 0.50) !important;
    box-shadow: 0 0 12px rgba(120, 113, 108, 0.15) !important;
    background: rgba(250, 250, 249, 0.70) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .form-cyber-input {
    color: #1c1917 !important;
}

.login-cyber.autumn-mode.light-mode-cyber .form-cyber-input::placeholder {
    color: rgba(68, 64, 60, 0.40) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .input-cyber-icon {
    color: #57534e !important;
    filter: drop-shadow(0 0 2px rgba(87, 83, 78, 0.18));
}

.login-cyber.autumn-mode.light-mode-cyber .input-cyber-label {
    color: #44403c !important;
    font-weight: 600;
}

.login-cyber.autumn-mode.light-mode-cyber .cyber-checkbox-label {
    color: #44403c !important;
}

.login-cyber.autumn-mode.light-mode-cyber .footer-cyber-text {
    color: #57534e !important;
}

.login-cyber.autumn-mode.light-mode-cyber .footer-cyber-link {
    background: rgba(231, 229, 228, 0.45) !important;
    border: 1px solid rgba(120, 113, 108, 0.35) !important;
    color: #44403c !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
}

.login-cyber.autumn-mode.light-mode-cyber .footer-cyber-link:hover {
    background: rgba(214, 211, 209, 0.55) !important;
    border-color: rgba(87, 83, 78, 0.45) !important;
    box-shadow: 0 0 12px rgba(120, 113, 108, 0.15) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .footer-cyber-link i {
    filter: drop-shadow(0 0 2px rgba(68, 64, 60, 0.18));
}

.login-cyber.autumn-mode.light-mode-cyber .cyber-divider {
    color: #78716c !important;
}

.login-cyber.autumn-mode.light-mode-cyber .cyber-divider::before,
.login-cyber.autumn-mode.light-mode-cyber .cyber-divider::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(120, 113, 108, 0.22) 25%,
        rgba(87, 83, 78, 0.25) 50%,
        rgba(120, 113, 108, 0.22) 75%,
        transparent
    ) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .btn-cyber-submit {
    background: linear-gradient(135deg, #57534e 0%, #44403c 100%) !important;
    border: 1px solid rgba(87, 83, 78, 0.35) !important;
    box-shadow:
        0 0 18px rgba(87, 83, 78, 0.12),
        inset 0 0 10px rgba(120, 113, 108, 0.08) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .btn-cyber-submit:hover {
    background: linear-gradient(135deg, #44403c 0%, #292524 100%) !important;
    border-color: rgba(68, 64, 60, 0.45) !important;
    box-shadow:
        0 0 22px rgba(87, 83, 78, 0.16),
        inset 0 0 12px rgba(120, 113, 108, 0.10) !important;
}

.login-cyber.autumn-mode.light-mode-cyber .btn-cyber-submit .btn-cyber-content i {
    color: #fafaf9 !important;
    filter: drop-shadow(0 0 2px rgba(250, 250, 249, 0.30));
}

/* Hojas cayendo sutiles */
@keyframes autumnFall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 0.4; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.login-cyber.autumn-mode::after {
    content: '🍂';
    position: absolute;
    top: -50px;
    left: 20%;
    font-size: 26px;
    opacity: 0.35;
    animation: autumnFall 14s linear infinite;
    z-index: 1;
}

/* Destellos sutiles en header */
.login-cyber.autumn-mode .login-cyber-header {
    position: relative;
}

.login-cyber.autumn-mode .login-cyber-header::before {
    content: '✦';
    position: absolute;
    top: 10px;
    left: 25px;
    font-size: 11px;
    color: rgba(168, 162, 158, 0.20);
    animation: warmTwinkle 3s ease-in-out infinite;
}

.login-cyber.autumn-mode .login-cyber-header::after {
    content: '✧';
    position: absolute;
    bottom: 10px;
    right: 30px;
    font-size: 10px;
    color: rgba(214, 211, 209, 0.18);
    animation: warmTwinkle 3s ease-in-out infinite 1.5s;
}

@keyframes warmTwinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(1.15);
    }
}

/* Light mode - destellos aún más sutiles */
.login-cyber.autumn-mode.light-mode-cyber .login-cyber-header::before,
.login-cyber.autumn-mode.light-mode-cyber .login-cyber-header::after {
    color: rgba(120, 113, 108, 0.15);
}