/* ===== Modo oscuro (2026-11-02) =====
   Se activa con el botón luna/sol de la barra superior: header.php pone body[data-theme=dark] y lo recuerda en este
   navegador (localStorage "insaga_tema"). El tema (style.min.css) ya trae la base oscura; aquí van solo las partes del
   sistema que quedaban claras o ilegibles. Nada de esto se aplica en modo claro.
   Colores del tema oscuro: fondo #323743, tarjetas #272b34, texto #b2b9bf. Aquí: texto claro #d4d8dc, realce #3e4555. */

/* --- Etapa 1: estructura, Zona de Pedidos, pedido y cobro --- */

/* Barra superior: el tema la deja blanca (skin6). El logo pasa a blanco conservando el rojo. */
body[data-theme=dark] .topbar,
body[data-theme=dark] .topbar .top-navbar,
body[data-theme=dark] .topbar .top-navbar .navbar-header,
body[data-theme=dark] .topbar .navbar-collapse {
  background: #272b34 !important;
}
body[data-theme=dark] .topbar .nav-link,
body[data-theme=dark] .topbar .nav-toggler,
body[data-theme=dark] .topbar .topbartoggler,
body[data-theme=dark] .topbar .sidebartoggler {
  color: #d4d8dc !important;
}
body[data-theme=dark] .topbar .navbar-brand img {
  filter: invert(1) hue-rotate(180deg) saturate(1.6);
}

/* Menú lateral. */
body[data-theme=dark] .left-sidebar,
body[data-theme=dark] .scroll-sidebar,
body[data-theme=dark] .sidebar-nav,
body[data-theme=dark] .sidebar-nav ul,
body[data-theme=dark] .sidebar-nav ul .sidebar-item .first-level {
  background: #272b34 !important;
}
body[data-theme=dark] .sidebar-nav ul .sidebar-item .sidebar-link,
body[data-theme=dark] .sidebar-nav ul .sidebar-item .sidebar-link i {
  color: #d4d8dc !important;
}

/* Textos y fondos de clases del tema que no tienen versión oscura. */
body[data-theme=dark] .text-inverse {
  color: #d4d8dc !important;
}
body[data-theme=dark] .bg-header {
  background-color: #323743 !important;
}

/* Pestañas tipo "pastilla" sin seleccionar (Zona de Pedidos, menú de Configuración): el tema las dejaba casi negras. */
body[data-theme=dark] .nav-pills .nav-link:not(.active) {
  color: #d4d8dc;
}

/* Ventana de pedido y de detalle (mesa, Para llevar, Delivery). */
body[data-theme=dark] #modal-nuevo-pedido .card-title {
  color: #d4d8dc !important;
}
body[data-theme=dark] #modal-nuevo-pedido .cont04 > .bg-light-inverse {
  background-color: #323743 !important;
  border-color: rgba(255, 255, 255, .08);
}

/* Búsqueda de clientes (autocompletar de jQuery UI): la lista salía en blanco. */
body[data-theme=dark] .ui-autocomplete,
body[data-theme=dark] .ui-menu {
  background: #323743 !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
body[data-theme=dark] .ui-menu .ui-menu-item,
body[data-theme=dark] .ui-menu .ui-menu-item-wrapper {
  color: #d4d8dc !important;
}
body[data-theme=dark] .ui-menu .ui-state-active,
body[data-theme=dark] .ui-menu .ui-menu-item-wrapper:hover {
  background: #3e4555 !important;
  border-color: #3e4555 !important;
  color: #fff !important;
}

/* Pantalla de pedido: productos por enviar (fila amarilla clara). */
body[data-theme=dark] .warning-element {
  background-color: rgba(255, 193, 7, .12) !important;
}
body[data-theme=dark] .warning-element span[name="producto"] {
  color: #e9ecef;
}

/* Ventana de cobro: fondos claros puestos en línea en orden.php y el pie blanco. */
body[data-theme=dark] #modal-facturar .col-md-5.order-2,
body[data-theme=dark] #modal-facturar .col-md-7.order-1,
body[data-theme=dark] #modal-facturar table.table-condensed {
  background: #272b34 !important;
}
body[data-theme=dark] #modal-facturar .modal-footer {
  background: #272b34 !important;
  border-top-color: rgba(255, 255, 255, .08);
}

/* --- Etapa 2: Caja, Reportes, Clientes, Compras, Inventario, Facturación y Configuración --- */

/* Listas de enlaces (índice de Reportes) y enlaces sueltos en tablas (Salones y mesas): quedaban casi negros. */
body[data-theme=dark] a.list-group-item {
  color: #d4d8dc;
}
body[data-theme=dark] .table td > a:not([class]) {
  color: #d4d8dc;
}

/* Avisos de Bootstrap (por ejemplo, los azules de Configuración): fondo de color suave en lugar de claro. */
body[data-theme=dark] .alert-info {
  background-color: rgba(30, 136, 229, .15);
  border-color: rgba(30, 136, 229, .35);
  color: #9fcdfb;
}
body[data-theme=dark] .alert-warning {
  background-color: rgba(255, 178, 43, .15);
  border-color: rgba(255, 178, 43, .35);
  color: #ffd28a;
}
body[data-theme=dark] .alert-danger {
  background-color: rgba(252, 75, 108, .15);
  border-color: rgba(252, 75, 108, .35);
  color: #ff9fb1;
}
body[data-theme=dark] .alert-success {
  background-color: rgba(33, 193, 214, .15);
  border-color: rgba(33, 193, 214, .35);
  color: #8fe3ee;
}

/* Columnas resaltadas de los reportes (style_all.css: efectivo, tarjeta y descuento). */
body[data-theme=dark] .bg-efectivo {
  background-color: rgba(139, 195, 74, .18) !important;
}
body[data-theme=dark] .bg-tarjeta {
  background-color: rgba(30, 136, 229, .18) !important;
}
body[data-theme=dark] .bg-descuento {
  background-color: rgba(255, 178, 43, .18) !important;
}

/* Productos y Promociones: el panel derecho tiene el fondo claro puesto en línea (#f8f8f8). */
body[data-theme=dark] .col-lg-5.rounded-right {
  background: #323743 !important;
}

/* Inicio: "Totales" en morado #7f3df4 puesto en línea; más claro para leerse sobre fondo oscuro. */
body[data-theme=dark] [style*="#7f3df4"] {
  color: #a78bfa !important;
}

/* --- Etapa 3: avisos, notificaciones, gráficos y controles del navegador --- */

/* Controles propios del navegador (listas desplegables nativas, barras de desplazamiento, campos de fecha) en oscuro. */
body[data-theme=dark] {
  color-scheme: dark;
}

/* Ventanas de aviso (SweetAlert2): salían blancas y con el título casi invisible. */
body[data-theme=dark] .swal2-popup {
  background: #272b34 !important;
}
body[data-theme=dark] .swal2-title {
  color: #e9ecef !important;
}
body[data-theme=dark] .swal2-html-container,
body[data-theme=dark] .swal2-content,
body[data-theme=dark] .swal2-footer {
  color: #c3c9ce !important;
}
body[data-theme=dark] .swal2-footer {
  border-top-color: rgba(255, 255, 255, .08) !important;
}
body[data-theme=dark] .swal2-input,
body[data-theme=dark] .swal2-textarea,
body[data-theme=dark] .swal2-select {
  background: #323743 !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
body[data-theme=dark] .swal2-validation-message {
  background: #323743 !important;
  color: #e9ecef !important;
}
/* El ícono de "listo" usa piezas blancas para tapar el círculo: van del color de la ventana. */
body[data-theme=dark] .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
body[data-theme=dark] .swal2-icon.swal2-success .swal2-success-fix {
  background-color: #272b34 !important;
}

/* Notificaciones de la esquina (jQuery Toast): el texto quedaba oscuro sobre su color. */
body[data-theme=dark] .jq-toast-single {
  color: #fff;
}

/* Globo de los gráficos c3 (Inicio): fondo blanco por defecto. */
body[data-theme=dark] .c3-tooltip {
  background-color: #323743;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
body[data-theme=dark] .c3-tooltip th {
  background-color: #3e4555;
  color: #e9ecef;
}
body[data-theme=dark] .c3-tooltip td {
  background-color: #323743;
  color: #d4d8dc;
  border-left-color: rgba(255, 255, 255, .08);
}

/* Bandas de título de formularios (por ejemplo "Contacto" en Nuevo cliente): el tema las ponía casi negras (#020510). */
body[data-theme=dark] .bg-light-inverse {
  background-color: #323743 !important;
}

/* --- Correcciones (2026-11-02): detalles señalados al usarlo --- */

/* Botón X de las ventanas: el tema lo deja negro al 50 %, casi invisible sobre fondo oscuro. */
body[data-theme=dark] .close {
  color: #fff;
}

/* Fondo "blanco" (.bg-white): el tema lo vuelve negro puro; aquí toma el color de las tarjetas, como en modo claro
   (botón del voucher en las formas de pago, cabeceras de Compras e Inventario, pie de Apertura de caja). */
body[data-theme=dark] .bg-white {
  background-color: #272b34 !important;
}

/* Formas de pago con color negro (#000000): su ícono se perdía sobre el fondo oscuro. */
body[data-theme=dark] .input-group.dec i[style*="#000000"] {
  color: #d4d8dc !important;
}

/* Ventana de cobro: la lista de productos tiene fondo blanco puesto en línea. */
body[data-theme=dark] #modal-facturar table.stylish-table {
  background: #272b34 !important;
}

/* Listas de productos del pedido y del cobro (.tb-st de style_all.css): texto gris oscuro, poco legible. */
body[data-theme=dark] .tb-st {
  color: #b2b9bf;
}

/* Notas del producto (bootstrap-tagsinput): el campo salía blanco y lo escrito, en blanco. */
body[data-theme=dark] .bootstrap-tagsinput {
  background-color: #272b34;
  border-color: #4f5467 !important;
  color: #d4d8dc;
}

/* Casillas sin marcar: borde más claro para que se vean sobre fondo oscuro. */
body[data-theme=dark] [type=checkbox].filled-in:not(:checked) + label:after {
  border-color: #8a929b;
}

/* Gráficos c3 (Inicio): la leyenda y los ejes salían en negro. */
body[data-theme=dark] .c3-legend-item text,
body[data-theme=dark] .c3-axis text,
body[data-theme=dark] .c3-title {
  fill: #b2b9bf;
}

/* --- Correcciones 2 (2026-11-02): más partes señaladas al usarlo --- */

/* Fondos claros puestos en línea (#f1f1f1): franja de búsqueda y cabecera del producto en las ventanas de recetas,
   ingredientes y toppings (Productos y Promociones) y en Ajuste de stock. */
body[data-theme=dark] [style*="background:#f1f1f1"] {
  background: #323743 !important;
}

/* Filas "No se encontraron datos" con fondo blanco forzado en línea (Resumen de caja, Inicio): la celda tapa la fila. */
body[data-theme=dark] tr[style*="background: #fff !important"] > td {
  background-color: #272b34 !important;
}
body[data-theme=dark] tr[style*="background: #fff !important"] > td:first-child {
  border-left: 4px solid #272b34 !important;
}

/* Enlaces "AQUI" dentro de los avisos (Compras, Productos, Promociones): salían del mismo tono que el aviso. */
body[data-theme=dark] .alert .alert-link {
  color: #fff;
  text-decoration: underline;
}

/* Opciones desactivadas de las listas (por ejemplo, las cajas ya abiertas): el tema las pintaba igual que las demás. */
body[data-theme=dark] .dropdown-item.disabled,
body[data-theme=dark] .dropdown-item:disabled {
  color: #6c757d;
}

/* Calendarios (bootstrap-datepicker): el día o mes bajo el cursor salía con fondo claro. */
body[data-theme=dark] .datepicker table tr td.day:not(.active):hover,
body[data-theme=dark] .datepicker table tr td.day.focused:not(.active),
body[data-theme=dark] .datepicker table tr td span:not(.active):hover,
body[data-theme=dark] .datepicker table tr td span.focused:not(.active),
body[data-theme=dark] .datepicker .datepicker-switch:hover,
body[data-theme=dark] .datepicker .next:hover,
body[data-theme=dark] .datepicker .prev:hover,
body[data-theme=dark] .datepicker tfoot tr th:hover {
  background: #3e4555;
  color: #fff;
}

/* Reloj del selector de fecha y hora (Reportes con "filtrar por fecha y hora"): es un SVG con la esfera clara y los
   números negros puestos como atributos; el CSS les gana a esos atributos. */
body[data-theme=dark] .dtp .svg-clock circle[fill="#eee"] {
  fill: #323743;
  stroke: #4f5467;
}
body[data-theme=dark] .dtp .svg-clock circle[fill="#757575"] {
  fill: #8a929b;
}
body[data-theme=dark] .dtp .svg-clock text[fill="#000"] {
  fill: #e9ecef;
}
body[data-theme=dark] .dtp .svg-clock text[fill="#bdbdbd"] {
  fill: #6c757d;
}
body[data-theme=dark] .dtp .svg-clock line[stroke="#bdbdbd"] {
  stroke: #6c757d;
}
body[data-theme=dark] .dtp a.dtp-meridien-am:not(.selected),
body[data-theme=dark] .dtp a.dtp-meridien-pm:not(.selected) {
  background: #3e4555;
  color: #e9ecef;
}

/* Botón luna/sol de la barra superior. */
.btn-tema i {
  font-size: 18px;
}

/* Al imprimir un reporte desde el navegador, siempre en claro. */
@media print {
  body[data-theme=dark],
  body[data-theme=dark] .page-wrapper,
  body[data-theme=dark] .card {
    background: #fff !important;
    color: #000 !important;
  }
}