/*
 * DICMAG – Sistema de Gestión Integral
 * Design System v3  |  Base: Velzon Admin (Bootstrap 5)
 *
 * PALETA OFICIAL (unificada):
 *   VERDE (principal): #064e3b oscuro · #059669 base · #10b981 claro · #0d9488/#14b8a6 teal
 *   AZUL  (acento):    #3d78e3  (botones secundarios, detalles)
 *   ROJO único: #f06548 (danger Velzon) en TODO el sistema · naranja (warning #f97316) · gris (muted #6c757d)
 *   Los verdes/azules dispersos de las vistas se unificaron a esta paleta.
 */

#btn-filtrar:hover { background-color: #10b981 !important; border-color: transparent !important; }

/* Los botones "Nuevo X" usan la clase btn-soft-success de Velzon (verde),
   sin override de color: se ven verdes y al pasar el mouse se rellenan de verde. */

/* ═══════════════════════════════════════════════════════════════════
   1. VARIABLES CORPORATIVAS
═══════════════════════════════════════════════════════════════════ */
:root {
  --dc-blue-900:  #064e3b;
  --dc-blue-800:  #065f46;
  --dc-blue-600:  #059669;
  --dc-blue-400:  #10b981;
  --dc-blue-50:   #ecfdf5;

  --dc-green-900: #064e3b;
  --dc-green-600: #059669;
  --dc-green-400: #10b981;
  --dc-green-50:  #ecfdf5;

  --dc-orange:    #f97316;
  --dc-red:       #f06548;

  --dc-grad-blue:    linear-gradient(135deg, #064e3b 0%, #059669 55%, #10b981 100%);
  --dc-grad-blue-h:  linear-gradient(90deg,  #064e3b 0%, #059669 52%, #10b981 100%);
  --dc-grad-green:   linear-gradient(135deg, #064e3b 0%, #059669 55%, #10b981 100%);
  --dc-grad-orange:  linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --dc-grad-red:     linear-gradient(135deg, #d9402a 0%, #f06548 100%);

  --dc-shadow-card:  0 4px 24px rgba(6, 78, 59, .10);
  --dc-shadow-modal: 0 10px 48px rgba(6, 78, 59, .18);
}

/* ───────────────────────────────────────────────────────────────────
   PRIMARY = AZUL nativo de Velzon (#3d78e3) · SUCCESS = VERDE (#0ab39c)
   Se usa la paleta nativa de Velzon SIN secuestrar primary.
   - primary (azul)  → botones de acción, links, intercalado azul
   - success (verde) → confirmaciones, intercalado verde
   - El VERDE de identidad (sidebar, topbar, headers) se aplica con
     clases/HEX propios más abajo, no sobre la variable primary.
─────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────
   INFO = mismo AZUL de marca (#3d78e3)
   Velzon trae 'info' en celeste (#29badb). Aquí lo igualamos al azul
   de marca para que NO exista un celeste suelto: todo lo que use
   bg-info / text-info / bg-info-subtle se ve con NUESTRO azul.
─────────────────────────────────────────────────────────────────── */
:root {
  --vz-info:               #3d78e3;
  --vz-info-rgb:           61, 120, 227;
  --vz-info-text-emphasis: #2a5cc4;
  --vz-info-bg-subtle:     #e2ebfb;
  --vz-info-border-subtle: #b1c9f4;
  --bs-info:               #3d78e3;
  --bs-info-rgb:           61, 120, 227;
  --bs-info-text-emphasis: #2a5cc4;
  --bs-info-bg-subtle:     #e2ebfb;
  --bs-info-border-subtle: #b1c9f4;
}
.text-info        { color: #3d78e3 !important; }
.bg-info          { background-color: #3d78e3 !important; }
.bg-info-subtle   { background-color: #e2ebfb !important; }
.border-info,
.border-info-subtle { border-color: #b1c9f4 !important; }
.link-info        { color: #3d78e3 !important; }
.badge.bg-info    { background-color: #3d78e3 !important; }
.btn-info {
  --vz-btn-bg:               #3d78e3;
  --vz-btn-border-color:     #3d78e3;
  --vz-btn-hover-bg:         #2a5cc4;
  --vz-btn-hover-border-color:#2a5cc4;
  --vz-btn-active-bg:        #2a5cc4;
  --vz-btn-active-border-color:#2a5cc4;
}

/* ───────────────────────────────────────────────────────────────────
   DANGER = ROJO único de marca (#f06548)
   Velzon trae 'danger' en #f17171 (rosado). Aquí lo igualamos al rojo
   único del sistema para que TODO bg-danger / text-danger sea ese rojo.
─────────────────────────────────────────────────────────────────── */
:root {
  --vz-danger:               #f06548;
  --vz-danger-rgb:           240, 101, 72;
  --vz-danger-text-emphasis: #c0392b;
  --vz-danger-bg-subtle:     #fde8e3;
  --vz-danger-border-subtle: #f9c2b5;
  --bs-danger:               #f06548;
  --bs-danger-rgb:           240, 101, 72;
  --bs-danger-text-emphasis: #c0392b;
  --bs-danger-bg-subtle:     #fde8e3;
  --bs-danger-border-subtle: #f9c2b5;
}
.text-danger        { color: #f06548 !important; }
.bg-danger          { background-color: #f06548 !important; }
.bg-danger-subtle   { background-color: #fde8e3 !important; }
.border-danger,
.border-danger-subtle { border-color: #f9c2b5 !important; }
.link-danger        { color: #f06548 !important; }
.badge.bg-danger    { background-color: #f06548 !important; }
.btn-danger {
  --vz-btn-bg:               #f06548;
  --vz-btn-border-color:     #f06548;
  --vz-btn-hover-bg:         #d9402a;
  --vz-btn-hover-border-color:#d9402a;
  --vz-btn-active-bg:        #d9402a;
  --vz-btn-active-border-color:#d9402a;
}

/* Switch (toggle) en verde por defecto */
.form-switch .form-check-input:checked { background-color: #059669 !important; }

/* …salvo cuando lleva una variante de color de Velzon (.form-check-success, etc.):
   ahí el switch toma el color de su contexto. La regla de arriba usa !important,
   así que hay que devolvérselo a las variantes para que ganen. */
.form-switch.form-check-primary .form-check-input:checked { background-color: var(--vz-primary) !important; border-color: var(--vz-primary) !important; }
.form-switch.form-check-success .form-check-input:checked { background-color: var(--vz-success) !important; border-color: var(--vz-success) !important; }
.form-switch.form-check-info    .form-check-input:checked { background-color: var(--vz-info)    !important; border-color: var(--vz-info)    !important; }
.form-switch.form-check-warning .form-check-input:checked { background-color: var(--vz-warning) !important; border-color: var(--vz-warning) !important; }
.form-switch.form-check-danger  .form-check-input:checked { background-color: var(--vz-danger)  !important; border-color: var(--vz-danger)  !important; }
.form-switch.form-check-dark    .form-check-input:checked { background-color: var(--vz-dark)    !important; border-color: var(--vz-dark)    !important; }

/* ═══════════════════════════════════════════════════════════════════
   2. ANIMACIONES
═══════════════════════════════════════════════════════════════════ */
#modalNuevaPersona .modal-dialog {
  animation: slideUp .3s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   3. MODO EDITAR – checkmark naranja en campos válidos
═══════════════════════════════════════════════════════════════════ */
.modo-editar .form-control.is-valid,
.modo-editar .form-control.is-valid:focus {
  border-color: #fccc4c;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fccc4c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c%2fsvg%3e");
}

/* ═══════════════════════════════════════════════════════════════════
   4. TARJETAS
═══════════════════════════════════════════════════════════════════ */
.page-content .card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--dc-shadow-card) !important;
  overflow: hidden;
}

/* Encabezado con gradiente corporativo */
.card-header-dicmag {
  background: var(--dc-grad-blue) !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
}
.card-header-dicmag .card-title,
.card-header-dicmag h5 {
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.card-header-dicmag .card-title i,
.card-header-dicmag h5 i {
  color: rgba(255, 255, 255, .88) !important;
}

/* ── Tabs (pestañas) dentro del header verde ──────────────────────────
   Texto blanco translúcido; la pestaña activa toma un fondo blanco
   translúcido (vidrio) en vez del blanco sólido feo de Bootstrap. */
.card-header-dicmag .nav-tabs-custom .nav-link {
  color: rgba(255, 255, 255, .82) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-weight: 600;
  padding: 8px 16px;
}
.card-header-dicmag .nav-tabs-custom .nav-link i {
  color: rgba(255, 255, 255, .82) !important;
}
.card-header-dicmag .nav-tabs-custom .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
  border-radius: 8px 8px 0 0;
}
.card-header-dicmag .nav-tabs-custom .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  border-bottom: 2px solid #fff !important;
  border-radius: 8px 8px 0 0;
}
.card-header-dicmag .nav-tabs-custom .nav-link.active i {
  color: #fff !important;
}
/* Los badges contadores dentro de las pestañas: legibles sobre el verde */
.card-header-dicmag .nav-tabs-custom .nav-link .badge {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

/* Botón "Nueva X" dentro del header */
.btn-header-nuevo {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  font-size: .85rem;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 500;
  transition: background .2s, transform .15s;
}
.btn-header-nuevo:hover {
  background: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-header-nuevo i { color: #fff !important; }

/* ── Buscador y selects dentro del header verde (card-header-dicmag) ──
   Fondo translúcido verde, texto e ícono de lupita en blanco. */
.card-header-dicmag .search-box .form-control,
.card-header-dicmag .form-select,
.card-header-dicmag .form-control {
  background-color: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  color: #fff !important;
}
/* Altura UNIFORME de todos los controles y botones del filtro (header verde)
   para que queden parejos (sin el efecto "triangular" por tamaños distintos). */
.card-header-dicmag .form-control,
.card-header-dicmag .form-select,
.card-header-dicmag .form-control-sm,
.card-header-dicmag .form-select-sm,
.card-header-dicmag .search-box .form-control,
.card-header-dicmag .btn,
.card-header-dicmag .btn-sm {
  height: 34px !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.card-header-dicmag .search-box .form-control::placeholder,
.card-header-dicmag .form-control::placeholder {
  color: rgba(255, 255, 255, .70) !important;
}
.card-header-dicmag .search-box .search-icon {
  color: #fff !important;
}
.card-header-dicmag .form-control:focus,
.card-header-dicmag .form-select:focus {
  background-color: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
/* Flecha del select en blanco */
.card-header-dicmag .form-select {
  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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Opciones del select legibles (fondo oscuro, texto claro) */
.card-header-dicmag .form-select option {
  color: #212529;
  background-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   5. MODALES – sistema unificado DICMAG
═══════════════════════════════════════════════════════════════════ */

/* Tamaños estándar del proyecto:
   - Eliminar/confirmación simple : modal-sm  modal-dialog-centered
   - Formulario simple            : modal-lg  modal-dialog-centered
   - Formulario complejo/detalle  : modal-xl  modal-dialog-centered modal-dialog-scrollable
*/

/* Contenedor base — aplica a TODOS los modales */
.modal-content {
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--dc-shadow-modal) !important;
}

/* ── Anchos máximos controlados (más compactos que Bootstrap por defecto) ── */
.modal-dialog.modal-lg  { max-width: 560px !important; }
.modal-dialog.modal-xl  { max-width: 800px !important; }

/* Altura uniforme: body con scroll interno, header y footer fijos */
.modal-dialog:not(.modal-sm):not(.modal-xl) .modal-body {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-dialog.modal-xl .modal-body {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* El modal-sm (eliminar/confirmación) no necesita scroll */
.modal-dialog.modal-sm .modal-body {
  max-height: none !important;
  overflow-y: visible !important;
}

/* modal-dialog-scrollable ya maneja el scroll nativo */
.modal-dialog.modal-dialog-scrollable { max-height: 88vh; }
.modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: none !important;
  overflow-y: auto !important;
}

/* Scroll personalizado dentro del body del modal */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: #c8d8f0; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #9ab8e0; }

/* Centrado vertical */
.modal-dialog-centered { min-height: calc(100% - 1rem); }

/* — Header CREAR (verde claro, texto oscuro) ———————————————————— */
.modal-header.bg-success-subtle {
  background: linear-gradient(135deg, #f0faf2 0%, #ddf0e2 100%) !important;
  border-bottom: 2px solid rgba(46, 125, 50, .20) !important;
  padding: 18px 22px !important;
}
.modal-header.bg-success-subtle .modal-title,
.modal-header.bg-success-subtle .modal-title span {
  color: var(--dc-green-900) !important;
  font-weight: 700;
}
.modal-header.bg-success-subtle .btn-close { opacity: .50; }
.modal-header.bg-success-subtle .btn-close:hover { opacity: .85; }

/* — Header EDITAR (naranja claro, texto oscuro) ————————————————— */
.modal-header.bg-warning-subtle {
  background: linear-gradient(135deg, #fff9ee 0%, #ffecd5 100%) !important;
  border-bottom: 2px solid rgba(230, 81, 0, .20) !important;
  padding: 18px 22px !important;
}
.modal-header.bg-warning-subtle .modal-title,
.modal-header.bg-warning-subtle .modal-title span {
  color: #7c3700 !important;
  font-weight: 700;
}
.modal-header.bg-warning-subtle .btn-close { opacity: .50; }
.modal-header.bg-warning-subtle .btn-close:hover { opacity: .85; }

/* — Header INFO / DETALLE (verde claro, texto oscuro) ——————————— */
.modal-header.bg-info-subtle {
  background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%) !important;
  border-bottom: 2px solid rgba(5, 150, 105, .20) !important;
  padding: 18px 22px !important;
}
.modal-header.bg-info-subtle .modal-title,
.modal-header.bg-info-subtle .modal-title span {
  color: #064e3b !important;
  font-weight: 700;
}
.modal-header.bg-info-subtle .btn-close { opacity: .50; }
.modal-header.bg-info-subtle .btn-close:hover { opacity: .85; }

/* — Header CONFIRMAR/SÓLIDO verde ——————————————————————————————— */
.modal-header.bg-success,
.modal-header.bg-success.bg-gradient {
  background: var(--dc-grad-green) !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
}

/* — Header sólido VERDE corporativo (reemplaza info/primary) ———— */
.modal-header.bg-primary,
.modal-header.bg-primary.bg-gradient,
.modal-header.bg-info.text-white,
.offcanvas-header.bg-primary,
.offcanvas-header.bg-primary.bg-gradient {
  background: var(--dc-grad-blue) !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
}
.dropdown-head.bg-primary,
.dropdown-head.bg-primary.bg-gradient {
  background: var(--dc-grad-blue) !important;
  padding: 5px 16px !important;
}

/* — Header ADVERTENCIA sólido ——————————————————————————————————— */
.modal-header.bg-warning {
  background: var(--dc-grad-orange) !important;
  border-bottom: none !important;
  padding: 18px 22px !important;
}

/* Footer unificado */
.modal-footer.bg-light,
.modal-footer.bg-light-subtle {
  background: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
  padding: 12px 22px !important;
}

/* bg-light-subtle dentro de modales siempre neutro */
.modal-content .bg-light-subtle {
  background-color: #f8f9fa !important;
}

/* — Headers de modal de MARCA (reemplazan style inline en las vistas) —
   Clases reutilizables para no escribir degradados con style="" en Blade.
   El círculo del avatar dentro de estos headers usa fondo translúcido. */
.modal-header-dicmag {            /* verde principal DICMAG */
  background: var(--dc-grad-blue) !important;
  border-bottom: none !important;
}
.modal-header-teal,               /* unificados al verde de marca */
.modal-header-teal-claro {
  background: var(--dc-grad-blue) !important;
  border-bottom: none !important;
}
/* Avatar circular translúcido dentro de los headers de marca */
.modal-header-dicmag .avatar-title,
.modal-header-teal .avatar-title,
.modal-header-teal-claro .avatar-title {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
}

/* Tarjeta de cabecera con degradado verde (dashboard cliente) */
.card-hero-dicmag {
  background: linear-gradient(135deg, #064e3b 0%, #047857 45%, #059669 80%, #10b981 100%) !important;
}

/* Borde superior de color para modal-content (historial de productos) */
.modal-borde-verde   { border-top: 4px solid #059669 !important; }
.modal-borde-rojo    { border-top: 4px solid #f06548 !important; }
.modal-borde-naranja { border-top: 4px solid #d97706 !important; }

/* ═══════════════════════════════════════════════════════════════════
   6. UTILIDADES TIPOGRÁFICAS
═══════════════════════════════════════════════════════════════════ */
.ls-04 { letter-spacing: .04em !important; }
.ls-06 { letter-spacing: .06em !important; }
.ls-08 { letter-spacing: .08em !important; }
.ls-12 { letter-spacing: .12em !important; }

/* Etiqueta de categoría pequeña — usada en jornada/dashboard cards */
.label-categoria {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* Tamaños de fuente que Bootstrap no incluye */
.fs-8  { font-size: 8px  !important; }
.fs-9  { font-size: 9px  !important; }

/* Barras de progreso delgadas (estado de cobro, KPIs) */
.progress-xs {
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
}
.progress-sm {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
}

/* Tarjetas KPI con borde izquierdo de color */
.kpi-card-blue   { border-left: 4px solid #059669 !important; }
.kpi-card-green  { border-left: 4px solid #10b981 !important; }
.kpi-card-orange { border-left: 4px solid #f97316 !important; }
.kpi-card-cyan   { border-left: 4px solid #14b8a6 !important; }

/* Etiqueta uppercase densa (filtros, encabezados de sección) */
.label-filtro {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

/* Estado 'parcial' — usa el AZUL de marca (antes era púrpura) */
.badge-purple,
.bg-purple {
  background: #3d78e3 !important;
  color: #fff !important;
}
.text-purple { color: #3d78e3 !important; }

/* Borde izquierdo transparente de 4px — alineación con tarjetas de borde de color */
.border-start-transparent-4 { border-left: 4px solid transparent !important; }

/* ═══════════════════════════════════════════════════════════════════
   8. TABLAS
═══════════════════════════════════════════════════════════════════ */
.table thead th {
  background: #f0fdf4 !important;
  font-size: .695rem !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  font-weight: 700 !important;
  color: #065f46 !important;
  border-bottom: 2px solid #a7f3d0 !important;
  padding: 11px 16px !important;
  vertical-align: middle;
  white-space: nowrap;
}
.table tbody tr {
  transition: background-color .14s ease;
}
.table tbody tr:hover {
  background-color: rgba(16, 185, 129, .045) !important;
}

/* ── tabla-dicmag: reparte las columnas de forma pareja en tablas anchas ──
   Usa table-layout fixed para que NO se concentre el ancho en una columna
   ni queden huecos en el medio. El texto largo se recorta con ellipsis. */
.tabla-dicmag {
  table-layout: fixed;
  width: 100%;
}
.tabla-dicmag th,
.tabla-dicmag td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Historial reciente (7 columnas) */
#historial-tabla th:nth-child(1), #historial-tabla td:nth-child(1) { width: 11%; }  /* Fecha */
#historial-tabla th:nth-child(2), #historial-tabla td:nth-child(2) { width: 7%;  }  /* Hora */
#historial-tabla th:nth-child(3), #historial-tabla td:nth-child(3) { width: 21%; }  /* Cliente */
#historial-tabla th:nth-child(4), #historial-tabla td:nth-child(4) { width: 24%; }  /* Dirección */
#historial-tabla th:nth-child(5), #historial-tabla td:nth-child(5) { width: 13%; }  /* Zona */
#historial-tabla th:nth-child(6), #historial-tabla td:nth-child(6) { width: 16%; }  /* Empleado */
#historial-tabla th:nth-child(7), #historial-tabla td:nth-child(7) { width: 8%;  }  /* Litros */
/* Productos más entregados (4 columnas) */
.tabla-productos th:nth-child(1), .tabla-productos td:nth-child(1) { width: 8%;  }  /* # */
.tabla-productos th:nth-child(2), .tabla-productos td:nth-child(2) { width: 52%; }  /* Producto */
.tabla-productos th:nth-child(3), .tabla-productos td:nth-child(3) { width: 24%; }  /* Entregados */
.tabla-productos th:nth-child(4), .tabla-productos td:nth-child(4) { width: 16%; }  /* Stock */

/* En MÓVIL/TABLET: las columnas % aprietan demasiado. Se les da un ancho
   mínimo para que tengan su tamaño real y la tabla SE DESLICE horizontalmente
   dentro de su .table-responsive (scroll izquierda/derecha). */
@media (max-width: 991.98px) {
  .tabla-dicmag {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100%;
  }
  /* Historial reciente: ancho mínimo total para forzar el scroll */
  #historial-tabla { min-width: 760px !important; }
  #historial-tabla th, #historial-tabla td { width: auto !important; }
  /* Productos: también deslizable */
  .tabla-productos { min-width: 520px !important; }
  .tabla-productos th, .tabla-productos td { width: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   7. FORMULARIOS
═══════════════════════════════════════════════════════════════════ */
.input-group-text {
  border-right: none;
  background-color: #f8f9fa !important;
  border-color: #dee2e6;
}
.form-control:focus,
.form-select:focus,
.input-group .form-control:focus,
.input-group .form-select:focus,
.search-box .form-control:focus {
  border-color: #059669;
  box-shadow: 0 0 0 .15rem rgba(5, 150, 105, .18);
}

/* ═══════════════════════════════════════════════════════════════════
   8. NAVEGACIÓN Y BREADCRUMB
═══════════════════════════════════════════════════════════════════ */
.page-title-box h4 {
  color: #065f46;
  font-weight: 700;
  font-size: 1.15rem;
}
.page-title-box .breadcrumb-item a {
  color: #059669;
  text-decoration: none;
  font-weight: 500;
}
.page-title-box .breadcrumb-item a:hover { text-decoration: underline; }
.page-title-box .breadcrumb-item.active { color: #6c757d; }

/* ═══════════════════════════════════════════════════════════════════
   9. PAGINACIÓN
═══════════════════════════════════════════════════════════════════ */
.pagination .page-link {
  color: #059669 !important;
  border-color: #a7f3d0 !important;
  border-radius: 8px !important;
  min-width: 32px;
  text-align: center;
  font-size: .8rem;
  padding: .25rem .55rem;
  transition: all .15s;
  background-color: #fff !important;
}
.pagination .page-item.active .page-link {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
.pagination .page-link:hover {
  background-color: #ecfdf5 !important;
}
.pagination .page-item.disabled .page-link {
  color: #adb5bd !important;
  border-color: #e9ecef !important;
  background-color: #f8f9fa !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10. BADGES Y CONTADORES
═══════════════════════════════════════════════════════════════════ */
.badge-total {
  background: linear-gradient(135deg, #ecfdf5, #a7f3d0);
  color: #065f46;
  font-weight: 700;
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #6ee7b7;
}

/* ═══════════════════════════════════════════════════════════════════
   11. AVATARES
═══════════════════════════════════════════════════════════════════ */
.avatar-title { font-weight: 700; font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════
   12. ESTADO VACÍO
═══════════════════════════════════════════════════════════════════ */
.noresult h5 { color: #059669; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   13. PRELOADER
═══════════════════════════════════════════════════════════════════ */
#preloader { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   14. TOPBAR — gradiente verde botella → verde menta
═══════════════════════════════════════════════════════════════════ */
#page-topbar {
  background: linear-gradient(90deg, #064e3b 0%, #059669 52%, #10b981 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 24px rgba(6, 78, 59, 0.28) !important;
}
#page-topbar .btn-topbar.btn-ghost-secondary {
  color: rgba(255, 255, 255, 0.80) !important;
}
#page-topbar .btn-topbar.btn-ghost-secondary:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
#page-topbar .app-search .form-control {
  background-color: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
#page-topbar .app-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}
#page-topbar .search-widget-icon {
  color: rgba(255, 255, 255, 0.60) !important;
}
#page-topbar .hamburger-icon span {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
#page-topbar .user-name-text {
  color: rgba(255, 255, 255, 0.95) !important;
}
#page-topbar .user-name-sub-text {
  color: rgba(255, 255, 255, 0.65) !important;
}
#page-topbar .topbar-user,
#page-topbar .topbar-user .btn,
#page-topbar .topbar-user .btn:hover,
#page-topbar .topbar-user .btn:focus,
#page-topbar .topbar-user .btn:active,
#page-topbar .topbar-user .btn:focus-visible,
#page-topbar .header-item.topbar-user {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   15. SIDEBAR — gradiente vertical verde botella → verde menta
═══════════════════════════════════════════════════════════════════ */
.app-menu {
  background: linear-gradient(180deg,
      #022c22 0%,
      #064e3b 20%,
      #059669 70%,
      #047857 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 20px rgba(6, 78, 59, 0.28) !important;
}
.navbar-brand-box {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
#vertical-hover {
  color: rgba(255, 255, 255, 0.65) !important;
}
.menu-title,
.menu-title span,
.menu-title i {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
.app-menu .nav-link.menu-link {
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.app-menu .nav-link.menu-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.13) !important;
}
.app-menu .nav-link.menu-link.active,
.app-menu .mm-active > .nav-link.menu-link {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.20) !important;
}
.app-menu .nav-link.menu-link i {
  color: rgba(255, 255, 255, 0.72) !important;
  transition: color 0.2s ease !important;
}
.app-menu .nav-link.menu-link:hover i,
.app-menu .nav-link.menu-link.active i {
  color: #fff !important;
}
.app-menu .nav-sm .nav-link {
  color: rgba(255, 255, 255, 0.68) !important;
  transition: color 0.2s ease !important;
}
.app-menu .nav-sm .nav-link:hover,
.app-menu .nav-sm .nav-link.active {
  color: #fff !important;
  box-shadow: none !important;
}
.app-menu .nav-sm .nav-link i {
  color: rgba(255, 255, 255, 0.68) !important;
}
.app-menu .nav-sm .nav-link:hover i {
  color: #fff !important;
}
/* ── MENÚ LATERAL sobre el degradado verde: todo en blanco, sin azul ──
   Velzon pinta los items activos/hover con su azul #3d78e3 mediante
   variables. Las redefinimos a blanco para integrarlas con el sidebar. */
.app-menu {
  --vz-vertical-menu-item-color:            rgba(255, 255, 255, 0.75);
  --vz-vertical-menu-item-hover-color:      #fff;
  --vz-vertical-menu-item-active-color:     #fff;
  --vz-vertical-menu-item-active-bg:        rgba(255, 255, 255, 0.15);
  --vz-vertical-menu-sub-item-color:        rgba(255, 255, 255, 0.55);
  --vz-vertical-menu-sub-item-hover-color:  #fff;
  --vz-vertical-menu-sub-item-active-color: #fff;
}
/* Texto, fondo, guion e ícono de los items (activo/hover) en blanco */
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link:hover,
.navbar-menu .navbar-nav .nav-sm .nav-link.active,
.navbar-menu .navbar-nav .nav-sm .nav-link:hover,
.navbar-menu .navbar-nav .menu-dropdown .nav-link.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.navbar-menu .navbar-nav .nav-link.active i,
.navbar-menu .navbar-nav .nav-sm .nav-link.active i {
  color: #fff !important;
}
/* Guion (::before) de sub-items: tenue normal, blanco en activo/hover */
.app-menu .menu-dropdown .nav-link::before,
.app-menu .nav-sm .nav-link::before {
  background-color: rgba(255, 255, 255, 0.38) !important;
}
.navbar-menu .navbar-nav .nav-sm .nav-link.active::before,
.navbar-menu .navbar-nav .nav-sm .nav-link:hover::before,
.navbar-menu .navbar-nav .menu-dropdown .nav-link.active::before,
.navbar-menu .navbar-nav .menu-dropdown .nav-link:hover::before {
  background-color: #fff !important;
}
.app-menu .menu-dropdown .nav-link {
  padding-left: 20px !important;
}
.app-menu .nav-sm .nav-link {
  padding-left: 48px !important;
}
/* Efecto ripple (waves) de TODOS los items del menú en blanco translúcido,
   no el azul por defecto de Velzon (se veía como un parche azul al hacer clic). */
.app-menu .nav-link .waves-ripple,
.app-menu .nav-link.menu-link .waves-effect .waves-ripple,
.app-menu .nav-sm .nav-link .waves-ripple,
.app-menu .menu-dropdown .nav-link .waves-ripple {
  background: rgba(255, 255, 255, 0.18) !important;
}
/* Quitar cualquier fondo/sombra azul de focus en los items del menú */
.app-menu .nav-link:focus,
.app-menu .nav-link:focus-visible,
.app-menu .nav-sm .nav-link:focus,
.app-menu .menu-dropdown .nav-link:focus {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.app-menu .menu-dropdown > a::after {
  content: "\ea6e" !important;
  font-family: remixicon !important;
  font-size: 12px !important;
  float: right !important;
  margin-top: 2px !important;
  color: rgba(255, 255, 255, 0.68) !important;
}
.app-menu .menu-dropdown.collapse.show > a::after {
  content: "\ea4e" !important;
}
.sidebar-background {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   16. TWOCOLUMN — columna izquierda de íconos
═══════════════════════════════════════════════════════════════════ */
[data-layout=twocolumn] .twocolumn-iconview {
  background: linear-gradient(180deg,
      #022c22 0%,
      #064e3b 25%,
      #059669 75%,
      #047857 100%) !important;
  box-shadow: 3px 0 18px rgba(6, 78, 59, 0.30) !important;
  border-right: none !important;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon {
  color: rgba(255, 255, 255, 0.68) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  margin: 5px auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  background: transparent !important;
  position: relative;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  transform: scale(1.10) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  transform: scale(1.05) !important;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 25%;
  height: 50%;
  width: 4px;
  background: #fff;
  border-radius: 0 3px 3px 0;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon .icon-dual {
  color: rgba(255, 255, 255, 0.68) !important;
  fill: rgba(255, 255, 255, 0.10) !important;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon:hover .icon-dual,
[data-layout=twocolumn] .twocolumn-iconview .nav-icon.active .icon-dual {
  color: #fff !important;
  fill: rgba(255, 255, 255, 0.22) !important;
}
[data-layout=twocolumn] .twocolumn-iconview .nav-icon i {
  font-size: 21px !important;
  line-height: 1 !important;
  color: inherit !important;
}
[data-layout=twocolumn] .twocolumn-iconview li {
  display: flex !important;
  justify-content: center !important;
  list-style: none !important;
}
[data-layout=twocolumn] .twocolumn-iconview li .nav-icon::after {
  border-radius: 8px !important;
}
[data-layout=twocolumn] .twocolumn-iconview .navbar-brand-box,
[data-layout=twocolumn] .twocolumn-iconview ~ .navbar-brand-box {
  background: rgba(0, 0, 0, 0.18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
[data-layout=twocolumn] .app-menu {
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  /* Panel desplegado: verde PLANO (sin degradado) */
  background: #059669 !important;
  background-image: none !important;
}
/* Capas internas del panel: transparentes para ver el verde plano del fondo.
   Incluye los estados de animación (.collapsing/.collapse) para que NO
   aparezca el degradado viejo mientras se abre/cierra un submenú. */
[data-layout=twocolumn] .app-menu #navbar-nav,
[data-layout=twocolumn] .app-menu .navbar-nav,
[data-layout=twocolumn] .app-menu #scrollbar,
[data-layout=twocolumn] .app-menu .simplebar-wrapper,
[data-layout=twocolumn] .app-menu .simplebar-content-wrapper,
[data-layout=twocolumn] .app-menu .simplebar-content,
[data-layout=twocolumn] .app-menu .menu-dropdown,
[data-layout=twocolumn] .app-menu .menu-dropdown.show,
[data-layout=twocolumn] .app-menu .menu-dropdown.collapse,
[data-layout=twocolumn] .app-menu .menu-dropdown.collapsing,
[data-layout=twocolumn] .app-menu .collapse,
[data-layout=twocolumn] .app-menu .collapsing {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
[data-layout=twocolumn] .app-menu .navbar-brand-box {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
[data-layout=twocolumn] #scrollbar::-webkit-scrollbar {
  width: 4px !important;
}
[data-layout=twocolumn] #scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.20) !important;
  border-radius: 4px !important;
}
[data-layout=twocolumn] #scrollbar::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   16b. MENÚ HORIZONTAL — verde PLANO (sin degradado), igual que el lateral
═══════════════════════════════════════════════════════════════════ */
/* Barra del menú horizontal: verde plano */
[data-layout=horizontal] .app-menu,
[data-layout=horizontal] .navbar-menu {
  background: #059669 !important;
  background-image: none !important;
}
/* Submenús desplegables (dropdowns): verde plano, no el degradado ni el blanco */
[data-layout=horizontal] .menu-dropdown,
[data-layout=horizontal] .menu-dropdown.show,
[data-layout=horizontal] .navbar-nav .nav-item .menu-dropdown {
  background: #059669 !important;
  background-color: #059669 !important;
  background-image: none !important;
  border: none !important;
}
/* Items del menú horizontal: texto blanco, hover/activo blanco translúcido */
[data-layout=horizontal] .navbar-nav .nav-link,
[data-layout=horizontal] .navbar-nav .nav-link.menu-link {
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-layout=horizontal] .navbar-nav .nav-link:hover,
[data-layout=horizontal] .navbar-nav .nav-link.active,
[data-layout=horizontal] .navbar-nav .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
[data-layout=horizontal] .navbar-nav .nav-link i {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Guion (::before) de los sub-items en blanco */
[data-layout=horizontal] .menu-dropdown .nav-link::before {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
[data-layout=horizontal] .menu-dropdown .nav-link:hover::before,
[data-layout=horizontal] .menu-dropdown .nav-link.active::before {
  background-color: #fff !important;
}
/* Ocultar el botón "More" que Velzon agrega automáticamente al menú
   horizontal cuando no caben todos los ítems (no se usa en este sistema). */
.navbar-nav > li:has(> a[href="#sidebarMore"]),
a[href="#sidebarMore"],
#sidebarMore {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   17. LOGO — responsive
═══════════════════════════════════════════════════════════════════ */

/* En móvil mostrar el logo del topbar (Velzon lo oculta en twocolumn) */
@media (max-width: 767.98px) {
  [data-layout=twocolumn] .horizontal-logo {
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Mostrar solo logo-dark, ocultar logo-light para evitar duplicado */
  [data-layout=twocolumn] .horizontal-logo .logo-dark {
    display: inline-block !important;
  }
  [data-layout=twocolumn] .horizontal-logo .logo-light {
    display: none !important;
  }
  /* Mostrar logo-lg en móvil, ocultar logo-sm */
  [data-layout=twocolumn] .horizontal-logo .logo-dark .logo-sm {
    display: none !important;
  }
  [data-layout=twocolumn] .horizontal-logo .logo-dark .logo-lg {
    display: inline-block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE MOBILE — mejoras globales
═══════════════════════════════════════════════════════════════════ */

/* ── card-header-dicmag: apila en 2 filas en mobile ─────────────
   Fila 1: título + badge (siempre visibles, se achican)
   Fila 2: botón(es) ancho completo
   En desktop queda todo en una sola fila como antes.
─────────────────────────────────────────────────────────────────── */
.card-header-dicmag > .d-flex,
.card-header-dicmag > form > .d-flex {
  flex-wrap: wrap !important;
  gap: 6px 8px;
}
.card-header-dicmag h5.card-title,
.card-header-dicmag .card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.card-header-dicmag .card-title .badge-total {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile (≤ 575px): botones pasan a segunda fila, ancho completo */
@media (max-width: 575.98px) {
  .card-header-dicmag h5.card-title,
  .card-header-dicmag .card-title {
    font-size: .85rem !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  /* El grupo de filtro baja a 2ª fila a ancho completo. Su contenido se
     acomoda en líneas (wrap) para que NO se aprieten ni se parta el texto
     de los botones cuando hay select + input + botones. */
  .card-header-dicmag .flex-shrink-0 {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Inputs y selects a ancho completo (cada uno en su línea) */
  .card-header-dicmag .flex-shrink-0 .form-control,
  .card-header-dicmag .flex-shrink-0 .form-select,
  .card-header-dicmag .flex-shrink-0 .search-box {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Botones: comparten una línea, reparten el ancho, sin partir el texto */
  .card-header-dicmag .flex-shrink-0 .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: .82rem !important;
    padding: 7px 10px !important;
  }
  .badge-total {
    font-size: .72rem !important;
    padding: 3px 8px !important;
  }

  /* Page title: apila título y breadcrumb */
  .page-title-box {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .page-title-right { align-self: flex-start; }

  /* Modales: padding reducido */
  .modal-body   { padding: 1rem !important; }
  .modal-header { padding: 12px 16px !important; }
  .modal-footer { padding: 10px 16px !important; }

  /* Modal: casi full width */
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: 96vw !important;
    margin: 0.5rem auto !important;
  }

  /* Paginación compacta */
  .pagination .page-link {
    padding: 6px 10px !important;
    font-size: .82rem !important;
  }

  /* KPI números */
  .kpi-valor { font-size: 1.5rem !important; }

  /* Ocultar columnas opcionales */
  .table-mobile-hide { display: none !important; }
}

/* Tablet (576–767px): badge y botón visibles, solo se achican */
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-header-dicmag h5.card-title,
  .card-header-dicmag .card-title {
    font-size: .88rem !important;
  }
  .card-header-dicmag .btn {
    font-size: .80rem !important;
    padding: 5px 12px !important;
  }
  .badge-total {
    font-size: .72rem !important;
    padding: 3px 8px !important;
  }
  .modal-dialog.modal-lg {
    max-width: 96vw !important;
    margin: 0.5rem auto !important;
  }
}

/* Scroll suave en tablas en todos los móviles */
@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════
   WIZARD DE RECOLECCIÓN – indicador de pasos
   ══════════════════════════════════════════════ */
.wizard-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9ecef;
  color: #adb5bd;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.wizard-step-dot.active {
  background: #059669;
  color: #fff;
}
.wizard-step-line {
  flex: 1;
  height: 2px;
  background: #dee2e6;
  max-width: 60px;
}

/* ══════════════════════════════════════════════
   MODAL CONFIRMAR ENTREGA – resumen tipo recibo
   (usa header/footer estándar como los demás modales)
   ══════════════════════════════════════════════ */
.ce-ticket {
  background: #f8faf9;
  border: 1px solid #e6efeb;
  border-radius: 10px;
  padding: .35rem 0;
}
.ce-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid #eef3f1;
}
.ce-row:last-of-type {
  border-bottom: none;
}
.ce-row-label {
  color: #6c757d;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.ce-row-label i {
  color: #059669;
  margin-right: .25rem;
}
.ce-row-value {
  font-size: .9rem;
}

/* Línea de producto dentro del recibo */
.ce-prod {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px dashed #e6efeb;
}
.ce-prod:last-child {
  border-bottom: none;
}
.ce-prod-qty {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #d1fae5;
  color: #047857;
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Variante azul: los productos se intercalan verde / azul / verde... */
.ce-prod-qty.is-alt {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Modo oscuro */
html[data-layout-mode="dark"] .ce-ticket {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.09);
}
html[data-layout-mode="dark"] .ce-row {
  border-bottom-color: rgba(255,255,255,.07);
}
html[data-layout-mode="dark"] .ce-prod {
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-layout-mode="dark"] .ce-prod-qty {
  background: rgba(5,150,105,.22);
  color: #6ee7b7;
}
html[data-layout-mode="dark"] .ce-prod-qty.is-alt {
  background: rgba(61,120,227,.22);
  color: #93c5fd;
}

/* ══════════════════════════════════════════════
   STEPPER +/- para productos
   ══════════════════════════════════════════════ */
.btn-stepper {
  width: 44px;
  height: 44px;
  border: none;
  background: #f3f6f9;
  color: #495057;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
/* Botón MENOS (azul) — fuerte, profesional */
.btn-stepper-minus { border-radius: 10px 0 0 10px; background: #cfe0fb; color: #2b66d6; }
.btn-stepper-minus:hover { background: #b9d0f6; color: #1f54bd; }
.btn-stepper-minus:active { background: #a8c4f3; }

/* Botón MÁS (verde) — fuerte, amigable */
.btn-stepper-plus  { border-radius: 0 10px 10px 0; background: #059669; color: #fff; }
.btn-stepper-plus:hover  { background: #047857; }
.btn-stepper-plus:active  { background: #036b4d; }

/* Botón deshabilitado (producto que no se puede dar) — queda suave/apagado */
.btn-stepper.disabled,
.btn-stepper:disabled {
  background: #eef1f4 !important;
  color: #c7ccd1 !important;
  cursor: not-allowed !important;
}

.stepper-input {
  width: 56px;
  height: 44px;
  border: none;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
  background: #fff;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.stepper-input::-webkit-inner-spin-button,
.stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus { outline: none; background: #f8f9fa; }

/* Fila de producto con cantidad > 0: lo que SÍ se entregó. Solo el nombre en verde. */
.er-prod-activa .fw-semibold { color: #059669; }

/* ═══════════════════════════════════════════════════════════════════
   TOOLTIPS CORPORATIVOS – fondo degradado verde
═══════════════════════════════════════════════════════════════════ */
.tooltip.show .tooltip-inner,
.tooltip .tooltip-inner {
  background: linear-gradient(90deg, #064e3b 0%, #059669 52%, #10b981 100%) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(6,78,59,.25) !important;
}
.bs-tooltip-end .tooltip-arrow::before  { border-right-color:  #059669 !important; }
.bs-tooltip-start .tooltip-arrow::before { border-left-color:  #059669 !important; }
.bs-tooltip-top .tooltip-arrow::before   { border-top-color:   #059669 !important; }
.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color:#059669 !important; }

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — fondo del submenú colapsable
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — submenú con el mismo verde PLANO que el sidebar (sin degradado)
═══════════════════════════════════════════════════════════════════ */
.app-menu .navbar-nav .menu-dropdown {
  background: #059669 !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — flecha del menú desplegable en blanco
═══════════════════════════════════════════════════════════════════ */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]::after,
.navbar-menu .navbar-nav a.nav-link::after,
.app-menu .menu-dropdown > a::after {
  color: rgba(255, 255, 255, 0.68) !important;
}
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]:hover::after,
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"].active::after,
.app-menu .menu-dropdown > a:hover::after,
.app-menu .menu-dropdown.show > a::after {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FLATPICKR — calendario de rango (historial de productos)
   Usa variables Velzon --vz-success para coherencia visual
═══════════════════════════════════════════════════════════════════ */
.flatpickr-calendar { border-radius: 12px; box-shadow: 0 8px 32px rgba(var(--vz-success-rgb), .15); border: 1px solid rgba(var(--vz-success-rgb), .2); font-family: inherit; }
.flatpickr-months { background: linear-gradient(90deg, #064e3b 0%, #059669 52%, #10b981 100%); border-radius: 12px 12px 0 0; padding: 6px 0; }
.flatpickr-months .flatpickr-month { color: #fff; fill: #fff; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #fff; fill: #fff; padding: 8px 12px; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,.18); border-radius: 6px; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: #fff; }
.flatpickr-current-month { color: #fff; font-size: 15px; font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: #fff; font-weight: 600; }
.flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #fff; }
.flatpickr-weekdays { background: var(--vz-success-bg-subtle); padding: 4px 0; border-bottom: 1px solid rgba(var(--vz-success-rgb), .2); }
.flatpickr-weekday { color: var(--vz-success-text-emphasis); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.flatpickr-day { border-radius: 6px; font-size: 13px; color: var(--vz-body-color); height: 34px; line-height: 34px; }
.flatpickr-day:hover { background: var(--vz-success-bg-subtle); border-color: var(--vz-success-bg-subtle); }
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay { background: var(--vz-success) !important; border-color: var(--vz-success) !important; color: #fff !important; font-weight: 600; box-shadow: none !important; }
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--vz-success) !important; }
.flatpickr-day.inRange { background: var(--vz-success-bg-subtle); border-color: var(--vz-success-bg-subtle); color: var(--vz-success-text-emphasis); border-radius: 0; box-shadow: -5px 0 0 var(--vz-success-bg-subtle), 5px 0 0 var(--vz-success-bg-subtle); }
.flatpickr-day.startRange { border-radius: 6px 0 0 6px; }
.flatpickr-day.endRange { border-radius: 0 6px 6px 0; }
.flatpickr-day.startRange.endRange { border-radius: 6px; }
.flatpickr-day.today { border-color: var(--vz-success); color: var(--vz-success); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--vz-success); color: #fff; border-color: var(--vz-success); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(var(--vz-success-rgb), .35); }

/* ═══════════════════════════════════════════════════════════════════
   19. RESPONSIVE MÓVIL — avatares e iconos grandes
   ───────────────────────────────────────────────────────────────────
   En escritorio los avatares (avatar-lg = 96px, avatar-xl = 120px) y los
   iconos grandes (fs-1, fs-2, display-*) se ven bien, pero en el celular
   ocupan demasiado espacio y se ven gigantes. Aquí los achicamos SOLO en
   pantallas pequeñas. El diseño de escritorio NO se toca.
═══════════════════════════════════════════════════════════════════ */

/* Tablet y móvil (≤ 767px) */
@media (max-width: 767.98px) {
  /* Los avatares NUNCA deben estirarse ni deformarse dentro de un flex.
     Esto evita el "óvalo" que aparecía en los headers de modales. */
  .avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl {
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Avatares: se reducen proporcionalmente */
  .avatar-xl { height: 5rem  !important; width: 5rem  !important; }
  .avatar-lg { height: 4rem  !important; width: 4rem  !important; }
  .avatar-md { height: 3.25rem !important; width: 3.25rem !important; }

  /* Iconos grandes dentro de avatares se ajustan al nuevo tamaño */
  .avatar-xl .avatar-title { font-size: 1.75rem !important; }
  .avatar-lg .avatar-title { font-size: 1.5rem  !important; }
  .avatar-md .avatar-title { font-size: 1.25rem !important; }

  /* Tipografías de tamaño grande de Velzon/Bootstrap */
  .display-1 { font-size: 3rem    !important; }
  .display-2 { font-size: 2.6rem  !important; }
  .display-3 { font-size: 2.2rem  !important; }
  .display-4 { font-size: 1.9rem  !important; }
  .display-5 { font-size: 1.6rem  !important; }
  .display-6 { font-size: 1.4rem  !important; }
}

/* Móvil propiamente dicho (≤ 575px) — un poco más agresivo */
@media (max-width: 575.98px) {
  .avatar-xl { height: 4.25rem !important; width: 4.25rem !important; }
  .avatar-lg { height: 3.5rem  !important; width: 3.5rem  !important; }
  .avatar-md { height: 3rem    !important; width: 3rem    !important; }
  .avatar-sm { height: 2.5rem  !important; width: 2.5rem  !important; }

  .avatar-xl .avatar-title { font-size: 1.5rem  !important; }
  .avatar-lg .avatar-title { font-size: 1.25rem !important; }
  .avatar-md .avatar-title { font-size: 1.1rem  !important; }
  .avatar-sm .avatar-title { font-size: 1rem    !important; }

  /* Iconos sueltos muy grandes (fs-1, fs-2) en estados vacíos / encabezados */
  .fs-1 { font-size: 1.75rem !important; }
  .fs-2 { font-size: 1.4rem  !important; }

  /* display-* aún más compactos en móvil pequeño */
  .display-1 { font-size: 2.4rem !important; }
  .display-2 { font-size: 2.1rem !important; }
  .display-3 { font-size: 1.85rem !important; }
  .display-4 { font-size: 1.6rem !important; }

  /* Títulos de tarjetas/KPIs que a veces se desbordan */
  h1, .h1 { font-size: 1.6rem !important; }
  h2, .h2 { font-size: 1.4rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   20. RESPONSIVE MÓVIL — ajustes generales de layout
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  /* Reduce el padding lateral de las tarjetas para ganar ancho útil */
  .card-body { padding: 1rem !important; }

  /* Evita que cualquier contenido empuje el ancho de la página
     y aparezca scroll horizontal en toda la pantalla */
  body, #layout-wrapper { overflow-x: hidden; }

  /* Grupos de botones de filtros: que se apilen y ocupen el ancho */
  .btn-group-filtros { flex-wrap: wrap !important; gap: 6px !important; }

  /* Inputs y selects de filtros: ancho completo, no se cortan */
  .filtros-mobile-full .form-control,
  .filtros-mobile-full .form-select { width: 100% !important; min-width: 0 !important; }

  /* Dropdowns que se salen de la pantalla por la derecha */
  .dropdown-menu-end { right: 0 !important; left: auto !important; }

  /* Cualquier card-header con título + botones: que apile en móvil
     en lugar de apretar todo en una sola fila */
  .card-header.d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Grupos de botones dentro de headers: ancho completo y centrados */
  .card-header .d-flex.flex-wrap.gap-2,
  .card-header .d-flex.flex-wrap.gap-1 {
    width: 100% !important;
  }
  .card-header .d-flex.flex-wrap .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   21. RESPONSIVE MÓVIL — MODALES (corrige desbordes en celular)
   ───────────────────────────────────────────────────────────────────
   Los modales grandes (modal-xl, modal-lg) eran más anchos que la
   pantalla del celular y se salían por los bordes, y las tablas dentro
   se desbordaban. Aquí los confinamos al ancho de la pantalla.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* TODOS los modales caben dentro de la pantalla, sin importar su tamaño */
  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-dialog-centered {
    max-width: calc(100vw - 1rem) !important;
    width: calc(100vw - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  /* El contenido del modal nunca se sale de su contenedor */
  .modal-content {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Header del modal: que apile el avatar + título y el botón de cerrar
     no se monte encima del texto */
  .modal-header {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .modal-header .modal-title { font-size: 1rem !important; }

  /* Tablas dentro de modales: scroll horizontal propio, no desbordan
     el modal ni la pantalla */
  .modal-body .table-responsive,
  .modal-content .overflow-auto {
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-content table { width: 100% !important; }

  /* Avatar del header del modal: blindar la forma circular.
     Se fija el ancho/alto exacto y se impide que el flex lo estire
     (esto corrige el "óvalo" deformado que aparecía en el header). */
  .modal-header .avatar-xs {
    flex: 0 0 1.5rem !important;
    width: 1.5rem !important; min-width: 1.5rem !important; max-width: 1.5rem !important;
    height: 1.5rem !important;
  }
  .modal-header .avatar-sm {
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important; min-width: 2.5rem !important; max-width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .modal-header .avatar-md {
    flex: 0 0 3rem !important;
    width: 3rem !important; min-width: 3rem !important; max-width: 3rem !important;
    height: 3rem !important;
  }
  /* El círculo interno toma exactamente el tamaño del avatar */
  .modal-header .avatar-title {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   22. PODIO TOP 3 CLIENTES — formato horizontal en móvil
   ───────────────────────────────────────────────────────────────────
   En escritorio las 3 tarjetas van en fila (col-md-4) con el contenido
   centrado. En el celular se apilan a ancho completo y cada una se
   reorganiza en horizontal (avatar a la izquierda, datos a la derecha)
   para que se vea compacto y legible.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .podio-body {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  /* Avatar a la izquierda, sin margen automático ni margen inferior */
  .podio-avatar {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  /* La info ocupa el resto y se alinea a la izquierda */
  .podio-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  /* La barra de progreso queda a ancho completo de la info */
  .podio-info .progress { width: 100% !important; }
  /* Badge de lugar más compacto */
  .podio-info .badge { margin-bottom: 4px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MODO OSCURO — topbar y sidebar oscuros (no verdes).
   El verde es la identidad en modo CLARO; en oscuro se vuelven oscuros
   como el resto del tema, sobreescribiendo el degradado verde.
═══════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] #page-topbar {
  background: #1c2128 !important;
  border-bottom: 1px solid #2a313c !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .app-menu {
  background: #181c22 !important;
  background-image: none !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.35) !important;
}
[data-bs-theme="dark"] .navbar-brand-box {
  background: #14181d !important;
  background-image: none !important;
}
/* Columna de íconos (modo twocolumn) y panel desplegado en oscuro.
   data-bs-theme y data-layout están en el MISMO <html> → sin espacio. */
[data-bs-theme="dark"][data-layout=twocolumn] .twocolumn-iconview,
[data-bs-theme="dark"][data-layout=twocolumn] .app-menu {
  background: #181c22 !important;
  background-image: none !important;
}
[data-bs-theme="dark"][data-layout=twocolumn] .app-menu .navbar-brand-box,
[data-bs-theme="dark"][data-layout=twocolumn] .twocolumn-iconview ~ .navbar-brand-box {
  background: #14181d !important;
}
/* Menú horizontal oscuro también */
[data-bs-theme="dark"][data-layout=horizontal] .app-menu,
[data-bs-theme="dark"][data-layout=horizontal] .navbar-menu,
[data-bs-theme="dark"][data-layout=horizontal] .menu-dropdown {
  background: #181c22 !important;
  background-image: none !important;
}

/* ── TODOS los submenús/paneles desplegados del menú en OSCURO ──
   Cubre el panel verde que quedaba claro al expandir un menú con hijos
   (Inventario, Aceite, etc.) en cualquier layout: vertical, twocolumn, horizontal. */
[data-bs-theme="dark"] .app-menu .menu-dropdown,
[data-bs-theme="dark"] .app-menu .menu-dropdown.show,
[data-bs-theme="dark"] .app-menu .menu-dropdown.collapse,
[data-bs-theme="dark"] .app-menu .menu-dropdown.collapsing,
[data-bs-theme="dark"] .app-menu .collapse,
[data-bs-theme="dark"] .app-menu .collapsing,
[data-bs-theme="dark"] .app-menu .nav-sm,
[data-bs-theme="dark"] .app-menu .simplebar-content,
[data-bs-theme="dark"] .app-menu .simplebar-content-wrapper,
[data-bs-theme="dark"][data-layout=twocolumn] .twocolumn-iconview,
[data-bs-theme="dark"][data-layout=twocolumn] .twocolumn-iconview ~ *,
[data-bs-theme="dark"] .navbar-menu,
[data-bs-theme="dark"] #scrollbar {
  background: #181c22 !important;
  background-color: #181c22 !important;
  background-image: none !important;
}
/* Item activo/hover dentro del submenú oscuro: leve resalte blanco translúcido */
[data-bs-theme="dark"] .app-menu .nav-sm .nav-link.active,
[data-bs-theme="dark"] .app-menu .nav-sm .nav-link:hover,
[data-bs-theme="dark"] .app-menu .menu-dropdown .nav-link.active,
[data-bs-theme="dark"] .app-menu .menu-dropdown .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* ── Headers verdes de las tablas (card-header-dicmag) en modo oscuro ──
   El degradado verde se vuelve un header oscuro con texto claro. */
[data-bs-theme="dark"] .card-header-dicmag {
  background: #20262e !important;
  background-image: none !important;
  border-bottom: 1px solid #2d343d !important;
}
/* Encabezados de tabla (thead) verdes → oscuros */
[data-bs-theme="dark"] .table thead th {
  background: #20262e !important;
  color: #9fb8a8 !important;
  border-bottom-color: #2d343d !important;
}
/* Filas hover en oscuro (no el verde claro) */
[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
/* Tarjeta-banner con degradado verde (card-header-dicmag tipo banner) */
[data-bs-theme="dark"] .card-hero-dicmag,
[data-bs-theme="dark"] .bg-gradient-dicmag {
  background: #20262e !important;
  background-image: none !important;
}
/* Header verde de los dropdowns (notificaciones, etc.) en modo oscuro */
[data-bs-theme="dark"] .dropdown-head.bg-primary,
[data-bs-theme="dark"] .dropdown-head.bg-primary.bg-gradient,
[data-bs-theme="dark"] .modal-header.bg-primary,
[data-bs-theme="dark"] .modal-header-dicmag,
[data-bs-theme="dark"] .modal-header-teal,
[data-bs-theme="dark"] .modal-header-teal-claro {
  background: #20262e !important;
  background-image: none !important;
  border-bottom: 1px solid #2d343d !important;
}
/* Header del panel "Personalizar tema" en modo oscuro (selector fuerte) */
[data-bs-theme="dark"] #theme-settings-offcanvas .offcanvas-header,
[data-bs-theme="dark"] #theme-settings-offcanvas .customizer-header,
[data-bs-theme="dark"] .customizer-header.bg-primary.bg-gradient {
  background: #20262e !important;
  background-color: #20262e !important;
  background-image: none !important;
  border-bottom: 1px solid #2d343d !important;
}

/* ── Calendario flatpickr (Próximos calendarios) en MODO OSCURO ── */
[data-bs-theme="dark"] .flatpickr-calendar,
[data-bs-theme="dark"] .flatpickr-days,
[data-bs-theme="dark"] .flatpickr-rContainer,
[data-bs-theme="dark"] .dayContainer,
[data-bs-theme="dark"] .flatpickr-innerContainer {
  background: #1c2128 !important;
  color: #cdd5df !important;
}
[data-bs-theme="dark"] .flatpickr-calendar {
  border-color: #2d343d !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
/* Días de la semana (LUN MAR…) */
[data-bs-theme="dark"] .flatpickr-weekdays {
  background: #20262e !important;
  border-bottom-color: #2d343d !important;
}
[data-bs-theme="dark"] .flatpickr-weekday {
  color: #9fb8a8 !important;
}
/* Números de los días */
[data-bs-theme="dark"] .flatpickr-day {
  color: #cdd5df !important;
}
[data-bs-theme="dark"] .flatpickr-day:hover {
  background: #2a313c !important;
  border-color: #2a313c !important;
}
/* Días de otro mes (apagados) */
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled {
  color: #5a636e !important;
}

/* ── Modales en MODO OSCURO: header/footer/body claros → oscuros ── */
[data-bs-theme="dark"] .modal-content {
  background: #1c2128 !important;
  border-color: #2d343d !important;
}
/* Header verde claro / con degradado → oscuro */
[data-bs-theme="dark"] .modal-header.bg-success-subtle,
[data-bs-theme="dark"] .modal-header.bg-warning-subtle,
[data-bs-theme="dark"] .modal-header.bg-info-subtle,
[data-bs-theme="dark"] .modal-header.bg-light-subtle {
  background: #20262e !important;
  background-image: none !important;
  border-bottom: 1px solid #2d343d !important;
}
/* Footer claro → oscuro */
[data-bs-theme="dark"] .modal-footer.bg-light,
[data-bs-theme="dark"] .modal-footer.bg-light-subtle,
[data-bs-theme="dark"] .modal-footer {
  background: #20262e !important;
  border-top: 1px solid #2d343d !important;
}
/* Cuerpo del modal con fondos claros → oscuros */
[data-bs-theme="dark"] .modal-content .bg-light-subtle,
[data-bs-theme="dark"] .modal-content .bg-light {
  background-color: #20262e !important;
}
/* Títulos de los headers (que eran texto oscuro sobre claro) → claros */
[data-bs-theme="dark"] .modal-header.bg-success-subtle .modal-title,
[data-bs-theme="dark"] .modal-header.bg-success-subtle .modal-title span,
[data-bs-theme="dark"] .modal-header.bg-warning-subtle .modal-title,
[data-bs-theme="dark"] .modal-header.bg-info-subtle .modal-title {
  color: #e6edf3 !important;
}

/* ── Botones .btn-light (Cancelar) dentro de modales en MODO OSCURO ── */
[data-bs-theme="dark"] .modal-content .btn-light {
  background-color: #2a313c !important;
  border-color: #3a424e !important;
  color: #cdd5df !important;
}
[data-bs-theme="dark"] .modal-content .btn-light:hover,
[data-bs-theme="dark"] .modal-content .btn-light:focus {
  background-color: #3a424e !important;
  border-color: #475060 !important;
  color: #fff !important;
}

/* ── Botón "Guardar" (.btn-success) dentro de modales en MODO OSCURO ── */
[data-bs-theme="dark"] .modal-content .btn-success {
  background-color: #2f7d4f !important;
  border-color: #2f7d4f !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .modal-content .btn-success:hover,
[data-bs-theme="dark"] .modal-content .btn-success:focus {
  background-color: #266841 !important;
  border-color: #266841 !important;
  color: #fff !important;
}

/* ── Barras de paginación/footer (bg-white dentro de tarjetas) en oscuro ── */
[data-bs-theme="dark"] .card-body > .bg-white,
[data-bs-theme="dark"] .card > .bg-white,
[data-bs-theme="dark"] .card .border-top.bg-white,
[data-bs-theme="dark"] .table-responsive + .bg-white {
  background-color: #1c2128 !important;
  border-top-color: #2d343d !important;
}
/* Paginación de Velzon en modo oscuro */
[data-bs-theme="dark"] .pagination .page-link {
  background-color: #20262e !important;
  border-color: #2d343d !important;
  color: #cdd5df !important;
}
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .pagination .page-link:hover {
  background-color: #2a313c !important;
}
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link {
  background-color: #1a1f25 !important;
  color: #5a636e !important;
}

/* ── Texto oscuro (text-dark) dentro de dropdowns en MODO OSCURO → claro ── */
[data-bs-theme="dark"] .dropdown-menu .text-dark,
[data-bs-theme="dark"] .notification-item .text-dark,
[data-bs-theme="dark"] .dropdown-menu-lg .text-dark {
  color: #e6edf3 !important;
}

/* ── Tarjetas/chips bg-white dentro de modales y contenido en MODO OSCURO ── */
[data-bs-theme="dark"] .modal-content .bg-white,
[data-bs-theme="dark"] .modal-body .bg-white,
[data-bs-theme="dark"] #mdj-productos-grid .bg-white,
[data-bs-theme="dark"] .page-content .card .bg-white {
  background-color: #20262e !important;
  border-color: #2d343d !important;
}
/* Texto oscuro dentro de modales en oscuro → claro */
[data-bs-theme="dark"] .modal-content .text-dark {
  color: #e6edf3 !important;
}
/* Bordes claros dentro de modales en oscuro */
[data-bs-theme="dark"] .modal-content .border {
  border-color: #2d343d !important;
}

/* ── Modal Corregir Recolección (jornadas cerradas) ──────────────────────── */
/* Ancho fijo de la columna de acción en la tabla de recolecciones */
.col-accion-rec {
  width: 70px;
}
/* Dropdown de resultados del buscador de clientes */
.dropdown-buscar-clientes {
  z-index: 1060;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  top: 100%;
}
/* Lista scrollable de productos dentro del modal de corrección */
.lista-productos-scroll {
  max-height: 26vh;
  overflow-y: auto;
}
/* Cuerpo del modal de corrección con scroll propio: header y footer (con el
   botón Guardar) quedan siempre visibles, sin importar la altura del contenido */
.modal-body-corregir {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

/* ── Modal de detalle de jornada un poco más ancho que modal-xl ──────────── */
@media (min-width: 1200px) {
  .modal-xxl-dicmag {
    max-width: 1240px;
  }
}

/* ── Botón flotante de WhatsApp (home/landing) ───────────────────────────── */
.btn-whatsapp-flotante {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25D366;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: wa-pulse 2.4s infinite;
}
.btn-whatsapp-flotante:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .6);
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 575.98px) {
  .btn-whatsapp-flotante { left: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 26px; }
}

/* ── Cerrar jornada / traslado al tanque ─────────────────────────────────── */
/* Inicial del avatar en las pestañas de empleado */
.avatar-inicial-emp {
  font-size: 11px;
  font-weight: 700;
}
/* Dropdown de resultados del buscador de clientes (modal editar) */
.dropdown-buscar-clientes-cierre {
  z-index: 1060;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  top: 100%;
}
/* Tablas scrollables dentro de los modales de cierre */
.tabla-scroll-380 { max-height: 380px; overflow-y: auto; }
.tabla-scroll-240 { max-height: 240px; overflow-y: auto; }

/* ── Cerrar jornada: anchos de columnas y estados (reemplazan inline style) ── */
.th-w-36  { width: 36px; }
.th-w-40  { width: 40px; }
.th-w-60  { width: 60px; }
.th-w-120 { width: 120px; }
.select-tanque-min { min-width: 160px; }
.input-litros-max  { max-width: 135px; }
.btn-remover-oculto { visibility: hidden; }
/* Barras de progreso de tanque arrancan en 0% (el JS ajusta el ancho luego) */
.barra-act, .barra-desp { width: 0; }

/* ── Paso 2 (productos) del modal de recolección: header+resumen fijos, lista scroll ── */
.wizard-paso2-wrap {
  margin: -1.5rem;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}
.wizard-paso2-fijo { flex-shrink: 0; }            /* header y resumen no scrollean */
.wizard-paso2-lista { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* El resumen "Entregando" no debe crecer y robar espacio a la lista: máx 2 filas con scroll */
#resumen-seleccion-chips {
  max-height: 64px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   Utilidades para reemplazar style= inline (estadísticas, historiales)
═══════════════════════════════════════════════════════════════════ */
/* Alturas mínimas de contenedores de gráficos ApexCharts */
.chart-h-160 { min-height: 160px; }
.chart-h-175 { min-height: 175px; }
.chart-h-220 { min-height: 220px; width: 100%; }
.chart-h-280 { min-height: 280px; }
.chart-h-374 { min-height: 374px; }
/* Anchos de columnas de tabla */
.col-w-40  { width: 40px; }
.col-w-52  { width: 52px; }
.col-w-70  { width: 70px; }
.col-w-72  { width: 72px; }
.col-w-80  { width: 80px; }
.col-w-90  { width: 90px; }
/* Anchos mínimos de tablas y selects */
.tabla-min-340 { min-width: 340px; }
.tabla-min-420 { min-width: 420px; }
.select-min-90  { min-width: 90px; }
.select-min-110 { min-width: 110px; }
/* Barras de progreso finas */
.barra-h-4 { height: 4px; }
.barra-h-5 { height: 5px; }
/* Separadores verticales (vr) con alto fijo */
.vr-h-28 { height: 28px; }
.vr-h-32 { height: 32px; }
/* Punto de color de leyenda (zonas) */
.dot-leyenda { width: 8px; height: 8px; }
/* Texto truncado de leyenda */
.txt-max-120 { max-width: 120px; }
/* Timeline con scroll */
.timeline-scroll { max-height: 400px; overflow-y: auto; }
/* Contenido de modal con scroll alto */
.modal-scroll-80 { max-height: 80vh; }
/* Modales decorativos de estadísticas */
.modal-redondo-20 { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.18); }
.modal-redondo-16 { border-radius: 16px; }
.avatar-bg-glass  { background: rgba(255,255,255,.2); }
.text-white-75    { color: rgba(255,255,255,.75) !important; }

/* ── Historiales (productos, ventas, tanques): clases utilitarias ── */
.fs-9px  { font-size: 9px; }
.fs-10px { font-size: 10px; }
.fs-11px { font-size: 11px; }
.fs-12px { font-size: 12px; line-height: 1.3; }
.fs-13px { font-size: 13px; }
.icono-30 { width: 30px; height: 30px; }
.dot-10  { width: 10px; height: 10px; }
.col-w-36  { width: 36px; }
.col-w-50  { width: 50px; }
.col-w-100 { width: 100px; }
.col-w-110 { width: 110px; }
.col-min-140 { min-width: 140px; }
.col-min-180 { min-width: 180px; }
.barra-h-6 { height: 6px; border-radius: 4px; }
.barra-h-7 { height: 7px; }
.barra-r-4 { border-radius: 4px; }
.lista-scroll-52 { max-height: 52vh; overflow-y: auto; }
.thead-sticky { position: sticky; top: 0; z-index: 1; background: #f8f9fa; }
.bg-gris-claro  { background: #f8f9fa; }
.bg-gris-suave  { background: #fafafa; }
.border-top-gris { border-top: 3px solid #e9ecef; }

/* ── Ventas (historial/listar): clases utilitarias ── */
.col-w-160 { width: 160px; }
.col-w-180 { width: 180px; }
.mw-180 { max-width: 180px; }
.mw-320 { max-width: 320px; }
.scroll-65 { max-height: 65vh; overflow-y: auto; }
.scroll-70 { max-height: 70vh; overflow-y: auto; }
.lh-1 { line-height: 1; }
.barra-h-8  { height: 8px; border-radius: 4px; }
.barra-h-4b { height: 4px; border-radius: 3px; }
.barra-h-12 { height: 12px; border-radius: 6px; background: #e9ecef; }
.bg-slate-50 { background: #f8fafc; }
.bg-green-50 { background: #f0fdf4; }

/* ── Modal "Confirmar compra": header verde con texto blanco (claro y oscuro) ── */
.modal-header-confirmar {
  background: linear-gradient(135deg, #047857 0%, #059669 55%, #10b981 100%) !important;
}
.modal-header-confirmar .modal-title,
.modal-header-confirmar .modal-title i,
.modal-header-confirmar .modal-title span {
  color: #fff !important;
}
/* En modo oscuro el header también se oscurece (verde apagado, no brillante) */
[data-bs-theme="dark"] .modal-header-confirmar {
  background: linear-gradient(135deg, #14181d 0%, #1c2a24 100%) !important;
  border-bottom: 1px solid #2d343d !important;
}
/* En modo oscuro el body del modal de confirmar también se oscurece */
[data-bs-theme="dark"] #modalConfirmar .modal-content {
  background-color: #20262e !important;
  color: #e6edf3 !important;
}
[data-bs-theme="dark"] #modalConfirmar .modal-body,
[data-bs-theme="dark"] #modalConfirmar .modal-footer {
  background-color: #20262e !important;
}
[data-bs-theme="dark"] #modalConfirmar .card,
[data-bs-theme="dark"] #modalConfirmar .card-body,
[data-bs-theme="dark"] #modalConfirmar .bg-light,
[data-bs-theme="dark"] #modalConfirmar .bg-light-subtle,
[data-bs-theme="dark"] #modalConfirmar .alert-success,
[data-bs-theme="dark"] #modalConfirmar .table,
[data-bs-theme="dark"] #modalConfirmar thead.bg-light,
[data-bs-theme="dark"] #modalConfirmar thead.bg-light th,
[data-bs-theme="dark"] #modalConfirmar .table > :not(caption) > * > * {
  background-color: #2a313a !important;
  border-color: #3a424d !important;
  color: #e6edf3 !important;
}
[data-bs-theme="dark"] #modalConfirmar .text-muted,
[data-bs-theme="dark"] #modalConfirmar .text-dark,
[data-bs-theme="dark"] #modalConfirmar .table {
  color: #aeb9c5 !important;
}
[data-bs-theme="dark"] #modalConfirmar .text-success {
  color: #34d399 !important;
}

/* ── Barra "Productos a comprar" fija arriba del modal (no scrollea) ── */
.barra-productos-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef0f3;
}
[data-bs-theme="dark"] .barra-productos-sticky {
  background: #1c2128;
  border-bottom-color: #2d343d;
}

/* Borde del select enfocado en verde de la empresa (sin pintar las opciones) */
.form-select:focus,
select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.20) !important;
}

/* ── Icono de reciclaje en el logo cuando el menú está colapsado (mini) ── */
.logo-icono-mini {
  font-size: 30px;
  color: #fff;
  line-height: 70px;
  display: block;
  text-align: center;
  width: 100%;
}
/* Centrar el contenido del logo-sm en el menú colapsado */
.navbar-brand-box .logo-sm {
  text-align: center;
}

/* ── Título "DICMAG" del menú: en ESCRITORIO se oculta (ya está el logo arriba);
   en MÓVIL se muestra con icono de reciclaje arriba + texto centrado. ── */
.app-menu .navbar-nav .menu-title.menu-title-dicmag .menu-title-icono { display: none !important; }
@media (min-width: 992px) {
  .app-menu .navbar-nav .menu-title.menu-title-dicmag { display: none !important; }
}
@media (max-width: 991.98px) {
  .app-menu .navbar-nav .menu-title.menu-title-dicmag {
    text-align: center !important;
    padding-top: 14px !important;
  }
  .app-menu .navbar-nav .menu-title.menu-title-dicmag .menu-title-icono {
    display: block !important;
    font-size: 30px !important;
    color: #fff !important;
    margin: 0 auto 4px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  .app-menu .navbar-nav .menu-title.menu-title-dicmag > span {
    display: block !important;
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MAPA DE UBICACIÓN DEL CLIENTE (Leaflet) — responsive
═══════════════════════════════════════════════════════════════════ */
#mapa-ubicacion { z-index: 1; }
/* En celular el mapa se hace un poco más bajo para no empujar el footer */
@media (max-width: 575.98px) {
  #mapa-ubicacion { height: 180px !important; }
}
/* Control de capas (Satélite/Calles) más compacto y legible */
#mapa-ubicacion .leaflet-control-layers {
  font-size: .8rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ═══════════════════════════════════════════════════════════════════
   MAPA DE RECOLECTAS (notificaciones) — Leaflet + navegación
═══════════════════════════════════════════════════════════════════ */
#mapa-clientes { height: calc(100vh - 250px); min-height: 420px; width: 100%; z-index: 1; }
#panel-ruta { max-height: calc(100vh - 290px); min-height: 300px; overflow-y: auto; }

/* Marcador "tú estás aquí" (azul, pulsante suave) */
.pin-yo {
  width: 18px; height: 18px; border-radius: 50%;
  background: #3d78e3; border: 3px solid #fff;
  box-shadow: 0 0 0 rgba(61,120,227,0.6);
  animation: latido-azul 1.6s infinite;
}
@keyframes latido-azul {
  0%   { box-shadow: 0 0 0 0 rgba(61,120,227,0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(61,120,227,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,120,227,0); }
}

/* Tarjetas de la lista de ruta */
.ruta-item { cursor: pointer; transition: background .15s; }
.ruta-item:hover { background: #f3f8fe; }
.ruta-item.mas-cerca { background: #e6f5ef; border-left: 4px solid #059669; }
.ruta-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}

/* Marcador que PARPADEA para los clientes de HOY (rojo intenso) */
.pin-hoy {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e60000; border: 3px solid #fff;
  box-shadow: 0 0 0 rgba(230,0,0,0.75);
  animation: latido 1.3s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(230,0,0,0.75); }
  70%  { box-shadow: 0 0 0 16px rgba(230,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,0,0,0); }
}
/* Marcador normal (clientes que no son de hoy) */
.pin-normal {
  width: 16px; height: 16px; border-radius: 50%;
  background: #059669; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.leaflet-popup-content { margin: 10px 12px; }

/* Punto rojo pequeño dentro del badge "Hoy" del header del mapa */
.pin-hoy-mini { width: 11px; height: 11px; border-width: 2px; }
/* Popup del cliente en el mapa */
.mapa-popup { min-width: 170px; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE LICENCIA / PAGO MENSUAL
═══════════════════════════════════════════════════════════════════ */
.licencia-modal { border-radius: 16px; }

/* Cabecera AVISO: degradado verde con texto blanco */
.licencia-aviso .licencia-head {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

/* Cabecera BLOQUEADO: rojo SUAVE de fondo con texto e ícono en rojo */
.licencia-bloqueado .licencia-head {
  background: #fde8e6;
}
.licencia-bloqueado .licencia-head h4 {
  color: #dc2626 !important;
}

/* Ícono circular sobre la cabecera */
.licencia-icono {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.45);
}
.licencia-icono i { font-size: 34px; color: #fff; }

/* En bloqueado, el círculo y el ícono van en rojo (sobre fondo suave) */
.licencia-bloqueado .licencia-icono {
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.30);
}
.licencia-bloqueado .licencia-icono i { color: #dc2626; }

/* Cuerpo con un fondo muy suave acorde al estado */
.licencia-aviso .modal-body { background: #f3fbf7; }      /* verde muy suave */
.licencia-bloqueado .modal-body { background: #fdf4f3; }  /* rojo muy suave */

/* Switch grande para el control de pagos de licencia */
.form-switch-lg .form-check-input {
  width: 2.8em; height: 1.5em; cursor: pointer;
}
.form-switch-lg .form-check-input:checked {
  background-color: #059669;
  border-color: #059669;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTRO PROFESIONAL (Historial de Ventas) — chips y presets
═══════════════════════════════════════════════════════════════════ */
/* Chip de filtro activo */
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
}
.filtro-chip i { font-size: .85rem; opacity: .8; }
.filtro-chip a {
  color: #059669;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  margin-left: 2px;
  transition: color .15s;
}
.filtro-chip a:hover { color: #dc2626; }

/* Botones de preset de fecha (Hoy / Este mes / Año / Todo) */
.filtro-presets .btn {
  font-weight: 600;
  font-size: .78rem;
}
.filtro-presets .btn-outline-success.active {
  background: linear-gradient(90deg, #059669, #10b981);
  border-color: #059669;
  color: #fff;
}

/* Encabezados de columna ordenables */
.th-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.th-sort:hover { color: #059669; }
.th-sort i { font-size: .9rem; margin-left: 2px; vertical-align: -1px; }
.th-sort-active { color: #065f46 !important; }

/* ═══════════════════════════════════════════════════════════════════
   FILTROS GLOBALES (Estadísticas) — barra de período con degradado
═══════════════════════════════════════════════════════════════════ */
.filtros-globales-bar {
  background: linear-gradient(90deg, #064e3b 0%, #059669 52%, #10b981 100%) !important;
}
/* Texto, íconos y separadores legibles sobre el verde */
.filtros-globales-bar .text-muted,
.filtros-globales-bar small,
.filtros-globales-bar label { color: rgba(255,255,255,.85) !important; }
.filtros-globales-bar .vr { background: rgba(255,255,255,.4) !important; opacity: 1 !important; }
.filtros-globales-bar .border-top { border-color: rgba(255,255,255,.25) !important; }

/* Botones de filtro rápido (Hoy/Semana/Mes/Año/Histórico) y secundarios */
.filtros-globales-bar .btn-soft-secondary,
.filtros-globales-bar .btn-light {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-weight: 500;
}
.filtros-globales-bar .btn-soft-secondary:hover,
.filtros-globales-bar .btn-light:hover {
  background: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
/* Botón activo / primario: blanco sólido con texto verde para que destaque */
.filtros-globales-bar .btn-soft-primary,
.filtros-globales-bar .btn-filtro-rapido.active,
.filtros-globales-bar .btn-primary {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #065f46 !important;
  font-weight: 600;
}
.filtros-globales-bar .btn-soft-primary:hover,
.filtros-globales-bar .btn-primary:hover { background: #f0fdf4 !important; color: #064e3b !important; }

/* Badge del período seleccionado */
.filtros-globales-bar #badge-periodo {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}

/* Controles del panel "Filtros avanzados" (selects/inputs) sobre el verde */
.filtros-globales-bar .form-select,
.filtros-globales-bar .form-control {
  background-color: rgba(255,255,255,.92) !important;
  color: #14532d !important;
}
.filtros-globales-bar .form-select:focus,
.filtros-globales-bar .form-control:focus {
  background-color: #fff !important;
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.25) !important;
}
.filtros-globales-bar .form-control::placeholder { color: #6b7280 !important; }

/* ── Barra superior de FullCalendar con el degradado de marca ─────────
   FullCalendar inyecta su propia .fc-toolbar, así que no se le puede
   aplicar .card-header-dicmag desde el Blade. Se acota a #calendar para
   no afectar a otros calendarios del sistema. */
#calendar .fc-toolbar.fc-header-toolbar {
  background: var(--dc-grad-blue) !important;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 1.2rem !important;
}
#calendar .fc-toolbar-title {
  color: #fff !important;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Botones sobre el degradado: vidrio translúcido, no el azul de Bootstrap */
#calendar .fc-toolbar .fc-button,
#calendar .fc-toolbar .fc-button:disabled {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-transform: capitalize;
  font-weight: 500;
}
#calendar .fc-toolbar .fc-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, .28) !important;
}
#calendar .fc-toolbar .fc-button:disabled {
  opacity: .45 !important;
}
/* Vista activa (Mes / Semana / Lista) */
#calendar .fc-toolbar .fc-button-active,
#calendar .fc-toolbar .fc-button.fc-button-active:not(:disabled) {
  background: #fff !important;
  border-color: #fff !important;
  color: #059669 !important;
  font-weight: 600;
}
#calendar .fc-toolbar .fc-button:focus,
#calendar .fc-toolbar .fc-button:focus-visible {
  box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .35) !important;
}
#calendar .fc-toolbar .fc-icon {
  color: inherit !important;
}

/* ── Nombres de cliente completos en la grilla de mes ────────────────
   Por defecto FullCalendar pone el título en una línea con "…". Aquí
   dejamos que salte de línea y se lea el nombre entero del cliente. */
#calendar .fc-daygrid-event {
  white-space: normal !important;
  align-items: flex-start;
}
#calendar .fc-daygrid-event .fc-event-title,
#calendar .fc-daygrid-event .fc-event-title-container {
  white-space: normal !important;
  overflow: visible;
  line-height: 1.25;
}

/* ── Modo oscuro: tarjetas de resumen y leyenda del calendario ───────
   Las 4 tarjetas de arriba (iconos + botón "Ver clientes") y las filas
   de la leyenda usan clases bg-{color}-subtle / btn-soft-{color}. En dark
   Velzon no oscurece info/danger/primary de forma consistente y quedan
   fondos claros. Los repintamos con tonos oscuros translúcidos del mismo
   color. Acotado a .vista-calendario-recolectas para no tocar el resto. */
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-success-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-success {
  background-color: rgba(16, 185, 129, .16) !important;
  color: #6ee7b7 !important;
}
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-warning-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-warning {
  background-color: rgba(247, 184, 75, .16) !important;
  color: #ffd88a !important;
}
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-info-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-info {
  background-color: rgba(61, 120, 227, .18) !important;
  color: #9dc0ff !important;
}
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-danger-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-danger {
  background-color: rgba(240, 101, 72, .18) !important;
  color: #ffa795 !important;
}
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-primary-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-primary {
  background-color: rgba(61, 120, 227, .18) !important;
  color: #9dc0ff !important;
}
[data-bs-theme="dark"] .vista-calendario-recolectas .bg-dark-subtle,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-soft-dark {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #ced4da !important;
}
/* El icono heredado dentro del avatar y el texto del botón siguen el color */
[data-bs-theme="dark"] .vista-calendario-recolectas .avatar-title i,
[data-bs-theme="dark"] .vista-calendario-recolectas .btn-ver-lista i {
  color: inherit !important;
}

/* ── Modo oscuro: FullCalendar no se adapta solo ─────────────────────
   Trae fondos blancos y texto oscuro fijos en su CSS. Redefinimos sus
   variables --fc-* y ajustamos lo que no expone como variable, todo
   acotado a #calendar para no tocar otros calendarios. */

/* Barra superior verde → plana oscura, igual que .card-header-dicmag y
   los headers de modal en modo oscuro (mismo color #20262e / borde). */
[data-bs-theme="dark"] #calendar .fc-toolbar.fc-header-toolbar {
  background: #20262e !important;
  background-image: none !important;
  border: 1px solid #2d343d !important;
}
/* Botones sobre la barra: vidrio claro no pega sobre plano oscuro */
[data-bs-theme="dark"] #calendar .fc-toolbar .fc-button,
[data-bs-theme="dark"] #calendar .fc-toolbar .fc-button:disabled {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #dee2e6 !important;
}
[data-bs-theme="dark"] #calendar .fc-toolbar .fc-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, .12) !important;
}
/* Vista activa (Mes/Semana/Lista): verde de marca sobre el plano oscuro */
[data-bs-theme="dark"] #calendar .fc-toolbar .fc-button-active,
[data-bs-theme="dark"] #calendar .fc-toolbar .fc-button.fc-button-active:not(:disabled) {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #0b1f18 !important;
}
[data-bs-theme="dark"] #calendar {
  --fc-page-bg-color:        transparent;
  /* Oscuro translúcido (negro), NO blanco: sobre el fondo casi-negro el
     blanco translúcido se veía como un gris claro en cabeceras y celdas. */
  --fc-neutral-bg-color:     rgba(0, 0, 0, .18);         /* celdas de otros meses / cabeceras */
  --fc-neutral-text-color:   #ced4da;
  --fc-border-color:         rgba(255, 255, 255, .10);   /* líneas de la grilla */
  --fc-today-bg-color:       rgba(16, 185, 129, .14);    /* verde tenue para el día de hoy */
  --fc-list-event-hover-bg-color: rgba(255, 255, 255, .06);
  --fc-highlight-color:      rgba(16, 185, 129, .18);
  color: #ced4da;
}

/* Cabeceras de columna (lun, mar, mié…) y celdas del día: fondo oscuro
   que se funde con el tema, en vez del gris claro por defecto. */
[data-bs-theme="dark"] #calendar .fc-col-header-cell,
[data-bs-theme="dark"] #calendar .fc-scrollgrid,
[data-bs-theme="dark"] #calendar .fc-scrollgrid-section > * {
  background-color: transparent !important;
}
[data-bs-theme="dark"] #calendar .fc-daygrid-day,
[data-bs-theme="dark"] #calendar .fc-timegrid-col {
  background-color: transparent !important;
}
/* Días de otro mes: un pelín más oscuros para distinguirlos, sin brillar */
[data-bs-theme="dark"] #calendar .fc-day-other {
  background-color: rgba(0, 0, 0, .22) !important;
}

/* Texto de la grilla: días de la semana y números de día */
[data-bs-theme="dark"] #calendar .fc-col-header-cell-cushion,
[data-bs-theme="dark"] #calendar .fc-daygrid-day-number,
[data-bs-theme="dark"] #calendar .fc-timegrid-slot-label-cushion,
[data-bs-theme="dark"] #calendar .fc-timegrid-axis-cushion,
[data-bs-theme="dark"] #calendar .fc-list-day-text,
[data-bs-theme="dark"] #calendar .fc-list-day-side-text {
  color: #dee2e6 !important;
}

/* Días fuera del mes actual: más apagados */
[data-bs-theme="dark"] #calendar .fc-day-other .fc-daygrid-day-number {
  color: #6c757d !important;
}

/* Cabeceras de la lista y bordes en la vista Lista */
[data-bs-theme="dark"] #calendar .fc-list,
[data-bs-theme="dark"] #calendar .fc-list-table td,
[data-bs-theme="dark"] #calendar .fc-list-day-cushion {
  background-color: rgba(255, 255, 255, .04) !important;
}
[data-bs-theme="dark"] #calendar .fc-list-event td {
  background-color: transparent !important;
}
[data-bs-theme="dark"] #calendar .fc-list-empty {
  background-color: transparent !important;
  color: #adb5bd !important;
}

/* Enlace "+N más": en dark quedaba con texto oscuro sobre fondo oscuro */
[data-bs-theme="dark"] #calendar .fc-daygrid-more-link {
  color: #dee2e6 !important;
}

/* Popover del "+N más": fondo oscuro para que no sea una tarjeta blanca */
[data-bs-theme="dark"] .fc-popover {
  background-color: #2a2f34 !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #dee2e6 !important;
}
[data-bs-theme="dark"] .fc-popover .fc-popover-header {
  background-color: rgba(255, 255, 255, .06) !important;
  color: #dee2e6 !important;
}

/* ── Eventos de colores en modo oscuro ───────────────────────────────
   Los eventos llevan clases bg-{color}-subtle (fondo) + text-{color}.
   En claro se ven bien; en oscuro esos fondos pastel resultan claros y
   el texto de color queda de bajo contraste. Aquí los repintamos con un
   fondo oscuro translúcido del mismo color y texto claro y legible.
   Se acota a #calendar para no alterar esas clases en el resto del sistema. */
[data-bs-theme="dark"] #calendar .fc-event {
  border: none !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-warning-subtle {
  background-color: rgba(247, 184, 75, .20) !important;
  color: #ffd88a !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-success-subtle {
  background-color: rgba(16, 185, 129, .20) !important;
  color: #6ee7b7 !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-info-subtle {
  background-color: rgba(61, 120, 227, .22) !important;
  color: #9dc0ff !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-danger-subtle {
  background-color: rgba(240, 101, 72, .22) !important;
  color: #ffa795 !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-primary-subtle {
  background-color: rgba(61, 120, 227, .22) !important;
  color: #9dc0ff !important;
}
[data-bs-theme="dark"] #calendar .fc-event.bg-dark-subtle {
  background-color: rgba(255, 255, 255, .10) !important;
  color: #ced4da !important;
}
/* El texto interno del evento hereda el color que fijamos arriba */
[data-bs-theme="dark"] #calendar .fc-event .fc-event-title,
[data-bs-theme="dark"] #calendar .fc-event .fc-event-time {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   Calendario RESPONSIVE (celular / tablet)
   En móvil se usa la vista de Lista (definida en el JS). Aquí la dejamos
   legible y compactamos el toolbar, que en pantallas chicas se amontona.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Toolbar: en móvil el título + fecha + botones no caben en una fila.
     Lo apilamos y centramos para que no se corte. */
  #calendar .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
    gap: .5rem;
    padding: 10px 12px;
  }
  #calendar .fc-toolbar-title {
    font-size: .95rem;
    text-align: center;
  }
  #calendar .fc-toolbar .fc-button {
    padding: .3rem .55rem;
    font-size: .8rem;
  }

  /* Vista de lista: filas cómodas y nombre de cliente completo (sin cortar). */
  #calendar .fc-list-event-title {
    white-space: normal;
    font-weight: 500;
  }
  #calendar .fc-list-event-time {
    white-space: nowrap;
    font-size: .8rem;
  }
  #calendar .fc-list-day-cushion {
    font-size: .9rem;
    font-weight: 600;
  }
  /* Punto de color del evento un poco más grande para identificarlo rápido */
  #calendar .fc-list-event-graphic .fc-list-event-dot {
    border-width: 6px;
  }

  /* Si el usuario cambia a Mes en móvil, la grilla NO cabe en 7 columnas:
     permitimos scroll horizontal en vez de comprimir todo a "BRO...". */
  #calendar .fc-view-harness {
    overflow-x: auto;
  }
  #calendar .fc-dayGridMonth-view .fc-scrollgrid {
    min-width: 640px;   /* fuerza ancho legible; se desplaza en horizontal */
  }
  /* Nombres de evento en la grilla de mes: que no se corten tan agresivo */
  #calendar .fc-daygrid-event .fc-event-title {
    white-space: normal;
  }
}

/* Tablet: el calendario ocupa todo el ancho bajo el panel lateral, que en
   estos anchos pasa a ir arriba (columnas de Bootstrap ya lo apilan). */
@media (min-width: 768px) and (max-width: 991.98px) {
  #calendar .fc-toolbar-title { font-size: 1rem; }
}


/* ====================================================================
   MODO OSCURO GLOBAL DICMAG
   ====================================================================
   Capa final de cobertura total: garantiza que TODO el sistema se
   oscurece de forma consistente y profesional cuando el usuario activa
   el tema oscuro (data-bs-theme="dark").

   Cubre 3 frentes:
     1. Utilidades claras de Bootstrap usadas en las vistas
        (bg-white, bg-light, text-dark, btn-light, table-light...)
     2. Librerias externas sin tema propio
        (SweetAlert2, Choices.js, Leaflet, ApexCharts)
     3. Detalles finos: mapa nocturno, scrollbars, sombras.

   Tokens oficiales del tema oscuro Velzon (variables --vz-*):
     fondo #1a1d21 - tarjetas #212529 - terciario #2a2d31
     borde #32383e - texto #ced4da - inputs #262a2f
   ==================================================================== */

/* -- 1a. Fondos claros forzados -> fondo de tarjeta oscuro --
   Se excluyen los chips translucidos (bg-white + bg-opacity-*) que
   van sobre cabeceras de color y funcionan bien en ambos temas. */
[data-bs-theme="dark"] .bg-white:not([class*="bg-opacity"]) {
  background-color: var(--vz-secondary-bg) !important;
}
[data-bs-theme="dark"] .bg-light:not([class*="bg-opacity"]) {
  background-color: var(--vz-light) !important;
}
[data-bs-theme="dark"] .border-light {
  border-color: var(--vz-border-color) !important;
}

/* -- 1b. Texto oscuro -> texto claro --
   Unica excepcion: sobre amarillo (bg-warning) el texto oscuro es el
   contraste correcto y se conserva. */
[data-bs-theme="dark"] .text-dark:not([class*="bg-warning"]) {
  color: var(--vz-body-color) !important;
}

/* -- 1c. Botones claros -> botones oscuros elegantes -- */
[data-bs-theme="dark"] .btn-light {
  --vz-btn-bg: var(--vz-light);
  --vz-btn-border-color: var(--vz-light-border-subtle);
  --vz-btn-color: var(--vz-body-color);
  --vz-btn-hover-bg: var(--vz-tertiary-bg);
  --vz-btn-hover-border-color: var(--vz-border-color);
  --vz-btn-hover-color: var(--vz-emphasis-color);
  --vz-btn-active-bg: var(--vz-tertiary-bg);
  --vz-btn-active-border-color: var(--vz-border-color);
  --vz-btn-active-color: var(--vz-emphasis-color);
}
[data-bs-theme="dark"] .btn-outline-light {
  --vz-btn-color: var(--vz-body-color);
  --vz-btn-border-color: var(--vz-border-color);
  --vz-btn-hover-bg: var(--vz-light);
  --vz-btn-hover-border-color: var(--vz-border-color);
  --vz-btn-hover-color: var(--vz-emphasis-color);
  --vz-btn-active-bg: var(--vz-light);
  --vz-btn-active-color: var(--vz-emphasis-color);
}

/* -- 1d. Cabeceras de tabla claras -- */
[data-bs-theme="dark"] .table-light {
  --vz-table-bg: var(--vz-tertiary-bg);
  --vz-table-color: var(--vz-body-color);
  --vz-table-border-color: var(--vz-border-color);
  --vz-table-striped-bg: var(--vz-tertiary-bg);
  --vz-table-striped-color: var(--vz-body-color);
  color: var(--vz-body-color);
  border-color: var(--vz-border-color);
}
[data-bs-theme="dark"] thead.bg-light th,
[data-bs-theme="dark"] thead.table-light th {
  background-color: var(--vz-tertiary-bg) !important;
  color: var(--vz-body-color) !important;
}

/* -- 1e. Campos de formulario con blanco forzado -- */
[data-bs-theme="dark"] .form-control.bg-white,
[data-bs-theme="dark"] .form-select.bg-white,
[data-bs-theme="dark"] .input-group-text.bg-white {
  background-color: var(--vz-input-bg-custom, #262a2f) !important;
  color: var(--vz-body-color);
}

/* -- 1f. Alertas claras -- */
[data-bs-theme="dark"] .alert-light {
  --vz-alert-bg: var(--vz-light);
  --vz-alert-color: var(--vz-body-color);
  --vz-alert-border-color: var(--vz-border-color);
}

/* -- 2a. SweetAlert2 (confirmaciones y avisos) -- */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--vz-secondary-bg) !important;
  color: var(--vz-body-color) !important;
}
[data-bs-theme="dark"] .swal2-title {
  color: var(--vz-emphasis-color) !important;
}
[data-bs-theme="dark"] .swal2-html-container {
  color: var(--vz-body-color) !important;
}
[data-bs-theme="dark"] .swal2-footer {
  border-color: var(--vz-border-color);
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background: var(--vz-input-bg-custom, #262a2f) !important;
  color: var(--vz-body-color) !important;
  border-color: var(--vz-border-color) !important;
}

/* -- 2b. Choices.js (selects buscables) -- */
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .choices[data-type*="select-one"] .choices__inner {
  background-color: var(--vz-input-bg-custom, #262a2f);
  border-color: var(--vz-input-border-custom, #2a2f34);
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .choices__list--dropdown,
[data-bs-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--vz-secondary-bg);
  border-color: var(--vz-border-color);
}
[data-bs-theme="dark"] .choices__list--dropdown .choices__item,
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item {
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--vz-tertiary-bg);
}
[data-bs-theme="dark"] .choices__input {
  background-color: transparent;
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .choices[data-type*="select-one"]::after {
  border-color: var(--vz-body-color) transparent transparent;
}
[data-bs-theme="dark"] .choices__list--single .choices__item {
  color: var(--vz-body-color);
}

/* -- 2c. Leaflet: popups, controles y MAPA NOCTURNO --
   Los tiles de OpenStreetMap son claros por naturaleza; en oscuro se
   invierten y se rota el tono -> mapa "modo noche" integrado al tema. */
[data-bs-theme="dark"] .leaflet-tile.tiles-mapa-claro {
  filter: invert(1) hue-rotate(190deg) brightness(0.92) contrast(0.9) saturate(0.7);
}
[data-bs-theme="dark"] .leaflet-container {
  background: var(--vz-body-bg, #1a1d21);
}
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
  background: var(--vz-secondary-bg);
  color: var(--vz-body-color);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
[data-bs-theme="dark"] .leaflet-container a.leaflet-popup-close-button {
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .leaflet-bar a {
  background-color: var(--vz-secondary-bg);
  color: var(--vz-body-color);
  border-bottom-color: var(--vz-border-color);
}
[data-bs-theme="dark"] .leaflet-bar a:hover {
  background-color: var(--vz-tertiary-bg);
}
[data-bs-theme="dark"] .leaflet-control-attribution {
  background: rgba(26, 29, 33, 0.8);
  color: #878a99;
}
[data-bs-theme="dark"] .leaflet-control-attribution a {
  color: #a8aeb5;
}
/* Selector de capas (botón blanco con ícono de capas): se invierte completo
   -> caja oscura con ícono claro, igual que los tiles en modo noche. */
[data-bs-theme="dark"] .leaflet-control-layers-toggle {
  filter: invert(1) hue-rotate(180deg);
}
/* Panel desplegado del selector de capas */
[data-bs-theme="dark"] .leaflet-control-layers-expanded {
  background: var(--vz-secondary-bg);
  color: var(--vz-body-color);
}

/* -- 2c-bis. Franjas de fondo gris suave (footer de tablas del Kardex y
   descartes): #fafafa claro -> terciario oscuro del tema. */
[data-bs-theme="dark"] .bg-gris-suave {
  background: var(--vz-tertiary-bg, #2a2d31);
}

/* ── Barra "Filtros globales" de Estadísticas en MODO OSCURO ──
   El degradado verde es identidad del modo CLARO; en oscuro la barra se
   integra al tema como el topbar/sidebar (mismo criterio de la capa dark).
   Necesita !important porque la versión clara lo fija con !important. */
[data-bs-theme="dark"] .filtros-globales-bar {
  background: var(--vz-secondary-bg, #212529) !important;
}
/* Botón activo: verde de marca sólido (no blanco brillante) */
[data-bs-theme="dark"] .filtros-globales-bar .btn-soft-primary,
[data-bs-theme="dark"] .filtros-globales-bar .btn-filtro-rapido.active,
[data-bs-theme="dark"] .filtros-globales-bar .btn-primary {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .filtros-globales-bar .btn-soft-primary:hover,
[data-bs-theme="dark"] .filtros-globales-bar .btn-primary:hover {
  background: #047857 !important;
  color: #fff !important;
}
/* Botones fantasma y separadores más discretos sobre fondo oscuro */
[data-bs-theme="dark"] .filtros-globales-bar .btn-soft-secondary,
[data-bs-theme="dark"] .filtros-globales-bar .btn-light {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .filtros-globales-bar .vr { background: rgba(255, 255, 255, 0.15) !important; }
[data-bs-theme="dark"] .filtros-globales-bar .border-top { border-color: var(--vz-border-color, #32383e) !important; }
/* Inputs/selects de "Filtros avanzados": de blanco a input oscuro del tema */
[data-bs-theme="dark"] .filtros-globales-bar .form-select,
[data-bs-theme="dark"] .filtros-globales-bar .form-control {
  background-color: var(--vz-input-bg-custom, #262a2f) !important;
  color: var(--vz-body-color, #ced4da) !important;
  border-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .filtros-globales-bar .form-select:focus,
[data-bs-theme="dark"] .filtros-globales-bar .form-control:focus {
  background-color: var(--vz-input-bg-custom, #262a2f) !important;
  box-shadow: 0 0 0 0.15rem rgba(5, 150, 105, 0.25) !important;
}
[data-bs-theme="dark"] .filtros-globales-bar .form-control::placeholder { color: #878a99 !important; }

/* -- 2d. ApexCharts (graficos de estadisticas y ventas) -- */
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabel-value,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-title-text {
  fill: var(--vz-body-color);
}
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-legend-text {
  color: var(--vz-body-color) !important;
}
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-gridline {
  stroke: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-canvas line.apexcharts-xaxis-tick {
  stroke: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .apexcharts-tooltip {
  background: var(--vz-secondary-bg) !important;
  border-color: var(--vz-border-color) !important;
  color: var(--vz-body-color) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip-title {
  background: var(--vz-tertiary-bg) !important;
  border-color: var(--vz-border-color) !important;
  color: var(--vz-emphasis-color) !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--vz-tertiary-bg);
  border-color: var(--vz-border-color);
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom::before,
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom::after {
  border-bottom-color: var(--vz-border-color);
}
[data-bs-theme="dark"] .apexcharts-menu {
  background: var(--vz-secondary-bg) !important;
  border-color: var(--vz-border-color) !important;
  color: var(--vz-body-color);
}
[data-bs-theme="dark"] .apexcharts-menu-item:hover {
  background: var(--vz-tertiary-bg) !important;
}

/* -- 3a. Scrollbars integrados al tema (Chrome/Edge/Firefox modernos) -- */
html[data-bs-theme="dark"] {
  scrollbar-color: #3a4046 #1a1d21;
}

/* -- 3b. Sombras mas profundas para mantener la jerarquia visual -- */
[data-bs-theme="dark"] .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.65) !important;
}

/* -- 1g. Subtle de la paleta unificada en oscuro --
   La seccion de paleta (arriba) fija bg-info-subtle / bg-danger-subtle
   en tonos CLAROS con !important para el tema claro; aqui se les da su
   version oscura translucida para que los iconos/badges no queden como
   parches claros en el tema oscuro. */
[data-bs-theme="dark"] {
  --vz-info-bg-subtle: rgba(61, 120, 227, 0.18);
  --bs-info-bg-subtle: rgba(61, 120, 227, 0.18);
  --vz-info-border-subtle: #2d4f8f;
  --bs-info-border-subtle: #2d4f8f;
  --vz-danger-bg-subtle: rgba(240, 101, 72, 0.16);
  --bs-danger-bg-subtle: rgba(240, 101, 72, 0.16);
  --vz-danger-border-subtle: #79392f;
  --bs-danger-border-subtle: #79392f;
}
[data-bs-theme="dark"] .bg-info-subtle {
  background-color: rgba(61, 120, 227, 0.18) !important;
}
[data-bs-theme="dark"] .border-info,
[data-bs-theme="dark"] .border-info-subtle {
  border-color: #2d4f8f !important;
}
[data-bs-theme="dark"] .bg-danger-subtle {
  background-color: rgba(240, 101, 72, 0.16) !important;
}
[data-bs-theme="dark"] .border-danger,
[data-bs-theme="dark"] .border-danger-subtle {
  border-color: #79392f !important;
}