/*=============================================
MODO OSCURO — COMPLEMENTO ESPECÍFICO DE ZIREX
=============================================
Este archivo NO reemplaza a dark-theme.css (que ya venía incluido con la
plantilla base y cubre sidebar, header, cards, tablas, formularios,
dropdowns, select2, modales, etc.). Aquí solo se añade lo que ese archivo
original no cubría: SweetAlert2, DataTables, algunas utilidades de
texto/fondo usadas directamente en las vistas de ZIREX, el panel de
alertas de stock, gráficos y el propio botón de cambio de tema.

Todo está bajo el selector "html.dark-theme", igual que el archivo base,
así que en modo claro (sin esa clase) nada de este archivo tiene efecto.
Es puramente visual: no toca datos, cálculos, consultas ni lógica.
=============================================*/

/* Controles nativos del navegador (scrollbar, selects, etc.) en Chrome/Edge */
html.dark-theme {
    color-scheme: dark;
}

/*=============================================
UTILIDADES DE TEXTO/FONDO USADAS DIRECTAMENTE EN LAS VISTAS
(la plantilla base no las cubría)
=============================================*/
html.dark-theme .text-dark {
    color: #e4e5e6 !important;
}
html.dark-theme .bg-white {
    background-color: #171717 !important;
}
html.dark-theme .bg-light {
    background-color: rgb(255 255 255 / 8%) !important;
}

/*=============================================
SWEETALERT2 — usado en confirmaciones y alertas de TODOS los módulos
=============================================*/
html.dark-theme .swal2-popup {
    background-color: #1e1e1e !important;
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-title,
html.dark-theme .swal2-html-container,
html.dark-theme .swal2-content {
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-close {
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-input,
html.dark-theme .swal2-textarea,
html.dark-theme .swal2-select {
    background-color: #1e1e1e !important;
    color: #e4e5e6 !important;
    border: 1px solid rgb(255 255 255 / 34%) !important;
}
html.dark-theme .swal2-icon.swal2-question {
    border-color: #9ba7b2;
    color: #9ba7b2;
}
html.dark-theme .swal2-timer-progress-bar {
    background: rgb(255 255 255 / 40%) !important;
}

/*=============================================
DATATABLES — red de seguridad además de lo que .form-control/.form-select
ya heredan del archivo base (búsqueda, longitud, info, paginación, botones)
=============================================*/
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #e4e5e6;
}
html.dark-theme table.dataTable > tbody > tr {
    background-color: transparent;
}
html.dark-theme div.dt-buttons .btn {
    color: #e4e5e6;
}

/*=============================================
PANEL DE ALERTAS DE STOCK EN EL HEADER (fondo con gradiente en línea)
=============================================*/
html.dark-theme #dropdownStockAlerts .msg-header {
    background: linear-gradient(135deg, #1e1e1e, #171717) !important;
}
html.dark-theme #dropdownStockAlerts .msg-footer {
    background-color: #1e1e1e !important;
}

/*=============================================
GRÁFICOS (ApexCharts) — solo texto/tooltip/menú, no los colores de las series
=============================================*/
html.dark-theme .apexcharts-tooltip {
    background: #1e1e1e !important;
    color: #e4e5e6 !important;
    border: 1px solid rgb(255 255 255 / 20%) !important;
}
html.dark-theme .apexcharts-tooltip-title {
    background: #171717 !important;
    color: #e4e5e6 !important;
    border-bottom: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .apexcharts-menu {
    background: #1e1e1e !important;
    border: 1px solid rgb(255 255 255 / 20%) !important;
    color: #e4e5e6 !important;
}
html.dark-theme .apexcharts-menu-item:hover {
    background: rgb(255 255 255 / 10%) !important;
}
html.dark-theme .apexcharts-gridline {
    stroke: rgb(255 255 255 / 8%);
}
html.dark-theme .apexcharts-legend-text {
    color: #c0c8d1 !important;
}

/*=============================================
BOTÓN DE CAMBIO DE TEMA (mismo estilo que el botón de información del
header; en modo claro conserva el color azul original, en modo oscuro
cambia a un tono cálido para diferenciarse)
=============================================*/
html.dark-theme #btnToggleTema {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffc107 !important;
}
html.dark-theme #btnToggleTema:hover {
    background: rgba(255, 193, 7, 0.2) !important;
}

/*=============================================
SELECT2 DE #filtroCategoriaPOS (POS de Ventas) — dark-theme.css apunta a
".select2-container--bootstrap4", pero este proyecto usa theme:'bootstrap-5',
por lo que esas reglas nunca aplican y el texto queda oscuro sobre fondo
oscuro. Acotado por ID (adjacent sibling / id de resultados que Select2
genera a partir de "filtroCategoriaPOS") para NO afectar otros Select2 del
sistema (proveedores en Compras, clientes en Cotizaciones, etc.)
=============================================*/
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaPOS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaPOS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroCategoriaPOS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroCategoriaPOS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroCategoriaCompra (Nueva Compra) — mismo problema y mismo
parche que #filtroCategoriaPOS de arriba: dark-theme.css apunta a
".select2-container--bootstrap4", pero este proyecto usa theme:'bootstrap-5',
por lo que esas reglas nunca aplican y el texto queda oscuro sobre fondo
oscuro. Acotado por ID para NO afectar otros Select2 del sistema.
=============================================*/
html.dark-theme #filtroCategoriaCompra + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroCategoriaCompra + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroCategoriaCompra + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroCategoriaCompra + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaCompra-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaCompra-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroCategoriaCompra-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroCategoriaCompra-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #seleccionarProveedor (Compras -> Nueva Compra) — mismo problema
y mismo parche que #filtroCategoriaPOS/#filtroCategoriaCompra de arriba:
dark-theme.css apunta a ".select2-container--bootstrap4", pero este proyecto
usa theme:'bootstrap-5', por lo que esas reglas nunca aplican y el texto
queda oscuro sobre fondo oscuro. Acotado por ID para NO afectar otros
Select2 del sistema (p.ej. #seleccionarProveedorOrden en Órdenes de Compra).
=============================================*/
html.dark-theme #seleccionarProveedor + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #seleccionarProveedor + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #seleccionarProveedor + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarProveedor-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarProveedor-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-seleccionarProveedor-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-seleccionarProveedor-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #seleccionarProveedorOrden (Compras -> Nueva/Editar Orden de
Compra) — mismo problema y mismo parche que #seleccionarProveedor de arriba:
dark-theme.css apunta a ".select2-container--bootstrap4", pero este proyecto
usa theme:'bootstrap-5', por lo que esas reglas nunca aplican y el texto
queda oscuro sobre fondo oscuro. Un único bloque por ID cubre tanto
ordenes-compra.php (crear) como editar-orden-compra.php (editar), porque
ambas pantallas usan el mismo id="seleccionarProveedorOrden".
=============================================*/
html.dark-theme #seleccionarProveedorOrden + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #seleccionarProveedorOrden + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #seleccionarProveedorOrden + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarProveedorOrden-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarProveedorOrden-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-seleccionarProveedorOrden-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-seleccionarProveedorOrden-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroCategoriaOrden (Compras -> Nueva/Editar Orden de Compra)
— mismo problema y mismo parche que #filtroCategoriaCompra de arriba:
dark-theme.css apunta a ".select2-container--bootstrap4", pero este proyecto
usa theme:'bootstrap-5', por lo que esas reglas nunca aplican y el texto
queda oscuro sobre fondo oscuro. Un único bloque por ID cubre tanto
ordenes-compra.php (crear) como editar-orden-compra.php (editar), porque
ambas pantallas usan el mismo id="filtroCategoriaOrden".
=============================================*/
html.dark-theme #filtroCategoriaOrden + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroCategoriaOrden + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroCategoriaOrden + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroCategoriaOrden + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaOrden-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaOrden-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroCategoriaOrden-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroCategoriaOrden-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #idClienteNS (Notas de Salida -> Nueva Nota de Salida) — mismo
problema y mismo parche que #seleccionarProveedor de arriba: dark-theme.css
apunta a ".select2-container--bootstrap4", pero este proyecto usa
theme:'bootstrap-5', por lo que esas reglas nunca aplican y el texto queda
oscuro sobre fondo oscuro. Acotado por ID para NO afectar otros Select2.
=============================================*/
html.dark-theme #idClienteNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #idClienteNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #idClienteNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme .select2-dropdown:has(#select2-idClienteNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-idClienteNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-idClienteNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-idClienteNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #seleccionarCliente (Cotizaciones -> Nueva Cotización y Editar
Cotización, mismo ID en ambas pantallas) — mismo problema y mismo parche que
#idClienteNS de arriba: dark-theme.css apunta a ".select2-container--bootstrap4",
pero este proyecto usa theme:'bootstrap-5', por lo que esas reglas nunca
aplican y el texto queda oscuro sobre fondo oscuro. Acotado por ID para NO
afectar otros Select2.
=============================================*/
html.dark-theme #seleccionarCliente + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #seleccionarCliente + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #seleccionarCliente + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarCliente-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-seleccionarCliente-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-seleccionarCliente-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-seleccionarCliente-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
CAMPO #nuevaCotizacion (Cotizaciones -> Nueva Cotización) — app.css fuerza
"input[readonly] { background-color: white !important; }" sin distinción de
tema, y la regla genérica de dark-theme.css para .form-control[readonly] no
tiene !important, así que nunca gana. Acotado por ID para NO afectar otros
campos readonly del sistema (Ventas, Compras, Órdenes de Compra, etc.).
=============================================*/
html.dark-theme #nuevaCotizacion {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
CAMPO #nuevaVenta (Ventas -> Nueva Venta) — mismo problema y mismo parche que
#nuevaCotizacion de arriba: app.css fuerza fondo blanco en cualquier
input[readonly], y dark-theme.css no tiene !important suficiente para
vencerlo. Acotado por ID para NO afectar otros campos readonly.
=============================================*/
html.dark-theme #nuevaVenta {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
CAMPO "Factura/Ticket N°" (Compras -> Nueva Compra) — mismo problema. Este
campo no tiene atributo id en el HTML actual (solo name="nuevaCompra"), así
que se usa [name=...] en vez de #id; sigue acotado a este único campo, sin
afectar otros inputs del sistema.
=============================================*/
html.dark-theme [name="nuevaCompra"] {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
CAMPO "N° de Orden" (Órdenes de Compra -> Nueva Orden de Compra) — mismo
problema. Tampoco tiene id (solo name="nuevaOrdenCompra"), se usa [name=...]
acotado a este único campo.
=============================================*/
html.dark-theme [name="nuevaOrdenCompra"] {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
CAMPO "Cód. Cotización" en Editar Cotización — comparte name="nuevaCotizacion"
con el campo de Nueva Cotización, pero (a diferencia de aquel) no tiene id.
Se usa [name=...] con ":not(#nuevaCotizacion)" para excluir explícitamente el
campo de Nueva Cotización (que sí tiene id y ya tiene su propia regla arriba),
evitando duplicar/solapar esa regla ya existente.
=============================================*/
html.dark-theme [name="nuevaCotizacion"]:not(#nuevaCotizacion) {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
CAMPO "N° de Orden" en Editar Orden de Compra — este campo no tenía id ni
name en el HTML original; se agregó id="editarOrdenCompra" en
views/modules/editar-orden-compra.php (sin tocar value/readonly/lógica) para
poder acotar esta regla exclusivamente a él.
=============================================*/
html.dark-theme #editarOrdenCompra {
    background-color: #171717 !important;
    color: #e3dfdf !important;
}

/*=============================================
SELECT2 DE #idAlmacenNS (Notas de Salida -> Nueva Nota de Salida) — mismo
problema y mismo parche que #filtroCategoriaOrden de arriba. Comparte la
clase "select2-ns" con #filtroCategoriaNS a nivel de inicialización JS, pero
cada uno genera su propio contenedor/resultados con ID propio, así que cada
uno recibe su bloque CSS por separado.
=============================================*/
html.dark-theme #idAlmacenNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #idAlmacenNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #idAlmacenNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #idAlmacenNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-idAlmacenNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-idAlmacenNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-idAlmacenNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-idAlmacenNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroCategoriaNS (Notas de Salida -> Nueva Nota de Salida) —
mismo problema y mismo parche que #filtroCategoriaOrden de arriba. Comparte
la clase "select2-ns" con #idAlmacenNS a nivel de inicialización JS, pero
cada uno genera su propio contenedor/resultados con ID propio.
=============================================*/
html.dark-theme #filtroCategoriaNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroCategoriaNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroCategoriaNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroCategoriaNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroCategoriaNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroCategoriaNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroClienteNS (Notas de Salida -> Historial) — mismo problema
y mismo parche que #filtroCategoriaOrden de arriba: dark-theme.css apunta a
".select2-container--bootstrap4", pero este proyecto usa theme:'bootstrap-5',
por lo que esas reglas nunca aplican. Acotado por ID para NO afectar otros
Select2 (este selector recibe una doble inicialización JS -por clase
"select2-ns" en notasSalida.js y por ID en el script propio de esta pantalla-
pero en ambos casos usa el mismo theme, así que el CSS necesario es el mismo).
=============================================*/
html.dark-theme #filtroClienteNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroClienteNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroClienteNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroClienteNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroClienteNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroClienteNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroClienteNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroClienteNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroAlmacenNS (Notas de Salida -> Historial) — mismo parche.
=============================================*/
html.dark-theme #filtroAlmacenNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroAlmacenNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroAlmacenNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroAlmacenNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroAlmacenNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroAlmacenNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroAlmacenNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroAlmacenNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroEstadoPagoNS (Notas de Salida -> Historial) — mismo
parche. No cambia los valores/estados existentes (Todos/Pendiente/Pago
parcial/Pagado), solo su apariencia en modo oscuro.
=============================================*/
html.dark-theme #filtroEstadoPagoNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroEstadoPagoNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroEstadoPagoNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroEstadoPagoNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroEstadoPagoNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroEstadoPagoNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroEstadoPagoNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroEstadoPagoNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
SELECT2 DE #filtroEstadoDevolucionNS (Notas de Salida -> Historial) — mismo
parche. No cambia los valores/estados existentes (Todos/Sin devolución/
Devolución parcial/Devuelto total), solo su apariencia en modo oscuro.
=============================================*/
html.dark-theme #filtroEstadoDevolucionNS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroEstadoDevolucionNS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroEstadoDevolucionNS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroEstadoDevolucionNS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroEstadoDevolucionNS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroEstadoDevolucionNS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroEstadoDevolucionNS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroEstadoDevolucionNS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}

/*=============================================
RANGO DE FECHAS (Notas de Salida -> Historial) — #filtroFechaRangoNS
------------------------------------------------
A) INPUT VISIBLE: no es Select2. Por tener el atributo "readonly", el
sistema le aplicaba solo el overlay genérico de dark-theme.css
(".form-control[readonly]" -> rgb(255 255 255 / 22%)), más claro que el
resto de los filtros. Se acota por ID para igualarlo visualmente a los
otros cuatro sin tocar su comportamiento readonly.

B) CALENDARIO EMERGENTE (".daterangepicker"): la librería (bootstrap
daterangepicker, cargada por CDN) inserta su panel directamente en <body>,
sin ningún id/atributo que lo relacione con el input que lo abrió, así que
NO existe una forma segura de acotarlo únicamente a #filtroFechaRangoNS por
CSS puro (a diferencia de Select2, cuyo panel de resultados sí incluye el
id del <select> de origen). El selector más seguro disponible es la propia
clase ".daterangepicker" que genera la librería. Esto también corrige, como
efecto colateral inevitable pero no dañino, el mismo calendario usado en
Kardex (views/modules/kardex.php) -que hoy tiene exactamente el mismo
problema sin ningún parche-, ya que es la misma librería compartida: es
una corrección puramente visual bajo "html.dark-theme" (no toca JS, no
altera su funcionamiento, y no tiene ningún efecto en modo claro). No se
sobrescribe el color de fondo azul de los días de inicio/fin/rango
seleccionado (".start-date"/".end-date"/".in-range" activos): se conserva
el estilo original de la librería para el rango elegido, igual que se
conservó el azul de la opción "seleccionada" en los Select2 ya corregidos.
=============================================*/
html.dark-theme #filtroFechaRangoNS {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme #filtroFechaRangoNS::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #filtroFechaRangoNS:focus {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25) !important;
}

/*=============================================
RANGO DE FECHAS (Kardex -> Filtros de Reporte Detallado) — #daterange-btn
Mismo problema y mismo parche que #filtroFechaRangoNS de arriba: el input
readonly recibe el fondo blanco forzado por app.css ("input[readonly]"), y
dark-theme.css no tiene !important suficiente para vencerlo. El popup
".daterangepicker" ya queda cubierto por la regla genérica de abajo (misma
librería compartida) y no se toca aquí.
=============================================*/
html.dark-theme #daterange-btn {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme #daterange-btn::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #daterange-btn:focus {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25) !important;
}
html.dark-theme .daterangepicker {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .daterangepicker:before {
    border-bottom-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme .daterangepicker:after {
    border-bottom-color: #171717 !important;
}
html.dark-theme .daterangepicker .calendar-table {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme .daterangepicker .calendar-table table {
    background-color: transparent !important;
}
html.dark-theme .daterangepicker td.available,
html.dark-theme .daterangepicker th.available,
html.dark-theme .daterangepicker th.month {
    color: #e3dfdf !important;
}
html.dark-theme .daterangepicker td.off.available,
html.dark-theme .daterangepicker td.off.in-range,
html.dark-theme .daterangepicker td.off.start-date,
html.dark-theme .daterangepicker td.off.end-date {
    background-color: transparent !important;
    color: #adb5bd !important;
    opacity: .5 !important;
}
html.dark-theme .daterangepicker td.available:hover,
html.dark-theme .daterangepicker th.available:hover {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}
html.dark-theme .daterangepicker td.in-range:not(.start-date):not(.end-date) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .daterangepicker td.today.available:not(.in-range):not(.active) {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%) !important;
}
html.dark-theme .daterangepicker .drp-calendar.left {
    border-right: 1px solid rgb(255 255 255 / 35%) !important;
}
html.dark-theme .daterangepicker .calendar-table th.prev span,
html.dark-theme .daterangepicker .calendar-table th.next span {
    border-color: #adb5bd !important;
}
html.dark-theme .daterangepicker .drp-buttons {
    background-color: #171717 !important;
    border-top: 1px solid rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .daterangepicker .drp-selected {
    color: #adb5bd !important;
}
html.dark-theme .daterangepicker .cancelBtn {
    background-color: transparent !important;
    border: 1px solid rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .daterangepicker select.hourselect,
html.dark-theme .daterangepicker select.minuteselect,
html.dark-theme .daterangepicker select.secondselect,
html.dark-theme .daterangepicker select.ampmselect {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}