/* ===================================
   DARK THEME - SISTEMA CENTRALIZADO
   =================================== */

/* Variables de colores para modo oscuro */
:root {
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #2a2a2a;
    --dark-bg-card: #242424;
    --dark-bg-hover: #333333;
    
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #808080;
    
    --dark-border: #333333;
    --dark-border-light: #404040;
    
    --dark-accent: #667eea;
    --dark-accent-hover: #764ba2;
}

/* Prevenir flash blanco al cargar (FOUC fix) */
html.dark-theme {
    background-color: var(--dark-bg-primary);
}

/* Base del body */
body.dark-theme {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* ===================================
   TEXTOS - Colores apropiados para modo oscuro
   =================================== */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-theme p,
body.dark-theme span,
body.dark-theme li,
body.dark-theme label,
body.dark-theme small,
body.dark-theme strong {
    color: var(--dark-text-primary) !important;
}

body.dark-theme a,
body.dark-theme a:visited {
    color: var(--dark-text-primary) !important;
}

body.dark-theme a:hover {
    color: #ffffff !important;
}

body.dark-theme code,
body.dark-theme pre {
    background-color: var(--dark-bg-tertiary);
    color: #f8f8f2;
    border-color: var(--dark-border);
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */
body.dark-theme .header {
    background-color: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

body.dark-theme .navbar,
body.dark-theme .nav-bar {
    background-color: var(--dark-bg-secondary);
}

body.dark-theme .nav-link {
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .nav-link:hover {
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-bg-hover);
}

body.dark-theme .dropdown-menu {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-theme .dropdown-link {
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .dropdown-link:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-text-primary) !important;
}

body.dark-theme .user-dropdown {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-theme .user-link {
    background-color: transparent !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .user-link:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* ===================================
   MAIN CONTENT & CONTAINERS
   =================================== */
body.dark-theme .main-content {
    background-color: var(--dark-bg-primary);
}

body.dark-theme .container {
    background-color: transparent;
}

body.dark-theme .content-section,
body.dark-theme .config-section,
body.dark-theme .example-section,
body.dark-theme .hooks-section,
body.dark-theme .architecture-section {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

/* ===================================
   CARDS & PANELS
   =================================== */
body.dark-theme .panel-card,
body.dark-theme .stat-card,
body.dark-theme .tech-card,
body.dark-theme .feature,
body.dark-theme .tutorial-article,
body.dark-theme .logro-card {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-theme .logro-xp {
    background: rgba(102, 126, 234, 0.2);
    color: #8b9fe8;
    border-color: rgba(102, 126, 234, 0.3);
    opacity: 0.7;
}

body.dark-theme .panel-card:hover,
body.dark-theme .stat-card:hover,
body.dark-theme .tech-card:hover {
    background-color: var(--dark-bg-hover);
}

body.dark-theme .panel-header {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

/* ===================================
   FORMS & INPUTS
   =================================== */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-accent) !important;
}

body.dark-theme .form-container,
body.dark-theme .config-form,
body.dark-theme .contacto-form-container {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-theme label {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

/* ===================================
   BUTTONS
   =================================== */
body.dark-theme .btn-primario,
body.dark-theme .expand-button,
body.dark-theme .example-button {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-light);
}

body.dark-theme .btn-primario:hover,
body.dark-theme .expand-button:hover,
body.dark-theme .example-button:hover {
    background-color: var(--dark-bg-hover);
}

/* ===================================
   TABLES
   =================================== */
body.dark-theme table,
body.dark-theme .data-table {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

body.dark-theme thead,
body.dark-theme th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border);
}

body.dark-theme tbody tr {
    border-color: var(--dark-border);
}

body.dark-theme tbody tr:hover {
    background-color: var(--dark-bg-hover);
}

body.dark-theme td {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border);
}

/* ===================================
   PROFILE & USER SECTIONS
   =================================== */
body.dark-theme .imagen-perfil-section,
body.dark-theme .perfil-header,
body.dark-theme .perfil-nav,
body.dark-theme .perfil-content {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-theme .nav-btn {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
}

body.dark-theme .nav-btn.active,
body.dark-theme .nav-btn:hover {
    background-color: var(--dark-accent);
    color: white;
}

body.dark-theme .mensaje-resumen,
body.dark-theme .tarea-item,
body.dark-theme .actividad-reciente {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
}

/* Widget de nivel y XP en dark theme */
body.dark-theme .nivel-widget {
    background: #2c3e50;
    border-color: #34495e;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

body.dark-theme .nivel-badge {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-theme .nivel-badge:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark-theme .progreso-barra {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .progreso-fill {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 1) 100%);
}

body.dark-theme .logros-footer {
    background-color: #1a1a1a;
    border-color: #333333;
}

/* ===================================
   ALERTS & NOTIFICATIONS
   =================================== */
body.dark-theme .alert {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-theme .upload-area {
    border-color: var(--dark-border);
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
}

body.dark-theme .upload-area:hover {
    border-color: var(--dark-accent);
    background-color: var(--dark-bg-card);
}

/* ===================================
   LEARNING PATH & TUTORIALS
   =================================== */
body.dark-theme .learning-path,
body.dark-theme .path-step,
body.dark-theme .step,
body.dark-theme .next-step {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
}

body.dark-theme .tutorial-article {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

/* Elementos específicos de tutoriales/ejemplos */
body.dark-theme .feature,
body.dark-theme .download-option,
body.dark-theme .os-instructions,
body.dark-theme .env-vars-config,
body.dark-theme .result-item,
body.dark-theme .install-step,
body.dark-theme .explain-item,
body.dark-theme .anatomy-diagram,
body.dark-theme .anatomy-content,
body.dark-theme .resource,
body.dark-theme .architecture-layer {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-theme .code-explanation {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .comparison-item,
body.dark-theme .installation-wizard,
body.dark-theme .interactive-editor,
body.dark-theme .anatomy-explanation {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

body.dark-theme .architecture-diagram {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-theme .wizard-content {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .wizard-navigation {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-theme .os-btn {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}
body.dark-theme .os-btn.active,
body.dark-theme .anatomy-btn.active {
    background-color: #3498db !important;
    color: #fff !important;
}

body.dark-theme .anatomy-btn {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-theme .feature h4,
body.dark-theme .comparison-item h4,
body.dark-theme .step-details h5,
body.dark-theme .resource h4,
body.dark-theme .quiz-question h4 {
    color: var(--dark-text-primary) !important;
}

body.dark-theme .feature p,
body.dark-theme .comparison-item li,
body.dark-theme .step-details p,
body.dark-theme .progress-text,
body.dark-theme .info-item {
    color: var(--dark-text-secondary) !important;
}

/* Quiz */
body.dark-theme .quiz-container {
    background-color: var(--dark-bg-secondary) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

body.dark-theme .progress-bar {
    background-color: var(--dark-bg-card) !important;
}

body.dark-theme .option label {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-theme .option input:checked + label {
    background-color: #1d3a5e !important;
    border-color: #3498db !important;
}

body.dark-theme .quiz-feedback {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .correct {
    background-color: #1a3a2a !important;
    border-color: #27ae60 !important;
    color: #2ecc71 !important;
}
body.dark-theme .incorrect {
    background-color: #3a1a1a !important;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}
body.dark-theme .warning {
    background-color: #3a2e00 !important;
    border-color: #f39c12 !important;
    color: #f39c12 !important;
}

body.dark-theme .article-title,
body.dark-theme .article-subtitle,
body.dark-theme .content-section h2 {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border);
}

body.dark-theme .problems-grid,
body.dark-theme .steps-grid {
    background-color: var(--dark-bg-secondary);
}

body.dark-theme .problem,
body.dark-theme .shortcut-item,
body.dark-theme .resource-item,
body.dark-theme .requirement-item {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-theme .lessons-grid {
    background-color: transparent;
}

body.dark-theme .lesson-card {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-theme .lesson-card::before {
    background: linear-gradient(90deg, #4da3ff, #2ecc71);
}

body.dark-theme .lesson-card:hover {
    background-color: var(--dark-bg-hover);
    border-color: var(--dark-border-light);
}

body.dark-theme .lesson-button {
    background-color: transparent;
}

body.dark-theme .lesson-button:hover {
    background-color: var(--dark-bg-tertiary);
}

body.dark-theme .lesson-card h3,
body.dark-theme .lesson-card p,
body.dark-theme .lesson-duration {
    color: var(--dark-text-primary) !important;
}

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

body.dark-theme .library,
body.dark-theme .code-example,
body.dark-theme .live-example,
body.dark-theme .explanation-box,
body.dark-theme .demo-result,
body.dark-theme .tip {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

body.dark-theme .function-type,
body.dark-theme .estado-archivo {
    background-color: var(--dark-bg-card);
    color: var(--dark-text-secondary);
}

body.dark-theme .expandable-content-inner {
    background-color: var(--dark-bg-tertiary);
}

/* ===================================
   PANEL DE ESTADÍSTICAS
   =================================== */
body.dark-theme .grafico-card,
body.dark-theme .tabla-card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-theme .grafico-header,
body.dark-theme .tabla-header {
    color: var(--dark-text-primary);
}

body.dark-theme .grafico-subtitle,
body.dark-theme .tabla-subtitle {
    color: var(--dark-text-muted);
}

body.dark-theme .no-data {
    color: var(--dark-text-muted);
}

/* ===================================
   LOGROS (ACHIEVEMENTS)
   =================================== */
body.dark-theme .logros-shelf {
    background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
    border: 1px solid var(--dark-border);
}

body.dark-theme .logro-bloqueado .logro-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* ===================================
   FOOTER
   =================================== */
body.dark-theme .footer {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-top: 1px solid var(--dark-border);
}

body.dark-theme .footer h5 {
    color: var(--dark-text-primary) !important;
}

body.dark-theme .footer p {
    color: var(--dark-text-secondary) !important;
}

body.dark-theme .footer a {
    color: var(--dark-accent) !important;
}

body.dark-theme .footer a:hover {
    color: var(--dark-accent-hover) !important;
}

body.dark-theme .footer .btn-discord-footer,
body.dark-theme .footer .btn-instagram-footer,
body.dark-theme .footer .btn-threads-footer {
    color: #ffffff !important;
}

body.dark-theme .footer .btn-discord-footer:hover,
body.dark-theme .footer .btn-instagram-footer:hover,
body.dark-theme .footer .btn-threads-footer:hover {
    color: #ffffff !important;
}

/* ===================================
   SCROLLBARS (para navegadores compatibles)
   =================================== */
body.dark-theme ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-theme ::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-hover);
    border-radius: 6px;
}

body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-border-light);
}

/* ===================================
   THEME TOGGLE BUTTON
   =================================== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.theme-toggle-btn i {
    font-size: 16px;
}

/* ===================================
   MODAL DE AUTENTICACIÓN
   =================================== */
body.dark-theme .auth-modal-content {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-theme .auth-modal-header {
    background-color: var(--dark-bg-tertiary);
    border-bottom-color: var(--dark-border);
}

body.dark-theme .close-modal {
    color: var(--dark-text-primary);
}

body.dark-theme .close-modal:hover {
    color: var(--dark-accent);
}

/* ===================================
   AJUSTES ESPECÍFICOS POR PÁGINA
   =================================== */

/* Contacto */
body.dark-theme .contacto-info {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

/* Lecciones */
body.dark-theme .leccion-card {
    background-color: var(--dark-bg-card);
    border-color: var(--dark-border);
}

body.dark-theme .leccion-card:hover {
    background-color: var(--dark-bg-hover);
}

/* Videos */
body.dark-theme .video-container,
body.dark-theme iframe {
    border-color: var(--dark-border);
}

/* ===================================
   UTILIDADES
   =================================== */
body.dark-theme .border,
body.dark-theme .border-top,
body.dark-theme .border-bottom,
body.dark-theme .border-left,
body.dark-theme .border-right {
    border-color: var(--dark-border) !important;
}

body.dark-theme .bg-light {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .bg-white {
    background-color: var(--dark-bg-card) !important;
}

body.dark-theme .text-muted {
    color: var(--dark-text-muted) !important;
}