:root.dark-mode,
body.dark-mode {
    --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --tech-gradient: linear-gradient(135deg, #000000 0%, #0f172a 50%, #1e293b 100%);
    --accent-cyan: #22d3ee;
    --accent-purple: #a855f7;
    --accent-blue: #60a5fa;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --surface-light: rgba(15, 23, 42, 0.95);
    --surface-glass: rgba(15, 23, 42, 0.8);
    --border-tech: rgba(34, 211, 238, 0.2);
    --shadow-tech: 0 8px 32px rgba(34, 211, 238, 0.25);
    --shadow-primary: 0 20px 40px rgba(0, 0, 0, 0.4);
}

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

body.dark-mode::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(96, 165, 250, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 20%, rgba(34, 211, 238, 0.08) 0%, transparent 50%);
}

.dark-mode .content-container {
    background: var(--surface-light);
    border-color: var(--border-tech);
    box-shadow: var(--shadow-primary);
}

.dark-mode .content-container::before {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-blue));
}

.dark-mode .sidebar {
    background: var(--surface-glass);
    border-color: var(--border-tech);
    box-shadow: var(--shadow-tech);
}

.dark-mode .header-container {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(15, 23, 42, 0.95));
    border-color: var(--border-tech);
    box-shadow: var(--shadow-primary);
}

.dark-mode .header-container::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2322d3ee;stop-opacity:0.15" /><stop offset="50%" style="stop-color:%23a855f7;stop-opacity:0.1" /><stop offset="100%" style="stop-color:%2360a5fa;stop-opacity:0.12" /></linearGradient></defs><rect width="1200" height="400" fill="url(%23grad1)"/><circle cx="100" cy="100" r="50" fill="%2322d3ee" opacity="0.15"/><circle cx="1100" cy="300" r="80" fill="%23a855f7" opacity="0.12"/><circle cx="600" cy="200" r="30" fill="%2360a5fa" opacity="0.18"/><polygon points="200,50 250,100 200,150 150,100" fill="%2322d3ee" opacity="0.12"/><polygon points="1000,100 1050,150 1000,200 950,150" fill="%23a855f7" opacity="0.1"/><path d="M300,200 Q400,150 500,200 T700,200" stroke="%2322d3ee" stroke-width="2" fill="none" opacity="0.2"/><path d="M800,300 Q900,250 1000,300 T1200,300" stroke="%23a855f7" stroke-width="2" fill="none" opacity="0.15"/></svg>') center/cover;
    opacity: 0.9;
}

.dark-mode .header-container::after {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-blue));
}

.dark-mode .header h1 {
    color: #ffffff;
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.6);
}

.dark-mode .header h1::before {
    filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.4));
}

.dark-mode .header .subtitle {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.dark-mode .header .date {
    color: rgba(255, 255, 255, 0.7);
}

.dark-mode .dark-mode-toggle {
    background: var(--surface-glass);
    border-color: var(--border-tech);
    color: var(--accent-cyan);
}

.dark-mode .dark-mode-toggle::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.2), transparent);
}

.dark-mode .dark-mode-toggle:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-tech);
}

.dark-mode .sidebar-title {
    color: var(--text-primary);
    border-bottom-color: var(--border-tech);
}

.dark-mode .archive-item {
    background: var(--surface-glass);
    border-color: var(--border-tech);
}

.dark-mode .archive-item::before {
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
}

.dark-mode .archive-item:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-tech);
}

.dark-mode .archive-link {
    color: var(--accent-cyan);
}

.dark-mode .archive-link:hover {
    color: var(--accent-purple);
}

.dark-mode .no-archives {
    color: var(--text-secondary);
    background: var(--surface-glass);
    border-color: var(--border-tech);
}

.dark-mode .news-card {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--border-tech);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark-mode .news-card::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="cardGradDark" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2322d3ee;stop-opacity:0.08" /><stop offset="50%" style="stop-color:%23a855f7;stop-opacity:0.06" /><stop offset="100%" style="stop-color:%2360a5fa;stop-opacity:0.08" /></linearGradient></defs><rect width="400" height="300" fill="url(%23cardGradDark)"/><circle cx="50" cy="50" r="20" fill="%2322d3ee" opacity="0.12"/><circle cx="350" cy="250" r="30" fill="%23a855f7" opacity="0.1"/><circle cx="200" cy="150" r="15" fill="%2360a5fa" opacity="0.14"/><polygon points="100,20 120,40 100,60 80,40" fill="%2322d3ee" opacity="0.1"/><polygon points="320,180 340,200 320,220 300,200" fill="%23a855f7" opacity="0.08"/><path d="M50,150 Q100,120 150,150 T250,150" stroke="%2322d3ee" stroke-width="1" fill="none" opacity="0.15"/><path d="M150,250 Q200,220 250,250 T350,250" stroke="%23a855f7" stroke-width="1" fill="none" opacity="0.12"/></svg>') center/cover;
    opacity: 0.8;
}

.dark-mode .news-card::after {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-blue));
}

.dark-mode .news-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), var(--shadow-tech);
}

.dark-mode .news-title {
    color: var(--text-primary);
}

.dark-mode .news-title.no-title {
    color: var(--text-secondary);
}

.dark-mode .news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dark-mode .news-title a:hover {
    color: var(--accent-cyan);
}

.dark-mode .news-date {
    color: var(--text-secondary);
}

.dark-mode .news-date::before {
    color: var(--accent-cyan);
}

.dark-mode .news-summary {
    color: var(--text-secondary);
}

.dark-mode .news-summary.no-summary {
    color: var(--text-secondary);
}

.dark-mode .news-footer {
    border-top-color: var(--border-tech);
}

.dark-mode .news-link {
    color: var(--accent-cyan);
    background: var(--surface-glass);
    border-color: var(--border-tech);
}

.dark-mode .news-link::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.2), transparent);
}

.dark-mode .news-link:hover {
    background: rgba(34, 211, 238, 0.15);
    color: var(--accent-purple);
    border-color: var(--accent-cyan);
}

.dark-mode .news-source {
    color: var(--text-secondary);
}

.dark-mode .footer {
    border-top-color: var(--border-tech);
    color: var(--text-secondary);
}

.dark-mode .footer p:first-child {
    color: var(--text-primary);
}

.dark-mode .no-news {
    color: var(--text-secondary);
    background: var(--surface-glass);
    border-color: var(--border-tech);
}

.dark-mode .sidebar::-webkit-scrollbar-track {
    background: var(--surface-glass);
}

.dark-mode .sidebar::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
}

.dark-mode .sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
}

/* Efectos adicionales para modo oscuro */
.dark-mode .news-card {
    backdrop-filter: blur(10px);
}

.dark-mode .content-container {
    backdrop-filter: blur(20px);
}

.dark-mode .sidebar {
    backdrop-filter: blur(15px);
}

/* Glow effects for dark mode */
.dark-mode .news-card:hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(34, 211, 238, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-mode .archive-item:hover {
    box-shadow: 
        var(--shadow-tech),
        0 0 15px rgba(34, 211, 238, 0.1);
}

.dark-mode .dark-mode-toggle:hover {
    box-shadow: 
        var(--shadow-tech),
        0 0 20px rgba(34, 211, 238, 0.2);
}

.dark-mode .news-link:hover {
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

.dark-mode .back-to-top {
    background: var(--accent-cyan);
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.4);
}

.dark-mode .back-to-top:hover {
    background: var(--accent-purple);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.5);
}