/* ============================================
   DARK-MODE.CSS - Tema Oscuro
   ============================================ */

body.dark-mode {
    /* Colores de fondo oscuros */
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-sidebar: #0f172a;
    --bg-hover: #334155;
    /* Colores de texto oscuros */
    --text-dark: #f1f5f9;
    --text-medium: #cbd5e1;
    --text-light: #94a3b8;
    --text-muted: #64748b;
    /* Bordes oscuros */
    --border-color: #334155;
    /* Sombras oscuras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ========== Body y Background ========== */

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

    /* ========== Cards ========== */
    body.dark-mode .card {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }

    body.dark-mode .card-header {
        background-color: var(--bg-card);
        border-bottom-color: var(--border-color);
        color: var(--text-dark);
    }

    body.dark-mode .card-footer {
        background-color: var(--bg-hover);
        border-top-color: var(--border-color);
    }

    /* ========== Formularios ========== */
    body.dark-mode .form-control {
        background-color: #334155;
        border-color: var(--border-color);
        color: var(--text-dark);
    }

        body.dark-mode .form-control:focus {
            background-color: #334155;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        body.dark-mode .form-control::placeholder {
            color: var(--text-muted);
        }

    body.dark-mode .form-label {
        color: var(--text-medium);
    }

    /* ========== Tablas ========== */
    body.dark-mode .table {
        background-color: var(--bg-card);
        color: var(--text-dark);
    }

        body.dark-mode .table thead {
            background-color: var(--bg-hover);
        }

        body.dark-mode .table th {
            color: var(--text-medium);
            border-bottom-color: var(--border-color);
        }

        body.dark-mode .table td {
            color: var(--text-dark);
            border-bottom-color: var(--border-color);
        }

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

    /* ========== Botones ========== */
    body.dark-mode .btn-light {
        background-color: #334155;
        color: var(--text-dark);
        border-color: var(--border-color);
    }

        body.dark-mode .btn-light:hover:not(:disabled) {
            background-color: var(--bg-hover);
        }

    /* ========== Header ========== */
    body.dark-mode .top-header {
        background-color: var(--bg-card);
        border-bottom-color: var(--border-color);
    }

    /* ========== Sidebar ========== */
    body.dark-mode .sidebar {
        background: linear-gradient(180deg, var(--bg-sidebar) 0%, #020617 100%);
        border-right-color: rgba(255, 255, 255, 0.1);
    }

    /* ========== Alerts ========== */
    body.dark-mode .alert {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        color: var(--text-dark);
    }

    body.dark-mode .alert-info {
        background-color: rgba(76, 201, 240, 0.1);
        border-color: rgba(76, 201, 240, 0.3);
        color: var(--info-color);
    }

    body.dark-mode .alert-success {
        background-color: rgba(6, 214, 160, 0.1);
        border-color: rgba(6, 214, 160, 0.3);
        color: var(--success-color);
    }

    body.dark-mode .alert-warning {
        background-color: rgba(255, 193, 7, 0.1);
        border-color: rgba(255, 193, 7, 0.3);
        color: var(--warning-color);
    }

    body.dark-mode .alert-danger {
        background-color: rgba(239, 71, 111, 0.1);
        border-color: rgba(239, 71, 111, 0.3);
        color: var(--danger-color);
    }

    /* ========== List Groups ========== */
    body.dark-mode .list-group-item {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        color: var(--text-dark);
    }

        body.dark-mode .list-group-item:hover {
            background-color: var(--bg-hover);
        }

    /* ========== Dropdowns ========== */
    body.dark-mode .dropdown-menu {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }

    body.dark-mode .dropdown-item {
        color: var(--text-dark);
    }

        body.dark-mode .dropdown-item:hover {
            background-color: var(--bg-hover);
        }

    /* ========== Modals ========== */
    body.dark-mode .modal-content {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }

    body.dark-mode .modal-header {
        border-bottom-color: var(--border-color);
    }

    body.dark-mode .modal-footer {
        border-top-color: var(--border-color);
    }

    /* ========== Pagination ========== */
    body.dark-mode .pagination .page-link {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        color: var(--text-dark);
    }

        body.dark-mode .pagination .page-link:hover {
            background-color: var(--bg-hover);
            border-color: var(--border-color);
        }

    body.dark-mode .pagination .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* ========== Progress Bars ========== */
    body.dark-mode .progress {
        background-color: var(--bg-hover);
    }

    /* ========== Breadcrumbs ========== */
    body.dark-mode .breadcrumb {
        background-color: transparent;
    }

    body.dark-mode .breadcrumb-item {
        color: var(--text-medium);
    }

        body.dark-mode .breadcrumb-item.active {
            color: var(--text-dark);
        }


/*========== nuevo fix ========*/

    /* Header completo */
    body.dark-mode .top-header {
        background-color: #1e293b !important;
        border-bottom-color: #334155 !important;
    }

        /* Todos los iconos del header */
        body.dark-mode .top-header i,
        body.dark-mode .top-header .bi,
        body.dark-mode .navbar i,
        body.dark-mode .navbar .bi {
            color: #4361ee !important;
        }

  
    /* Footer */
    body.dark-mode .footer {
        background-color: #1e293b !important;
        border-top-color: #334155 !important;
        color: #94a3b8 !important;
    }

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