/* ===== UTILIDADES GLOBALES ===== */
* {
  box-sizing: border-box;
}

/* ===== MODAL BASE GLOBAL ===== */
#modalBase,
#modalDeudaCliente,
#modalCrmMapa {
  --mb-surface: #ffffff;
  --mb-surface-soft: #fafafa;
  --mb-text: #1f2937;
  --mb-muted: #6b7280;
  --mb-border: rgba(31, 41, 55, 0.16);
  --mb-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  --mb-accent: #696cff;
}

html.dark-style #modalBase,
[data-theme='dark'] #modalBase,
html.dark-style #modalDeudaCliente,
[data-theme='dark'] #modalDeudaCliente,
html.dark-style #modalCrmMapa,
[data-theme='dark'] #modalCrmMapa {
  --mb-surface: #2b2c40;
  --mb-surface-soft: #31344a;
  --mb-text: #edf1ff;
  --mb-muted: #b4bdd7;
  --mb-border: rgba(205, 213, 255, 0.16);
  --mb-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
  --mb-accent: #8f93ff;
}

#modalBase .modal-content.modal-base-shell,
#modalCrmMapa .modal-content.modal-base-shell {
  background: var(--mb-surface);
  color: var(--mb-text);
  border: 1px solid var(--mb-border);
  border-radius: 1.1rem;
  box-shadow: var(--mb-shadow);
  overflow: hidden;
}

.modal-header.modal-base-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #7166eb 0%, #5f61e6 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.modal-base-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.2;
}

#modalBase .modal-base-close,
.modal-base-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

#modalBase .modal-base-close:hover,
.modal-base-close:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.36);
  transform: rotate(90deg) scale(1.04);
}

#modalBase .modal-base-body {
  min-height: 280px;
  padding: 1.25rem;
  background: var(--mb-surface);
  color: var(--mb-text);
}

#modalConfirmarCambios .modal-base-body {
  padding: 1.25rem;
  background: var(--mb-surface);
  color: var(--mb-text);
}

/* Ocultar botonera de exportación dentro del modal de confirmación */
#modalConfirmarCambios .idus-export-toolbar {
  display: none !important;
}

#modalBase .modal-base-footer,
#modalDeudaCliente .modal-base-footer,
#modalConfirmarCambios .modal-base-footer,
#modalCrmMapa .modal-base-footer {
  padding: 0.95rem 1.25rem;
  background: var(--mb-surface-soft);
  border-top: 1px solid var(--mb-border);
}

#modalBase .modal-base-btn-close,
#modalDeudaCliente .modal-base-btn-close,
#modalConfirmarCambios .modal-base-btn-close,
#modalCrmMapa .modal-base-btn-close {
  border: 1px solid var(--mb-border);
  background: transparent;
  color: var(--mb-text);
  border-radius: 0.8rem;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
}

#modalBase .modal-base-btn-close:hover,
#modalDeudaCliente .modal-base-btn-close:hover,
#modalConfirmarCambios .modal-base-btn-close:hover,
#modalCrmMapa .modal-base-btn-close:hover {
  background: rgba(105, 108, 255, 0.08);
  border-color: rgba(105, 108, 255, 0.22);
  color: var(--mb-text);
}

@media (max-width: 768px) {
  #modalBase .modal-base-title {
    font-size: 1.2rem;
  }

  #modalBase .modal-base-body {
    min-height: 220px;
    padding: 1rem;
  }
}

html,
body {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dark-style ::-webkit-scrollbar-track {
  background: #2b2d42;
}

.dark-style ::-webkit-scrollbar-thumb {
  background: #696cff;
}

/* ===== TRANSICIONES SUAVES ===== */
button,
input,
select,
textarea,
a {
  transition: all 0.2s ease;
}

/* ===== INDICADORES VISUALES ===== */
.has-error .form-control,
.has-error .form-select {
  border-color: #dc3545;
  background: #fff5f5;
}

.has-error .form-control:focus,
.has-error .form-select:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}

.has-success .form-control,
.has-success .form-select {
  border-color: #28a745;
  background: #f1fdf4;
}

.has-success .form-control:focus,
.has-success .form-select:focus {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
  border-color: #28a745;
}

/* Títulos de Sección (Formularios) */
.section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #566a7f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e7e7e8;
}

.section-title i {
  margin-right: 0.5rem;
  color: #696cff;
  /* Color primario */
}

/* Contenedores de Sección */
.form-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #d9dee3;
  box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

/* Labels */
.form-label {
  font-weight: 500;
  color: #566a7f;
  margin-bottom: 0.35rem;
}

.form-label .required {
  color: #ff3e1d;
  /* Color danger */
  margin-left: 2px;
}

/* Inputs con Iconos */
.input-icon {
  position: relative;
}

.input-icon i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #a1acb8;
  z-index: 4;
}

.input-icon .form-control,
.input-icon .form-select {
  padding-left: 38px;
}

/* Checkbox Cards */
.checkbox-card {
  background: #fff;
  border: 1px solid #e7e7e8;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
}

.checkbox-card:hover {
  border-color: #696cff;
  background: #f8f7ff;
}

.checkbox-card .form-check-input:checked ~ .form-check-label {
  color: #696cff;
  font-weight: 500;
}

.checkbox-card .form-check {
  margin-bottom: 0;
  width: 100%;
}

/* Separacion global entre cards apiladas */
.container-fluid .card + .card {
  margin-top: 8px;
}

/* === NUEVOS ESTILOS ESTILO VISIT PLAN (PREMIUM) === */

.card-header-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(99, 102, 241, 0.3);
  position: relative;
}

/* Línea de acento inferior */
.card-header-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 0 0 2px 2px;
}

/* ── Shine sweep for header-gradient buttons ── */
@keyframes idus-btn-shine {
  from { left: -100%; }
  to   { left: 120%; }
}

/* Botones dentro del card-header-gradient */
.card-header-gradient .btn {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Shine pseudo-element */
.card-header-gradient .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.card-header-gradient .btn:hover::before {
  animation: idus-btn-shine 0.5s ease forwards;
}

.card-header-gradient .btn-outline-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.card-header-gradient .btn-outline-light:hover {
  background: #1e1b4b !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(15, 10, 50, 0.55), 0 1px 4px rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px) scale(1.03);
}

.card-header-gradient .btn-light {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}

.card-header-gradient .btn-light:hover,
.card-header-gradient .btn-light:focus {
  background: #1e1b4b !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(15, 10, 50, 0.55), 0 1px 4px rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px) scale(1.03);
}

.card-header-gradient .btn-light.text-success {
  color: #6ee7b7 !important;
}

.card-header-gradient .btn-light.text-primary {
  color: #c7d2fe !important;
}

/* Dark mode: mantener el gradiente indigo y ocultar borde del card */
.dark-style .card.card-header-gradient,
.dark-style .card-header-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

.dark-style .card-header-gradient .card-body,
.dark-style .card.card-header-gradient .card-body {
  background: transparent !important;
}

.section-card > .card-body,
.section-card > .modal-body-premium {
  padding-top: 8px !important;
}

.section-card > .card-body > .row:first-child,
.section-card > .modal-body-premium > .row:first-child {
  margin-top: 4px !important;
}

.card-header-gradient h5 {
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
}

/* ====== VTEX THEME HEADER (Same style as premium, VTEX color) ====== */
.card-header-gradient-vtex {
  background: linear-gradient(135deg, #f71963 0%, #d91458 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(247, 25, 99, 0.15);
}

.card-header-gradient-vtex h6,
.card-header-gradient-vtex h5 {
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
}

.card-header-gradient-vtex i {
  font-size: 1.2rem;
}

.card-header-gradient-vtex .btn {
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.card-header-gradient-vtex .btn:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: white;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* ====== MODALS PREMIUM (ONLY MODALS) ====== */
.modal-header.card-header-gradient {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1.5rem !important;
  min-height: 60px !important;
}

.modal-header.card-header-gradient .modal-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  color: #fff;
}

.modal-header.card-header-gradient .btn-close,
.modal-header.card-header-gradient .btn-close-white {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin: -0.25rem -0.25rem -0.25rem auto !important;
  /* compensa padding del header */
  padding: 0 !important;
  opacity: 0.9;
  transition: all 0.2s ease;
}

.modal-header.card-header-gradient .btn-close:hover,
.modal-header.card-header-gradient .btn-close-white:hover {
  opacity: 1;
  transform: scale(1.05);
}

.modal-body-premium {
  background: #f8f9fa;
  padding: 1rem 1.5rem;
}

/* Dark mode support for modal-body-premium */
.dark-style .modal-body-premium {
  background-color: #2b2c40 !important;
}

.dark-style .modal-body-premium .form-control,
.dark-style .modal-body-premium .form-select {
  background-color: #343547 !important;
  border-color: #4a4b6a !important;
  color: #c7c7d1 !important;
}

.dark-style .modal-body-premium .form-control:focus,
.dark-style .modal-body-premium .form-select:focus {
  background-color: #3a3b4f !important;
  border-color: #696cff !important;
  color: #c7c7d1 !important;
}

.dark-style .modal-body-premium .form-control::placeholder {
  color: #7e7f94 !important;
}

.dark-style .modal-body-premium .form-control:read-only,
.dark-style .modal-body-premium .form-control:disabled {
  background-color: #25283a !important;
  color: #7e7f94 !important;
}

.dark-style .modal-body-premium .form-label {
  color: #c7c7d1 !important;
}

.dark-style .modal-body-premium .form-select option {
  background-color: #343547 !important;
  color: #c7c7d1 !important;
}

.modal-footer-premium {
  background: #f8f9fa;
  border-top: 2px solid #696cff;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.5rem;
}

/* Dark mode support for modal-footer-premium */
.dark-style .modal-footer-premium {
  background-color: #2b2c40 !important;
  border-top-color: #696cff !important;
}

/* === MODAL CENTRADO VERTICAL === */
.modal-dialog.modal-xxl {
  max-width: 1400px;
  width: 95vw;
}

.modal.modal-centered .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 1rem) !important;
}

@media (min-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem) !important;
  }
}

/* === MODAL ITEM PEDIDO - ESTILOS ESPECÍFICOS === */
#modalItemPedido .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

#modalItemPedido .modal-content {
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#modalItemPedido .modal-body {
  overflow-y: auto;
  flex: 1;
}

/* Dark mode for modal content */
.dark-style .modal-content {
  background-color: #2f3349 !important;
  color: #b6bee3 !important;
}

/* Dark mode for tables inside modals */
.dark-style .modal-body-premium .table {
  --bs-table-color: #b6bee3 !important;
  --bs-table-bg: #2f3349 !important;
  --bs-table-border-color: #444564 !important;
  color: #b6bee3 !important;
  background-color: #2f3349 !important;
}

.dark-style .modal-body-premium .table thead {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%) !important;
  color: white !important;
}

.dark-style .modal-body-premium .table thead th {
  background: transparent !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-style .modal-body-premium .table tbody {
  background-color: #2f3349 !important;
}

.dark-style .modal-body-premium .table tbody td {
  border-color: #444564 !important;
  color: #b6bee3 !important;
  background-color: #2f3349 !important;
}

.dark-style .modal-body-premium .table tfoot {
  background-color: #2b2c40 !important;
}

.dark-style .modal-body-premium .table tfoot td {
  border-color: #444564 !important;
  color: #b6bee3 !important;
  background-color: rgba(105, 108, 255, 0.08) !important;
}

.dark-style .modal-body-premium .table tfoot strong {
  color: #cfd3ec !important;
}

/* Dark mode for table-bordered inside modals */
.dark-style .modal-body-premium .table-bordered {
  border-color: #444564 !important;
}

.dark-style .modal-body-premium .table-bordered > :not(caption) > * > * {
  border-color: #444564 !important;
}

/* Dark mode - table row hover */
.dark-style .modal-body-premium .table-hover tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.12) !important;
}

/* Dark mode for small muted text */
.dark-style .modal-body-premium .text-muted {
  color: #7e7f94 !important;
}

.dark-style .modal-body-premium .border {
  border-color: #444564 !important;
}

.card-header-gradient .subtitle {
  font-size: 0.875rem;
  opacity: 0.9;
  font-weight: 400;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Estilos de Tabla Premium */
.table-premium thead {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
  color: white;
}

/* Si usamos la clase standard .table, podemos forzar el header si está dentro de una tarjeta premium, pero mejor usar una clase específica o selectores descendientes */
/* Opción: sobreescribir el thead de las tablas dentro de las cards que usen este layout, o aplicar estilos específicos */

.card.premium-card thead th {
  background-color: #696cff;
  /* Fallback */
  color: white;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 1rem 0.75rem;
}

/* Estilo específico copiado de visitPlan */
.table-hover tbody tr {
  transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.12) !important;
}

/* Badges */
.badge-status {
  padding: 0.35em 0.85em;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.badge-enabled {
  background-color: rgba(40, 199, 111, 0.12);
  color: #28c76f;
}

.badge-disabled {
  background-color: rgba(234, 84, 85, 0.12);
  color: #ea5455;
}

.badge-warning {
  background-color: rgba(255, 159, 67, 0.12);
  color: #ff9f43;
}

/* Search Box */
.search-box {
  position: relative;
}

.search-box input {
  padding-left: 2.5rem;
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a5a3ae;
}

/* DataTables Top Row Flex */
.dt-top-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dt-top-row .dt-buttons {
  margin-bottom: 0 !important;
}

.dt-top-row .dataTables_length {
  margin-bottom: 0 !important;
}

.dt-top-row .dataTables_filter {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* === DATATABLES FULL HEADER & FOOTER STYLING === */

/* Top Row (Search & Length) */
.dt-top-row {
  padding: 1.25rem 1.5rem;
  margin: 0 !important;
}

/* Bottom Row (Info & Pagination) */
.dataTables_wrapper .row:last-child {
  padding: 1rem 1.5rem;
  margin: 0 !important;
  align-items: center;
  border-top: 1px solid rgba(67, 89, 113, 0.1);
  /* Separador sutil */
}

.dataTables_wrapper .dataTables_info {
  padding: 16px;
  color: #a1acb8;
  font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 16px;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  margin-bottom: 0 !important;
  justify-content: flex-end;
}

/* Pagination Buttons Style (Optional Override) */
.dataTables_wrapper .page-item.active .page-link {
  background-color: #696cff;
  /* Primary color */
  border-color: #696cff;
  box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4);
}

.dataTables_wrapper .page-link {
  border-radius: 0.25rem;
  margin: 0 0.125rem;
  border: none;
  background-color: rgba(67, 89, 113, 0.05);
  color: #697a8d;
}

.dataTables_wrapper .page-link:hover {
  background-color: rgba(67, 89, 113, 0.1);
  color: #697a8d;
}

/* Dark Mode Adjustments for Footer */
.dark-style .dataTables_wrapper .row:last-child {
  border-color: #444564;
}

.dark-style .dataTables_wrapper .page-link {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b6bee3;
}

/* === ALINEACIÓN DE COLUMNAS DATATABLES === */
table.dataTable td.text-end,
table.dataTable th.text-end,
.dataTables_wrapper table.dataTable td.text-end,
.dataTables_wrapper table.dataTable th.text-end {
  text-align: right !important;
  padding-right: 12px !important;
}

table.dataTable td.text-end *,
.dataTables_wrapper table.dataTable td.text-end * {
  display: inline-block;
}

table.dataTable td.text-start,
table.dataTable th.text-start,
.dataTables_wrapper table.dataTable td.text-start,
.dataTables_wrapper table.dataTable th.text-start {
  text-align: left !important;
}

table.dataTable td.text-center,
table.dataTable th.text-center,
.dataTables_wrapper table.dataTable td.text-center,
.dataTables_wrapper table.dataTable th.text-center {
  text-align: center !important;
}

/* === HEADERS DE TABLA PREMIUM (ABM) === */
.thead-primary {
  background: #6366f1;
  color: white;
}

.thead-primary th {
  color: white !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
  border-top: 2px solid white !important;
  border-bottom: 2px solid white !important;
  border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-right: none !important;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.thead-primary th:first-child {
  border-left: none !important;
}

/* === DataTables scrollX: ocultar el tr fantasma de medición (height:0) === */
.thead-primary tr[style*='height: 0'],
.thead-primary tr[style*='height:0'] {
  display: none !important;
}

/* === DataTables scrollHead/fixedColumns: forzar padding en el thead visible === */
.dataTables_scrollHead .thead-primary th,
.DTFC_LeftHeadWrapper .thead-primary th,
.DTFC_RightHeadWrapper .thead-primary th {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  height: auto !important;
  border-top-width: 2px !important;
  border-bottom-width: 2px !important;
}

/* ===== Reporte Objetivos Q headers ===== */
.th-vendedor {
  background: #2d3748 !important;
  color: #fff !important;
}

.th-q1 {
  background: #22863a !important;
  color: #fff !important;
}

.th-q2 {
  background: #0969da !important;
  color: #fff !important;
}

.th-q3 {
  background: #6f42c1 !important;
  color: #fff !important;
}

.th-q4 {
  background: #fd7e14 !important;
  color: #000 !important;
}

.th-q5 {
  background: #198754 !important;
  color: #fff !important;
}

.th-total {
  background: #2d3748 !important;
  color: #fff !important;
}

.th-sub {
  background: #343a40 !important;
  color: #fff !important;
}

/* Forzar colores en ambas filas de encabezado del reporte Q */
#tablaObjetivosQ thead tr:first-child th.th-q1,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(2),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(3),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(4) {
  background: #22863a !important;
  color: #fff !important;
}

#tablaObjetivosQ thead tr:first-child th.th-q2,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(5),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(6),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(7) {
  background: #0969da !important;
  color: #fff !important;
}

#tablaObjetivosQ thead tr:first-child th.th-q3,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(8),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(9),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(10) {
  background: #6f42c1 !important;
  color: #fff !important;
}

#tablaObjetivosQ thead tr:first-child th.th-q4,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(11),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(12),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(13),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(14),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(15),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(16) {
  background: #fd7e14 !important;
  color: #000 !important;
}

#tablaObjetivosQ thead tr:first-child th.th-q5,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(17),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(18),
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(19) {
  background: #198754 !important;
  color: #fff !important;
}

#tablaObjetivosQ thead tr:first-child th.th-total,
#tablaObjetivosQ thead tr:nth-child(2) th:nth-child(20) {
  background: #2d3748 !important;
  color: #fff !important;
}

/* Mantener colores también en el header clonado de DataTables (scrollX) */
#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-vendedor,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-vendedor,
#tablaObjetivosQ thead th.th-vendedor {
  background: #2d3748 !important;
  color: #fff !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-q1,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-q1,
#tablaObjetivosQ thead th.th-q1 {
  background: #22863a !important;
  color: #fff !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-q2,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-q2,
#tablaObjetivosQ thead th.th-q2 {
  background: #0969da !important;
  color: #fff !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-q3,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-q3,
#tablaObjetivosQ thead th.th-q3 {
  background: #6f42c1 !important;
  color: #fff !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-q4,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-q4,
#tablaObjetivosQ thead th.th-q4 {
  background: #fd7e14 !important;
  color: #000 !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-q5,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-q5,
#tablaObjetivosQ thead th.th-q5 {
  background: #198754 !important;
  color: #fff !important;
}

#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th.th-total,
#tablaObjetivosQ_wrapper table.dataTable thead th.th-total,
#tablaObjetivosQ thead th.th-total {
  background: #2d3748 !important;
  color: #fff !important;
}

/* Centrar siempre los textos de headers (evita alineación numérica a la derecha de DataTables) */
#tablaObjetivosQ_wrapper .dataTables_scrollHead thead th,
#tablaObjetivosQ thead th {
  text-align: center !important;
}

.table-compact th {
  white-space: nowrap;
  padding: 0.6rem 0.5rem;
  text-align: center;
}

.table-compact td {
  white-space: nowrap;
}

/* === ESTILOS ESPECÍFICOS PARA TABLA DE PRODUCTOS === */
#tablaProductos th:nth-child(1) {
  width: 80px;
  min-width: 80px;
}

/* Código */
#tablaProductos th:nth-child(2) {
  width: 100px;
  min-width: 100px;
}

/* C.EAN */
#tablaProductos th:nth-child(3) {
  width: 120px;
  min-width: 120px;
}

/* Acciones */
#tablaProductos th:nth-child(6) {
  min-width: 200px;
  max-width: 300px;
}

/* Nombre */
#tablaProductos th:nth-child(7) {
  width: 80px;
  min-width: 80px;
}

/* Imagen */

#tablaProductos td:nth-child(6) {
  white-space: normal;
  word-wrap: break-word;
}

/* === DARK MODE SUPPORT FOR THEAD === */
.dark-style .thead-primary {
  background: #6366f1 !important;
  color: white !important;
}

.dark-style .thead-primary th {
  background: transparent !important;
  color: white !important;
}

/* Ensure DataTables doesn't override our styles */
table.dataTable thead .thead-primary th,
.dataTables_wrapper .thead-primary th,
.table thead.thead-primary th {
  background: #6366f1 !important;
  color: white !important;
  font-weight: 600 !important;
  text-align: left !important;
  /* Default left alignment for headers */
  vertical-align: middle !important;
  padding: 0.75rem 0.5rem !important;
  border-top: 2px solid white !important;
  border-bottom: 2px solid white !important;
  border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-right: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

table.dataTable thead .thead-primary th:first-child,
.dataTables_wrapper .thead-primary th:first-child,
.table thead.thead-primary th:first-child {
  border-left: none !important;
}

/* Permitir alineación explícita en headers */
.table thead th.text-start,
table.dataTable thead th.text-start,
.table thead.thead-primary th.text-start,
table.dataTable thead .thead-primary th.text-start {
  text-align: left !important;
}

.table thead th.text-end,
table.dataTable thead th.text-end,
.table thead.thead-primary th.text-end,
table.dataTable thead .thead-primary th.text-end {
  text-align: right !important;
}

/* Permitir alineación explícita en celdas (td) */
.table tbody td.text-start,
table.dataTable tbody td.text-start,
.dataTables_wrapper td.text-start {
  text-align: left !important;
}

.table tbody td.text-center,
table.dataTable tbody td.text-center,
.dataTables_wrapper td.text-center {
  text-align: center !important;
}

.table tbody td.text-end,
table.dataTable tbody td.text-end,
.dataTables_wrapper td.text-end {
  text-align: right !important;
}

/* Dark Mode Table Fixes */
.dark-style .table {
  --bs-table-color: #b6bee3;
  --bs-table-bg: #2f3349;
  --bs-table-border-color: #444564;
  --bs-table-striped-bg: #2f3349;
  --bs-table-striped-color: #b6bee3;
  --bs-table-active-bg: #32364c;
  --bs-table-hover-bg: #32364c;
  color: #b6bee3;
}

.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
  color: var(--bs-table-striped-color);
}

.dark-style .card {
  background-color: #2f3349;
  color: #b6bee3;
}

.dark-style .form-section {
  background-color: #2b2c40;
  border-color: #444564;
}

.dark-style .section-title {
  color: #cfd3ec;
  border-bottom-color: #444564;
}

/* Fix DataTable pagination in dark mode */
.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #b6bee3 !important;
}

.dark-style .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #696cff !important;
  color: #fff !important;
  border-color: #696cff !important;
}

/* Fix Search Input text color in dark mode */
.dark-style .dataTables_filter input {
  color: #afb1c5;
  border-color: #444564;
  background-color: #2f3349;
}

/* === TABLA FAMILIA - ESTILOS ESPECÍFICOS === */
#tablaFamilia thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaFamilia tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre alineado a la izquierda */
#tablaFamilia tbody td:nth-child(2) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaFamilia tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaFamilia tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* === TABLA SUBFAMILIA - ESTILOS ESPECÍFICOS === */
#tablaSubFamily thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaSubFamily tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre alineado a la izquierda */
#tablaSubFamily tbody td:nth-child(2) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaSubFamily tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaSubFamily tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* === TABLA MOTIVO DE CANCELACIÓN - ESTILOS ESPECÍFICOS === */
#tablaMotivoCancelacion thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaMotivoCancelacion tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre y Descripción alineados a la izquierda */
#tablaMotivoCancelacion tbody td:nth-child(2),
#tablaMotivoCancelacion tbody td:nth-child(3) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaMotivoCancelacion tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaMotivoCancelacion tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* === TABLA TIPO DE PEDIDO - ESTILOS ESPECÍFICOS === */
#tablaTipoPedido thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaTipoPedido tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre y Descripción alineados a la izquierda */
#tablaTipoPedido tbody td:nth-child(2),
#tablaTipoPedido tbody td:nth-child(3) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaTipoPedido tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaTipoPedido tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* ========================================
   ESTILOS PARA DETALLE DE PEDIDOS
   ======================================== */

/* === UTILIDADES GENERALES === */
.min-height-100 {
  min-height: 100px;
}

/* === CABECERA DEL COMPROBANTE === */
.order-header-company {
  background: linear-gradient(135deg, #f8f9fa 0%, #e3e6ea 100%);
  border-bottom: 3px solid #0d6efd;
  padding: 1.5rem;
  border-radius: 0.375rem 0.375rem 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark-style .order-header-company {
  background: linear-gradient(135deg, #2b2c40 0%, #1e1e2d 100%);
  border-bottom: 2px solid #3b3b4f;
}

.dark-style .order-header-company h4,
.dark-style .order-header-company .text-primary {
  color: #5a8dee !important;
}

.dark-style .order-header-company p,
.dark-style .order-header-company small {
  color: #a3a4a6 !important;
}

.order-type-badge {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #0d6efd;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.15);
}

.order-type-badge h6 {
  color: #0d6efd !important;
}

.order-type-badge p {
  color: #495057;
  font-weight: 500;
}

.dark-style .order-type-badge {
  background: #1e1e2d !important;
  border-color: #3b3b4f !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-style .order-type-badge h6,
.dark-style .order-type-badge h5,
.dark-style .order-type-badge h4,
.dark-style .order-type-badge p,
.dark-style .order-type-badge span {
  color: #e7e7e9 !important;
}

.dark-style .order-type-badge .fw-bold {
  color: #5a8dee !important;
}

/* Asegurar que todos los elementos dentro tengan el color correcto */
.dark-style .order-type-badge * {
  color: #e7e7e9 !important;
}

.dark-style .order-type-badge .text-muted {
  color: #a3a4a6 !important;
}

/* === CARDS PREMIUM EN TEMA OSCURO === */
.dark-style .card {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
}

/* Cards en tema claro */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark-style .card-body {
  background-color: #1e1e2d;
  color: #e7e7e9;
}

.dark-style .card-body strong {
  color: #a3a4a6;
}

.dark-style .card-body .table {
  color: #e7e7e9;
}

.dark-style .card-body .table-light {
  background-color: #2b2c40 !important;
}

.dark-style .card-body .table-light th {
  color: #e7e7e9;
  border-color: #3b3b4f;
}

/* === SECCIONES DE DATOS === */
.order-data-section {
  padding: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 0.375rem;
}

.order-data-section .card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}

.order-data-section .card:hover {
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
  transform: translateY(-2px);
}

.dark-style .order-data-section {
  background: #1e1e2d;
}

.order-section-title {
  color: #0d6efd;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 3px solid #0d6efd;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(13, 110, 253, 0.1);
}

.dark-style .order-section-title {
  color: #5a8dee;
  border-bottom-color: #5a8dee;
}

.order-data-label {
  color: #6c757d;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.25rem;
}

.dark-style .order-data-label {
  color: #a3a4a6;
}

.order-data-value {
  color: #212529;
  font-size: 0.875rem;
  font-weight: 500;
}

.dark-style .order-data-value {
  color: #e7e7e9;
}

/* === TABLA DE PRODUCTOS === */
.order-items-table {
  margin-bottom: 0;
}

.order-items-table thead {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  color: white;
}

.dark-style .order-items-table thead {
  background: linear-gradient(135deg, #5a8dee 0%, #4c7fe0 100%);
}

.order-items-table thead th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.75rem;
  border: none;
  vertical-align: middle;
  color: white !important;
}

.dark-style .order-items-table thead th {
  color: white !important;
}

/* Estilos específicos para thead-primary dentro de order-items-table */
.order-items-table thead.thead-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.dark-style .order-items-table thead.thead-primary {
  background: linear-gradient(135deg, #5a8dee 0%, #4c7fe0 100%);
}

.order-items-table thead.thead-primary th {
  color: white !important;
  border: none;
  background: transparent;
}

.order-items-table tbody td {
  padding: 0.75rem;
  vertical-align: middle;
  border-color: #dee2e6;
}

.dark-style .order-items-table tbody td {
  border-color: #3b3b4f;
  color: #e7e7e9;
}

.order-items-table tbody tr:hover {
  background-color: #f8f9fa;
}

.dark-style .order-items-table tbody tr:hover {
  background-color: #2b2c40;
}

/* Card-body sin padding para tabla completa */
.order-items-table-wrapper {
  padding: 0;
}

/* Asegurar que la tabla ocupe todo el ancho */
.order-items-table {
  border-radius: 0;
}

.order-items-table thead th:first-child {
  border-top-left-radius: 0;
}

.order-items-table thead th:last-child {
  border-top-right-radius: 0;
}

/* === BÚSQUEDA DE PRODUCTOS === */
.order-search-wrapper {
  max-width: 350px;
}

/* Búsqueda dentro del card-header-gradient */
.card-header-gradient .order-search-wrapper .input-group-text {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.card-header-gradient .order-search-wrapper .input-group-text i {
  color: white;
}

.card-header-gradient .order-search-wrapper .order-search-input {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.card-header-gradient .order-search-wrapper .order-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.card-header-gradient .order-search-wrapper .order-search-input:focus {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

.card-header-gradient .order-search-wrapper .order-search-clear {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.card-header-gradient .order-search-wrapper .order-search-clear:hover {
  background-color: rgba(220, 53, 69, 0.9);
  border-color: #dc3545;
  color: white;
}

.order-search-input {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
  transition: all 0.3s ease;
}

.order-search-input:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  z-index: 10;
}

.dark-style .order-search-input {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
  color: #e7e7e9;
}

.dark-style .order-search-input:focus {
  background-color: #2b2c40;
  border-color: #5a8dee;
  box-shadow: 0 0 0 0.25rem rgba(90, 141, 238, 0.25);
}

.order-search-clear {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: none;
  transition: all 0.2s ease;
}

.order-search-clear:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.dark-style .order-search-clear {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
  color: #e7e7e9;
}

.dark-style .order-search-clear:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.dark-style .order-search-wrapper .input-group-text {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
  color: #e7e7e9;
}

.dark-style .order-search-wrapper .input-group-text i {
  color: #a3a4a6;
}

/* Resaltado de búsqueda */
mark.search-highlight,
mark.bg-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #fde68a 100%);
  color: #92400e;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}

.dark-style mark.search-highlight,
.dark-style mark.bg-warning {
  background-color: #856404;
  color: #fff3cd;
}

/* Animación para el campo de búsqueda */
.input-group:focus-within {
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

/* === PAGINACIÓN === */
.order-pagination-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #dee2e6;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.dark-style .order-pagination-info {
  border-top-color: #3b3b4f;
  background-color: #1e1e2d;
}

.order-pagination-text {
  color: #6c757d;
  font-size: 0.875rem;
}

.dark-style .order-pagination-text {
  color: #a3a4a6;
}

.dark-style .order-pagination-text span {
  color: #e7e7e9;
}

/* Estilos para pagination dentro de card */
.card-body .pagination {
  margin-bottom: 0;
}

.dark-style .card-body .pagination .page-link {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
  color: #e7e7e9;
}

.dark-style .card-body .pagination .page-item.active .page-link {
  background-color: #5a8dee;
  border-color: #5a8dee;
}

.dark-style .card-body .pagination .page-link:hover {
  background-color: #2b2c40;
  color: #5a8dee;
}

/* === BOTONES DE RENTABILIDAD === */
.btn-rentabilidad {
  min-width: 38px;
  height: 38px;
  padding: 0.5rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-rentabilidad:hover {
  transform: scale(1.1);
}

.btn-rentabilidad i {
  font-size: 1.2rem;
}

/* Colores específicos para rentabilidad */
.btn-outline-success:hover .bx,
.btn-outline-success:hover i {
  color: white !important;
}

.btn-outline-warning:hover .bx,
.btn-outline-warning:hover i {
  color: white !important;
}

.btn-outline-danger:hover .bx,
.btn-outline-danger:hover i {
  color: white !important;
}

/* === TOTALES === */
.order-totals-section {
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dark-style .order-totals-section {
  background: #1e1e2d;
  border-color: #3b3b4f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.order-totals-section .table {
  margin-bottom: 0;
}

.order-totals-section .table td {
  border: none;
  padding: 0.5rem 0;
}

.dark-style .order-totals-section .table td {
  color: #e7e7e9;
}

.order-total-final {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0d6efd;
  border-top: 3px solid #0d6efd !important;
  padding-top: 1rem !important;
  text-shadow: 0 1px 2px rgba(13, 110, 253, 0.1);
}

.dark-style .order-total-final {
  color: #5a8dee;
  border-top-color: #5a8dee !important;
}

.dark-style .order-totals-section span {
  color: #e7e7e9;
}

.dark-style .order-totals-section .text-primary {
  color: #5a8dee !important;
}

.dark-style .order-totals-section hr {
  border-color: #3b3b4f;
}

.dark-style .order-totals-section .card-body {
  background-color: #1e1e2d;
}

/* === SECCIÓN DE RENTABILIDAD === */
.order-profitability-section {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 2px solid #10b981;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.dark-style .order-profitability-section {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  border-color: #10b981;
}

.order-profitability-section h6 {
  color: #065f46;
  font-weight: 700;
}

.dark-style .order-profitability-section h6 {
  color: #6ee7b7;
}

.dark-style .order-profitability-section .card-body {
  background-color: #064e3b;
}

.dark-style .order-profitability-section span,
.dark-style .order-profitability-section .text-success {
  color: #6ee7b7 !important;
}

.dark-style .order-profitability-section .table td {
  color: #d1fae5;
}

/* === INFORMACIÓN DEL COMPROBANTE === */
.order-invoice-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid #3b82f6;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.dark-style .order-invoice-info {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-color: #3b82f6;
}

.order-invoice-info h6 {
  color: #1e40af;
  font-weight: 700;
}

.dark-style .order-invoice-info h6 {
  color: #93c5fd;
}

.dark-style .order-invoice-info .card-body {
  background-color: #1e3a8a;
}

.dark-style .order-invoice-info span,
.dark-style .order-invoice-info strong {
  color: #bfdbfe !important;
}

.dark-style .order-invoice-info p,
.dark-style .order-invoice-info small {
  color: #bfdbfe;
}

/* === PANELES DE DATOS ADICIONALES === */
.order-additional-panel {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark-style .order-additional-panel {
  background: #1e1e2d;
  border-color: #3b3b4f;
}

.order-additional-panel h6 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 0.75rem;
}

.dark-style .order-additional-panel h6 {
  color: #5a8dee;
}

.order-additional-panel .table {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.order-additional-panel .table thead {
  background-color: #f8f9fa;
}

.dark-style .order-additional-panel .table thead {
  background-color: #2b2c40;
}

.order-additional-panel .table thead th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.5rem;
  border-bottom: 2px solid #dee2e6;
}

.dark-style .order-additional-panel .table thead th {
  border-bottom-color: #3b3b4f;
  color: #e7e7e9;
}

.dark-style .order-additional-panel .table tbody td {
  color: #e7e7e9;
  border-color: #3b3b4f;
}

.dark-style .order-additional-panel .small,
.dark-style .order-additional-panel span,
.dark-style .order-additional-panel strong {
  color: #e7e7e9 !important;
}

/* === OBSERVACIONES === */
.order-observations {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.dark-style .order-observations {
  background: #78350f;
  border-left-color: #f59e0b;
}

.order-observations h6 {
  color: #92400e;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dark-style .order-observations h6 {
  color: #fde68a;
}

.order-observations p {
  color: #78350f;
  margin-bottom: 0;
}

.dark-style .order-observations p {
  color: #fde68a;
}

/* === MODAL DE RENTABILIDAD === */
#modalRentabilidad .modal-header {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  border: none;
}

.dark-style #modalRentabilidad .modal-header {
  background: linear-gradient(135deg, #5a8dee 0%, #4c7fe0 100%);
}

#modalRentabilidad .modal-body {
  padding: 0;
}

#modalRentabilidad .table {
  margin-bottom: 0;
}

#modalRentabilidad .table td {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
}

.dark-style #modalRentabilidad .modal-content {
  background-color: #1e1e2d;
  border-color: #3b3b4f;
}

.dark-style #modalRentabilidad .table td {
  border-bottom-color: #3b3b4f;
  color: #e7e7e9;
}

/* === NAVEGACIÓN Y BREADCRUMB === */
.order-breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
}

.order-breadcrumb .breadcrumb-item a {
  color: #0d6efd;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.order-breadcrumb .breadcrumb-item a:hover {
  color: #0a58ca;
  text-decoration: underline;
  transform: translateX(-2px);
}

.dark-style .order-breadcrumb .breadcrumb-item a {
  color: #5a8dee;
}

.dark-style .order-breadcrumb .breadcrumb-item a:hover {
  color: #4c7fe0;
}

.dark-style .order-breadcrumb .breadcrumb-item.active {
  color: #a3a4a6;
}

.dark-style .breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d;
}

/* === BOTONES DE ACCIÓN === */
.order-actions .btn {
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.order-actions .btn-outline-success:hover {
  box-shadow: 0 6px 12px rgba(25, 135, 84, 0.3);
}

.order-actions .btn-outline-secondary:hover {
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}

/* === BADGES Y ESTADOS === */
.badge {
  font-weight: 600;
  padding: 0.35em 0.65em;
  font-size: 0.75rem;
}

/* Badges específicos para Vehículos */
.badge-vehicle-code {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
  color: white;
  padding: 0.5em 0.8em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(13, 202, 240, 0.3);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-vehicle-code i {
  font-size: 1rem;
}

.badge-vehicle-plate {
  background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
  color: white;
  padding: 0.5em 0.8em;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.badge-vehicle-plate i {
  font-size: 1rem;
}

/* Hover effects */
.badge-vehicle-code:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(13, 202, 240, 0.4);
}

.badge-vehicle-plate:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(111, 66, 193, 0.4);
}

/* Dark mode */
.dark-style .badge-vehicle-code {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
  box-shadow: 0 2px 4px rgba(13, 202, 240, 0.5);
}

.dark-style .badge-vehicle-plate {
  background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.5);
}

.dark-style .badge-primary {
  background-color: #5a8dee !important;
}

.dark-style .badge-success {
  background-color: #28c76f !important;
}

.dark-style .badge-danger {
  background-color: #ea5455 !important;
}

.dark-style .badge-warning {
  background-color: #ff9f43 !important;
  color: #212529 !important;
}

.dark-style .badge-info {
  background-color: #00cfe8 !important;
  color: #0d1b2a !important;
  font-weight: 600 !important;
}

.dark-style .badge-secondary {
  background-color: #82868b !important;
}

/* Mejorar legibilidad de texto en tablas en modo oscuro */
.dark-style table.dataTable tbody td {
  color: #b4b7bd !important;
}

.dark-style table.dataTable tbody td.dt-type-text {
  color: #c5c9cf !important;
  font-weight: 500;
}

/* === ESTILOS PARA IMPRESIÓN === */
@media print {
  .d-print-none {
    display: none !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .bg-light {
    background-color: #f8f9fa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bg-primary {
    background-color: #0d6efd !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .table-primary th {
    background-color: #cfe2ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .order-items-table thead {
    background: #0d6efd !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: white !important;
  }

  .container-xxl {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .card-body {
    padding: 0 !important;
  }

  .order-search-wrapper,
  .order-pagination-info {
    display: none !important;
  }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  .order-header-company {
    padding: 1rem;
  }

  .order-data-section {
    padding: 1rem;
  }

  .order-section-title {
    font-size: 0.8rem;
  }

  .table-responsive {
    font-size: 0.8rem;
  }

  .row.g-2 > div {
    margin-bottom: 0.5rem;
  }

  .order-search-wrapper {
    max-width: 100% !important;
    margin-top: 0.75rem;
  }

  .card-header-gradient {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .card-header-gradient h5 {
    margin-bottom: 0.5rem;
  }

  .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }

  h6.fw-bold.text-primary {
    text-align: center;
  }

  .order-pagination-info {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem !important;
  }

  .btn-rentabilidad {
    min-width: 32px;
    height: 32px;
  }

  .order-totals-section {
    padding: 0.75rem;
  }

  .order-total-final {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .order-items-table thead th {
    font-size: 0.65rem;
    padding: 0.5rem 0.25rem;
  }

  .order-items-table tbody td {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }

  .btn-rentabilidad {
    min-width: 28px;
    height: 28px;
    padding: 0.25rem;
  }

  .btn-rentabilidad i {
    font-size: 1rem;
  }

  .order-search-wrapper {
    max-width: 100% !important;
  }

  .card-header-gradient .order-search-wrapper {
    width: 100%;
  }
}

/* === TABLA ESTADO DE PEDIDO - ESTILOS ESPECÍFICOS === */
#tablaEstadoPedido thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaEstadoPedido tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre alineado a la izquierda */
#tablaEstadoPedido tbody td:nth-child(2) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaEstadoPedido tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaEstadoPedido tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* === TABLA PRIORIDAD DE PEDIDO - ESTILOS ESPECÍFICOS === */
#tablaPrioridadPedido thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaPrioridadPedido tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre alineado a la izquierda */
#tablaPrioridadPedido tbody td:nth-child(2) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaPrioridadPedido tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaPrioridadPedido tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* Color preview en tabla de prioridades */
.priority-color {
  transition: transform 0.2s ease;
}

.priority-color:hover {
  transform: scale(1.1);
}

/* === TABLA MOTIVOS DE NO VENTA - ESTILOS ESPECÍFICOS === */
#tablaMotivos thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaMotivos tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Excepción: Nombre y Descripción alineados a la izquierda */
#tablaMotivos tbody td:nth-child(2),
#tablaMotivos tbody td:nth-child(3) {
  text-align: left !important;
}

/* Filas desactivadas */
#tablaMotivos tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaMotivos tbody tr.row-disabled:hover {
  opacity: 0.65;
}

/* === GLOBAL KPI CARDS (PREMIUM) === */
.kpi-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.kpi-icon {
  width: clamp(40px, 6vw, 56px);
  height: clamp(40px, 6vw, 56px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  margin: 0 auto 0.5rem auto;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.kpi-icon i {
  line-height: 1;
}

.kpi-label {
  font-size: clamp(0.7rem, 0.6vw + 0.55rem, 0.85rem);
  font-weight: 600;
  color: #8e9bab;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.5rem;
  display: block;
  text-wrap: balance;
  max-width: 100%;
}

.kpi-value {
  font-size: clamp(1.15rem, 2.4vw + 0.4rem, 2rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.kpi-content {
  min-width: 0;
}

@media (max-width: 576px) {
  .kpi-card {
    padding: 1rem;
  }

  .kpi-label {
    letter-spacing: 0.6px;
  }
}

/* Variaciones de colores */
/* Primary (Purple) */
.kpi-primary::before {
  background: linear-gradient(90deg, #696cff 0%, #5f61e6 100%);
}

.kpi-primary .kpi-icon {
  background: rgba(105, 108, 255, 0.12);
  color: #696cff;
}

.kpi-primary .kpi-value {
  color: #696cff;
}

/* Success (Green) */
.kpi-success::before {
  background: linear-gradient(90deg, #71dd37 0%, #5cb82f 100%);
}

.kpi-success .kpi-icon {
  background: rgba(113, 221, 55, 0.12);
  color: #71dd37;
}

.kpi-success .kpi-value {
  color: #71dd37;
}

/* Warning (Orange) */
.kpi-warning::before {
  background: linear-gradient(90deg, #ffab00 0%, #ff9500 100%);
}

.kpi-warning .kpi-icon {
  background: rgba(255, 171, 0, 0.12);
  color: #ffab00;
}

.kpi-warning .kpi-value {
  color: #ffab00;
}

/* Info (Cyan) */
.kpi-info::before {
  background: linear-gradient(90deg, #03c3ec 0%, #0198b8 100%);
}

.kpi-info .kpi-icon {
  background: rgba(3, 195, 236, 0.12);
  color: #03c3ec;
}

.kpi-info .kpi-value {
  color: #03c3ec;
}

/* Danger (Red) */
.kpi-danger::before {
  background: linear-gradient(90deg, #ff3e1d 0%, #d63031 100%);
}

.kpi-danger .kpi-icon {
  background: rgba(255, 62, 29, 0.12);
  color: #ff3e1d;
}

.kpi-danger .kpi-value {
  color: #ff3e1d;
}

/* Secondary (Grey) */
.kpi-secondary::before {
  background: linear-gradient(90deg, #8592a3 0%, #6c757d 100%);
}

.kpi-secondary .kpi-icon {
  background: rgba(133, 146, 163, 0.12);
  color: #8592a3;
}

.kpi-secondary .kpi-value {
  color: #8592a3;
}

.dark-style .kpi-secondary .kpi-icon {
  background: rgba(133, 146, 163, 0.18);
  color: #a0aab4;
}

.dark-style .kpi-secondary .kpi-value {
  color: #a0aab4;
}

/* Dark Mode Support for KPIs */
.dark-style .kpi-card {
  background: #2f3349;
  border-color: #444564;
}

.dark-style .kpi-label {
  color: #cfd3ec;
  opacity: 0.7;
}

/* ====== TABLA PRODUCTOS ====== */
#tablaProductos thead th {
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  color: #fff;
  padding: 1rem 0.75rem;
}

#tablaProductos tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.4rem;
}

/* Excepciones para columnas de texto */
#tablaProductos tbody td:nth-child(6),
#tablaProductos tbody td:nth-child(8) {
  text-align: left !important;
}

#tablaProductos tbody tr {
  transition: all 0.2s ease;
}

#tablaProductos tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.04) !important;
}

#tablaProductos tbody tr.row-disabled {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

#tablaProductos tbody tr.row-disabled:hover {
  opacity: 0.65;
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Ajuste de anchos de columnas para evitar scroll */
#tablaProductos tbody td:nth-child(1) {
  width: 85px;
}

/* Codigo */

/* ============================= */
/* DASHBOARD SELLER TABLES       */
/* ============================= */

/* Estados de Pedidos */
#tablaEstadosPedidos thead th {
  text-align: center;
  vertical-align: middle;
}

#tablaEstadosPedidos tbody td {
  vertical-align: middle;
}

#tablaEstadosPedidos tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.08);
  transition: background-color 0.2s ease;
}

/* Ventas por Vendedor */
#tablaVentasVendedor thead th {
  text-align: center;
  vertical-align: middle;
}

#tablaVentasVendedor tbody td {
  vertical-align: middle;
}

#tablaVentasVendedor tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.08);
  transition: background-color 0.2s ease;
}

/* Ventas por Canal */
#tablaVentasCanal thead th {
  text-align: center;
  vertical-align: middle;
}

#tablaVentasCanal tbody td {
  vertical-align: middle;
}

#tablaVentasCanal tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.08);
  transition: background-color 0.2s ease;
}

/* Efectividad por Vendedor */
#tablaEfectividadVendedor thead th {
  text-align: center;
  vertical-align: middle;
}

#tablaEfectividadVendedor tbody td {
  vertical-align: middle;
}

#tablaEfectividadVendedor tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.08);
  transition: background-color 0.2s ease;
}

/* Dark Mode Support for Dashboard Tables */
.dark-style #tablaEstadosPedidos tbody tr:hover,
.dark-style #tablaVentasVendedor tbody tr:hover,
.dark-style #tablaVentasCanal tbody tr:hover,
.dark-style #tablaEfectividadVendedor tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.15);
}

#tablaProductos tbody td:nth-child(2) {
  width: 100px;
}

/* EAN */
#tablaProductos tbody td:nth-child(3) {
  width: 110px;
}

/* Acciones */
#tablaProductos tbody td:nth-child(6) {
  width: 130px;
}

/* Nombre */
#tablaProductos tbody td:nth-child(7) {
  width: 75px;
}

/* Imagen */
#tablaProductos tbody td:nth-child(8) {
  width: 110px;
}

/* Descripcion */
#tablaProductos tbody td:nth-child(9) {
  width: 50px;
}

/* Costo */
#tablaProductos tbody td:nth-child(10) {
  width: 75px;
}

/* Px Venta */
#tablaProductos tbody td:nth-child(11) {
  width: 75px;
}

/* Px Neto */
#tablaProductos tbody td:nth-child(12) {
  width: 95px;
}

/* Estado */
#tablaProductos tbody td:nth-child(13) {
  width: 85px;
}

/* Familia */
#tablaProductos tbody td:nth-child(14) {
  width: 85px;
}

/* Sub Familia */
#tablaProductos tbody td:nth-child(15) {
  width: 85px;
}

/* Categoria */
#tablaProductos tbody td:nth-child(16) {
  width: 80px;
}

/* Stock Físico */

/* Badges compactos en tabla de productos */
#tablaProductos .badge {
  padding: 0.06rem 0.25rem !important;
  font-size: 0.68rem !important;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Badge de COSTO aún más compacto */
#tablaProductos tbody td:nth-child(9) .badge {
  padding: 0.04rem 0.2rem !important;
  font-size: 0.65rem !important;
  max-width: 48px;
}

/* Centrado de celdas con precios */
#tablaProductos tbody td:nth-child(9),
#tablaProductos tbody td:nth-child(10),
#tablaProductos tbody td:nth-child(11) {
  text-align: center !important;
  padding: 0.5rem 0.3rem !important;
}

/* === GLOBAL FORCED ALIGNMENT (User Request) === */
/* Force center alignment for ALL tables, headers and body */
.table thead th,
.table tbody td,
.table tbody th,
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tbody th,
/* Specific overrides for current ABMs to ensure specificity */
#tablaSites tbody td,
#tablaSites thead th,
#tablaStorageType tbody td,
#tablaStorageType thead th,
#tablaAisle tbody td,
#tablaAisle thead th,
#tablaStoragePosition tbody td,
#tablaStoragePosition thead th,
#tablaCategory tbody td,
#tablaCategory thead th,
#tablaTargetPreview tbody td,
#tablaTargetPreview thead th,
#tablaTag tbody td,
#tablaTag thead th,
#tablaListaPrecio tbody td,
#tablaListaPrecio thead th,
#tablaOferta tbody td,
#tablaOferta thead th,
#tablaCombo tbody td,
#tablaCombo thead th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Permitir excepciones explícitas */
.text-start,
.text-left,
.dt-body-left,
.table tbody td.text-start,
table.dataTable tbody td.dt-body-left,
/* Specific left align overrides */
#tablaSites tbody td.text-start,
#tablaStorageType tbody td.text-start,
#tablaAisle tbody td.text-start,
#tablaStoragePosition tbody td.text-start,
#tablaCategory tbody td.text-start,
#tablaTargetPreview tbody td.text-start,
#tablaTag tbody td.text-start,
#tablaListaPrecio tbody td.text-start,
#tablaOferta tbody td.text-start,
#tablaCombo tbody td.text-start {
  text-align: left !important;
}

.text-end,
.text-right,
.dt-body-right {
  text-align: right !important;
}

/* === TABLA PEDIDOS (ABM RUTAS) - ALINEACIÓN ESPECÍFICA === */
/* Permitir alineación explícita por columna en #tablaPedidos */
#tablaPedidos tbody td.text-start,
#tablaPedidos thead th.text-start,
#tablaPedidos_wrapper .dataTables_scrollBody table tbody td.text-start,
#tablaPedidos_wrapper .dataTables_scrollHead table thead th.text-start,
table.dataTable#tablaPedidos tbody td.text-start,
table.dataTable#tablaPedidos thead th.text-start {
  text-align: left !important;
}

#tablaPedidos tbody td.text-end,
#tablaPedidos thead th.text-end,
#tablaPedidos_wrapper .dataTables_scrollBody table tbody td.text-end,
#tablaPedidos_wrapper .dataTables_scrollHead table thead th.text-end,
table.dataTable#tablaPedidos tbody td.text-end,
table.dataTable#tablaPedidos thead th.text-end {
  text-align: right !important;
}

#tablaPedidos tbody td.text-start,
#tablaPedidos thead th.text-start,
#tablaPedidos_wrapper .dataTables_scrollBody table tbody td.text-center,
#tablaPedidos_wrapper .dataTables_scrollHead table thead th.text-center,
table.dataTable#tablaPedidos tbody td.text-center,
table.dataTable#tablaPedidos thead th.text-center {
  text-align: start !important;
}

/* === BADGES DE ZONA (ABM RUTAS) === */
.badge-zona {
  display: inline-block;
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.3px;
  border-radius: 0.375rem;
}

.badge-zona:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Tema oscuro - mejorar contraste de badges */
.dark-style .badge-zona {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.dark-style .badge-zona:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ===== ESTILOS CLAROS EXPLÍCITOS PARA INPUTS ===== */
/* Asegurar que los inputs sean SIEMPRE claros en tema light por defecto */
.form-control,
.form-select,
textarea.form-control {
  background-color: #ffffff !important;
  color: #495057 !important;
  border-color: #d9dee3 !important;
}

.form-control::placeholder {
  color: #adb5bd !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background-color: #ffffff !important;
  border-color: #696cff !important;
  color: #495057 !important;
}

/* Dark mode overrides */
.dark-style .form-control,
.dark-style .form-select,
.dark-style textarea.form-control {
  background-color: #2f3349 !important;
  color: #b6bee3 !important;
  border-color: #444564 !important;
}

.dark-style .form-control::placeholder {
  color: #7d8590 !important;
}

.dark-style .form-control:focus,
.dark-style .form-select:focus,
.dark-style textarea.form-control:focus {
  background-color: #2f3349 !important;
  border-color: #696cff !important;
  color: #b6bee3 !important;
}

/* ===== TARJETAS DE PRODUCTOS ===== */
#contenedorTarjetasProductos .card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#contenedorTarjetasProductos .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

#contenedorTarjetasProductos .card-body > .d-flex {
  text-align: left;
  justify-content: flex-start;
}

#contenedorTarjetasProductos .card-body img {
  margin: 0;
}

#contenedorTarjetasProductos .card-body h6 {
  text-align: left;
  font-weight: 600;
  color: #566a7f;
}

#contenedorTarjetasProductos .card-body .text-muted {
  text-align: left;
  display: block;
  font-size: 0.75rem;
}

#contenedorTarjetasProductos .row-cols-2 {
  text-align: left;
}

#contenedorTarjetasProductos .row-cols-2 > div {
  text-align: left;
  padding: 0.25rem;
}

#contenedorTarjetasProductos .card-footer {
  text-align: right;
  background-color: #f8f9fa;
  border-top: 1px solid #e7e7e8;
}

.dark-style #contenedorTarjetasProductos .card {
  background-color: #2f3349;
  border-color: #444564;
}

.dark-style #contenedorTarjetasProductos .card-body h6 {
  color: #cfd3ec;
}

.dark-style #contenedorTarjetasProductos .card-footer {
  background-color: #2b2c40;
  border-color: #444564;
}

/* ===== ESTILOS OPTIMIZADOS PARA PEDIDOS ===== */

/* Bloqueo de Formulario */
.bloqueado {
  position: relative;
  pointer-events: none;
  isolation: isolate;
}

.bloqueado > * {
  filter: blur(3px);
  user-select: none;
}

.bloqueado::after {
  content: 'Seleccioná cliente y dirección';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  background-color: rgba(0, 0, 0, 0.42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center calc(50% - 2rem);
  background-size: 2.5rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  font-weight: 500;
  z-index: 10;
}

/* Card Principal */
#formPedido .card {
  border: none;
  box-shadow: 0 2px 8px rgba(67, 89, 113, 0.15);
}

#formPedido .card-header {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
}

#formPedido .card-header h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

#formPedido .card-body {
  padding: 1.75rem;
  background: #f8f9fa;
}

/* Filas de Formulario */
#formPedido .row {
  margin-bottom: 1.25rem;
}

#formPedido .row:last-child {
  margin-bottom: 0;
}

/* Select2 Optimizado */
.select2-container--default .select2-selection--single {
  border: 1px solid #d9dee3;
  border-radius: 0.375rem;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  background: white;
  transition: all 0.2s ease;
}

/* Address select: flex only here to align badge + text */
.select2-address.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  line-height: normal;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #696cff;
  box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.1);
}

.select2-container--default .select2-search__field {
  padding: 0.375rem 0.75rem;
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem;
}

.select2-results__option {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e7e7e8;
}

.select2-results__option--highlighted {
  background: #696cff !important;
  color: white;
}

/* Modal Items Pedido */
#modalItemPedido .modal-header {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
}

#modalItemPedido .modal-header .modal-title {
  font-size: 1.1rem;
  font-weight: 600;
}

#modalItemPedido .modal-body {
  background: #f8f9fa;
  padding: 1.75rem;
}

#modalItemPedido .modal-footer {
  background: white;
  border-top: 1px solid #e7e7e8;
  padding: 1rem 1.5rem;
  gap: 0.75rem;
}

/* Tabla Items Pedido */
#tablaItemsPedidos {
  background: white;
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#tablaItemsPedidos thead {
  background: #f1f3f5;
  border-bottom: 2px solid #d9dee3;
}

#tablaItemsPedidos thead th {
  color: #566a7f;
  font-weight: 600;
  padding: 0.875rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#tablaItemsPedidos tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e7e7e8;
  text-align: center;
  vertical-align: middle;
}

#tablaItemsPedidos tbody tr:hover {
  background: #f8f9fa;
  transition: background 0.2s ease;
}

#tablaItemsPedidos tfoot {
  background: #f1f3f5;
  border-top: 2px solid #d9dee3;
}

#tablaItemsPedidos tfoot td {
  padding: 0.875rem 1rem;
  font-weight: 500;
  color: #566a7f;
}

/* Botones Pedido */
#btnGuardarPedido {
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(105, 108, 255, 0.3);
}

#btnGuardarPedido:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(105, 108, 255, 0.4);
}

#btnAgregarProducto {
  border-color: #696cff;
  color: #696cff;
  transition: all 0.2s ease;
}

#btnAgregarProducto:hover {
  background: #696cff;
  color: white;
}

#btnVerDeuda {
  transition: all 0.2s ease;
  font-weight: 600;
}

#btnVerDeuda:hover {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

/* Inputs Deshabilitados */
#totalNeto:disabled,
#totalBruto:disabled,
#estadoID:disabled,
#stockDisponible:disabled,
#multiploProducto:disabled,
#precioNetoProducto:disabled,
#precioBrutoProducto:disabled,
#siteNombreItem:readonly {
  background: #e9ecef;
  color: #6c757d;
  border-color: #d9dee3;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Campos de Entrada */
.form-control,
.form-select {
  border: 1px solid #d9dee3;
  border-radius: 0.375rem;
  min-height: 38px;
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #696cff;
  box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.1);
  outline: none;
}

.form-control::placeholder {
  color: #adb5bd;
  font-size: 0.9rem;
}

/* Resumen de Productos */
#resumenProductosPedido {
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border-radius: 0.375rem;
  border: 1px solid #e7e7e8;
  padding: 0.5rem;
}

#resumenProductosPedido .list-group-item {
  border: 1px solid #e7e7e8;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  background: white;
  transition: all 0.2s ease;
}

#resumenProductosPedido .list-group-item:hover {
  background: #f8f9fa;
  border-color: #696cff;
}

#resumenProductosPedido .list-group-item button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Modal Deuda Cliente */
#modalDeudaCliente .modal-header {
  background: linear-gradient(135deg, #28a745 0%, #24934f 100%);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
}

#modalDeudaCliente .modal-header .modal-title {
  font-size: 1.1rem;
  font-weight: 600;
}

#tablaDeuda {
  background: white;
  border-collapse: collapse;
}

#tablaDeuda thead {
  background: #e8f5e9;
}

#tablaDeuda thead th {
  color: #1b5e20;
  font-weight: 600;
  padding: 0.875rem 1rem;
  text-align: center;
  border-bottom: 2px solid #28a745;
}

#tablaDeuda tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e7e7e8;
  text-align: right;
}

#tablaDeuda tbody td:first-child,
#tablaDeuda tbody td:nth-child(2) {
  text-align: left;
}

#totalDeuda {
  color: #dc3545;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Detalle de Impuestos */
#detalleImpuestosProducto,
#detalleImpuestosCliente {
  background: white;
  border: 1px solid #e7e7e8;
  border-radius: 0.375rem;
  padding: 0.875rem 1rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #566a7f;
}

#detalleImpuestosProducto:empty::before,
#detalleImpuestosCliente:empty::before {
  content: 'Sin impuestos aplicables';
  color: #a1acb8;
  font-style: italic;
}

/* Dark Mode */
.dark-style #formPedido .card-body {
  background: #1e1e2e;
}

.dark-style .select2-container--default .select2-selection--single {
  background: #2b2d42;
  border-color: #3d3f54;
  color: #cfd3ec;
}

.dark-style .select2-container--default .select2-selection--single:focus,
.dark-style .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #696cff;
  box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.2);
}

.dark-style #tablaItemsPedidos {
  background: #2b2d42;
}

.dark-style #tablaItemsPedidos thead {
  background: #3d3f54;
}

.dark-style #tablaItemsPedidos thead th {
  color: #cfd3ec;
  border-bottom-color: #4a4d66;
}

.dark-style #tablaItemsPedidos tbody td {
  color: #cfd3ec;
  border-bottom-color: #4a4d66;
}

.dark-style #tablaItemsPedidos tbody tr:hover {
  background: #3d3f54;
}

.dark-style #tablaItemsPedidos tfoot {
  background: #3d3f54;
  border-top-color: #4a4d66;
}

.dark-style #tablaItemsPedidos tfoot td {
  color: #cfd3ec;
}

.dark-style #resumenProductosPedido {
  background: #2b2d42;
  border-color: #4a4d66;
}

.dark-style #resumenProductosPedido .list-group-item {
  background: #2b2d42;
  border-color: #4a4d66;
  color: #cfd3ec;
}

.dark-style #resumenProductosPedido .list-group-item:hover {
  background: #3d3f54;
}

.dark-style #detalleImpuestosProducto,
.dark-style #detalleImpuestosCliente {
  background: #2b2d42;
  border-color: #4a4d66;
  color: #cfd3ec;
}

/* ===== ANIMACIONES ===== */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  animation: slideIn 0.3s ease;
}

.list-group-item {
  animation: fadeIn 0.2s ease;
}

/* ===== TOOLTIPS Y POPOVER ===== */
.tooltip {
  z-index: 1070;
}

.tooltip-inner {
  background: #2b2d42;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-color: #2b2d42;
}

/* ===== RESPONSIVIDAD MEJORADA ===== */
@media (max-width: 768px) {
  #formPedido .row {
    margin-bottom: 1rem;
  }
  #tablaItemsPedidos {
    font-size: 0.8rem;
  }

  #tablaItemsPedidos thead th,
  #tablaItemsPedidos tbody td {
    padding: 0.5rem 0.75rem;
  }

  #btnGuardarPedido {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .card-header-gradient {
    padding: 1rem 1.25rem;
  }

  .card-header-gradient h5 {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  #formPedido .card-body {
    padding: 1rem;
  }

  #formPedido .row {
    margin-bottom: 0.75rem;
  }

  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-6 {
    margin-bottom: 0.5rem;
  }

  #tablaItemsPedidos {
    font-size: 0.75rem;
  }

  #tablaItemsPedidos thead th,
  #tablaItemsPedidos tbody td {
    padding: 0.35rem 0.5rem;
  }

  #modalItemPedido .modal-body {
    padding: 1rem;
  }

  .select2-container--default .select2-selection--single {
    min-height: 36px;
  }
}

/* === DARK MODE: FORM SECTION BUTTONS & SELECT2 === */
.dark-style .form-section .btn-primary {
  background-color: #696cff;
  border-color: #696cff;
  color: #fff;
}

.dark-style .form-section .btn-primary:hover {
  background-color: #5f61e6;
  border-color: #5f61e6;
}

.dark-style .form-section .btn-outline-success {
  border-color: #28c76f;
  color: #28c76f;
}

.dark-style .form-section .btn-outline-success:hover {
  background-color: #28c76f;
  color: #fff;
}

/* Dark mode Select2 */
.dark-style .select2-container--default .select2-selection--single {
  background-color: #2f3349;
  border-color: #444564;
  color: #b6bee3;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #b6bee3;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #7e7f94;
}

.dark-style .select2-dropdown {
  background-color: #2f3349;
  border-color: #444564;
}

.dark-style .select2-container--default .select2-results__option {
  color: #b6bee3;
}

.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #696cff;
  color: #fff;
}

.dark-style .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #343547;
  border-color: #4a4b6a;
  color: #c7c7d1;
}

/* Dark mode form inputs */
.dark-style .form-section .form-control,
.dark-style .form-section .form-select {
  background-color: #343547;
  border-color: #4a4b6a;
  color: #c7c7d1;
}

.dark-style .form-section .form-control:focus,
.dark-style .form-section .form-select:focus {
  background-color: #3a3b4f;
  border-color: #696cff;
  color: #c7c7d1;
}

.dark-style .form-section .form-control::placeholder {
  color: #7e7f94;
}

.dark-style .form-section .form-control:disabled,
.dark-style .form-section .form-control:read-only {
  background-color: #25283a;
  color: #7e7f94;
}

/* === DARK MODE: NATIVE FORM-SELECT (not Select2) === */
.dark-style .form-select {
  background-color: #343547 !important;
  border-color: #4a4b6a !important;
  color: #c7c7d1 !important;
  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='%23b6bee3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.dark-style .form-select:focus {
  background-color: #3a3b4f !important;
  border-color: #696cff !important;
}

.dark-style .form-select option {
  background-color: #343547;
  color: #c7c7d1;
}

/* === DARK MODE: BUTTONS IN FORM-SECTION === */
.dark-style .form-section .btn-primary {
  background-color: #696cff !important;
  border-color: #696cff !important;
  color: #fff !important;
}

.dark-style .form-section .btn-primary:hover {
  background-color: #5f61e6 !important;
  border-color: #5f61e6 !important;
  color: #fff !important;
}

/* Ensure button text is always visible */
.dark-style .btn-primary {
  color: #fff !important;
}

/* === DARK MODE: SECTION TITLE TEXT === */
.dark-style .section-title {
  color: #cfd3ec !important;
}

.dark-style .section-title i {
  color: #696cff !important;
}

/* === DARK MODE: FORM LABELS === */
.dark-style .form-section .form-label {
  color: #b6bee3;
}

/* === DARK MODE: LIST GROUP (Productos del Pedido) === */
.dark-style .form-section .list-group {
  background-color: transparent;
}

.dark-style .form-section .list-group-item {
  background-color: #343547;
  border-color: #4a4b6a;
  color: #c7c7d1;
}

/* === DARK MODE: TEXTAREA === */
.dark-style .form-section textarea.form-control {
  background-color: #343547 !important;
  border-color: #4a4b6a !important;
  color: #c7c7d1 !important;
}

.dark-style .form-section textarea.form-control::placeholder {
  color: #7e7f94 !important;
}

/* === DARK MODE: SELECT2 CONTAINER (replaces native select) === */
.dark-style .select2-container--default .select2-selection--single {
  background-color: #343547 !important;
  border-color: #4a4b6a !important;
  color: #c7c7d1 !important;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #c7c7d1 !important;
}

.dark-style .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #b6bee3 transparent transparent transparent !important;
}

.dark-style .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #25283a !important;
  border-color: #4a4b6a !important;
}

.dark-style
  .select2-container--default.select2-container--disabled
  .select2-selection--single
  .select2-selection__rendered {
  color: #7e7f94 !important;
}

/* === TABLA USUARIOS - ESTILOS ESPECÍFICOS === */
#tablaUsuarios tbody td:nth-child(1) {
  text-align: left !important;
}

#tablaUsuarios thead th:nth-child(1) {
  text-align: left !important;
}

/* ===== ALINEACIÓN POR TIPO DE DATO (ABM TABLES) ===== */
/*
 * Formato estándar para todas las tablas ABM:
 * - MONEDA: Derecha (sin redondeo agresivo)
 * - NUMÉRICO: Derecha (respetar decimales)
 * - TEXTO: Izquierda (evitar truncamientos)
 * - ALFANUMÉRICO (códigos): Centrado
 */

/* Columnas de MONEDA - Alineación derecha */
.dt-type-currency,
.dt-type-money,
td.dt-type-currency,
td.dt-type-money {
  text-align: right !important;
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

/* Columnas NUMÉRICAS - Alineación derecha */
.dt-type-numeric,
.dt-type-number,
td.dt-type-numeric,
td.dt-type-number {
  text-align: right !important;
  font-family: 'Courier New', monospace;
}

/* Columnas ALFANUMÉRICAS (códigos, IDs) - Centrado */
.dt-type-code,
.dt-type-alphanumeric,
td.dt-type-code,
td.dt-type-alphanumeric {
  text-align: center !important;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}

/* Columnas de TEXTO - Izquierda (por defecto) */
.dt-type-text,
td.dt-type-text {
  text-align: left !important;
}

/* ===== FILTROS DE BÚSQUEDA MEJORADOS ===== */
#btnLimpiarBusqueda {
  border-left: 0;
  transition: all 0.2s ease;
}

#btnLimpiarBusqueda:hover {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

#resultadosBusqueda {
  font-size: 0.75rem;
  font-weight: 500;
  color: #696cff;
}

.input-group-text {
  background-color: #f8f9fa;
  border-right: 0;
}

#inputBuscarProducto {
  border-left: 0;
  border-right: 0;
}

#inputBuscarProducto:focus {
  box-shadow: none;
  border-color: #ced4da;
}

#inputBuscarProducto:focus + #btnLimpiarBusqueda {
  border-color: #ced4da;
}

#selectTipoBusqueda {
  font-size: 0.875rem;
}

/* ===== UTILIDAD: TEXTO MONEDA ===== */
/* Span usado en celdas de valor monetario */
.text-currency {
  font-family: 'Courier New', monospace;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER SECTION BLOCKS  (editOrder.php / takeOrder.php)
   3 bloques visuales: 1-Cliente  2-Productos  3-Totales
════════════════════════════════════════════════════════════════ */

.order-section {
  overflow: hidden;
}

/* --- Section header bar --- */
.order-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  background: rgba(105, 108, 255, 0.06);
  border-bottom: 1px solid rgba(105, 108, 255, 0.15);
  border-left: 4px solid #696cff;
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
  user-select: none;
}

.order-section-header--products {
  background: rgba(40, 199, 111, 0.06);
  border-bottom-color: rgba(40, 199, 111, 0.2);
  border-left-color: #28c76f;
}

.order-section-header--totals {
  background: rgba(255, 159, 67, 0.06);
  border-bottom-color: rgba(255, 159, 67, 0.2);
  border-left-color: #ff9f43;
}

.order-section-header--notes {
  background: rgba(192, 82, 111, 0.06);
  border-bottom-color: rgba(192, 82, 111, 0.2);
  border-left-color: #c0526f;
}

.order-section-icon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  color: #696cff;
}

.order-section-header--products .order-section-icon {
  color: #28c76f;
}
.order-section-header--totals .order-section-icon {
  color: #ff9f43;
}
.order-section-header--notes .order-section-icon {
  color: #c0526f;
}

.order-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #566a7f;
}

/* Reset border/spacing leaked from generic .order-section-title rule */
.order-section-header .order-section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 1;
}

.order-section-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #696cff;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-section-header--products .order-section-badge {
  background: #28c76f;
}
.order-section-header--totals .order-section-badge {
  background: #ff9f43;
}
.order-section-header--notes .order-section-badge {
  background: #c0526f;
}

/* Products count pill (replaces numbered badge on block 2) */
.order-products-count {
  display: inline-flex;
  align-items: center;
  background: rgba(40, 199, 111, 0.15);
  color: #28c76f;
  border: 1px solid rgba(40, 199, 111, 0.35);
  border-radius: 20px;
  padding: 0.1rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.2s;
}

.dark-style .order-products-count {
  background: rgba(40, 199, 111, 0.12);
  border-color: rgba(40, 199, 111, 0.25);
  color: #5ce08a;
}

/* Product search bar */
.order-product-search {
  background: rgba(105, 108, 255, 0.04);
  border: 1px solid rgba(105, 108, 255, 0.12);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  display: none; /* shown via JS only when products exist */
}

.dark-style .order-product-search {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.order-section-btn {
  border-color: rgba(105, 108, 255, 0.4);
  color: #696cff;
  font-weight: 600;
  font-size: 0.78rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.order-section-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.order-section-btn:hover::before {
  animation: idus-btn-shine 0.5s ease forwards;
}

.order-section-btn:hover {
  background: #696cff;
  color: #fff;
  border-color: #696cff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(105, 108, 255, 0.45);
}

/* --- Section body --- */
.order-section-body {
  padding: 1.25rem 1.5rem;
}

/* --- Totals row --- */
.order-totals-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.order-total-card {
  flex: 1;
  min-width: 200px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border: 1px solid #e7e7ff;
  transition: box-shadow 0.15s;
}

.order-total-card:hover {
  box-shadow: 0 2px 10px rgba(105, 108, 255, 0.12);
}

.order-total-card--neto {
  border-top: 3px solid #696cff;
}

.order-total-card--descuento {
  border-top: 3px solid #28c76f;
}

.order-total-card--bruto {
  border-top: 3px solid #ff9f43;
  flex: 1.5;
}

.order-total-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8592a3;
  margin-bottom: 0.5rem;
}

.order-total-input {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #d9dee3 !important;
  border-radius: 0 !important;
  padding: 0.2rem 0 !important;
  color: inherit;
}

.order-total-input:disabled {
  opacity: 1;
}

.order-taxes-detail {
  font-size: 0.75rem;
  color: #8592a3;
  line-height: 1.6;
}

/* --- DARK MODE --- */
.dark-style .order-section {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.dark-style .order-section-header {
  background: rgba(105, 108, 255, 0.1);
  border-bottom-color: rgba(105, 108, 255, 0.2);
}

.dark-style .order-section-header--products {
  background: rgba(40, 199, 111, 0.08);
}

.dark-style .order-section-header--totals {
  background: rgba(255, 159, 67, 0.08);
}

.dark-style .order-section-header--notes {
  background: rgba(192, 82, 111, 0.1);
}

.dark-style .order-section-title {
  color: #b8c4d0;
}

.dark-style .order-total-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-style .order-total-input {
  color: #d0d2d6;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.dark-style .order-taxes-detail {
  color: #8592a3;
}

.dark-style .order-section-btn {
  border-color: rgba(105, 108, 255, 0.5);
  color: #9698f9;
}

.dark-style .order-section-btn:hover {
  background: #696cff;
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(105, 108, 255, 0.5);
}

/* ===== SKELETON LOADER — Sistema Global ===== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
  background-size: 1200px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  border: none !important;
  display: block;
}

/* — Elementos de formulario (existentes) — */
.skeleton-select {
  height: 38px;
}
.skeleton-input {
  height: 38px;
}
.skeleton-label {
  height: 13px;
  width: 55%;
  margin-bottom: 6px;
  display: block;
}
.skeleton-btn {
  height: 38px;
  width: 160px;
  border-radius: 6px;
}
.skeleton-block {
  height: 110px;
  border-radius: 8px;
}

/* — Líneas de texto — */
.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
}
.skeleton-text-sm {
  height: 10px;
  margin-bottom: 6px;
}
.skeleton-text-lg {
  height: 16px;
  margin-bottom: 10px;
}
.skeleton-text-w25 {
  width: 25%;
}
.skeleton-text-w40 {
  width: 40%;
}
.skeleton-text-w55 {
  width: 55%;
}
.skeleton-text-w65 {
  width: 65%;
}
.skeleton-text-w75 {
  width: 75%;
}
.skeleton-text-w90 {
  width: 90%;
}
.skeleton-text-full {
  width: 100%;
}

/* — Tabla skeleton — */
.skeleton-table {
  padding: 0;
}
.skeleton-table-header {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}
.skeleton-table-header .skeleton {
  height: 14px;
  border-radius: 4px;
}
.skeleton-table-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.skeleton-table-row .skeleton {
  height: 14px;
  border-radius: 4px;
}
.skeleton-table-row:last-child {
  border-bottom: none;
}

/* — KPI card skeleton — */
.skeleton-kpi {
  height: 100%;
  min-height: 120px;
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.skeleton-kpi-value {
  height: 28px;
  width: 45%;
  margin-bottom: 8px;
  border-radius: 6px;
}
.skeleton-kpi-label {
  height: 12px;
  width: 70%;
  border-radius: 4px;
}
.skeleton-kpi-icon {
  height: 42px;
  width: 42px;
  border-radius: 8px;
  align-self: flex-end;
}

/* — Chart placeholder — */
.skeleton-chart {
  height: 250px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.skeleton-chart-sm {
  height: 180px;
}
.skeleton-chart-lg {
  height: 350px;
}

/* — Map placeholder — */
.skeleton-map {
  height: 400px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skeleton-map::after {
  content: '';
  width: 48px;
  height: 48px;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.skeleton-map-sm {
  height: 250px;
}

/* — Avatar circular — */
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-avatar-sm {
  width: 32px;
  height: 32px;
}
.skeleton-avatar-lg {
  width: 56px;
  height: 56px;
}

/* — Badge / chip — */
.skeleton-badge {
  height: 22px;
  width: 72px;
  border-radius: 12px;
}

/* — Kanban / board card — */
.skeleton-board-card {
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e0e0e0);
}

/* — Contenedor de skeleton con spinner header — */
.skeleton-container {
  position: relative;
  overflow: hidden;
}
.skeleton-container-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  margin-bottom: 8px;
}
.skeleton-container-header .spinner-border {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

/* — Page overlay loader (reutilizable) — */
.idus-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(3px);
  transition: opacity 0.3s ease;
}
.idus-page-loader.loader-hidden {
  opacity: 0;
  pointer-events: none;
}
.idus-page-loader .loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(105, 108, 255, 0.18);
  border-top-color: #696cff;
  border-radius: 50%;
  animation: skeleton-spin 0.75s linear infinite;
}
.idus-page-loader .loader-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: #696cff;
}
.idus-page-loader .loader-sub {
  font-size: 0.78rem;
  color: #a1a1b5;
}
@keyframes skeleton-spin {
  to {
    transform: rotate(360deg);
  }
}

/* — Animación de revelación — */
@keyframes skeleton-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.skeleton-reveal {
  animation: skeleton-reveal 0.3s ease forwards;
}

/* — Dark mode — */
.dark-style .skeleton {
  background: linear-gradient(90deg, #2d2d3a 25%, #3a3a4a 50%, #2d2d3a 75%);
  background-size: 1200px 100%;
}
.dark-style .skeleton-table-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.dark-style .skeleton-table-row {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
.dark-style .skeleton-board-card {
  background: var(--bs-body-bg, #2b2c40);
  border-color: var(--bs-border-color, #444564);
}
.dark-style .idus-page-loader {
  background: rgba(35, 35, 51, 0.9);
}
.dark-style .idus-page-loader .loader-sub {
  color: #7a7a9a;
}
.dark-style .skeleton-map::after {
  opacity: 0.1;
}

/* ============================================================
   DATATABLES — FILAS & FIXED COLUMNS (global, todas las tablas)
   ============================================================

   PROBLEMA: fixedcolumns.bootstrap5.css aplica height:0px !important
   a .dtfc-fixed-left/right en .light-style, lo que colapsa la altura
   visual de las columnas fijadas y las desalinea con el cuerpo.
   Además, los overrides de background transparent en striping
   rompen el fondo de las celdas fijadas en dark mode.

   SOLUCIÓN: anulamos ese height, normalizamos el fondo de las celdas
   fijadas para ambos modos, y limpiamos el padding/bordes de todas las
   tablas DataTables de manera consistente.
   ============================================================ */

/* ── 1. Anular height:0 de celdas fijadas (vendor bug) ────────── */
/*    El vendor aplica height:0px !important con prefijo .light-style
      y .dark-style. Para ganar en especificidad con !important, nuestro
      selector DEBE igualar o superar la del vendor. Usamos los mismos
      prefijos .light-style y .dark-style.                                */
.light-style table.dataTable thead tr > .dtfc-fixed-left,
.light-style table.dataTable thead tr > .dtfc-fixed-right,
.light-style table.dataTable tbody tr > .dtfc-fixed-left,
.light-style table.dataTable tbody tr > .dtfc-fixed-right,
.light-style div.dtfc-right-top-blocker,
.light-style div.dtfc-left-top-blocker,
.dark-style table.dataTable thead tr > .dtfc-fixed-left,
.dark-style table.dataTable thead tr > .dtfc-fixed-right,
.dark-style table.dataTable tbody tr > .dtfc-fixed-left,
.dark-style table.dataTable tbody tr > .dtfc-fixed-right,
.dark-style div.dtfc-right-top-blocker,
.dark-style div.dtfc-left-top-blocker {
  height: auto !important;
  margin-top: 0 !important;
}

/* ── 2. Fondo correcto en celdas fijadas — light mode ─────────── */
/*    Se excluye dark-style para no pisar el modo oscuro.
      Nota: el <html> SIEMPRE tiene .light-style; en dark mode TAMBIÉN
      tiene .dark-style. Por eso usamos :not(.dark-style) para aislar. */
html:not(.dark-style) table.dataTable thead tr > .dtfc-fixed-left,
html:not(.dark-style) table.dataTable thead tr > .dtfc-fixed-right,
html:not(.dark-style) table.dataTable tfoot tr > .dtfc-fixed-left,
html:not(.dark-style) table.dataTable tfoot tr > .dtfc-fixed-right {
  background-color: #6366f1 !important; /* coincide con thead-primary */
}

html:not(.dark-style) table.dataTable tbody tr > .dtfc-fixed-left,
html:not(.dark-style) table.dataTable tbody tr > .dtfc-fixed-right {
  background-color: #fff !important;
}

html:not(.dark-style) table.dataTable tbody tr:hover > .dtfc-fixed-left,
html:not(.dark-style) table.dataTable tbody tr:hover > .dtfc-fixed-right {
  background-color: rgba(105, 108, 255, 0.05) !important;
}

/* ── 3. Fondo correcto en celdas fijadas — dark mode ──────────── */
html.dark-style table.dataTable thead tr > .dtfc-fixed-left,
html.dark-style table.dataTable thead tr > .dtfc-fixed-right,
html.dark-style table.dataTable tfoot tr > .dtfc-fixed-left,
html.dark-style table.dataTable tfoot tr > .dtfc-fixed-right {
  background-color: #2f3349 !important;
}

html.dark-style table.dataTable tbody tr > .dtfc-fixed-left,
html.dark-style table.dataTable tbody tr > .dtfc-fixed-right {
  background-color: #2f3349 !important;
}

html.dark-style table.dataTable tbody tr:hover > .dtfc-fixed-left,
html.dark-style table.dataTable tbody tr:hover > .dtfc-fixed-right {
  background-color: #32364c !important;
}

/* ── 4. Padding vertical uniforme en celdas de tbody ──────────── */
/*    Evita filas exageradamente altas por herencia de múltiples fuentes */
table.dataTable tbody td {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  vertical-align: middle;
}

/* ── 5. Bordes limpios en todas las tablas DataTables ─────────── */
/*    Elimina la doble línea que genera el th de Bootstrap + DT    */
table.dataTable thead th,
table.dataTable thead td {
  border-bottom-width: 0;
}

table.dataTable.table > :not(caption) > * > * {
  box-shadow: none !important;
}

/* ── 6. Striping desactivado (usamos hover en su lugar) ────────── */
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent !important;
  background-image: none !important;
}

/* Separador de fila: solo borde-top sutil, sin relleno de color */
table.dataTable tbody tr {
  border-top: 1px solid rgba(67, 89, 113, 0.08);
}

html.dark-style table.dataTable tbody tr {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ── 7. Hover en tbody (todas las tablas) ──────────────────────── */
table.dataTable tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.05) !important;
}

html.dark-style table.dataTable tbody tr:hover {
  background-color: rgba(105, 108, 255, 0.08) !important;
}

/* ── 8. dataTables_scrollBody: border consistente ─────────────── */
div.dataTables_scrollBody {
  border-top: 1px solid rgba(67, 89, 113, 0.12) !important;
}

html.dark-style div.dataTables_scrollBody {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Botón de ayuda (?) en cabeceras de sección ──────────────────────── */
.po-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 1.5px solid rgba(40, 199, 111, 0.45);
  border-radius: 50%;
  color: #28c76f;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.15s,
    border-color 0.15s;
  line-height: 1;
}
.po-help-btn:hover,
.po-help-btn:focus {
  opacity: 1;
  border-color: #28c76f;
  outline: none;
}
.dark-style .po-help-btn {
  border-color: rgba(40, 199, 111, 0.35);
  color: #48e68f;
}

/* ── Packaging badge en la tabla de OC ─────────────────────────────────────── */
.po-badge-packaging {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid currentColor;
  white-space: nowrap;
  /* default: índigo */
  color: #696cff;
  background: rgba(105, 108, 255, 0.12);
}

/* Unidad → gris neutro */
.po-badge-packaging[data-tipo="unidad"] {
  color: #8592a3;
  background: rgba(133, 146, 163, 0.1);
}

/* Caja → teal/cyan */
.po-badge-packaging[data-tipo="caja"] {
  color: #00b5d8;
  background: rgba(0, 181, 216, 0.12);
}

/* Pallet → naranja vibrante */
.po-badge-packaging[data-tipo="pallet"] {
  color: #ff9f43;
  background: rgba(255, 159, 67, 0.13);
}

/* Piso → verde lima */
.po-badge-packaging[data-tipo="piso"] {
  color: #28c76f;
  background: rgba(40, 199, 111, 0.12);
}

/* Pack → rosa/fucsia */
.po-badge-packaging[data-tipo="pack"] {
  color: #ea5455;
  background: rgba(234, 84, 85, 0.11);
}

/* Bulto → púrpura */
.po-badge-packaging[data-tipo="bulto"] {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
}

/* Factor ×N dentro del badge */
.po-badge-packaging__factor {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.75;
}

/* Dark mode: subir notoriamente el brillo y opacidad */
.dark-style .po-badge-packaging {
  color: #9a9cff;
  background: rgba(105, 108, 255, 0.22);
  border-color: rgba(154, 156, 255, 0.6);
}
.dark-style .po-badge-packaging[data-tipo="unidad"] {
  color: #a1acb8;
  background: rgba(161, 172, 184, 0.15);
  border-color: rgba(161, 172, 184, 0.4);
}
.dark-style .po-badge-packaging[data-tipo="caja"] {
  color: #22d3ee;
  background: rgba(0, 181, 216, 0.22);
  border-color: rgba(34, 211, 238, 0.6);
}
.dark-style .po-badge-packaging[data-tipo="pallet"] {
  color: #fbbf24;
  background: rgba(255, 159, 67, 0.22);
  border-color: rgba(251, 191, 36, 0.6);
}
.dark-style .po-badge-packaging[data-tipo="piso"] {
  color: #4ade80;
  background: rgba(40, 199, 111, 0.22);
  border-color: rgba(74, 222, 128, 0.6);
}
.dark-style .po-badge-packaging[data-tipo="pack"] {
  color: #f87171;
  background: rgba(234, 84, 85, 0.2);
  border-color: rgba(248, 113, 113, 0.6);
}
.dark-style .po-badge-packaging[data-tipo="bulto"] {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(192, 132, 252, 0.6);
}

/* Botón lápiz de cambio de presentación */
.po-edit-packaging-btn {
  color: #8592a3 !important;
  opacity: 0.5;
  font-size: 0.78rem;
  vertical-align: middle;
  transition: opacity 0.15s, color 0.15s;
}
.po-edit-packaging-btn:hover {
  opacity: 1;
  color: #696cff !important;
}
.dark-style .po-edit-packaging-btn:hover {
  color: #9a9cff !important;
}


.po-btn-accion {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  border: 2px solid #28c76f;
  background: rgba(40, 199, 111, 0.12);
  color: #1a9e57;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.po-btn-accion:hover,
.po-btn-accion:focus {
  background: #28c76f;
  color: #fff;
  border-color: #28c76f;
  box-shadow: 0 2px 8px rgba(40, 199, 111, 0.35);
  outline: none;
}
.dark-style .po-btn-accion {
  background: rgba(40, 199, 111, 0.15);
  color: #48e68f;
  border-color: rgba(72, 230, 143, 0.55);
}
.dark-style .po-btn-accion:hover,
.dark-style .po-btn-accion:focus {
  background: #28c76f;
  color: #fff;
  border-color: #28c76f;
  box-shadow: 0 2px 10px rgba(40, 199, 111, 0.45);
}

/* Lista dentro del popover de ayuda */
.po-help-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.6;
}
.po-help-list li + li {
  margin-top: 4px;
}

/* ===================================================================
   DARK MODE — FONDO GLOBAL #070B1F
   =================================================================== */

html.dark-style,
html.dark-style body {
  background-color: #070b1f !important;
}

html.dark-style .layout-wrapper,
html.dark-style .layout-container,
html.dark-style .layout-page,
html.dark-style .content-wrapper {
  background-color: #070b1f !important;
}

html.dark-style .layout-menu {
  background-color: #0a0f28 !important;
}

/* ===================================================================
   NEON SECTION — clase reutilizable para contenedores con borde neon
   =================================================================== */

.neon-section {
  position: relative;
  border: 1.5px solid rgba(105, 108, 255, 0.65);
  border-radius: 12px;
  box-shadow:
    0 0 6px rgba(105, 108, 255, 0.5),
    0 0 18px rgba(105, 108, 255, 0.25),
    0 0 40px rgba(105, 108, 255, 0.1),
    inset 0 0 10px rgba(105, 108, 255, 0.04);
  padding: 1.5rem;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.neon-section:hover {
  border-color: rgba(105, 108, 255, 0.9);
  box-shadow:
    0 0 10px rgba(105, 108, 255, 0.7),
    0 0 28px rgba(105, 108, 255, 0.4),
    0 0 60px rgba(105, 108, 255, 0.15),
    inset 0 0 16px rgba(105, 108, 255, 0.06);
}

/* ===================================================================
   DARK MODE — NEON BORDER EN CONTENEDORES DE INFORMACIÓN (CARDS)
   =================================================================== */

html.dark-style .card,
.dark-style .card {
  border: 1.5px solid rgba(105, 108, 255, 0.35) !important;
  box-shadow:
    0 0 6px rgba(105, 108, 255, 0.3),
    0 0 18px rgba(105, 108, 255, 0.12),
    0 4px 24px rgba(0, 0, 0, 0.4) !important;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

html.dark-style .card:hover,
.dark-style .card:hover {
  border-color: rgba(105, 108, 255, 0.6) !important;
  box-shadow:
    0 0 12px rgba(105, 108, 255, 0.5),
    0 0 30px rgba(105, 108, 255, 0.2),
    0 4px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ===================================================================
   DARK MODE — DASHBOARDS: OVERRIDE DE INLINE STYLES
   Los dashboards definen .dark-style .dashboard-*-page en <style> inline
   con especificidad (0,2,0). Usando html.dark-style obtenemos (0,2,1)
   y ganamos la cascada sin tocar los archivos PHP.
   =================================================================== */

html.dark-style .dashboard-seller-page,
html.dark-style .dashboard-sales-page,
html.dark-style .dashboard-visit-page,
html.dark-style .dashboard-route-page,
html.dark-style .dashboard-gps-page,
html.dark-style .dashboard-orders-page,
html.dark-style .dashboard-noventa-page,
html.dark-style [class*='dashboard-'][class*='-page'] {
  background: #070b1f !important;
}

/* table-card y filter-card: neon border (fondo propio del inline se respeta) */
html.dark-style .table-card,
html.dark-style .filter-card {
  border: 1.5px solid rgba(105, 108, 255, 0.35) !important;
  box-shadow:
    0 0 6px rgba(105, 108, 255, 0.3),
    0 0 18px rgba(105, 108, 255, 0.12),
    0 4px 24px rgba(0, 0, 0, 0.4) !important;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

html.dark-style .table-card:hover,
html.dark-style .filter-card:hover {
  border-color: rgba(105, 108, 255, 0.6) !important;
  box-shadow:
    0 0 12px rgba(105, 108, 255, 0.5),
    0 0 30px rgba(105, 108, 255, 0.2),
    0 4px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ================================================================
   CONTENT AREA PANEL — separación visual global
   Aplica a TODAS las páginas con el layout estándar v1:
   sidebar + navbar + content-wrapper > container-xxl
   ================================================================ */

/* 1. Padding horizontal en content-wrapper:
      crea el "aire" entre el sidebar (izquierda) y el borde derecho */
.content-wrapper {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.875rem !important;
}

/* 2. Panel interior: border neon + fondo levemente más claro */
.content-wrapper > .container-xxl,
.content-wrapper > .container-fluid {
  border-radius: 12px;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* Dark mode: neon purple — coherente con table-card/filter-card */
html.dark-style .content-wrapper > .container-xxl,
html.dark-style .content-wrapper > .container-fluid {
  background: rgba(255, 255, 255, 0.035);
  border: 1.5px solid rgba(105, 108, 255, 0.4);
  box-shadow:
    0 0 8px rgba(105, 108, 255, 0.32),
    0 0 22px rgba(105, 108, 255, 0.14),
    0 4px 32px rgba(0, 0, 0, 0.45);
}

/* Light mode: mismo acento pero más suave — no pega en fondo claro */
html:not(.dark-style) .content-wrapper > .container-xxl,
html:not(.dark-style) .content-wrapper > .container-fluid {
  background: rgba(0, 0, 0, 0.018);
  border: 1.5px solid rgba(105, 108, 255, 0.22);
  box-shadow:
    0 0 6px rgba(105, 108, 255, 0.14),
    0 0 16px rgba(105, 108, 255, 0.07),
    0 2px 12px rgba(47, 43, 61, 0.08);
}