/**
 * Jeloda Dark Mode Theme Styles
 * Este archivo centraliza los estilos y configuraciones exclusivas para el modo oscuro (dark-mode) de la aplicación.
 * 
 * Uso: Cualquier componente, tarjeta, tabla o texto que deba lucir de manera diferente bajo
 * el modo oscuro, debe ser apuntado antecediendo la clase `.dark-mode`.
 */

/* ==============================================================
   OVERRIDE DE VARIABLES GLOBALES CUSTOM (para Dashboard y otros)
   ============================================================== */
.dark-mode {
    --primary: #4e73df;
    --primary-light: #2c3b6b;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --secondary: #858796;
    --light: #2b2b2b;
    --dark: #f8f9fc;
    --white: #2b2b2b;
    --gray-100: #1a1a1a;
    --gray-200: #3b3b3b;
    --gray-300: #4b4b4b;
    --gray-400: #5b5b5b;
    --gray-500: #6b6b6b;
    --gray-600: #a1a1a1;
    --gray-700: #c1c1c1;
    --gray-800: #e1e1e1;
    --gray-900: #f1f1f1;
}

body.dark-mode,
#page-container.dark-mode {
    background-color: var(--gray-100) !important;
    color: var(--gray-900) !important;
}

/* ==============================================================
   AJUSTES GENÉRICOS DE JELODA/ONEUI
   ============================================================== */
.dark-mode .bg-white {
    background-color: var(--white) !important;
}
.dark-mode .text-body-color-dark {
    color: var(--gray-700) !important;
}
.dark-mode .text-dark,
.dark-mode .text-gray-900,
.dark-mode .text-gray-800 {
    color: var(--gray-900) !important;
}

/* Container de la página */
#page-container.dark-mode #main-container,
.dark-mode .content {
    background-color: var(--gray-100) !important;
}

/* Títulos y textos principales */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3, .dark-mode .h4, .dark-mode .h5, .dark-mode .h6 {
    color: var(--gray-900) !important;
}

/* ==============================================================
   ESTILOS ESPECÍFICOS DEL DASHBOARD & CARDS CUSTOM
   ============================================================== */
.dark-mode .page-header {
    border-bottom-color: var(--gray-200) !important;
}
.dark-mode .page-title {
    color: var(--gray-900) !important;
}
.dark-mode .page-subtitle,
.dark-mode .current-date {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-800) !important;
}
.dark-mode .page-subtitle .fw-bold {
    color: var(--gray-900) !important;
}

/* Tarjetas de estadísticas (Dashboard) */
.dark-mode .stats-card,
.dark-mode .chart-container,
.dark-mode .compact-stat-card {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .stats-card .stats-title,
.dark-mode .compact-stat-card .stat-title {
    color: var(--gray-700) !important;
}
.dark-mode .stats-card .stats-value,
.dark-mode .compact-stat-card .stat-value {
    color: var(--gray-900) !important;
}
.dark-mode .stats-card .stats-link a {
    color: var(--gray-600) !important;
}
.dark-mode .stats-card .stats-link {
    border-top-color: var(--gray-200) !important;
}

/* ==============================================================
   MODALES Y TABLAS
   ============================================================== */
.dark-mode .modal-content {
    background-color: var(--white);
    color: var(--gray-800);
}
.dark-mode .modal-header {
    border-bottom-color: var(--gray-200);
}
.dark-mode .modal-footer {
    border-top-color: var(--gray-200);
}

.dark-mode .table td, .dark-mode .table th {
    border-color: var(--gray-200);
    color: var(--gray-800);
}
.dark-mode .table thead th {
    border-bottom-color: var(--gray-300);
    color: var(--gray-900);
}

/* ==============================================================
   BOOTSTRAP CARDS, BLOCKS & FOOTER GENERICOS
   ============================================================== */
.dark-mode .card,
.dark-mode .block,
.dark-mode .bg-body-light {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .card-body .text-gray-800 {
    color: var(--gray-900) !important;
}

/* Títulos y cabeceras de bloques OneUI */
.dark-mode .block-header-default {
    background-color: var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode .block-title {
    color: var(--gray-900) !important;
}

/* Etiquetas, separadores y textos genéricos */
.dark-mode label {
    color: var(--gray-800) !important;
}
.dark-mode hr {
    border-top-color: var(--gray-200) !important;
}

/* ==============================================================
   SIDE OVERLAY (Right Sidebar)
   ============================================================== */
.dark-mode #side-overlay {
    background-color: var(--white) !important;
    color: var(--gray-800) !important;
    border-left: 1px solid var(--gray-200) !important;
}
.dark-mode #side-overlay .content-header {
    background-color: var(--gray-100) !important;
    border-bottom-color: var(--gray-200) !important;
}
.dark-mode #side-overlay .text-dark {
    color: var(--gray-900) !important;
}


/* ==============================================================
   FORM CONTROLS & INPUTS (Buscador superior, etc.)
   ============================================================== */
.dark-mode .form-control,
.dark-mode .form-control-alt {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-900) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-control-alt:focus {
    background-color: var(--white) !important;
    border-color: var(--primary) !important;
    color: var(--gray-900) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode .form-control-alt::placeholder {
    color: var(--gray-600) !important;
}



/* ==============================================================
   BRANCH SELECTORS (Tarjetas de sucursales)
   ============================================================== */
.dark-mode .branch-card {
    background: var(--white) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .branch-card.active {
    background-color: rgba(92, 128, 209, 0.15) !important;
    border-color: #5c80d1 !important;
}

.dark-mode .branch-card-icon {
    background: var(--gray-100) !important;
}

.dark-mode .branch-card.active .branch-card-icon {
    background: #5c80d1 !important;
    color: #ffffff !important;
}

.dark-mode .branch-card h6 {
    color: var(--gray-700) !important;
}

.dark-mode .branch-card.active h6 {
    color: #ffffff !important;
}

/* ==============================================================
   SWEETALERT2
   ============================================================== */
.swal2-popup.swal2-toast {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .swal2-popup {
    background: var(--white) !important;
    color: var(--gray-800) !important;
}
.dark-mode .swal2-title {
    color: var(--gray-900) !important;
}

/* ==============================================================
   FOOD SERVICE MODULE (servicio.php POS)
   ============================================================== */
/* Ajuste superior para que el navbar no tape el contenido */
.content-all-servicio {
    padding-top: 64px !important;
}

/* Fondos principales de las dos columnas */
.dark-mode .content-factura {
    background-color: var(--gray-100) !important;
}
.dark-mode .content-pedido {
    background-color: var(--white) !important;
    border-left: 1px solid var(--gray-200) !important;
}

/* Cabecera del panel derecho (pedido) */
.dark-mode .content-title-pedido {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}
.dark-mode .content-title-pedido h2,
.dark-mode .content-title-pedido h5 {
    color: var(--gray-900) !important;
}

/* Tarjetas de Producto (.card-producto) en ambos paneles */
.dark-mode .card-producto,
.dark-mode .card-producto.bg-white {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}

/* El cuadro de la imagen (izquierda de la tarjeta) */
.dark-mode .card-producto .content-img {
    background-color: var(--gray-100) !important;
    border-right-color: var(--gray-200) !important;
}

/* Textos dentro de la tarjeta */
.dark-mode .card-producto .text-producto-card {
    color: var(--gray-900) !important;
}
.dark-mode .card-producto .text-id {
    color: var(--gray-600) !important;
}

/* Inputs de cantidad y precio dentro de la tarjeta */
.dark-mode .card-producto .input-premium-group {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .card-producto .input-premium-group input {
    color: var(--gray-900) !important;
}
.dark-mode .card-producto .input-premium-group i {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .input-premium-group:focus-within {
    background-color: var(--white) !important;
    border-color: var(--primary) !important;
}

/* Subtotales y botones en la tarjeta derecha */
.dark-mode .card-producto .subtotal-container {
    border-top-color: var(--gray-200) !important;
}
.dark-mode .card-producto .text-subtotal {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .val-subtotal {
    color: var(--primary) !important;
}
.dark-mode .card-producto .btn-options-card {
    color: var(--gray-600) !important;
}
.dark-mode .card-producto .btn-options-card:hover {
    background-color: var(--gray-200) !important;
    color: var(--gray-900) !important;
}

/* Totales en la parte inferior derecha */
.dark-mode .content-total-factura {
    background-color: var(--white) !important;
    border-top-color: var(--gray-200) !important;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3) !important;
}
.dark-mode .content-total-factura h4.text-muted {
    color: var(--gray-600) !important;
}
.dark-mode .content-total-factura #total_base_text,
.dark-mode .content-total-factura .text-dark {
    color: var(--gray-900) !important;
}
/* Buscador dentro del servicio */
.dark-mode .content-all-servicio .form-control {
    background-color: var(--white) !important;
    color: var(--gray-900) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .content-all-servicio .form-control:focus {
    border-color: var(--primary) !important;
}

/* Dropdowns del POS */
.dark-mode .content-all-servicio .dropdown-menu {
    background-color: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .content-all-servicio .dropdown-item {
    color: var(--gray-300) !important;
}
.dark-mode .content-all-servicio .dropdown-item:hover,
.dark-mode .content-all-servicio .dropdown-item:focus {
    background-color: var(--gray-700) !important;
    color: var(--white) !important;
}

/* ==============================================================
   FORMS & FILEPOND OVERRIDES (Recetas, etc.)
   ============================================================== */
.dark-mode .input-group-text,
.dark-mode .input-group-append .input-group-text,
.dark-mode .input-group-prepend .input-group-text {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .filepond--panel-root {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}
.dark-mode .filepond--drop-label {
    color: var(--gray-800) !important;
}

/* ==============================================================
   TABLE OVERRIDES
   ============================================================== */
.dark-mode .table .thead-light th {
    background-color: var(--gray-100) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: var(--gray-200) !important;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: inherit;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ==============================================================
   FACTURA POS Y COTIZACION Y REMISION (documento.css) OVERRIDES
   ============================================================== */
.dark-mode #cards_venta .block-invoice {
    background-color: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode #cards_venta .block-header-invoice {
    background-color: var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode #cards_venta .block-title-invoice,
.dark-mode #cards_venta .user-header-card h4,
.dark-mode #cards_venta .summary-row.total-row,
.dark-mode .modal-product-name,
.dark-mode .modal-product-price strong {
    color: var(--gray-800) !important;
}

.dark-mode #cards_venta .user-header-card {
    border-bottom: 1px solid var(--gray-200) !important;
}

.dark-mode #cards_venta .user-header-card .img-avatar {
    border-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .user-header-card p,
.dark-mode #cards_venta .invoice-details p strong,
.dark-mode #cards_venta .invoice-summary .summary-row,
.dark-mode .modal-product-meta,
.dark-mode .modal-product-price small {
    color: var(--gray-600) !important;
}

.dark-mode #cards_venta .invoice-details p,
.dark-mode #cards_venta .invoice-details p span:last-child {
    color: var(--gray-700) !important;
}

.dark-mode #cards_venta .invoice-summary {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .summary-row.total-row {
    border-top-color: var(--gray-200) !important;
}

.dark-mode #cards_venta .btn-header-action {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--primary) !important;
}

.dark-mode #cards_venta .btn-header-action:hover {
    background-color: var(--gray-200) !important;
    color: var(--primary-light) !important;
    border-color: var(--primary) !important;
}

/* Modal Product Cards */
.dark-mode .modal-product-card {
    background-color: var(--gray-50) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .modal-product-card:hover {
    background-color: var(--gray-100) !important;
    border-color: var(--primary) !important;
}

.dark-mode .modal-product-img {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

/* Iconos de título: Adjust backgrounds for dark mode */
.dark-mode #card_factura .block-title-invoice i,
.dark-mode #card_factura .invoice-details p i {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important; /* brighter indigo */
}

.dark-mode #card_cliente .block-title-invoice i,
.dark-mode #card_cliente .invoice-details p i {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important; /* brighter emerald */
}

.dark-mode #card_vendedor .block-title-invoice i,
.dark-mode #card_vendedor .invoice-details p i {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important; /* brighter orange */
}

.dark-mode #card_empleado .block-title-invoice i,
.dark-mode #card_empleado .invoice-details p i {
    background-color: rgba(236, 72, 153, 0.15) !important;
    color: #f472b6 !important; /* brighter pink */
}

/* Fix Status badges in dark mode */
.dark-mode .status-ok,
.dark-mode .status-active,
.dark-mode .status-pagado {
    background-color: rgba(22, 101, 52, 0.4) !important; /* darker green bg */
    color: #4ade80 !important; /* lighter green text */
}

.dark-mode .status-pending,
.dark-mode .status-pendiente {
    background-color: rgba(133, 77, 14, 0.4) !important; /* darker yellow bg */
    color: #fbd38d !important; /* lighter yellow text */
}

.dark-mode .status-completed {
    background-color: rgba(55, 48, 163, 0.4) !important; /* darker indigo bg */
    color: #818cf8 !important; /* lighter indigo text */
}

.dark-mode .status-anulado,
.dark-mode .status-cancelado {
    background-color: rgba(153, 27, 27, 0.4) !important; /* darker red bg */
    color: #f87171 !important; /* lighter red text */
}

/* Paginadores unified */
.dark-mode .pagination-main .page-link,
.dark-mode #contentProductosInventario .page-link {
    background-color: var(--gray-50) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-700) !important;
}

.dark-mode .pagination-main .page-link:hover,
.dark-mode #contentProductosInventario .page-link:hover {
    background-color: var(--gray-100) !important;
    border-color: var(--primary) !important;
    color: var(--gray-900) !important;
}

.dark-mode .pagination-main .page-item.active .page-link,
.dark-mode #contentProductosInventario .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dark-mode .pagination-main .page-item.disabled .page-link,
.dark-mode #contentProductosInventario .page-item.disabled .page-link {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-500) !important;
}

/* ==============================================================
   MÓDULO VENDER OVERRIDES (vender.css / product-cards.css)
   ============================================================== */
.dark-mode {
    --pos-text: var(--gray-800) !important;
    --pos-text-secondary: var(--gray-600) !important;
    --pos-text-muted: var(--gray-500) !important;
    --pos-border: var(--gray-200) !important;
    --pos-border-hover: rgba(255, 255, 255, 0.2) !important;
    --pos-bg-page: var(--gray-50) !important;
    --pos-bg-surface: var(--gray-100) !important;
    --pos-bg-input: rgba(255, 255, 255, 0.05) !important;
}

/* Fix left section and right section backgrounds bypassing the variables */
.dark-mode .content-productos-comprar.bg-white,
.dark-mode .content-productos-comprar {
    background-color: var(--pos-bg-page) !important;
}

.dark-mode .content-cabezal-factura {
    background-color: var(--pos-bg-surface) !important;
}

.dark-mode .content-cabezal-factura label {
    color: var(--pos-text-secondary) !important;
}

/* Products Cards specifically */
.dark-mode .product-card {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .product-name {
    color: var(--pos-text) !important;
}

.dark-mode .product-id {
    color: var(--pos-text-muted) !important;
}

.dark-mode .cart-header-container,
.dark-mode .empty-cart-container,
.dark-mode .content-card-item-shop {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .content-total {
    background-color: rgba(30, 31, 34, 0.95) !important;
    border-top-color: var(--pos-border) !important;
}

.dark-mode .product-controls .form-control-sm,
.dark-mode .product-controls .input-prefix {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text-secondary) !important;
}

.dark-mode .product-img-container,
.dark-mode .empty-cart-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Inputs and Select2 globally in Cabezal */
.dark-mode .content-cabezal-factura .input-group .form-control#search,
.dark-mode .content-cabezal-factura .form-control,
.dark-mode .content-cabezal-factura .form-select {
    border-color: var(--pos-border) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection__rendered {
    color: var(--pos-text) !important;
}

.dark-mode .content-cabezal-factura .select2-container--bootstrap .select2-selection__placeholder {
    color: var(--pos-text-muted) !important;
}

.dark-mode .content-cabezal-factura .input-group .input-group-prepend .input-group-text,
.dark-mode .cart-search-input-container {
    border-color: var(--pos-border) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-cabezal-factura .input-group-append .btn-primary {
    border-color: var(--pos-border) !important;
    color: var(--pos-text-secondary) !important;
}

.dark-mode .content-cabezal-factura .input-group-append .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .content-productos-agregados .table thead th {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-mode .content-productos-agregados .update-producto {
    border-color: var(--pos-border) !important;
    background-color: var(--pos-bg-input) !important;
    color: var(--pos-text) !important;
}

/* ==============================================================
   MÓDULO COMPRAR OVERRIDES (comprar.css / card.css)
   ============================================================== */

/* Fix the left section background (content-my-products) */
.dark-mode .content-my-products {
    background-color: var(--pos-bg-page) !important;
}

/* Fix right section (cart) */
.dark-mode .content-shopping-cart {
    background-color: var(--pos-bg-surface) !important;
    border-left: 1px solid var(--pos-border) !important;
}

.dark-mode .content-shopping-cart .table tbody tr {
    background-color: var(--pos-bg-surface) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-shopping-cart .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .content-shopping-cart .table thead th {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--pos-text-muted) !important;
    border-bottom-color: var(--pos-border) !important;
}

.dark-mode .content-shopping-cart .table td:nth-child(2),
.dark-mode .content-shopping-cart .table td:nth-child(5) {
    color: var(--pos-text) !important;
}

.dark-mode .content-shopping-cart .form-control-sm {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-shopping-cart .form-control-sm:focus {
    background-color: var(--gray-700) !important;
    border-color: var(--primary) !important;
}

.dark-mode .content-shopping-cart .input-group-text {
    color: var(--pos-text-secondary) !important;
}

/* Total block */
.dark-mode .content-total {
    background-color: rgba(30, 31, 34, 0.95) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid var(--pos-border) !important;
}

/* Product cards in comprar using .card-producto */
.dark-mode .card-producto {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .card-producto:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.6);
}

.dark-mode .card-image {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-mode .card-additional-info {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .card-input-group .form-control {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .card-input-group .input-group-text {
    background-color: var(--pos-bg-input) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

/* Labels and details inside cards */
.dark-mode .card-info h6 {
    color: var(--pos-text) !important;
}

.dark-mode .card-details {
    color: var(--pos-text-muted) !important;
}

/* JS Filter Buttons & Badges (Categorías/Marcas) */
.dark-mode .btn-white {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .btn-white:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .bg-light {
    background-color: var(--pos-bg-page) !important;
    border-color: var(--pos-border) !important;
}

.dark-mode .badge-white {
    background-color: var(--pos-bg-surface) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .badge-white:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menus from cards */
.dark-mode .card-actions .dropdown-menu {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
}

.dark-mode .card-actions .dropdown-item {
    color: var(--pos-text) !important;
}

.dark-mode .card-actions .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .card-actions .dropdown-toggle {
    color: var(--pos-text-muted) !important;
}

.dark-mode .card-actions .dropdown-toggle:hover {
    color: var(--pos-text) !important;
}

/* Select2 container in Comprar */
.dark-mode .content-my-products .select2-container--bootstrap .select2-selection {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}

.dark-mode .content-my-products .select2-container--bootstrap .select2-selection__rendered {
    color: var(--pos-text) !important;
}

.dark-mode .content-my-products .select2-container--bootstrap .select2-selection__placeholder {
    color: var(--pos-text-muted) !important;
}

.dark-mode .content-my-products label {
    color: var(--pos-text-secondary) !important;
}

/* ==============================================================
   Sidebar Active Item — Dark Theme
   ============================================================== */

/* Base transition for dark mode nav links */
.dark-mode #sidebar .nav-main-link {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-left-color 0.25s ease !important;
    border-left: 3px solid transparent !important;
}

/* Active state — primary level links (dark) */
.dark-mode #sidebar .nav-main-link.active {
    background-color: rgba(78, 115, 223, 0.15) !important;
    color: #93b4ff !important;
    border-left: 3px solid #6b8cef !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

/* Active icon highlight (dark) */
.dark-mode #sidebar .nav-main-link.active > .nav-main-link-icon {
    color: #6b8cef !important;
}

/* Active link name highlight (dark) */
.dark-mode #sidebar .nav-main-link.active > .nav-main-link-name {
    color: #93b4ff !important;
}

/* Submenu active items (dark) */
.dark-mode #sidebar .nav-main-submenu .nav-main-link.active {
    background-color: rgba(78, 115, 223, 0.10) !important;
    border-left: 3px solid #6b8cef !important;
    color: #93b4ff !important;
    font-weight: 500 !important;
}

/* Hover state for non-active links (dark) */
.dark-mode #sidebar .nav-main-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(107, 140, 239, 0.35) !important;
}

/* Open parent item styling (dark) */
.dark-mode #sidebar .nav-main-item.open > .nav-main-link-submenu {
    color: #93b4ff !important;
    background-color: rgba(78, 115, 223, 0.08) !important;
}

.dark-mode #sidebar .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon {
    color: #6b8cef !important;
}

/* Sidebar background subtle enhancement for dark mode */
.dark-mode #sidebar {
    background-color: #1e1e2d !important;
}

/* Sidebar header/logo area dark mode */
.dark-mode #sidebar .content-header {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Nav headings in dark mode */
.dark-mode #sidebar .nav-main-heading {
    color: rgba(255, 255, 255, 0.35) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==============================================================
   MÓDULO: HISTORIAL DE VENTAS - ANULACIONES (lista + detalle)
   Overrides centralizados para que el toggle del navbar (dark-mode)
   afecte también a las páginas de anulaciones.
   Estos selectores están en los archivos:
     - anulacion-lista.css
     - anulacion-detalle.css
   Aquí se refuerzan con mayor especificidad (#page-container.dark-mode)
   para evitar que cualquier !important local gane por orden de carga.
   ============================================================== */

/* ── LISTA DE ANULACIONES (anu-list-*) ──────────────────────── */
#page-container.dark-mode .anu-list-page,
#page-container.dark-mode .anu-list-topbar,
#page-container.dark-mode .anu-list-hero,
#page-container.dark-mode .anu-list-filters,
#page-container.dark-mode .anu-list-section,
#page-container.dark-mode .anu-filter-card,
#page-container.dark-mode .anu-list-table-wrap,
#page-container.dark-mode .anu-table,
#page-container.dark-mode .anu-cards-grid,
#page-container.dark-mode .anu-card-item,
#page-container.dark-mode .anu-pagination,
#page-container.dark-mode .anu-loader {
    background-color: transparent !important;
    color: var(--anu-text, #f5f5f7);
}

#page-container.dark-mode .anu-list-topbar {
    background: rgba(28, 28, 30, 0.72) !important;
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-list-title { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-list-eyebrow { color: #ff6b6b !important; }
#page-container.dark-mode .anu-list-hero {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-list-hero-icon {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.25) 0%, rgba(255, 59, 48, 0.1) 100%) !important;
    color: #ff6b6b !important;
}
#page-container.dark-mode .anu-list-hero-eyebrow { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-list-hero-value { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-list-hero-sub { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-stat {
    background-color: transparent !important;
    border-right-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-stat-label { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-stat-value { color: #f5f5f7 !important; }

#page-container.dark-mode .anu-filter-card {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
    color: var(--anu-text, #f5f5f7);
}
#page-container.dark-mode .anu-filter-card-head {
    color: var(--anu-text-secondary, #aeaeb2) !important;
}
#page-container.dark-mode .anu-filter-card-head i { color: var(--anu-text-secondary, #aeaeb2) !important; }

#page-container.dark-mode .anu-btn {
    background: var(--anu-card, #1c1c1e) !important;
    color: var(--anu-text, #f5f5f7) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-btn-ghost { background: transparent !important; }
#page-container.dark-mode .anu-btn-primary {
    background: var(--anu-accent, #0071e3) !important;
    color: #fff !important;
    border-color: transparent !important;
}
#page-container.dark-mode .anu-btn-primary:hover { filter: brightness(1.1); }

#page-container.dark-mode .anu-view-toggle-group {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-view-toggle { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-view-toggle:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-view-toggle.anu-view-active {
    background: var(--anu-card, #1c1c1e) !important;
    color: var(--anu-text, #f5f5f7) !important;
}

#page-container.dark-mode .anu-pill {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
    border-color: transparent !important;
}
#page-container.dark-mode .anu-pill:hover { background: rgba(255, 255, 255, 0.14) !important; }
#page-container.dark-mode .anu-pill-active {
    background: var(--anu-text, #f5f5f7) !important;
    color: #000 !important;
}

#page-container.dark-mode .anu-select,
#page-container.dark-mode .anu-date-input {
    background: #2c2c2e !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-select:focus,
#page-container.dark-mode .anu-date-input:focus {
    border-color: var(--anu-accent, #0071e3) !important;
}

#page-container.dark-mode .anu-table {
    background: var(--anu-card, #1c1c1e) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-table tbody tr {
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tbody td { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-table tfoot { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tfoot td { color: var(--anu-text, #f5f5f7) !important; }

#page-container.dark-mode .anu-card-item {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-card-item-head { background: rgba(255, 255, 255, 0.02) !important; }
#page-container.dark-mode .anu-card-item-foot { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-card-item-id { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-card-item-meta-label { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-card-item-meta-value { color: var(--anu-text, #f5f5f7) !important; }

#page-container.dark-mode .anu-actions-trigger {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
}
#page-container.dark-mode .anu-actions-trigger:hover {
    background: var(--anu-text, #f5f5f7) !important;
    color: #000 !important;
}
#page-container.dark-mode .anu-actions-menu {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
#page-container.dark-mode .anu-actions-item {
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-actions-item:hover { background: rgba(255, 255, 255, 0.08) !important; }

#page-container.dark-mode .anu-page-btn {
    background: var(--anu-card, #1c1c1e) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-page-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-page-btn.active {
    background: var(--anu-text, #f5f5f7) !important;
    color: #000 !important;
}

#page-container.dark-mode .anu-pago-item { background: rgba(0, 113, 227, 0.18) !important; }
#page-container.dark-mode .anu-pago-name { color: #6ec1ff !important; }
#page-container.dark-mode .anu-imp-tag { background: rgba(0, 113, 227, 0.18) !important; color: #6ec1ff !important; }
#page-container.dark-mode .anu-sucursal-monedero { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-empty {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-empty-icon {
    background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%) !important;
}
#page-container.dark-mode .anu-empty-title { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-empty-text { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-loader span { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-spinner { border-color: rgba(255, 255, 255, 0.15) !important; border-top-color: var(--anu-accent, #0071e3) !important; }

#page-container.dark-mode .anu-badge-anulada {
    background: rgba(255, 59, 48, 0.15) !important;
    color: #ff6b6b !important;
    border-color: rgba(255, 59, 48, 0.3) !important;
}

/* ── DETALLE DE ANULACIÓN (anu-* sin prefijo list) ───────────── */
#page-container.dark-mode .anu-page { color: var(--anu-text, #f5f5f7); }
#page-container.dark-mode .anu-topbar {
    background: rgba(28, 28, 30, 0.72) !important;
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-title { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-title-num { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-eyebrow { color: #ff6b6b !important; }
#page-container.dark-mode .anu-back-btn {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-back-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-breadcrumb a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
}
#page-container.dark-mode .anu-breadcrumb a:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-breadcrumb .anu-sep { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-breadcrumb span:last-child { color: var(--anu-text, #f5f5f7) !important; }

#page-container.dark-mode .anu-hero {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-hero-icon {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.25) 0%, rgba(255, 59, 48, 0.1) 100%) !important;
    color: #ff6b6b !important;
}
#page-container.dark-mode .anu-hero-eyebrow { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-hero-id { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-chip-muted {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
}
#page-container.dark-mode .anu-chip-state { color: #ff6b6b !important; }
#page-container.dark-mode .anu-hero-stat {
    border-left-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-hero-stat-label { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-hero-stat-value { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-hero-stat-sub { color: var(--anu-text-secondary, #aeaeb2) !important; }

#page-container.dark-mode .anu-card {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-card-label { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-card-name { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-card-row { border-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important; }
#page-container.dark-mode .anu-card-row span { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-card-row strong { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-card-icon { background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%) !important; }
#page-container.dark-mode .anu-card-cliente .anu-card-icon {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.25) 0%, rgba(0, 113, 227, 0.1) 100%) !important;
    color: #6ec1ff !important;
}
#page-container.dark-mode .anu-card-vendedor .anu-card-icon {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.25) 0%, rgba(52, 199, 89, 0.1) 100%) !important;
    color: #5dd879 !important;
}
#page-container.dark-mode .anu-card-sucursal .anu-card-icon {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25) 0%, rgba(255, 149, 0, 0.1) 100%) !important;
    color: #ffb84d !important;
}

#page-container.dark-mode .anu-section { color: var(--anu-text, #f5f5f7); }
#page-container.dark-mode .anu-section-eyebrow { color: var(--anu-accent, #0071e3) !important; }
#page-container.dark-mode .anu-section-title { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-section-stat {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-section-stat-num { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-section-stat-label { color: var(--anu-text-tertiary, #8e8e93) !important; }

#page-container.dark-mode .anu-table-wrap,
#page-container.dark-mode .anu-table { background: var(--anu-card, #1c1c1e) !important; }
#page-container.dark-mode .anu-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--anu-text-secondary, #aeaeb2) !important;
}
#page-container.dark-mode .anu-table tbody td {
    color: var(--anu-text, #f5f5f7) !important;
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tfoot { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tfoot td { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-product-img {
    background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%) !important;
}
#page-container.dark-mode .anu-product-name { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-product-meta { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-product-qty,
#page-container.dark-mode .anu-product-price { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-product-subtotal { color: #6ec1ff !important; }

#page-container.dark-mode .anu-totales-box {
    background: var(--anu-card, #1c1c1e) !important;
    border-color: var(--anu-border-strong, rgba(255, 255, 255, 0.12)) !important;
}
#page-container.dark-mode .anu-totales-box-title {
    color: var(--anu-text, #f5f5f7) !important;
    border-bottom-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-totales-row { border-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important; }
#page-container.dark-mode .anu-totales-row span { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-totales-row strong { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-totales-impuestos-head {
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .anu-totales-impuesto-item { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-totales-impuesto-nombre { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-totales-impuesto-valor { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-totales-total {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.18) 0%, rgba(0, 113, 227, 0.08) 100%) !important;
    color: #f5f5f7 !important;
}
#page-container.dark-mode .anu-totales-total strong { color: #6ec1ff !important; }
#page-container.dark-mode .anu-totales-empty { color: var(--anu-text-tertiary, #8e8e93) !important; }
#page-container.dark-mode .anu-pago-nombre { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-pago-valor { color: #6ec1ff !important; }

#page-container.dark-mode .anu-empty {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--anu-border, rgba(255, 255, 255, 0.08)) !important;
}
#page-container.dark-mode .anu-empty-icon {
    background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%) !important;
}
#page-container.dark-mode .anu-empty-title { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .anu-empty-text { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-loader span { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .anu-spinner {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-top-color: var(--anu-accent, #0071e3) !important;
}

/* ── SWEETALERT / MODALES genéricos usados en anulaciones ─────── */
#page-container.dark-mode .swal2-popup {
    background: var(--anu-card, #1c1c1e) !important;
    color: var(--anu-text, #f5f5f7) !important;
}
#page-container.dark-mode .swal2-title { color: var(--anu-text, #f5f5f7) !important; }
#page-container.dark-mode .swal2-html-container { color: var(--anu-text-secondary, #aeaeb2) !important; }
#page-container.dark-mode .swal2-confirm { background: var(--anu-accent, #0071e3) !important; }
#page-container.dark-mode .swal2-cancel { background: rgba(255, 255, 255, 0.1) !important; color: var(--anu-text, #f5f5f7) !important; }

/* ==============================================================
   OVERRIDES PARA LISTA DE ANULACIONES (.anu-list-*)
   El dark-mode se aplica a #page-container, no a body.
   Estos selectores replican los del anulacion-lista.css con
   mayor especificidad para que ganen al OneUI !important.
   ============================================================== */
#page-container.dark-mode .anu-list-page,
body.dark-mode .anu-list-page {
    --anu-bg: #000000;
    --anu-card: #1c1c1e;
    --anu-text: #f5f5f7;
    --anu-text-secondary: #aeaeb2;
    --anu-text-tertiary: #8e8e93;
    --anu-border: rgba(255, 255, 255, 0.08);
    --anu-border-strong: rgba(255, 255, 255, 0.12);
    --anu-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --anu-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: var(--anu-text);
}

#page-container.dark-mode body,
#page-container.dark-mode main,
#page-container.dark-mode #main-container,
#page-container.dark-mode .content,
#page-container.dark-mode .bg-body-light,
#page-container.dark-mode .anu-list-page,
#page-container.dark-mode .anu-list-section,
#page-container.dark-mode .anu-list-table-wrap,
#page-container.dark-mode .anu-table,
#page-container.dark-mode .anu-cards-grid,
#page-container.dark-mode .anu-card-item,
#page-container.dark-mode .anu-pagination,
#page-container.dark-mode .anu-filter-card,
#page-container.dark-mode .anu-loader {
    background-color: #000 !important;
    color: var(--anu-text) !important;
}

#page-container.dark-mode .anu-list-topbar {
    background: rgba(28, 28, 30, 0.72) !important;
    border-bottom-color: var(--anu-border) !important;
}
#page-container.dark-mode .anu-list-title { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-list-eyebrow { color: #ff6b6b !important; }
#page-container.dark-mode .anu-list-hero {
    background: var(--anu-card) !important;
    border-color: var(--anu-border-strong) !important;
}
#page-container.dark-mode .anu-list-hero-icon {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.25) 0%, rgba(255, 59, 48, 0.1) 100%) !important;
    color: #ff6b6b !important;
}
#page-container.dark-mode .anu-list-hero-eyebrow { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-list-hero-value { color: #f5f5f7 !important; }
#page-container.dark-mode .anu-list-hero-sub { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-stat { border-right-color: var(--anu-border) !important; }
#page-container.dark-mode .anu-stat-label { color: var(--anu-text-tertiary) !important; }
#page-container.dark-mode .anu-stat-value { color: #f5f5f7 !important; }

#page-container.dark-mode .anu-filter-card {
    background: var(--anu-card) !important;
    border-color: var(--anu-border-strong) !important;
    color: var(--anu-text) !important;
}
#page-container.dark-mode .anu-filter-card-head { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-filter-card-head i { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-filter-card label { color: var(--anu-text-secondary) !important; }

#page-container.dark-mode .anu-btn {
    background: var(--anu-card) !important;
    color: var(--anu-text) !important;
    border-color: var(--anu-border-strong) !important;
}
#page-container.dark-mode .anu-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-btn-ghost { background: transparent !important; }

#page-container.dark-mode .anu-view-toggle-group {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--anu-border-strong) !important;
}
#page-container.dark-mode .anu-view-toggle { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-view-toggle:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-view-toggle.anu-view-active {
    background: var(--anu-card) !important;
    color: var(--anu-text) !important;
}

#page-container.dark-mode .anu-pill {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary) !important;
}
#page-container.dark-mode .anu-pill:hover { background: rgba(255, 255, 255, 0.14) !important; }
#page-container.dark-mode .anu-pill-active {
    background: var(--anu-text) !important;
    color: #000 !important;
}
#page-container.dark-mode .anu-pill-active:hover { background: #fff !important; color: #000 !important; }

#page-container.dark-mode .anu-select,
#page-container.dark-mode .anu-date-input {
    background: #2c2c2e !important;
    border-color: var(--anu-border-strong) !important;
    color: var(--anu-text) !important;
}

#page-container.dark-mode .anu-table {
    background: var(--anu-card) !important;
    color: var(--anu-text) !important;
}
#page-container.dark-mode .anu-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--anu-text-secondary) !important;
    border-bottom-color: var(--anu-border) !important;
}
#page-container.dark-mode .anu-table tbody tr {
    border-bottom-color: var(--anu-border) !important;
}
#page-container.dark-mode .anu-table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tbody td { color: var(--anu-text) !important; }
#page-container.dark-mode .anu-table tfoot { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-table tfoot td { color: var(--anu-text) !important; }

#page-container.dark-mode .anu-card-item {
    background: var(--anu-card) !important;
    border-color: var(--anu-border-strong) !important;
}
#page-container.dark-mode .anu-card-item-head { background: rgba(255, 255, 255, 0.02) !important; }
#page-container.dark-mode .anu-card-item-foot { background: rgba(255, 255, 255, 0.03) !important; }
#page-container.dark-mode .anu-card-item-id { color: var(--anu-text) !important; }
#page-container.dark-mode .anu-card-item-meta-label { color: var(--anu-text-tertiary) !important; }
#page-container.dark-mode .anu-card-item-meta-value { color: var(--anu-text) !important; }

#page-container.dark-mode .anu-actions-trigger {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--anu-text-secondary) !important;
}
#page-container.dark-mode .anu-actions-trigger:hover {
    background: var(--anu-text) !important;
    color: #000 !important;
}
#page-container.dark-mode .anu-actions-menu {
    background: var(--anu-card) !important;
    border-color: var(--anu-border-strong) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
#page-container.dark-mode .anu-actions-item { color: var(--anu-text) !important; }
#page-container.dark-mode .anu-actions-item:hover { background: rgba(255, 255, 255, 0.08) !important; }

#page-container.dark-mode .anu-page-btn {
    background: var(--anu-card) !important;
    color: var(--anu-text-secondary) !important;
    border-color: var(--anu-border-strong) !important;
}
#page-container.dark-mode .anu-page-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .anu-page-btn.active {
    background: var(--anu-text) !important;
    color: #000 !important;
}

#page-container.dark-mode .anu-pago-item { background: rgba(0, 113, 227, 0.18) !important; }
#page-container.dark-mode .anu-pago-name { color: #6ec1ff !important; }
#page-container.dark-mode .anu-imp-tag { background: rgba(0, 113, 227, 0.18) !important; color: #6ec1ff !important; }
#page-container.dark-mode .anu-sucursal-monedero { background: rgba(255, 255, 255, 0.08) !important; }

#page-container.dark-mode .anu-empty {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--anu-border) !important;
}
#page-container.dark-mode .anu-empty-icon {
    background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%) !important;
}
#page-container.dark-mode .anu-empty-title { color: var(--anu-text) !important; }
#page-container.dark-mode .anu-empty-text { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-loader span { color: var(--anu-text-secondary) !important; }
#page-container.dark-mode .anu-spinner {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-top-color: #0071e3 !important;
}

#page-container.dark-mode .anu-badge-anulada {
    background: rgba(255, 59, 48, 0.15) !important;
    color: #ff6b6b !important;
    border-color: rgba(255, 59, 48, 0.3) !important;
}

/* Flatpickr dark mode para fechas */
#page-container.dark-mode .flatpickr-calendar {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
#page-container.dark-mode .flatpickr-day { color: #f5f5f7 !important; }
#page-container.dark-mode .flatpickr-day:hover { background: rgba(255, 255, 255, 0.08) !important; }
#page-container.dark-mode .flatpickr-day.inRange { background: rgba(255, 255, 255, 0.05) !important; color: #f5f5f7 !important; }
#page-container.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months,
#page-container.dark-mode .flatpickr-current-month input.cur-year { color: #f5f5f7 !important; }
#page-container.dark-mode .flatpickr-weekday { color: #8e8e93 !important; }
#page-container.dark-mode .flatpickr-day.selected,
#page-container.dark-mode .flatpickr-day.startRange,
#page-container.dark-mode .flatpickr-day.endRange {
    background: #f5f5f7 !important;
    color: #000 !important;
}
#page-container.dark-mode span.flatpickr-weekday,
#page-container.dark-mode .flatpickr-day.prevMonthDay,
#page-container.dark-mode .flatpickr-day.nextMonthDay { color: #6e6e73 !important; }
#page-container.dark-mode .flatpickr-months .flatpickr-prev-month,
#page-container.dark-mode .flatpickr-months .flatpickr-next-month { color: #aeaeb2 !important; fill: #aeaeb2 !important; }
#page-container.dark-mode .flatpickr-months .flatpickr-prev-month:hover,
#page-container.dark-mode .flatpickr-months .flatpickr-next-month:hover { color: #f5f5f7 !important; }

/* ==============================================================
   FOOTER (Jeloda global) - OneUI no provee dark mode para el footer
   Aplicar fondo oscuro al #page-footer cuando el body/page-container
   esta en dark-mode, para TODAS las paginas de la app.
   Usar mayor especificidad (doble ID) para ganar a .bg-body-light !important
   ============================================================== */
html body.dark-mode #page-footer,
html #page-container.dark-mode #page-footer,
html.dark-mode #page-footer,
body.dark-mode #page-footer,
#page-container.dark-mode #page-footer,
.dark-mode #page-footer,
html #page-container.dark-mode #page-footer.bg-body-light,
html body.dark-mode #page-footer.bg-body-light,
html.dark-mode #page-footer.bg-body-light,
#page-container.dark-mode #page-footer.bg-body-light,
body.dark-mode #page-footer.bg-body-light,
.dark-mode #page-footer.bg-body-light {
    background-color: #1c1c1e !important;
    background-image: none !important;
    border-top: 1px solid var(--gray-200) !important;
    color: var(--gray-700) !important;
}

#page-container.dark-mode #page-footer .text-muted,
body.dark-mode #page-footer .text-muted,
.dark-mode #page-footer .text-muted {
    color: var(--gray-600) !important;
}

#page-container.dark-mode #page-footer a,
body.dark-mode #page-footer a,
.dark-mode #page-footer a {
    color: #818cf8 !important;
}

#page-container.dark-mode #page-footer .badge.bg-dark,
body.dark-mode #page-footer .badge.bg-dark,
.dark-mode #page-footer .badge.bg-dark {
    background-color: #2c2c2e !important;
    border: 1px solid var(--gray-200) !important;
    color: var(--gray-900) !important;
}

#page-container.dark-mode #page-footer .badge.bg-dark a,
body.dark-mode #page-footer .badge.bg-dark a,
.dark-mode #page-footer .badge.bg-dark a {
    color: var(--gray-900) !important;
}

#page-container.dark-mode #page-footer .badge.bg-dark .text-warning,
body.dark-mode #page-footer .badge.bg-dark .text-warning,
.dark-mode #page-footer .badge.bg-dark .text-warning {
    color: #fbd38d !important;
}

#page-container.dark-mode #page-footer .content,
body.dark-mode #page-footer .content,
.dark-mode #page-footer .content {
    border-top: 1px solid var(--gray-200);
}

#page-container.dark-mode #page-footer .fas.fa-heart,
body.dark-mode #page-footer .fas.fa-heart,
.dark-mode #page-footer .fas.fa-heart {
    color: #f87171 !important;
}

#page-container.dark-mode #page-footer .fas.fa-map-marker-alt,
body.dark-mode #page-footer .fas.fa-map-marker-alt,
.dark-mode #page-footer .fas.fa-map-marker-alt {
    color: #818cf8 !important;
}