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

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%;
}

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

.card-header-gradient {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  border-top-left-radius: 0.5rem;
  /* Asegurar bordes redondeados si es el primer elemento */
  border-top-right-radius: 0.5rem;
}

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

/* ====== 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.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;
}

/* 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;
}

/* === HEADERS DE TABLA PREMIUM (ABM) === */
.thead-primary {
  background: linear-gradient(135deg, #696cff 0%, #5f61e6 100%);
  color: white;
}

.thead-primary th {
  color: white !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.8px;
  border: none !important;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
}

.thead-primary th:first-child {
  border-top-left-radius: 0;
}

.thead-primary th:last-child {
  border-top-right-radius: 0;
}

/* ===== 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: linear-gradient(135deg, #696cff 0%, #5f61e6 100%) !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: linear-gradient(135deg, #696cff 0%, #5f61e6 100%) !important;
  color: white !important;
  text-align: center !important;
  /* Force center alignment for headers */
  vertical-align: middle !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !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;
}

/* 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;
}

.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: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem auto;
  transition: all 0.3s ease;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8e9bab;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.5rem;
  display: block;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

/* 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;
}

/* 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-center,
#tablaPedidos thead th.text-center,
#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: center !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 {
  opacity: 0.6;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 1rem;
}

.bloqueado * {
  cursor: not-allowed;
}

/* 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;
}

.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 #bloqueado {
  background: rgba(255, 255, 255, 0.05);
}

.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;
  }

  .bloqueado {
    padding: 0.75rem;
  }

  #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;
}