/* Dark Mode Styles */
.dark-mode {
    --primary: #000000;
    --secondary: #FFFFFF;
    --text-primary: #F5F5F5;
    --text-secondary: #AAAAAA;
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.dark-mode nav a{
    color: #fff;
}

.dark-mode .main-header {
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .video-card {
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .video-info h3 {
    color: var(--secondary);
}

.dark-mode .video-info p {
    color: var(--text-secondary);
}

.dark-mode .video-meta span {
    color: var(--text-secondary);
}

.dark-mode .main-footer {
    background-color: #000;
}

.dark-mode .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .hamburger span {
    background-color: var(--secondary);
}

/* Formularios en modo oscuro */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: #333;
}

.dark-mode ::placeholder {
    color: #666;
}

/* Efectos específicos para modo oscuro */
.dark-mode .glitch:hover {
    animation: dark-glitch 0.5s linear infinite;
}

@keyframes dark-glitch {
    0% {
        text-shadow: 0.05em 0 0 var(--accent-blue), -0.05em -0.025em 0 var(--accent-red);
    }
    14% {
        text-shadow: 0.05em 0 0 var(--accent-blue), -0.05em -0.025em 0 var(--accent-red);
    }
    15% {
        text-shadow: -0.05em -0.025em 0 var(--accent-blue), 0.025em 0.025em 0 var(--accent-red);
    }
    49% {
        text-shadow: -0.05em -0.025em 0 var(--accent-blue), 0.025em 0.025em 0 var(--accent-red);
    }
    50% {
        text-shadow: 0.025em 0.05em 0 var(--accent-blue), 0.05em 0 0 var(--accent-red), 0 -0.05em 0 var(--bg-primary);
    }
    99% {
        text-shadow: 0.025em 0.05em 0 var(--accent-blue), 0.05em 0 0 var(--accent-red), 0 -0.05em 0 var(--bg-primary);
    }
    100% {
        text-shadow: -0.025em 0 0 var(--accent-blue), -0.025em -0.025em 0 var(--accent-red);
    }
}