/*
 * Ajustes de Modo Oscuro
 * ----------------------
 * AdminLTE 3 solo oscurece su propia interfaz (tarjetas, menú, barra
 * superior, etc). Varios complementos de terceros que usa esta app
 * (SweetAlert2, Select2, selector de fecha, selector de color, editor de
 * texto Summernote, Dropzone y el buscador/paginación de DataTables)
 * dibujan sus propias ventanas y menús con fondo blanco sin importar el
 * modo del body, así que se ven "rotas" en modo oscuro. Este archivo
 * corrige eso.
 *
 * Todas las reglas están dentro de "body.dark-mode" a propósito: si el
 * modo oscuro está apagado, ninguna de estas reglas aplica y el resto de
 * la app se ve exactamente igual que antes.
 *
 * Se incluye en todas las páginas desde layouts/header.blade.php (se
 * inyecta por JavaScript para no tener que editar cada vista una por
 * una), así que cualquier ajuste futuro de modo oscuro solo necesita
 * tocarse aquí.
 */

body.dark-mode {
    --app-dark-bg: #343a40;
    --app-dark-bg-2: #3f474e;
    --app-dark-border: #4b545c;
    --app-dark-text: #c2c7d0;
    --app-dark-text-strong: #ffffff;
    --app-dark-text-muted: #868e96;
}

/* =========================================================
   SweetAlert2 (confirmaciones, éxito, error, formularios)
   ========================================================= */
body.dark-mode .swal2-popup {
    background: var(--app-dark-bg);
    color: var(--app-dark-text);
}

body.dark-mode .swal2-title {
    color: var(--app-dark-text-strong);
}

body.dark-mode .swal2-html-container,
body.dark-mode #swal2-html-container {
    color: var(--app-dark-text);
}

body.dark-mode .swal2-close {
    color: var(--app-dark-text);
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea,
body.dark-mode .swal2-select,
body.dark-mode .swal2-file {
    background: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
    border: 1px solid var(--app-dark-border);
}

body.dark-mode .swal2-validation-message {
    background: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
}

/* =========================================================
   Select2 (listas desplegables de búsqueda)
   ========================================================= */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--app-dark-bg-2);
    border-color: var(--app-dark-border);
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--app-dark-text-strong);
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--app-dark-text-muted);
}

body.dark-mode .select2-dropdown {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
    border-color: var(--app-dark-border);
}

body.dark-mode .select2-results__option {
    color: var(--app-dark-text);
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0d6efd;
    color: #fff;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
    color: var(--app-dark-text-strong);
}

/* =========================================================
   Selector de fecha (Tempusdominus) y rango de fechas
   ========================================================= */
body.dark-mode .bootstrap-datetimepicker-widget {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text);
}

body.dark-mode .bootstrap-datetimepicker-widget table td,
body.dark-mode .bootstrap-datetimepicker-widget table th {
    color: var(--app-dark-text);
}

body.dark-mode .bootstrap-datetimepicker-widget table td.day:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.hour:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.minute:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.second:hover {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
}

body.dark-mode .bootstrap-datetimepicker-widget table td.old,
body.dark-mode .bootstrap-datetimepicker-widget table td.new {
    color: var(--app-dark-text-muted);
}

body.dark-mode .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #0d6efd;
}

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

body.dark-mode .daterangepicker .calendar-table {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .daterangepicker td,
body.dark-mode .daterangepicker th {
    color: var(--app-dark-text);
}

body.dark-mode .daterangepicker td.off,
body.dark-mode .daterangepicker td.off.in-range,
body.dark-mode .daterangepicker td.off.start-date,
body.dark-mode .daterangepicker td.off.end-date {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text-muted);
}

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

body.dark-mode .daterangepicker .ranges li:hover,
body.dark-mode .daterangepicker .ranges li.active {
    background-color: #0d6efd;
    color: #fff;
}

body.dark-mode .daterangepicker select.monthselect,
body.dark-mode .daterangepicker select.yearselect,
body.dark-mode .daterangepicker select.hourselect,
body.dark-mode .daterangepicker select.minuteselect,
body.dark-mode .daterangepicker select.secondselect,
body.dark-mode .daterangepicker select.ampmselect {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
    border-color: var(--app-dark-border);
}

body.dark-mode .daterangepicker .drp-buttons {
    border-top-color: var(--app-dark-border);
}

/* =========================================================
   Selector de color
   ========================================================= */
body.dark-mode .colorpicker {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

/* =========================================================
   Editor de texto (Summernote)
   ========================================================= */
body.dark-mode .note-editor.note-frame {
    background-color: var(--app-dark-bg-2);
    border-color: var(--app-dark-border);
}

body.dark-mode .note-editor.note-frame .note-toolbar,
body.dark-mode .note-editor.note-airframe .note-toolbar {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .note-editor.note-frame .note-editable,
body.dark-mode .note-editor.note-airframe .note-editable {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
}

body.dark-mode .note-editor.note-frame .note-statusbar {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .note-editor .note-btn {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text);
    border-color: var(--app-dark-border);
}

body.dark-mode .note-editor .note-btn:hover {
    background-color: var(--app-dark-border);
    color: var(--app-dark-text-strong);
}

body.dark-mode .note-editor .note-dropdown-menu {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text);
    border-color: var(--app-dark-border);
}

body.dark-mode .note-editor .note-dropdown-menu a {
    color: var(--app-dark-text);
}

/* =========================================================
   Dropzone (subir archivos)
   ========================================================= */
body.dark-mode .dropzone {
    background-color: var(--app-dark-bg-2);
    border-color: var(--app-dark-border);
    color: var(--app-dark-text);
}

/* =========================================================
   DataTables: buscador, info, longitud, paginación y tabla
   ========================================================= */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing {
    color: var(--app-dark-text);
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: var(--app-dark-bg-2);
    border-color: var(--app-dark-border);
    color: var(--app-dark-text-strong);
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--app-dark-text) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--app-dark-bg-2) !important;
    border-color: var(--app-dark-border) !important;
    color: var(--app-dark-text-strong) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--app-dark-text-muted) !important;
    background: transparent !important;
}

body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
    color: var(--app-dark-text-strong);
    border-bottom-color: var(--app-dark-border);
}

body.dark-mode table.dataTable tbody th,
body.dark-mode table.dataTable tbody td {
    color: var(--app-dark-text);
}

body.dark-mode table.dataTable.table-bordered,
body.dark-mode table.dataTable.table-bordered th,
body.dark-mode table.dataTable.table-bordered td {
    border-color: var(--app-dark-border);
}

body.dark-mode table.dataTable.table-hover tbody tr:hover,
body.dark-mode table.dataTable.stripe tbody tr.odd,
body.dark-mode table.dataTable.display tbody tr.odd {
    background-color: var(--app-dark-bg-2);
}

/* Menú "Visibilidad de columnas" y recuadro de botones de exportar
   (Copiar/CSV/Excel/PDF/Imprimir), que DataTables agrega directamente
   al body. */
body.dark-mode .dt-button-collection {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .dt-button-collection .dt-button {
    background-color: transparent;
    color: var(--app-dark-text);
}

body.dark-mode .dt-button-collection .dt-button:hover {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
}

/* =========================================================
   Ajustes propios de sistema_gestion_v1
   ========================================================= */

/* Controles nativos (calendario de input date, flechas de select,
   barras de scroll) en versión oscura: el ícono del calendario era negro. */
body.dark-mode {
    color-scheme: dark;
}

/* Textos secundarios: el gris de Bootstrap (#6c757d) casi no se ve sobre
   el fondo oscuro (etiquetas de los filtros, vistas rápidas, ayudas). */
body.dark-mode .text-muted {
    color: #adb5bd !important;
}

body.dark-mode .form-text {
    color: #adb5bd;
}

/* "X" de cerrar en los modales y alertas (era negra). */
body.dark-mode .close,
body.dark-mode .close:hover {
    color: var(--app-dark-text-strong);
    text-shadow: none;
}

/* Modales: encabezado y pie con el mismo tono que el cuerpo. */
body.dark-mode .modal-content {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text);
}

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

/* Texto con formato guardado desde Summernote (sobre todo lo pegado desde
   Word o correos): trae color negro y fondo blanco escritos en línea, y en
   modo oscuro queda invisible. Se fuerza a los colores del tema solo en
   las zonas donde se muestra ese contenido. */
body.dark-mode .note-editable [style*="color"],
body.dark-mode .note-editable [style*="background"],
body.dark-mode .note-editable font[color],
body.dark-mode table.dataTable td [style*="color"],
body.dark-mode table.dataTable td [style*="background"],
body.dark-mode table.dataTable td font[color],
body.dark-mode .modal-body .card-body [style*="color"],
body.dark-mode .modal-body .card-body [style*="background"],
body.dark-mode .modal-body .card-body font[color],
body.dark-mode .dtr-details [style*="color"],
body.dark-mode .dtr-details [style*="background"] {
    color: inherit !important;
    background-color: transparent !important;
}

/* Filas desplegables de DataTables Responsive (columnas ocultas en
   pantallas pequeñas). */
body.dark-mode table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--app-dark-border);
}

body.dark-mode table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--app-dark-text-strong);
}

/* Select2 con el tema "bootstrap4" (formularios de Correcciones). */
body.dark-mode .select2-container--bootstrap4 .select2-selection {
    background-color: var(--app-dark-bg-2);
    border-color: var(--app-dark-border);
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--app-dark-text-strong);
}

body.dark-mode .select2-container--bootstrap4 .select2-selection__placeholder {
    color: var(--app-dark-text-muted);
}

body.dark-mode .select2-container--bootstrap4 .select2-dropdown {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option {
    color: var(--app-dark-text);
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted,
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: #0d6efd;
    color: #fff;
}

body.dark-mode .select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background-color: var(--app-dark-bg-2);
    color: var(--app-dark-text-strong);
}

/* Cuadros de Summernote (insertar enlace, imagen) y su contenido. */
body.dark-mode .note-modal .modal-content {
    background-color: var(--app-dark-bg);
    color: var(--app-dark-text);
}

body.dark-mode .note-modal .note-form-label,
body.dark-mode .note-modal .checkbox label {
    color: var(--app-dark-text);
}

body.dark-mode .note-editor .note-placeholder {
    color: var(--app-dark-text-muted);
}

/* Enlaces: el azul apagado de AdminLTE (#3f6791) se ve mal sobre el
   fondo oscuro. Los enlaces de texto pasan a blanco suave, sin subrayado,
   y al pasar el mouse a blanco. No afecta botones, menú lateral, pestañas,
   paginación ni el menú desplegable, que tienen su propio estilo abajo. */
body.dark-mode a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.brand-link):not(.small-box-footer):not(.badge):not(.close):not([class*="paginate_button"]) {
    color: #dee2e6;
    text-decoration: none;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.brand-link):not(.small-box-footer):not(.badge):not(.close):not([class*="paginate_button"]):hover {
    color: #ffffff;
    text-decoration: none;
}

/* Breadcrumb (Dashboard / Hallazgos / ...): enlaces en blanco, página
   actual en gris claro y separador "/" visible. */
body.dark-mode .breadcrumb-item a,
body.dark-mode .breadcrumb-item a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #adb5bd;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* Nombre del sistema (logo del menú lateral) y nombre del usuario. */
body.dark-mode .brand-link,
body.dark-mode .brand-link .brand-text,
body.dark-mode .brand-link:hover,
body.dark-mode .user-panel .info a,
body.dark-mode .user-panel .info a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Menú desplegable de la sesión (Mi Perfil / Cerrar Sesión). */
body.dark-mode .dropdown-menu {
    background-color: var(--app-dark-bg);
    border-color: var(--app-dark-border);
}

body.dark-mode .dropdown-menu .dropdown-header {
    color: #dee2e6;
}

body.dark-mode .dropdown-item {
    color: #dee2e6;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    color: #ffffff;
    background-color: var(--app-dark-bg-2);
}

body.dark-mode .dropdown-item.bg-danger,
body.dark-mode .dropdown-item.bg-danger:hover {
    color: #ffffff;
}

body.dark-mode .dropdown-divider {
    border-top-color: var(--app-dark-border);
}

/* Campo de archivo y "Cargando registros..." de las tablas. */
body.dark-mode .form-control-file {
    color: var(--app-dark-text);
}

/* Alertas de errores de formulario: texto legible sobre el rojo. */
body.dark-mode .alert-danger {
    color: #fff;
}

/* =====================================================================
   PRUEBA: azul del modo claro (#007bff) en modo oscuro.
   AdminLTE cambia el azul a uno apagado (#3f6791) en modo oscuro; aquí se
   devuelve el azul normal a botones, menú lateral, paginación, tarjetas
   azules, badges y casillas. Para volver al azul apagado, borra este bloque.
   ===================================================================== */
body.dark-mode .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
body.dark-mode .btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
    color: #fff;
}
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary.focus {
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}
body.dark-mode .btn-primary:not(:disabled):not(.disabled):active,
body.dark-mode .btn-primary:not(:disabled):not(.disabled).active,
body.dark-mode .show > .btn-primary.dropdown-toggle {
    background-color: #0062cc;
    border-color: #005cbf;
}
body.dark-mode .btn-primary.disabled,
body.dark-mode .btn-primary:disabled {
    background-color: #007bff;
    border-color: #007bff;
}
body.dark-mode .btn-outline-primary {
    color: #3f9cff;
    border-color: #007bff;
}
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* Menú lateral: la opción activa se define en layouts/header.blade.php (gris translúcido). */

/* Paginación, pestañas y opciones activas */
body.dark-mode .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
body.dark-mode .nav-pills:not(.nav-sidebar) .nav-link.active,
body.dark-mode .dropdown-item.active:not(.menu-usuario-opcion):not(.menu-tema-opcion) {
    background-color: #007bff;
    color: #fff;
}

/* Tarjetas, fondos y badges azules */
body.dark-mode .card-primary:not(.card-outline) > .card-header {
    background-color: #007bff;
}
body.dark-mode .card-primary.card-outline {
    border-top-color: #007bff;
}
body.dark-mode .bg-primary,
body.dark-mode .badge-primary {
    background-color: #007bff !important;
    color: #fff !important;
}

/* Casillas, radios y switches marcados */
body.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #007bff;
    border-color: #007bff;
}