body.dark-mode {
                background: #181a1b !important;
                color: #e0e0e0 !important;
            }

            body.dark-mode .card {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode .form-control,
            body.dark-mode .form-check-input {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode .btn-primary {
                background: #0d6efd !important;
                border-color: #0d6efd !important;
            }

            body.dark-mode .btn-outline-dark {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode .select2-container--default .select2-selection--single {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode .select2-dropdown {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode #copyright {
                color: #888 !important;
            }

            /* Transición suave de colores */
            body,
            .card,
            .form-control,
            .form-check-input,
            .btn,
            .select2-container--default .select2-selection--single {
                transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
            }

            /* Animación del ícono */
            #darkModeBtn i {
                transition: transform 0.5s ease;
            }

            #darkModeBtn.rotate i {
                transform: rotate(360deg);
            }

            /* -------------------- */
            /* 🔥 Estilos del modal */
            /* -------------------- */
            body.dark-mode .modal-content {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border: 1px solid #444 !important;
            }

            body.dark-mode .modal-header,
            body.dark-mode .modal-footer {
                border-color: #444 !important;
            }

            body.dark-mode .modal-title {
                color: #e0e0e0 !important;
            }

            body.dark-mode .btn-close {
                filter: invert(1) grayscale(100%) brightness(200%);
            }

            body.dark-mode .boton_mesa {
                background-color: #ffc107 !important;
                color: #212529 !important;
                border-color: #ffc107 !important;
            }

            body.dark-mode .form-check-input:checked {
                background-color: #0d6efd !important;
                border-color: #0d6efd !important;
            }

            body.dark-mode .form-check-input:focus {
                border-color: #0d6efd !important;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
            }

            .form-check-input:checked {
                background-color: #0d6efd !important;
                border-color: #0d6efd !important;
            }

            body.dark-mode .form-control:focus {
                border-color: #0d6efd !important;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
            }

            .table {
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                border-collapse: separate;
                border-spacing: 0;
            }

            .table th {
                background-color: #f8f9fa;
                color: #212529;
                font-weight: 600;
                border-bottom: 2px solid #dee2e6;
                padding: 12px 16px;
                text-align: left;
            }

            .table td {
                padding: 10px 16px;
                border-bottom: 1px solid #dee2e6;
            }

            .table-hover tbody tr:hover {
                background-color: #f1f3f5;
                transition: background 0.2s;
            }

            .table-striped tbody tr:nth-of-type(odd) {
                background-color: #f8f9fa;
            }

            .table-striped tbody tr:nth-of-type(even) {
                background-color: #e9ecef;
            }

            body.dark-mode .table {
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                border-collapse: separate;
                border-spacing: 0;
            }

            body.dark-mode .table th {
                background-color: #23272b;
                color: #e2e2e2;
                font-weight: 600;
                border-bottom: 2px solid #333;
                padding: 12px 16px;
                text-align: left;
            }

            body.dark-mode .table td {
                padding: 10px 16px;
                border-bottom: 1px solid #222;
            }

            body.dark-mode .table-hover tbody tr:hover {
                background-color: #222831;
                transition: background 0.2s;
            }

            body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
                background-color: #181a1b;
            }

            body.dark-mode .table-striped tbody tr:nth-of-type(even) {
                background-color: #23272b;
            }

            body.dark-mode .table {
                color: #f1f1f1;
                background-color: #1e1e1e;
            }

            body.dark-mode .table th,
            body.dark-mode .table td {
                background-color: #333;
                color: #f1f1f1;
            }

            body.dark-mode .table-hover tbody tr:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            body.dark-mode .form-check-input {
                background: #23272b !important;
                color: #e0e0e0 !important;
                border-color: #444 !important;
            }

            body.dark-mode .form-check-input:checked {
                background-color: #0d6efd !important;
                border-color: #0d6efd !important;
            }

            /* Estilos para select en dark mode */
            /* Dark mode para select con valor seleccionado */
            body.dark-mode select.form-control,
            body.dark-mode select.form-select {
                background-color: #23272b !important;
                color: #e0e0e0 !important;
                /* color del texto seleccionado */
                border: 1px solid #444 !important;
            }

            /* Opción seleccionada */
            body.dark-mode select.form-control option,
            body.dark-mode select.form-select option {
                background-color: #23272b !important;
                color: #e0e0e0 !important;
            }

            /* Placeholder */
            body.dark-mode select.form-control option[value=""],
            body.dark-mode select.form-select option[value=""] {
                color: #888 !important;
            }

            /* Cuando el select está enfocado */
            body.dark-mode select.form-control:focus,
            body.dark-mode select.form-select:focus {
                border-color: #0d6efd !important;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
            }