/* ========== NUEVO LAYOUT DE DATATABLE ========== */
/* Estructura simple con Grid: fila búsqueda | tabla | fila footer */
.dataTables_wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0;
  grid-template-areas:
    "filter filter export"
    "table table table"
    "length info paginate";
  border: 1px solid #e9ecef;
}

/* Fila superior: búsqueda izquierda + export derecha */
.dataTables_wrapper > .dataTables_filter {
  grid-area: filter;
  display: flex;
  align-items: center;
  gap: 8px;
  /* padding: 12px 0 12px 12px; */
  margin: 0;
  border-bottom: 1px solid #e9ecef;
}

.dataTables_wrapper > .dataTables_filter label {
  margin: 0;
  font-size: 14px;
}

.dataTables_wrapper > .dataTables_filter input {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  width: 350px !important;
}

/* Botones export en la misma fila del filtro */
.dataTables_wrapper #export_buttons {
  grid-area: export;
  display: flex !important;
  gap: 8px;
  align-items: center;
  padding: 12px;
  margin: 0;
  border-bottom: 1px solid #e9ecef;
  border-left: 1px solid #e9ecef;
}

.dataTables_wrapper #export_buttons .btn {
  font-size: 13px;
  padding: 6px 12px;
}

/* Tabla */
.dataTables_wrapper > table {
  grid-area: table;
  margin: 0;
  border: none;
  width: 100%;
  margin-bottom: 0px !important;
}

/* Footer: length | info | paginate (una sola fila) */
.dataTables_wrapper > .dataTables_length {
  grid-area: length;
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 12px 0 12px 12px;
  border-top: 1px solid #e9ecef;
  font-size: 13px;
}

.dataTables_wrapper > .dataTables_length label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-right: 10px;
}

.dataTables_wrapper > .dataTables_length select {
  padding: 4px 8px;
  font-size: 13px;
  height: auto;
  border: 1px solid #ced4da;
  border-radius: 3px;
  width: 60px !important;
}

.dataTables_wrapper > .dataTables_info {
  grid-area: info;
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 12px 12px 12px 12px;
  border-top: 1px solid #e9ecef;
  font-size: 13px;
  color: #666;
  border-left: 1px solid #e9ecef;
}

.dataTables_wrapper > .dataTables_paginate {
  grid-area: paginate;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 12px 12px 12px 12px;
  border-top: 1px solid #e9ecef;
  border-left: 1px solid #e9ecef;
}

.dataTables_wrapper > .dataTables_paginate .pagination {
  margin: 0;
}

/* Utilities específicas usadas por las vistas de administración */
.fs-base { font-size: 0.95rem; /* ~15px para dashboards */ }

/* Contenedor del mapa en dashboard */
#mapx { height: 40vh; width: 100%; }

/* ========== BADGE STYLES ========== */
/* Clases de badge de Bootstrap - para estados y etiquetas */

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

/* Badge colores sólidos */
.badge.badge-primary {
  background-color: #0d6efd !important;
  color: #fff;
}

.badge.badge-secondary {
  background-color: #6c757d !important;
  color: #fff;
}

.badge.badge-success {
  background-color: #198754 !important;
  color: #fff;
}

.badge.badge-danger {
  background-color: #dc3545 !important;
  color: #fff;
}

.badge.badge-warning {
  background-color: #ffc107 !important;
  color: #000;
}

.badge.badge-info {
  background-color: #0dcaf0 !important;
  /* color: #000; */
}

.badge.badge-light {
  background-color: #f8f9fa !important;
  color: #000;
}

.badge.badge-dark {
  background-color: #212529 !important;
  color: #fff;
}

/* Badge versiones LIGHT - fondo tenue con texto del color */
.badge.badge-light-primary {
  background-color: #cfe2ff !important;
  color: #084298 !important;
  /* border: 1px solid #0d6efd; */
}

/* =========================
   Width utility classes
   =========================
   Agregadas para facilitar ajustes rápidos
   usando notación `w-{porcentaje}`.
   Se mantienen aquí además de las
   que ya provee el framework principal.
*/
.w-5px  { width: 5%!important; }
.w-10px { width:10%!important; }
.w-15px { width:15%!important; }
.w-20px { width:20%!important; }
.w-25px { width:25%!important; }
.w-30px { width:30%!important; }
.w-33px { width:33.3333%!important; }
.w-40px { width:40%!important; }
.w-45px { width:45%!important; }
.w-50px { width:50%!important; }
.w-60px { width:60%!important; }
.w-66px { width:66.6666%!important; }
.w-70px { width:70%!important; }
.w-75px { width:75%!important; }
.w-80px { width:80%!important; }
.w-90px { width:90%!important; }
.w-100px{ width:100%!important; }
.w-auto{ width:auto!important; }

.badge.badge-light-secondary {
  background-color: #e2e3e5 !important;
  color: #41464b !important;
  /* border: 1px solid #6c757d; */
}

.badge.badge-light-success {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
  /* border: 1px solid #198754; */
}

.badge.badge-light-danger {
  background-color: #f8d7da !important;
  color: #842029 !important;
  /* border: 1px solid #dc3545; */
}

.badge.badge-light-warning {
  background-color: #fff3cd !important;
  color: #664d03 !important;
  /* border: 1px solid #ffc107; */
}

.badge.badge-light-info {
  background-color: #cff4fc !important;
  color: #055160 !important;
  /* border: 1px solid #0dcaf0; */
}

.badge.badge-light-light {
  background-color: #f8f9fa !important;
  color: #4a5568 !important;
  /* border: 1px solid #dee2e6; */
}

.badge.badge-light-dark {
  background-color: #e2e3e5 !important;
  color: #212529 !important;
  /* border: 1px solid #5a6268; */
}

/* ========== BUTTON STYLES ========== */
.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover,
.btn-light:focus {
  color: #000;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

/* Outline variants */
.btn-outline-primary {
  color: #0d6efd;
  background-color: transparent;
  background-image: none;
  border-color: #0d6efd;
}

.btn-outline-secondary {
  color: #6c757d;
  background-color: transparent;
  border-color: #6c757d;
}

.btn-outline-success {
  color: #198754;
  background-color: transparent;
  border-color: #198754;
}

.btn-outline-danger {
  color: #dc3545;
  background-color: transparent;
  border-color: #dc3545;
}

.btn-outline-warning {
  color: #ffc107;
  background-color: transparent;
  border-color: #ffc107;
}

.btn-outline-info {
  color: #0dcaf0;
  background-color: transparent;
  border-color: #0dcaf0;
}

.btn-outline-dark {
  color: #212529;
  background-color: transparent;
  border-color: #212529;
}

/* Light color variants (pastel backgrounds with colored text) */
.btn-light-primary {
  color: #0d6efd;
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}
.btn-light-secondary {
  color: #6c757d;
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}
.btn-light-success {
  color: #198754;
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}
.btn-light-danger {
  color: #dc3545;
  background-color: #f8d7da;
  border-color: #f8d7da;
}
.btn-light-warning {
  color: #ffc107;
  background-color: #fff3cd;
  border-color: #fff3cd;
}
.btn-light-info {
  color: #0dcaf0;
  background-color: #cff4fc;
  border-color: #cff4fc;
}
.btn-light-dark {
  color: #212529;
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

/* hover/focus for light variants */
.btn-light-primary:hover,
.btn-light-primary:focus {
  background-color: #b6d4fe;
  border-color: #b6d4fe;
}
.btn-light-secondary:hover,
.btn-light-secondary:focus {
  background-color: #d3d4d5;
  border-color: #d3d4d5;
}
.btn-light-success:hover,
.btn-light-success:focus {
  background-color: #bcd0c7;
  border-color: #bcd0c7;
}
.btn-light-danger:hover,
.btn-light-danger:focus {
  background-color: #f5c2c7;
  border-color: #f5c2c7;
}
.btn-light-warning:hover,
.btn-light-warning:focus {
  background-color: #ffe8a1;
  border-color: #ffe8a1;
}
.btn-light-info:hover,
.btn-light-info:focus {
  background-color: #beeefb;
  border-color: #beeefb;
}
.btn-light-dark:hover,
.btn-light-dark:focus {
  background-color: #c8cbcf;
  border-color: #c8cbcf;
}
.btn-light-light:hover,
.btn-light-light:focus {
  background-color: #e2e6ea;
  border-color: #dae0e5;
}



/* ========== STATES DE TRACKING COLOR SYSTEM ========== */
/**
 * Estilos Globales para Estados de Tracking
 * Se utiliza en DataTables, Gráficos y cualquier componente que necesite
 * mostrar estados de paquetes con colores consistentes
 */

/* Variables CSS para reutilización */
:root {
    --color-facturado: #198754;      /* bg-success */
    --color-transito: #0d6efd;       /* bg-primary */
    --color-revision: #0dcaf0;       /* bg-info */
    --color-espera: #ffc107;         /* bg-warning */
    --color-fraude: #dc3545;         /* bg-danger */
    --color-pendiente: #ffc107;      /* bg-warning */
    --color-recoger: #0ea5a5;        /* bg-teal */
    --color-ecuador: #0d6efd;        /* bg-primary */
    --color-aduana: #212529;         /* bg-dark */
    --color-aforo: #6c757d;          /* bg-secondary */
    --color-usa: #0dcaf0;            /* bg-info */
    --color-declarar: #dc3545;       /* bg-danger */
    --color-entregado: #198754;      /* bg-success */
}

/* Clases de estado para badges y elementos visuales */
.estado-badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.estado-facturado {
    background-color: var(--color-facturado);
    color: white;
}

.estado-transito {
    background-color: var(--color-transito);
    color: white;
}

.estado-revision {
    background-color: var(--color-revision);
    color: white;
}

.estado-espera {
    background-color: var(--color-espera);
    color: #212529;
}

.estado-fraude {
    background-color: var(--color-fraude);
    color: white;
}

.estado-pendiente {
    background-color: var(--color-pendiente);
    color: #212529;
}

.estado-recoger {
    background-color: var(--color-recoger);
    color: white;
}

.estado-ecuador {
    background-color: var(--color-ecuador);
    color: white;
}

.estado-aduana {
    background-color: var(--color-aduana);
    color: white;
}

.estado-aforo {
    background-color: var(--color-aforo);
    color: white;
}

.estado-usa {
    background-color: var(--color-usa);
    color: white;
}

.estado-declarar {
    background-color: var(--color-declarar);
    color: white;
}

.estado-entregado {
    background-color: var(--color-entregado);
    color: white;
}

/* Mapeo de estados para acceso desde JavaScript */
.estado-Facturado { background-color: var(--color-facturado); color: white; }
.estado-Transito { background-color: var(--color-transito); color: white; }
.estado-Revision { background-color: var(--color-revision); color: white; }
.estado-Espera { background-color: var(--color-espera); color: #212529; }
.estado-Fraude { background-color: var(--color-fraude); color: white; }
.estado-Pendiente { background-color: var(--color-pendiente); color: #212529; }
.estado-Recoger { background-color: var(--color-recoger); color: white; }
.estado-Ecuador { background-color: var(--color-ecuador); color: white; }
.estado-Aduana { background-color: var(--color-aduana); color: white; }
.estado-Aforo { background-color: var(--color-aforo); color: white; }
.estado-USA { background-color: var(--color-usa); color: white; }
.estado-Declarar { background-color: var(--color-declarar); color: white; }
.estado-Entregado { background-color: var(--color-entregado); color: white; }

.min-w-25 {
    min-width: 25%!important
}

.min-w-50 {
    min-width: 50%!important
}

.min-w-75 {
    min-width: 75%!important
}

.min-w-100 {
    min-width: 100%!important
}

.min-w-auto {
    min-width: auto!important
}

.min-w-1px {
    min-width: 1px!important
}

.min-w-2px {
    min-width: 2px!important
}

.min-w-3px {
    min-width: 3px!important
}

.min-w-4px {
    min-width: 4px!important
}

.min-w-5px {
    min-width: 5px!important
}

.min-w-6px {
    min-width: 6px!important
}

.min-w-7px {
    min-width: 7px!important
}

.min-w-8px {
    min-width: 8px!important
}

.min-w-9px {
    min-width: 9px!important
}

.min-w-10px {
    min-width: 10px!important
}

.min-w-15px {
    min-width: 15px!important
}

.min-w-20px {
    min-width: 20px!important
}

.min-w-25px {
    min-width: 25px!important
}

.min-w-30px {
    min-width: 30px!important
}

.min-w-35px {
    min-width: 35px!important
}

.min-w-40px {
    min-width: 40px!important
}

.min-w-45px {
    min-width: 45px!important
}

.min-w-50px {
    min-width: 50px!important
}

.min-w-55px {
    min-width: 55px!important
}

.min-w-60px {
    min-width: 60px!important
}

.min-w-65px {
    min-width: 65px!important
}

.min-w-70px {
    min-width: 70px!important
}

.min-w-75px {
    min-width: 75px!important
}

.min-w-80px {
    min-width: 80px!important
}

.min-w-85px {
    min-width: 85px!important
}

.min-w-90px {
    min-width: 90px!important
}

.min-w-95px {
    min-width: 95px!important
}

.min-w-100px {
    min-width: 100px!important
}

.min-w-125px {
    min-width: 125px!important
}

.min-w-150px {
    min-width: 150px!important
}

.min-w-175px {
    min-width: 175px!important
}

.min-w-200px {
    min-width: 200px!important
}

.min-w-225px {
    min-width: 225px!important
}

.min-w-250px {
    min-width: 250px!important
}

.min-w-275px {
    min-width: 275px!important
}

.min-w-300px {
    min-width: 300px!important
}

.min-w-325px {
    min-width: 325px!important
}

.min-w-350px {
    min-width: 350px!important
}

.min-w-375px {
    min-width: 375px!important
}

.min-w-400px {
    min-width: 400px!important
}

.min-w-425px {
    min-width: 425px!important
}

.min-w-450px {
    min-width: 450px!important
}

.min-w-475px {
    min-width: 475px!important
}

.min-w-500px {
    min-width: 500px!important
}

.min-w-550px {
    min-width: 550px!important
}

.min-w-600px {
    min-width: 600px!important
}

.min-w-650px {
    min-width: 650px!important
}

.min-w-700px {
    min-width: 700px!important
}

.min-w-750px {
    min-width: 750px!important
}

.min-w-800px {
    min-width: 800px!important
}

.min-w-850px {
    min-width: 850px!important
}

.min-w-900px {
    min-width: 900px!important
}

.min-w-950px {
    min-width: 950px!important
}

.min-w-1000px {
    min-width: 1000px!important
}

.min-h-unset {
    min-height: unset!important
}

.min-h-25 {
    min-height: 25%!important
}

.min-h-50 {
    min-height: 50%!important
}

.min-h-75 {
    min-height: 75%!important
}

.min-h-100 {
    min-height: 100%!important
}

.min-h-auto {
    min-height: auto!important
}

.min-h-1px {
    min-height: 1px!important
}

.min-h-2px {
    min-height: 2px!important
}

.min-h-3px {
    min-height: 3px!important
}

.min-h-4px {
    min-height: 4px!important
}

.min-h-5px {
    min-height: 5px!important
}

.min-h-6px {
    min-height: 6px!important
}

.min-h-7px {
    min-height: 7px!important
}

.min-h-8px {
    min-height: 8px!important
}

.min-h-9px {
    min-height: 9px!important
}

.min-h-10px {
    min-height: 10px!important
}

.min-h-15px {
    min-height: 15px!important
}

.min-h-20px {
    min-height: 20px!important
}

.min-h-25px {
    min-height: 25px!important
}

.min-h-30px {
    min-height: 30px!important
}

.min-h-35px {
    min-height: 35px!important
}

.min-h-40px {
    min-height: 40px!important
}

.min-h-45px {
    min-height: 45px!important
}

.min-h-50px {
    min-height: 50px!important
}

.min-h-55px {
    min-height: 55px!important
}

.min-h-60px {
    min-height: 60px!important
}

.min-h-65px {
    min-height: 65px!important
}

.min-h-70px {
    min-height: 70px!important
}

.min-h-75px {
    min-height: 75px!important
}

.min-h-80px {
    min-height: 80px!important
}

.min-h-85px {
    min-height: 85px!important
}

.min-h-90px {
    min-height: 90px!important
}

.min-h-95px {
    min-height: 95px!important
}

.min-h-100px {
    min-height: 100px!important
}

.min-h-125px {
    min-height: 125px!important
}

.min-h-150px {
    min-height: 150px!important
}

.min-h-175px {
    min-height: 175px!important
}

.min-h-200px {
    min-height: 200px!important
}

.min-h-225px {
    min-height: 225px!important
}

.min-h-250px {
    min-height: 250px!important
}

.min-h-275px {
    min-height: 275px!important
}

.min-h-300px {
    min-height: 300px!important
}

.min-h-325px {
    min-height: 325px!important
}

.min-h-350px {
    min-height: 350px!important
}

.min-h-375px {
    min-height: 375px!important
}

.min-h-400px {
    min-height: 400px!important
}

.min-h-425px {
    min-height: 425px!important
}

.min-h-450px {
    min-height: 450px!important
}

.min-h-475px {
    min-height: 475px!important
}

.min-h-500px {
    min-height: 500px!important
}

.min-h-550px {
    min-height: 550px!important
}

.min-h-600px {
    min-height: 600px!important
}

.min-h-650px {
    min-height: 650px!important
}

.min-h-700px {
    min-height: 700px!important
}

.min-h-750px {
    min-height: 750px!important
}

.min-h-800px {
    min-height: 800px!important
}

.min-h-850px {
    min-height: 850px!important
}

.min-h-900px {
    min-height: 900px!important
}

.min-h-950px {
    min-height: 950px!important
}

.min-h-1000px {
    min-height: 1000px!important
}

/* ========== BACKGROUND LIGHT COLORS ========== */
/* Versiones light de los colores de Bootstrap con la notación .bg-light-{color} */

.bg-light-primary {
    background-color: #cfe2ff !important;
    color: #084298 !important;
}

.bg-light-secondary {
    background-color: #e2e3e5 !important;
    color: #41464b !important;
}

.bg-light-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.bg-light-danger {
    background-color: #f8d7da !important;
    color: #842029 !important;
}

.bg-light-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}

.bg-light-info {
    background-color: #cff4fc !important;
    color: #055160 !important;
}

.bg-light-dark {
    background-color: #e2e3e5 !important;
    color: #212529 !important;
}

.snackbar-container > p {
    line-height: 1.5em !important;
}