/* ============================================================
   TEMA OSCURO — complemento global para páginas del panel
   ------------------------------------------------------------
   El modo oscuro del panel funciona intercambiando la hoja principal a
   plantilla2.css y añadiendo la clase `tema-oscuro` al <body> (lo hace
   changep() en empresa.js y se fija al cargar en plantilla.php).

   plantilla2.css aclara el texto, pero muchas páginas (comprobantes:
   factura, boleta, nota de venta, notas de crédito/débito, etc.) usan
   superficies CLARAS fijas (.box, .box-modern, inputs, tablas, fondos en
   línea) que quedaban en blanco -> texto claro sobre blanco = ilegible.

   Aquí se oscurecen esas superficies de forma GENÉRICA, cubriendo el diseño
   viejo (AdminLTE .box) y el nuevo (.box-modern). Todo va bajo
   `body.tema-oscuro` con !important, así que el modo claro NO cambia y se
   vencen los estilos en línea. No se tocan los .btn de color.
   ============================================================ */

/* ----- Fondo de la página ----- */
body.tema-oscuro .content-wrapper { background-color: #15181e !important; }

/* ----- Tarjetas: diseño viejo (.box*) y nuevo (.box-modern) ----- */
body.tema-oscuro .content-wrapper .box,
body.tema-oscuro .content-wrapper .box-body,
body.tema-oscuro .content-wrapper .box-footer,
body.tema-oscuro .content-wrapper .box-header,
body.tema-oscuro .box-modern,
body.tema-oscuro .dashboard-header-modern {
  background-color: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
  box-shadow: none !important;
}

/* ----- Tarjetas internas con fondo claro EN LÍNEA (vencen solo con !important) ----- */
body.tema-oscuro .content-wrapper [style*="#fdfdfd"],
body.tema-oscuro .content-wrapper [style*="background: #fff"],
body.tema-oscuro .content-wrapper [style*="background:#fff"],
body.tema-oscuro .content-wrapper [style*="#f8f9fa"],
body.tema-oscuro .content-wrapper [style*="#fafafa"],
body.tema-oscuro .content-wrapper [style*="#f7fafc" i],
body.tema-oscuro .content-wrapper [style*="#f7f9fc" i],
body.tema-oscuro .content-wrapper [style*="#f9fafb" i] {
  background: #232830 !important;
  border-color: #3a4150 !important;
  box-shadow: none !important;
  color: #e8eaed !important;
}

/* ----- Textos (los que quedaban oscuros o sin contraste) ----- */
body.tema-oscuro .content-wrapper label,
body.tema-oscuro .content-wrapper .control-label,
body.tema-oscuro .content-wrapper .box-title,
body.tema-oscuro .content-wrapper .dash-title,
body.tema-oscuro .content-wrapper h1,
body.tema-oscuro .content-wrapper h2,
body.tema-oscuro .content-wrapper h3,
body.tema-oscuro .content-wrapper h4,
body.tema-oscuro .content-wrapper h5 { color: #e8eaed !important; }

/* ----- Inputs / selects / textareas ----- */
body.tema-oscuro .content-wrapper .form-control,
body.tema-oscuro .content-wrapper input[type="text"],
body.tema-oscuro .content-wrapper input[type="number"],
body.tema-oscuro .content-wrapper input[type="search"],
body.tema-oscuro .content-wrapper input[type="email"],
body.tema-oscuro .content-wrapper input[type="date"],
body.tema-oscuro .content-wrapper input[type="password"],
body.tema-oscuro .content-wrapper select,
body.tema-oscuro .content-wrapper textarea {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .content-wrapper .form-control::placeholder { color: #8b929e !important; }
body.tema-oscuro .content-wrapper .input-group-addon {
  background-color: #313a49 !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}

/* ----- select2 (caja y desplegable) ----- */
body.tema-oscuro .content-wrapper .select2-selection,
body.tema-oscuro .content-wrapper .select2-selection__rendered,
body.tema-oscuro .select2-dropdown,
body.tema-oscuro .select2-results__option {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .select2-results__option--highlighted { background-color: #313a49 !important; }

/* ----- Tablas (items, descuentos, totales, genéricas) ----- */
body.tema-oscuro .content-wrapper .table,
body.tema-oscuro .content-wrapper .tabla-items,
body.tema-oscuro .content-wrapper .tabla-descuentos,
body.tema-oscuro .content-wrapper .tabla-totales {
  background: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .content-wrapper .table > thead > tr > th,
body.tema-oscuro .content-wrapper .tabla-totales th {
  background: #2b313c !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .content-wrapper .table > tbody > tr > td,
body.tema-oscuro .content-wrapper .tabla-totales td {
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
/* Pie de tabla (filas de TOTALES) */
body.tema-oscuro .content-wrapper .table > tfoot > tr > td,
body.tema-oscuro .content-wrapper .table > tfoot > tr > th {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
/* Filas con fondo claro fijo EN LÍNEA (cabeceras/totales: #ECEFF1, #f5f5f5, #f0f0f0) */
body.tema-oscuro .content-wrapper .table tr[style*="#f5f5f5" i],
body.tema-oscuro .content-wrapper .table tr[style*="#eceff1" i],
body.tema-oscuro .content-wrapper .table tr[style*="#f0f0f0" i] {
  background-color: #2b313c !important;
}
body.tema-oscuro .content-wrapper .table-hover > tbody > tr:hover > td { background: #2b313c !important; }
body.tema-oscuro .content-wrapper .tabla-totales tr.op-total td {
  background: #2e2330 !important;
  color: #ff8a80 !important;
}

/* ----- Pie con botones guardar/eliminar ----- */
body.tema-oscuro .content-wrapper .contenedor-btns-carrito {
  background-color: #1d2229 !important;
  border-color: #3a4150 !important;
}

/* ----- Tablas con franjas (striped) y hover de Bootstrap -----
   Las filas impares de .table-striped usan un gris claro (#f9f9f9) que dejaba
   texto claro sobre fondo casi blanco. */
body.tema-oscuro .content-wrapper .table-striped > tbody > tr:nth-of-type(odd) > td,
body.tema-oscuro .content-wrapper .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #20242c !important;
}
body.tema-oscuro .content-wrapper .table-hover > tbody > tr:hover > td,
body.tema-oscuro .content-wrapper .table-hover > tbody > tr:hover > th {
  background-color: #2b313c !important;
}

/* Resaltado amarillo (#FFF9C4) en línea de la columna "Valor Total" (reporte de
   saldos): en oscuro el texto sale claro y quedaba ILEGIBLE sobre amarillo. Se
   convierte en ámbar OSCURO con texto ámbar claro (mantiene el realce). Va
   DESPUÉS de las reglas striped/hover para ganarles por orden de cascada. */
body.tema-oscuro .content-wrapper .table-striped > tbody > tr > td[style*="#FFF9C4" i],
body.tema-oscuro .content-wrapper .table td[style*="#FFF9C4" i],
body.tema-oscuro .content-wrapper .table th[style*="#FFF9C4" i] {
  background-color: #3a3520 !important;
  color: #ffe082 !important;
}
/* Resaltado VERDE (#C8E6C9, columna "Stock Total" del consolidado) -> verde oscuro */
body.tema-oscuro .content-wrapper .table-striped > tbody > tr > td[style*="#C8E6C9" i],
body.tema-oscuro .content-wrapper .table td[style*="#C8E6C9" i],
body.tema-oscuro .content-wrapper .table th[style*="#C8E6C9" i] {
  background-color: #1f3325 !important;
  color: #a5d6a7 !important;
}
/* Resaltado AZUL (#E3F2FD, cabeceras por sucursal del consolidado) -> azul oscuro */
body.tema-oscuro .content-wrapper .table-striped > tbody > tr > td[style*="#E3F2FD" i],
body.tema-oscuro .content-wrapper .table td[style*="#E3F2FD" i],
body.tema-oscuro .content-wrapper .table th[style*="#E3F2FD" i] {
  background-color: #1e2f3d !important;
  color: #90caf9 !important;
}

/* ----- Controles de DataTables (info, longitud, búsqueda, paginación) -----
   Aplican globalmente en modo oscuro (no solo dentro de .content-wrapper). */
body.tema-oscuro .dataTables_wrapper,
body.tema-oscuro .dataTables_info,
body.tema-oscuro .dataTables_length,
body.tema-oscuro .dataTables_length label,
body.tema-oscuro .dataTables_filter,
body.tema-oscuro .dataTables_filter label,
body.tema-oscuro .dataTables_paginate { color: #cdd2db !important; }

/* Paginación (DataTables usa la paginación Bootstrap: .pagination > li > a) */
body.tema-oscuro .pagination > li > a,
body.tema-oscuro .pagination > li > span {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pagination > li > a:hover,
body.tema-oscuro .pagination > li > span:hover {
  background-color: #3a4150 !important;
  color: #ffffff !important;
}
body.tema-oscuro .pagination > .active > a,
body.tema-oscuro .pagination > .active > span,
body.tema-oscuro .pagination > .active > a:hover,
body.tema-oscuro .pagination > .active > span:hover {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
}
body.tema-oscuro .pagination > .disabled > a,
body.tema-oscuro .pagination > .disabled > span {
  background-color: #232830 !important;
  color: #6b7280 !important;
  border-color: #3a4150 !important;
}

/* ----- Controles de filtro comunes (bootstrap-select .btn-select y buscadores
   .input-search) usados en arqueo, inventario, reportes, etc. ----- */
body.tema-oscuro .btn-select {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .btn-select + .dropdown-menu {
  background-color: #232830 !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .btn-select + .dropdown-menu li > a,
body.tema-oscuro .btn-select + .dropdown-menu li {
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .btn-select + .dropdown-menu li > a:hover,
body.tema-oscuro .btn-select + .dropdown-menu li.selected > a {
  background-color: #313a49 !important;
  color: #ffffff !important;
}
body.tema-oscuro .contenedor-busqueda .input-search input,
body.tema-oscuro .contenedor-busqueda .input-group-search input,
body.tema-oscuro .contenedor-busqueda .input-group-searchkardex .input-search input {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}

/* ----- Botón ACCIONES (engranaje) y su menú en la tabla de Guías ----- */
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-toggle.option-menu {
  background: #2b313c !important;
  border-color: #3a4150 !important;
  color: #e8eaed !important;
}
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-toggle.option-menu:hover {
  border-color: #6ea8fe !important;
  color: #ffffff !important;
}
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-menu {
  background-color: #232830 !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-menu button,
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-menu li > button {
  background: transparent !important;
  color: #e8eaed !important;
}
body.tema-oscuro .contenedor-acciones-transferencia .dropdown-menu button:hover {
  background: #313a49 !important;
  color: #ffffff !important;
}

/* ============================================================
   POS (/pos) — usa su propio wrapper `.pos-contenedoor` (NO .content-wrapper)
   y un diseño PARCIALMENTE oscuro. Aquí se oscurecen solo las superficies que
   quedaban CLARAS (wrapper, tarjetas de producto, panel del carrito, tablas,
   totales, inputs, pie). Las zonas que ya son oscuras por diseño (cabecera
   .pos-header-actions, selector .container-comprobants-pos, herramientas) no se
   tocan, y los botones de color se conservan.
   ============================================================ */
body.tema-oscuro .pos-contenedoor { background-color: #15181e !important; }

/* Paneles izquierdo/derecho: transparentes sobre el wrapper oscuro */
body.tema-oscuro .pos-contenedoor .super-contenedor-productos-pos,
body.tema-oscuro .pos-contenedoor .super-contenedor-formulario-pos,
body.tema-oscuro .pos-contenedoor .productos-pos,
body.tema-oscuro .pos-contenedoor .form-items-pos,
body.tema-oscuro .pos-contenedoor .pos-seccion-productos,
body.tema-oscuro .pos-contenedoor .pos-seccion-carrito {
  background-color: transparent !important;
  color: #e8eaed !important;
}

/* Tarjetas de producto */
body.tema-oscuro .pos-contenedoor .productos-pos .productos-pos-venta {
  background-color: #232830 !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor .productos-pos .productos-pos-venta .descripcion-pos,
body.tema-oscuro .pos-contenedoor .productos-pos .productos-pos-venta span {
  color: #e8eaed !important;
}
body.tema-oscuro .pos-contenedoor .productos-pos .productos-pos-venta .precio-unitario,
body.tema-oscuro .pos-contenedoor .productos-pos .productos-pos-venta .precio-uni-pos {
  color: #38bdf8 !important;
}

/* Inputs / selects / addons */
body.tema-oscuro .pos-contenedoor .form-control,
body.tema-oscuro .pos-contenedoor input[type="text"],
body.tema-oscuro .pos-contenedoor input[type="number"],
body.tema-oscuro .pos-contenedoor input[type="search"],
body.tema-oscuro .pos-contenedoor select,
body.tema-oscuro .pos-contenedoor textarea {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor .input-group-addon {
  background-color: #313a49 !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor label { color: #e8eaed !important; }

/* Tablas del carrito (items, descuentos, totales) */
body.tema-oscuro .pos-contenedoor .table,
body.tema-oscuro .pos-contenedoor .tabla-items,
body.tema-oscuro .pos-contenedoor .tabla-descuentos,
body.tema-oscuro .pos-contenedoor .tabla-totales {
  background: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor .table > thead > tr > th,
body.tema-oscuro .pos-contenedoor .tabla-totales th {
  background: #2b313c !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor .table > tbody > tr > td,
body.tema-oscuro .pos-contenedoor .tabla-totales td {
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pos-contenedoor .tabla-totales tr.op-total td {
  background: #2e2330 !important;
  color: #ff8a80 !important;
}

/* Caja de totales (AdminLTE .box) */
body.tema-oscuro .pos-contenedoor .box,
body.tema-oscuro .pos-contenedoor .box-body,
body.tema-oscuro .pos-contenedoor .contenedor-totales-ventas-pos {
  background-color: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}

/* Pie de botones del carrito */
body.tema-oscuro .pos-contenedoor .contenedor-btns-carrito {
  background-color: #1d2229 !important;
  border-top-color: #3a4150 !important;
}

/* Estado vacío del carrito */
body.tema-oscuro .pos-contenedoor .super-contenedor-formulario-pos .inicio-pos { color: #aab1bd !important; }

/* ============================================================
   MODALES (Bootstrap) — agregar/editar sucursal, usuario, cuenta bancaria,
   cliente, proveedor, producto, etc. Los modales viven FUERA de .content-wrapper
   (al final de la página), por eso las reglas de arriba no los alcanzaban.
   Se oscurece el cuerpo/pie y los controles; el encabezado de color (bg-info,
   bg-primary…) se conserva; los .btn de color también.
   ============================================================ */
body.tema-oscuro .modal-content { background-color: #232830 !important; color: #e8eaed !important; }
body.tema-oscuro .modal-body { background-color: #232830 !important; color: #e8eaed !important; }
body.tema-oscuro .modal-footer {
  background-color: #1d2229 !important;
  border-top-color: #3a4150 !important;
}
body.tema-oscuro .modal-header { border-bottom-color: #3a4150 !important; }
body.tema-oscuro .modal-header .modal-title,
body.tema-oscuro .modal-content .close { color: #e8eaed !important; }

/* Textos */
body.tema-oscuro .modal-content label,
body.tema-oscuro .modal-content .control-label,
body.tema-oscuro .modal-content h1,
body.tema-oscuro .modal-content h2,
body.tema-oscuro .modal-content h3,
body.tema-oscuro .modal-content h4,
body.tema-oscuro .modal-content h5,
body.tema-oscuro .modal-content p { color: #e8eaed !important; }

/* Inputs / selects / textareas / addons */
body.tema-oscuro .modal-content .form-control,
body.tema-oscuro .modal-content input[type="text"],
body.tema-oscuro .modal-content input[type="number"],
body.tema-oscuro .modal-content input[type="search"],
body.tema-oscuro .modal-content input[type="email"],
body.tema-oscuro .modal-content input[type="date"],
body.tema-oscuro .modal-content input[type="password"],
body.tema-oscuro .modal-content select,
body.tema-oscuro .modal-content textarea {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .modal-content .form-control::placeholder { color: #8b929e !important; }
body.tema-oscuro .modal-content .input-group-addon {
  background-color: #313a49 !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .modal-content .select2-selection,
body.tema-oscuro .modal-content .select2-selection__rendered {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}

/* Tarjetas/fondos claros EN LÍNEA dentro del modal */
body.tema-oscuro .modal-content [style*="#fdfdfd"],
body.tema-oscuro .modal-content [style*="background: #fff"],
body.tema-oscuro .modal-content [style*="background:#fff"],
body.tema-oscuro .modal-content [style*="#f8f9fa"] {
  background: #2b313c !important;
  border-color: #3a4150 !important;
}

/* Tablas dentro del modal */
body.tema-oscuro .modal-content .table {
  background: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .modal-content .table > thead > tr > th {
  background: #2b313c !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .modal-content .table > tbody > tr > td {
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}

/* ============================================================
   PÁGINAS "PRO": inicio (.ip-*), productos (.pp-*), clientes (.cp-*)
   Mismo patrón que ventas (.vp-*): hero de color + toolbar + card con tabla.
   Las tablas/inputs internos ya los cubren las reglas .content-wrapper de
   arriba; aquí se oscurecen los CONTENEDORES propios (tarjetas y toolbars). Los
   hero (gradiente de color), badges y botones de color se conservan.
   ============================================================ */
body.tema-oscuro .pp-card,
body.tema-oscuro .pp-toolbar,
body.tema-oscuro .cp-card,
body.tema-oscuro .cp-toolbar,
body.tema-oscuro .ip-card,
body.tema-oscuro .ip-card__header {
  background-color: #232830 !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
  box-shadow: none !important;
}
/* Cabeceras de sus tablas */
body.tema-oscuro .pp-card .tablaProductos thead th,
body.tema-oscuro .cp-card .tabla-clientes thead th {
  background: #2b313c !important;
  color: #cdd2db !important;
  border-color: #3a4150 !important;
}
body.tema-oscuro .pp-card .tablaProductos tbody td,
body.tema-oscuro .cp-card .tabla-clientes tbody td {
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}
/* Buscadores / inputs de sus toolbars */
body.tema-oscuro .pp-toolbar input,
body.tema-oscuro .pp-toolbar select,
body.tema-oscuro .cp-toolbar input,
body.tema-oscuro .cp-toolbar select {
  background-color: #2b313c !important;
  color: #e8eaed !important;
  border-color: #3a4150 !important;
}