/* ========================================================
   MODO OSCURO - EDUCORP SYSTEM
   ======================================================== */

body.dark-mode {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --text-primary: #f5f5f5;
    --text-secondary: #c0c0c0;
    --border-light: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
}

/* Fondo oscuro */
body.dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #0f0f0f 50%, #1a1a1a 75%, #0a0a0a 100%);
}

/* Navegación */
body.dark-mode .neon-nav {
    background: #1a1a1a;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .neon-nav a {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .neon-nav a:hover {
    background: rgba(212, 175, 55, 0.15);
}

/* Tarjetas */
body.dark-mode .info-card,
body.dark-mode .login-card,
body.dark-mode .contact-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Tablas */
body.dark-mode table {
    background: #1a1a1a;
}

body.dark-mode th {
    background: #2a2a2a !important;
}

body.dark-mode td {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Modales */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Chat */
body.dark-mode .chat-container {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .bot-message {
    background: rgba(59, 130, 246, 0.2);
}

body.dark-mode .user-message {
    background: rgba(212, 175, 55, 0.2);
}

/* ========================================================
   CORRECCIONES DE COLORES ESPECÍFICOS EN MODO OSCURO
   ======================================================== */

/* Corregir color #666 (gris oscuro) a gris claro */
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
    color: #b0b0b0 !important;
}

/* Corregir color verde SENA #39a900 a versión más clara */
body.dark-mode [style*="color: #39a900"],
body.dark-mode [style*="color:#39a900"] {
    color: #4ade80 !important;
}

/* Corregir colores de roles que son muy oscuros */
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"] {
    color: #9ca3af !important;
}

/* Mejorar contraste de textos secundarios */
body.dark-mode [style*="color: var(--text-secondary)"] {
    color: #c0c0c0 !important;
}

/* Corregir fondos blancos que se ven mal */
body.dark-mode [style*="background: rgba(255, 255, 255, 0.9)"],
body.dark-mode [style*="background:rgba(255, 255, 255, 0.9)"] {
    background: rgba(30, 30, 30, 0.9) !important;
}

/* Mejorar contraste de códigos y textos pequeños */
body.dark-mode code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fbbf24 !important;
}

/* Mejorar strong en modo oscuro */
body.dark-mode strong {
    color: #f5f5f5 !important;
}

/* Corregir colores de badges de estado */
body.dark-mode .status-badge.pendiente {
    background: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

body.dark-mode .status-badge.revision {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

body.dark-mode .status-badge.resuelto {
    background: rgba(16, 185, 129, 0.3) !important;
    color: #4ade80 !important;
}

/* Mejorar contraste de descripciones */
body.dark-mode .report-description,
body.dark-mode .news-card-description {
    color: #d1d5db !important;
}

/* Mejorar meta información */
body.dark-mode .report-meta-item,
body.dark-mode .news-card-date,
body.dark-mode .report-radicado {
    color: #9ca3af !important;
}

/* Mejorar botones de acción */
body.dark-mode .report-action-btn.view {
    background: rgba(6, 182, 212, 0.3) !important;
    color: #22d3ee !important;
}

body.dark-mode .report-action-btn.status {
    background: rgba(139, 92, 246, 0.3) !important;
    color: #a78bfa !important;
}

body.dark-mode .report-action-btn.delete {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

body.dark-mode .news-action-btn.edit {
    background: rgba(6, 182, 212, 0.3) !important;
    color: #22d3ee !important;
}

body.dark-mode .news-action-btn.delete {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

/* Mejorar indicador de imagen */
body.dark-mode .has-image-indicator {
    background: rgba(6, 182, 212, 0.3) !important;
    color: #22d3ee !important;
}

/* Mejorar secciones de detalles */
body.dark-mode .report-detail-section h4 {
    color: #60a5fa !important;
}

body.dark-mode .report-detail-section p {
    color: #d1d5db !important;
}

/* Mejorar opciones de estado */
body.dark-mode .status-option.pendiente {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

body.dark-mode .status-option.revision {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.dark-mode .status-option.resuelto {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #4ade80 !important;
}

/* Mejorar filtros */
body.dark-mode .filter-btn,
body.dark-mode .status-filter-btn {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #d1d5db !important;
}

body.dark-mode .filter-btn:hover,
body.dark-mode .status-filter-btn:hover {
    background: rgba(139, 92, 246, 0.3) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
}

body.dark-mode .filter-btn.active,
body.dark-mode .status-filter-btn.active {
    color: white !important;
}

/* Mejorar iconos vacíos */
body.dark-mode .empty-icon {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Botón de toggle */
.dark-mode-toggle {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #d4af37, #ffd700) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    transition: all 0.3s ease !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dark-mode-toggle:hover {
    transform: scale(1.1) rotate(15deg) !important;
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6) !important;
}

body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .dark-mode-toggle:hover {
    box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6) !important;
}

/* Animación de transición */
body {
    transition: background 0.3s ease, color 0.3s ease;
}

* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 1.2rem !important;
    }
}