/* ===== RoutingList ===== */

:root{
  --rl-search-w: 300px;   /* ancho fijo como en Órdenes */
  --rl-search-h: 40px;    /* altura de la píldora */
  --rl-search-btn: 32px;  /* diámetro del botón de la lupa */
}

/* Comentado - márgenes negativos que interfieren con scroll */
/* .routing-page {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: -1.5rem;
} */

.routing-list-container {
  /* CSS Grid Layout: 3 filas (header, tabla auto-escalable, paginador) */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;

  /* Altura dinámica: resta navbar */
  height: calc(100vh - 80px);
  min-height: 300px;
  max-height: 100vh;

  width: 100%;
  padding: 16px;

  
  color: #000000;
}

/* === FILA 1: Header Section (Título + Botonera) === */
.routing-header-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-row: 1;
}

.routing-header-section h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: #000000;
  
}

/* === FILA 2: Tabla Section (Auto-Escala Verticalmente) === */
.routing-table-section {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #eef0f3;
}

/* === FILA 3: Paginador Section === */
.routing-paginator-section {
  grid-row: 3;
  overflow: visible;
  position: relative;
  z-index: 100;
}

/* === RESPONSIVE BREAKPOINTS === */

/* Tablet y móvil */
@media (max-width: 768px) {
  .routing-list-container {
    height: calc(100vh - 60px);
    padding: 8px;
    gap: 8px;
  }

  .routing-header-section h1 {
    font-size: 1.25rem;
  }

  .routing-toolbar.routing-toolbar--orders {
    justify-content: flex-start;
    gap: 6px;
  }
}

/* Pantallas grandes (4K) */
@media (min-width: 1920px) {
  .routing-list-container {
    height: calc(100vh - 100px);
    max-width: 1800px;
    margin: 0 auto;
  }
}

.routing-table-wrapper{
  overflow-x: auto;
  overflow-y: visible;   /* <- antes era auto */
  padding-bottom: 0;
}

.routing-table-list {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  min-width: 1000px;
}

/* THEAD */
.routing-table-list thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  color: #2c2c2c;
  font-size: 14px;
  font-weight:  600;   /* más negrita */
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
}

/* Columnas especiales */
.routing-table-list th:first-child,
.routing-table-list td:first-child {
  width: 40px;
  padding-left: 24px;
  text-align: center;
}
.routing-table-list th:last-child,
.routing-table-list td:last-child {
  width: 56px;
  padding-right: 24px;
  text-align: right;
}

/* Filas: planas, sin hover */
.routing-table-list tbody tr {
  background: #fff;
  cursor: default;
}
.routing-table-list tbody td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f0f2f5;
}
/* Eliminamos hover */
.routing-table-list tbody tr:hover td {
  background: #fff;
}

/* Checkbox */
.routing-table-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ID */
.routing-table-list tbody td:nth-child(2) { min-width: 110px; }

/* Nombre routing */
.routing-table-list tbody td:nth-child(3) {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge estatus */
.status-badge-routing {
  display: inline-block;
  min-width: 120px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight:  600;
  color: #fff;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;
  padding-right: 1.25em;
  padding-left: 1.25em;
  padding: 0.55em 0.75em 0.6em 0.75em;
  font-size: 74%;
}
.status-badge-routing.planificada     { background-color: #6c757d; }
.status-badge-routing.loaded_orders   { background-color: #53B66C; }
.status-badge-routing.loaded_vehicles { background-color: #53B66C; }
.status-badge-routing.in_transit      { background-color: #602166; }
.status-badge-routing.completed       { background-color: #53B66C; }
.status-badge-routing.created         { background-color: #53B66C; }
.status-badge-routing.routing_end     { background-color: #53B66C ; }
.status-badge-routing.routing_start   { background-color: #53B66C; }

/* Flecha */
.arrow-button {
  background: none;
  border: none;
  font-size: 18px;
  color: #777;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: none; /* sin hover */
}
.arrow-button:hover {
  transform: none;
  color: #777;
  background: none;
}
.arrow-button:focus { outline: none; }

/* Responsive */
@media (max-width: 1280px) {
  .routing-table-list { min-width: 900px; }
}
@media (max-width: 1024px) {
  .routing-table-list { min-width: 820px; }
}


/* === Distribución tipo Órdenes === */

/* Fila superior (botón principal a la derecha) */
.routing-headerbar{
  display:flex; align-items:center; padding: 0 24px 8px 0;
}
.rh-spacer{ flex:1; }
.rh-right{ display:flex; gap:12px; }

/* Fila inferior: alineada a la derecha con Filtros + Búsqueda + More */
.routing-toolbar.routing-toolbar--orders{
  display:flex; align-items:center; gap:8px;
  justify-content:flex-end;
  /* padding: 0 24px 12px 24px; */
  flex-wrap:wrap;
  margin-bottom: 12px;
}

/* Botón oscuro redondeado (como los de Órdenes) */
.btn-routing {
  display:flex!important; 
  align-items:center!important;
}

.btn-routing .btn-icon { display:inline-flex; margin-right:8px; line-height:0; }
.btn-routing .btn-icon svg { display:block; }

/* Buscar (píldora) */
.orders-searchbox{
  position: relative;
  width: 320px; max-width: 44vw;
}
.orders-search-input{
  /* width: 100%; height: 36px; padding: 0 38px 0 14px;
  border: 1px solid #eef0f3; border-radius: 999px;
  background: #fff; color: #000000; outline: none; */
  background: none;
  outline: initial !important;
  border: 1px solid #8f8f8f;
  border-radius: 50px;
  height: 40px;
  padding: 0.75rem 1.3rem 0.6rem 1.3rem;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #303030;
}
.orders-search-input::placeholder{ color:#9aa0a6; }
.orders-search-btn{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: #f3f4f6; width: 28px; height: 28px;
  border-radius: 999px; display: grid; place-items: center; cursor: pointer;
}

/* Botón de overflow (tres puntos) */
.more-btn{
  background:#f3f4f6; border:1px solid #eef0f3; color:#000000;
  width:36px; height:36px; border-radius:50%; line-height:0; cursor:pointer;
}

/* Pills de filtros activos debajo ocupando todo el ancho */
.routing-toolbar.routing-toolbar--orders .rf-summary{
  flex-basis: 100%;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top: 4px;
}
.rf-pill{
  background:#f3f4f6; color:#000000; border:1px solid #eef0f3;
  border-radius:999px; padding:2px 8px; font-size:12px;
}
.rf-clear{ background:none; border:none; color:#6b7280; font-size:12px; cursor:pointer; text-decoration:underline; }

/* Responsive: en móviles el botón principal queda arriba, y debajo Filtros + búsqueda en columna */
@media (max-width: 768px){
  .routing-headerbar{ padding: 0 16px 8px 16px; }
  .routing-toolbar.routing-toolbar--orders{ justify-content: flex-start; padding: 0 16px 12px 16px; }
  .orders-searchbox{ width: 100%; max-width: 100%; }
  .more-btn{ display:none; }
}

/* Empty state centrado */
.routing-table-list tbody tr.empty-row td{
  text-align:center !important;
  padding:48px 16px;
  color:#6b7280;
  background:#fff;
}

.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.empty-title{
  margin:0;
  font-weight:  600;
  color:#000000;
}

.empty-sub{
  margin:0;
}

.empty-btn{
  margin-top:6px;
  border:0;
  padding:8px 14px;
  border-radius:12px;
  font-weight:  600;
  cursor:pointer;
  background:#000000;
  color:#fff;
}

.empty-btn:hover{
  background:#000000;
}

/* ===== Columna "Ver más" (match Órdenes) ===== */
.routing-table-list th.col-more,
.routing-table-list td.col-more{
  width:186px;                 
  padding-right: 24px;         
  text-align: left;           
}

/* Botón de los tres puntos */
.more-cell-btn{
  background: transparent;
  border: 0;
  padding: 0 6px;
  line-height: 1;
  font-size: 20px;             /* tamaño de los puntos */
  color: #6b7280;              /* gris como Órdenes */
  cursor: pointer;
  border-radius: 8px;
}

/* Sin hover llamativo, solo consistente con la UI */
.more-cell-btn:hover,
.more-cell-btn:focus{
  color: #6b7280;
  background: transparent;
  outline: none;
}

.routing-pagination{
  padding: 8px 24px 0 24px;
  overflow: hidden;      /* <- por si algo intenta salirse */
}

/* El Pagination original pone position:absolute en el <Nav>.
   Lo neutralizamos para evitar scrolls y lo alineamos a la derecha */
.routing-pagination .pagination{
  position: static !important;
  margin: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Algunos clones de Pagination ponían un bloque con bottom:-40px.
   Esto lo deja estático para que no "cuelgue" y genere scroll. */
.routing-pagination [style*="bottom:-40px"]{
  position: static !important;
  bottom: auto !important;
}


/* === RoutingList – parche paginador (solo CSS) === */

/* 1) Que NO recorte el menú y tenga stacking propio */
.routing-pagination{
  overflow: visible !important;   /* <- clave: antes estaba hidden */
  position: relative;             /* crea stacking context */
  z-index: 100;                   /* por encima de tbody/thead */
}

/* 2) Neutralizar cualquier absolute inline del PaginationV2 */
.routing-pagination [style*="position:absolute"]{
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* 3) El <nav> a la derecha pero sin posicionamiento absoluto */
.routing-pagination .pagination{
  position: static !important;
  margin: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* 4) Asegurar que el wrapper de la tabla no recorte hacia abajo */
.routing-table-wrapper{
  overflow-y: visible !important;
  overflow-x: auto; /* conservamos el scroll horizontal */
}

/* 5) El menú del dropdown SIEMPRE por encima y sin translate 3d */
.routing-pagination .dropdown-menu{
  position: absolute;         /* anclado al toggle */
  z-index: 5000 !important;   /* > thead sticky, filas, sidebars */
  transform: none !important; /* evita stacking raro de Popper */
  will-change: auto !important;
}

/* 6) Por si el thead sticky tapa: mantenerlo bajo el dropdown */
.routing-table-list thead th{ z-index: 2; }

.portal-actions-menu-routing {
  position: absolute!important;
  z-index: 2000!important;
  background: white!important;
  border-radius: 0.5rem!important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2)!important;
  padding: 0.25rem 0!important;
  width: 160px!important;
  font-size: 13px!important;
  overflow: hidden!important;
}

.portal-actions-menu-routing button {
  display: block!important;
  padding: 0.5rem 1rem!important;
  width: 100%!important;
  text-align: left!important;
  border: none!important;
  background: none!important;
  font-weight:  600!important;
  cursor: pointer!important;
  color: #333!important;
}

.dropdown-menu.show.portal-actions-menu-routing.pad-r-0 {
  padding: 0!important;
}




.portal-actions-menu-routing button:hover {
  background-color: #ececec!important;
}




:routing-form{
  --ink:#000000; 
  --ink-difuminated: rgba(35, 32, 63, .3);  /* azul principal (default) */
  --ink-2:#602166;   /* azul hover */
  --brand:#000000;   
  --brand-2:#000000; 
  --brand-ring: red;
  --bg-soft:#f7f8fa;
  --muted:#6b7280;
  --card:#ffffff;
  --line:#eef0f3;
  --panel-min-h: 25.2rem;
  --col-addr-min: 16.38rem;
  --panel-fixed-h: 32.02rem;
}

/* ====== CONTAINER ====== */

.routing-form {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  /* height: 100vh; */ /* Comentado para permitir scroll */
  max-width: 100%;
  /* overflow-x: hidden; */ /* Comentado para permitir scroll */
  box-sizing: border-box;
}

.routing-form *,
.routing-form *::before,
.routing-form *::after {
  box-sizing: border-box;
}

.routing-form-container {
  /* height: 100%;
  max-width: 100%;
  overflow-x: hidden; */
}

.routing-form.fullheight .routing-main {
  flex: 1 1 auto;
  /* height: 100%;
  min-height: 0;
  overflow: hidden; */
}

/* Comentado - clase fullheight que interfiere con scroll */
/* .routing-form.fullheight {
  display: flex;
  flex-direction: column;
  margin-top: 0;
} */

/* Comentado - clase fullheight que interfiere con scroll */
/* .routing-form.fullheight .routing-form-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
} */

/* Comentado para permitir scroll visible */
/* .routing-form.fullheight *::-webkit-scrollbar {
  display: none !important;
}
.routing-form.fullheight * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
} */

/* Forzar que la fila principal crezca con el alto visible de la pantalla */


.routing-form.fullheight .routing-main {
  flex: 1 1 auto !important;
  /* height: 100% !important;
  min-height: 0 !important;
  max-height: calc(100vh - 190px) !important; /* 👈 AJUSTA ESTE VALOR SI HACE FALTA */
  /* overflow: hidden;  */

}

.routing-form.fullheight .ingresos-actions .open-modal-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 0;
  line-height: 0;
}

.routing-form.fullheight .ingresos-actions .open-modal-button svg,
.routing-form.fullheight .ingresos-actions .open-modal-button i {
  width: 28px !important;
  height: 28px !important;
  font-size: 28px !important;
  display: block;
  pointer-events: none;
}

/* Tooltips removidos - ahora usando MagicTooltip */

/* Botón del engrane (área de click uniforme) */
.routing-form .btn-settings-new {
  width: 38px;
  height: 38px;
  padding: 0;
  /* display: inline-flex; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* border: 2px solid black; */
  border: none;
}
.routing-form .btn-settings-new svg {
  width: 20px;
  height: 20px;
  /* border: 2px solid red; */
}









/* ====== END CONTAINER ====== */

/* ====== HEADER ====== */
.routing-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

/* .routing-header h1 {
  padding-bottom: 0!important;
}

.routing-header h1 span {
  margin: 0 0 12px 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: #000000;
  
} */
/* .routing-header .routing-actions {
  display: flex; gap: 10px;
}
.routing-header .save-button {
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: .6rem 1rem;
  border-radius: 12px;
  font-weight:  600;
  transition: transform .06s ease, box-shadow .12s ease, background .2s ease;
}
.routing-header .save-button:hover { background: var(--ink-2); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.routing-header .save-button:active { transform: translateY(1px); } */

/* ====== END HEADER ====== */

/* ====== ROUTING TOPBAR ====== */

/* ===== TOPBAR LAYOUT ===== */
.routing-topbar{
  display: grid;
  grid-template-columns: 1fr 2fr; /* izq pequeño, der amplio */
  gap: 16px;
  margin-bottom: 18px;
}

.routing-topbar{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 15px!important;
  margin-bottom: 12px;
  background: var(--card);
  border-radius: 14px;
  padding: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1280px){
  .routing-topbar{
    grid-template-columns: 1fr;   
  }
}

.routing-topbar > * { box-sizing: border-box; }


/* Responsive */
@media (max-width: 1280px){
  .routing-topbar{
    grid-template-columns: 1fr;
  }
  .config-row{
    grid-template-columns: 1fr 1fr; /* 2 columnas en pantallas medianas */
  }
  .config-row .config-field:nth-child(4){
    grid-column: auto; /* vuelve al flujo normal */
  }
}

@media (max-width: 768px){
  .config-row{
    grid-template-columns: 1fr; /* 1 columna en móvil */
  }
}

.routing-topbar{ margin-bottom: 12px !important; }

/* Caja izquierda: Ingresos */
.ingresos-box{
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.ingresos-box .box-label{
  font-weight:  600;
  color: var(--ink);
  font-size: 14px;
}
.ingresos-actions{
  display: inline-flex;
  gap: 10px;
}
.ingresos-actions .open-modal-button{
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* Caja derecha: Configuración */
.config-box{
  
}
.config-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.config-field strong{
  color: var(--ink-2);
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}
.config-field .pinit-input{
  height: 42px;
}

/* Cluster aparece como 4ta columna cuando aplica */
.config-row .config-field:nth-child(4){
  grid-column: 1 / -1; /* en desktop lo hacemos full si prefieres */
}

/* Tooltips simples removidos - ahora usando MagicTooltip */



/* ===== Resumen de opciones avanzadas ===== */
.ao-summary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  /* padding: 8px; */
  background: #f8f8f8;
  border: 1px dashed var(--brand);
  border-radius: 12px;
}

.ao-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  background: #f3f0ff;
  border: 1px solid #e9e5ff;
  border-radius: 999px;
  line-height: 1;
}

.ao-edit{
  margin-left: auto;
  border: 1px solid #e7e9f2;
  background: #fff;
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:  600;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.ao-edit:hover{
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.ao-edit:active{ transform: translateY(1px); }

/* Pequeño ajuste para que el resumen ocupe 2 columnas como tarjeta */
.config-field.span-2{
  grid-column: span 2;
}

/* En pantallas medianas/pequeñas el resumen cae debajo de Origen */
@media (max-width: 1280px){
  .config-field.span-2{ grid-column: 1 / -1; }
}


/* ===== Ingresos sin hueco (modo compacto) ===== */
.ingresos--compact {
  /* quitamos “sentir” de tarjeta alta cuando sólo hay 3 botones */
  padding: 12px;
}
.ingresos--compact .ingresos-actions { align-items: center; }
.ingresos--compact .ingresos-hint {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight:  600;
  white-space: nowrap;
  opacity: .85;
}

/* ===== Config aplicada: look sólido (sin dashed) ===== */
.ao-summary{
  /* padding: 10px 12px; */
  background: #f8f8f8;                 /* más limpio que #fafbff */
  border: 1px solid #e7e9f2;            /* sólido sutil */
  border-radius: 12px;
}
.ao-chip{
  background: #fff;                     /* chip claro sobre fondo suave */
  border: 1px solid #e7e9f2;
  color: var(--ink);
}



/* (Opcional) quitar por completo los dashed del estilo anterior si persistieran */
.config-field .ao-summary { border-style: solid !important; }

/* === Ingresos: sin hueco y con título dinámico === */
.ingresos--compact .ingresos-hint{ display:none !important; }          /* quitamos el renglón extra */
.ingresos--compact { padding-bottom: 12px; }                            /* compacta */
.ingresos-box { gap: 8px; }                                             /* menos aire */
/* .ingresos-box .ingresos-actions { margin-top: 2px; } */

/* Cambia el texto del label SOLO en modo default sin tocar JSX */
.ingresos--compact .box-label{ font-size:0 !important; line-height:1; }
.ingresos--compact .box-label::after{
  content:"Elige cómo agregar órdenes";
  font-size:14px; font-weight:  600; color: var(--ink);
}

/* === Topbar más compacta (quita “franja” blanca perceptible) === */

.config-box{ padding-bottom: 10px; }
.config-row{ align-items: start; grid-auto-rows: min-content; }

/* === Configuración aplicada: look sólido y sin “espacio fantasma” === */
.config-field .ao-summary{
  margin-top: 2px;
  /* padding: 10px 12px; */
  background: #f8f8f8;
  border: 1px solid #e7e9f2;
  border-radius: 12px;
}
.config-field .ao-summary .ao-chip{
  background:#fff;
  border:1px solid #e7e9f2;
  color: var(--ink);
}

/* Evita altura extra por colapsado de márgenes dentro del contenedor */
.config-field .ao-summary > *:first-child{ margin-top: 0 !important; }
.config-field .ao-summary > *:last-child{ margin-bottom: 0 !important; }

/* === Ajustes finos visuales en esa franja === */
.config-field strong{ margin-bottom: 4px !important; }
.pinit-input{ margin: 0; } /* quita cualquier gap vertical heredado */

/* === Ajuste para eliminar el espacio sobrante en Ingresos === */
.ingresos-box {
  gap: 6px;                 
  padding-bottom: 8px;  
  padding: 2px;  
}

/* Cuando solo están los 3 botones (vista default), elimina el hueco */
.ingresos--compact .ingresos-hint {
  display: none !important;  /* quita la línea de texto extra */
}

/* Ajusta el label como “título dinámico” sin crear un renglón adicional */
.ingresos--compact .box-label {
  font-size: 0 !important;   /* oculta el texto original */
  line-height: 1;
}
.ingresos--compact .box-label::after {
  content: "Elige cómo agregar órdenes";
  font-size: 14px;
  font-weight:  600;
  color: var(--ink);
}



#app-container.no-padding-bottom {
  padding-bottom: 0 !important;
}


.config-box {
  margin-right: 1.25rem; 
}


/* ====== BOTONERA VISTAS ====== */

.routing-actions-inline {
  display:flex;
  gap:10px;
  align-items:center;       
}

.open-modal-button{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #000;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
  outline: none;
  line-height: 0;
}

.open-modal-button:hover {
  background-color: #e0e0e0;
}

.open-modal-button:active {
  transform: translateY(1px);
}

.open-modal-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 33, 102, 0.3);
}

.open-modal-button.active,
.open-modal-button[aria-pressed="true"] {
  background-color: #602166;
  border-color: #602166;
}

.open-modal-button.active:hover,
.open-modal-button[aria-pressed="true"]:hover {
  background-color: #602166;
}

.open-modal-button.active svg,
.open-modal-button.active i,
.open-modal-button[aria-pressed="true"] svg,
.open-modal-button[aria-pressed="true"] i {
  color: #fff !important;
}

.open-modal-button svg,
.open-modal-button i {
  font-size: 28px;
  color: #000;
  display: block;
  pointer-events: none;
  width: 28px;
  height: 28px;
}

/* .open-modal-button.active {
  background-color: #602166;
  box-shadow: 0 0 8px 0 8px rgba(38, 4, 115, 0.6);
} */

/* ====== END BOTONERA VISTAS ====== */






/* ====== END ROUTING TOPBAR ====== */



/* Begin Button View Styles */


.inline-scan-search {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 10px;
  align-items: center;
}

.inline-scan-search .scan-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.inline-scan-search .btn-add.inline {
  background-color: #000000;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 24px;
  font-weight:  600;
  cursor: pointer;
  transition: background 0.2s;
}

.inline-scan-search .btn-add.inline:hover {
  background-color: #000000;
}

.inline-tracking-search,
.inline-excel-search {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-tracking-search textarea,
.inline-excel-search textarea {
  width: 100%;
  height: 80px;
  padding: 12px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  resize: vertical;
}

.inline-tracking-search input[type="file"],
.inline-excel-search input[type="file"] {
  border: 1px dashed #ccc;
  padding: 8px;
  border-radius: 6px;
}

.inline-tracking-search .btn-search.inline,
.inline-excel-search .btn-search.inline,
.tracking-actions .btn-search.inline,
.excel-actions .btn-search.inline {
  align-self: flex-end;
  background-color: #53B66C;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 24px;
  font-weight:  600;
  cursor: pointer;
}

.inline-tracking-search .btn-search.inline:hover,
.inline-excel-search .btn-search.inline:hover,
.tracking-actions .btn-search.inline:hover,
.excel-actions .btn-search.inline:hover {
  background-color: #53B66C;
}

/* Nuevos estilos para botón con Reactstrap */
.tracking-actions .btn-search-tracking,
.excel-actions .btn-search-tracking {
  align-self: flex-end;
  padding: 10px 18px;
  border-radius: 24px;
  font-weight:  600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tracking-actions .btn-search-tracking i,
.excel-actions .btn-search-tracking i {
  font-size: 16px;
}

.search-orders-bar {
  margin-bottom: 15px;
  text-align: right;
}

.search-orders-bar .search-orders-input {
  padding: 8px 12px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.routing-table h3 {
  color: #000000;
  /* padding: 12px 16px; */
  padding: 0 16px;
  font-size: 18px;
  font-weight:  600;
  /* margin: 0 0 6px; */
}

.routing-table table:not(.routing-table-list) {
  width: 100%;
  border-collapse: collapse;
}

.routing-table table th,
.routing-table table td {
  padding: 10px 14px;
  font-size: 14px;
}

.routing-table table th {
  background-color: #eeeeee;
  color: #333;
  text-align: left;
}

.routing-table table:not(.routing-table-list) tr:nth-child(even) {
  background-color: #f8f8f8;
}

.routing-map-placeholder p {
  font-size: 16px;
  color: #555;
}

/* .routing-map-placeholder {
  flex: 1;
  min-height: 400px;
} */

.geofence-control-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  padding-right: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 95%;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  /* flex-direction: column; */
  align-items: center;
}

.geofence-control-overlay .label {
  font-weight: 400;
  margin-bottom: 6px;
  color: #000000;
}

.geofence-control-overlay input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  outline: none;
}

.geofence-control-overlay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #602166;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.geofence-control-overlay input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #602166;
  border-radius: 50%;
  cursor: pointer;
}

.geofence-control-overlay .range-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}

/* Botón guardar dentro del geofence-control-overlay */
.save-button-inside-geofence {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.save-button-inside-geofence .btn {
  border-radius: 50px;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  font-size: 16px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 400;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-button-inside-geofence .btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px);
}

.save-button-inside-geofence .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.save-button-inside-geofence .btn i {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.save-button-inside-geofence .btn:hover i {
  transform: translateX(2px);
}

/* Botón guardar standalone (sin geofence) */
.map-save-button-standalone {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.map-save-button-standalone .btn {
  border-radius: 50px;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  font-size: 16px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 400;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-save-button-standalone .btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px);
}

.map-save-button-standalone .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.map-save-button-standalone .btn i {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.map-save-button-standalone .btn:hover i {
  transform: translateX(2px);
}

/* Responsive: en pantallas pequeñas */
@media (max-width: 768px) {
  .geofence-control-overlay {
    width: 90%;
    max-width: 100%;
    padding-right: 20px;
    flex-direction: column;
  }

  .save-button-inside-geofence {
    position: static;
    transform: none;
    margin-top: 12px;
    width: 100%;
    text-align: center;
  }

  .save-button-inside-geofence .btn {
    width: 100%;
    justify-content: center;
  }

  .map-save-button-standalone {
    bottom: 10px;
    right: 10px;
    left: 10px;
  }

  .map-save-button-standalone .btn {
    width: 100%;
    justify-content: center;
  }
}



.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.pagination-controls button {
  background: #2a1b5f;
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  margin: 0 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination-controls span {
  font-weight:  600;
}

/* ====== SEARCH BARS ====== */
.search-orders-bar { margin-bottom: 8px; text-align: right; }
.search-orders-input {
  padding: 10px 12px; width: 320px;
  border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; outline: none;
  transition: border .12s ease, box-shadow .12s ease, transform .06s ease;
}
.search-orders-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(107,70,193,.12);
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 0;
}
.pagination-controls button {
  background: #000000;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight:  600;
}
.pagination-controls button:disabled {
  opacity: .45; cursor: default;
}
.pagination-controls span { font-weight:  600; color: #4b5563; }

/* Mapa con borde punteado sutil (ya traes dashed, lo afinamos) */
.routing-map-placeholder {
  border: 1px dashed #d1d5db;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}


/* ====== LAYOUT PRINCIPAL ====== */
.routing-main {
  display: flex;
  gap: 20px;
  align-items: stretch;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 450px;
  height: 70vh;
  /* margin-top: 18px; */
}

.routing-table {
  padding: 1rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  min-height: 450px !important;
  min-width: 600px !important;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* overflow: hidden; */
}

/* Checkbox visible */
.routing-table input[type="checkbox"] {
  width: 16px; height: 16px; vertical-align: middle; accent-color: var(--ink);
}

/* ====== VISTAS “tracking / excel / scan” ====== */
.inline-tracking-search,
.inline-excel-search,
.inline-scan-search {
  padding: 16px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; gap: 10px; align-items: center;
}
.inline-tracking-search { flex-direction: column; align-items: stretch; }
.inline-excel-search  { flex-direction: row; }
.inline-tracking-search textarea {
  width: 100%; height: 140px; padding: 12px;
  border: 1px dashed #d1d5db; border-radius: 12px; resize: vertical;
}
.inline-excel-search input[type="file"] {
  border: 1px dashed #d1d5db; padding: 8px; border-radius: 12px;
}
.scan-input {
  flex: 1; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px;
}
.btn-search.inline, .btn-add.inline {
  background: var(--ink); color: #fff; border: 0;
  padding: 10px 16px; border-radius: 999px; font-weight: 400; cursor: pointer;
  transition: background .2s ease, transform .06s ease, box-shadow .12s ease;
}
.btn-search.inline:hover, .btn-add.inline:hover { background: var(--ink-2); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.btn-search.inline:active, .btn-add.inline:active { transform: translateY(1px); }

/* ====== ONBOARDING (vista inicial) ====== */
.onboarding-hint{
  flex: 1;                          /* ocupa el alto disponible del panel */
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
  background: var(--card);
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  color: var(--muted);
}

.onboarding-hero{
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 80% at 50% 50%, rgba(101,84,245,0.12), rgba(101,84,245,0.04));
  border: 2px dashed var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin-bottom: 4px;
}
.onboarding-hero svg{
  width: 56px;
  height: 56px;
  fill: #602166;
  opacity: .9;
}

.onboarding-title{
  margin: 0;
  color: var(--ink);
  font-weight:  600;
  font-size: 18px;
}
.onboarding-sub{
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
.onboarding-alt{
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.onboarding-cta{
  margin-top: 6px;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight:  600;
  cursor: pointer;
  transition: background .18s ease, transform .06s ease, box-shadow .12s ease;
}
.onboarding-cta:hover{ background: var(--ink-2); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.onboarding-cta:active{ transform: translateY(1px); }




.routing-map-placeholder {
  width: 60%;
  min-height: 400px;
  display: flex;
  min-height: var(--panel-min-h);
  border: 1px dashed #d1d5db;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Asegurar que el mapa ocupe todo el alto disponible */
.routing-map-placeholder > * { flex: 1; }                 
.routing-map-placeholder .leaflet-container {           
  height: 100% !important; 
  border-radius: 8px;
}

@media (max-width: 1200px) {
  .routing-main {
    flex-direction: column;
  }
  .routing-table,
  .routing-map-placeholder {
    width: 100%;
  }
  .routing-table {
    min-width: auto !important;
  }
  .routing-map-placeholder {
    height: 500px;
  }
  .geofence-control-overlay {
    flex-direction: column;
    padding-right: 20px;
  }
  .slider-routing-map {
    width: 100%;
  }
  .save-button-inside-geofence {
    position: static;
    transform: none;
    margin-top: 12px;
    width: 100%;
    text-align: center;
  }
  .save-button-inside-geofence .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ====== MAP UI (slider overlay) - ESTILOS DUPLICADOS COMENTADOS ====== */
/* Comentado - ahora se usa la definición de arriba con padding-right: 160px (líneas 672-751) */
/*
.geofence-control-overlay {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); width: 92%; max-width: 420px; z-index: 10;
}
.geofence-control-overlay .label { font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.geofence-control-overlay input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 6px; background: #e5e7eb; border-radius: 999px; outline: none;
}
.geofence-control-overlay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; background: var(--brand); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(107,70,193,.18);
}
.geofence-control-overlay input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; background: var(--brand); border-radius: 50%; cursor: pointer;
}
*/


/* ====== PAGINACIÓN ====== */
.pagination-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 0;
}
.pagination-controls button {
  background: var(--ink); color: #fff; border: none;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight:  600;
  transition: background .2s ease, transform .06s ease, box-shadow .12s ease;
}
.pagination-controls button:hover:not(:disabled) { background: var(--ink-2); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.pagination-controls button:disabled { opacity: .45; cursor: default; }
.pagination-controls span { font-weight:  600; color: #4b5563; }


.btn-danger {
  padding: 6px 10px;
  border: 1px solid #cc3344;
  background: #ffecec;
  color: #cc3344;
  cursor: pointer;
  border-radius: 8px;
  transition: transform .05s ease, background .15s ease;
  border-radius: 50px;
  outline: initial !important;
  box-shadow: none !important;
  font-size: .8rem!important;
  padding: .75rem 1.3rem .6rem!important;
  /* color: white!important; */
      background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:active { transform: scale(0.98); }
.btn-danger:disabled { 
  opacity: .5; 
  cursor: not-allowed; 

    background-color: #dc3545;
    border-color: #dc3545;
}

/* Punto circular morado para el ORIGEN */
.origin-div-icon .origin-dot {
  width: 16px;
  height: 16px;
  background: #000000;           /* color del origen */
  border: 3px solid #ffffff;     /* borde para contraste */
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(35, 32, 63, 0.35); /* halo sutil */
}

/* Barra de escaneo embebida (zona roja de tu captura) */
.scanbar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
  max-width: 720px; /* ajusta si quieres más ancho */
  margin-bottom: 8px;
}

.scanbar-input{
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px dashed #d9dbe0;          /* guiño al look de tu input de ejemplo */
  border-radius: 12px;
  background: #fff;
  color: #000000;
  outline: none;
}

.btn-add.inline{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #000000;
  color: #fff;
  border: none;
  cursor: pointer;
}

.btn-add.inline:active { transform: translateY(0); }
.btn-add.inline:disabled { opacity: .6; cursor: default; }

/* Opcional: marca activo el botón cámara cuando estamos en selected */
.open-modal-button.scan[aria-pressed="true"]{
  background: #000000;
  color: #fff;
}

/* ====== HOMOLOGACIÓN TABLA (igual a RoutingList) ====== */
/* Coloca este bloque AL FINAL del archivo para que gane la cascada */

.routing-table-wrapper-form {
  overflow: auto;
  overflow-y: auto;
  padding: 8px 0;
  width: 100%;
  border: 0;
  /* scrollbar-gutter: stable; */
  max-height: 340px;
}

.routing-table-list {
  width: 100%;
  border-collapse: collapse !important;   /* fuerza tabla plana */
  border-spacing: 0 !important;
  background: transparent;
  min-width: 1000px;
  box-shadow: none;                        /* sin sombra tipo card */
}

/* THEAD */
.routing-table-list thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  color: #000000;
  font-size: 14px;
  font-weight:  600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Columnas especiales */
.routing-table-list th:first-child,
.routing-table-list td:first-child {
  width: 40px;
  padding-left: 24px;
  text-align: center;
}
.routing-table-list th:last-child,
.routing-table-list td:last-child {
  width: 56px;
  padding-right: 24px;
  text-align: right;
}

/* Filas planas, sin hover fancy */
.routing-table-list tbody tr {
  background: #fff;
  cursor: default;
  box-shadow: none;
  transform:none !important;
  transition:none !important;
}
.routing-table-list tbody td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f0f2f5;
  background:#fff;
}

/* Checkbox */
.routing-table-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Responsive, igual que en RoutingList */
@media (max-width: 1280px) {
  .routing-table-list { min-width: 900px; }
}
@media (max-width: 1024px) {
  .routing-table-list { min-width: 820px; }
}

/* ==== HOMOLOGACIÓN ÓRDENES (tabla plana) ==== */
/* Aplica SOLO a la tabla de seleccionadas del Form */
.routing-table .routing-table-list {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent;
  min-width: 1000px;
  box-shadow: none !important;
}

.routing-table .routing-table-list thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff !important;
  color: #000000;
  font-size: 14px;
  font-weight:  600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.routing-table .routing-table-list th:first-child,
.routing-table .routing-table-list td:first-child {
  width: 40px;
  padding-left: 24px;
  text-align: center;
}
.routing-table .routing-table-list th:last-child,
.routing-table .routing-table-list td:last-child {
  width: 56px;
  padding-right: 24px;
  text-align: right;
}

.routing-table .routing-table-list tbody tr {
  background: #fff !important;
  cursor: default;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.routing-table .routing-table-list tbody td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f0f2f5;
  background: #fff;
  border-left: none;
  border-right: none;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* sin highlight ni elevación al pasar el mouse */
.routing-table .routing-table-list tbody tr:hover td {
  background: #fff !important;
}

/* anula cebra heredada de otros estilos */
.routing-table .routing-table-list tr:nth-child(even),
.routing-table .routing-table-list tr:nth-child(even) td {
  background: #fff !important;
}

/* checkbox tamaño y cursor como Órdenes */
.routing-table .routing-table-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* responsive igual que Órdenes */
@media (max-width: 1280px) {
  .routing-table .routing-table-list { min-width: 900px; }
}
@media (max-width: 1024px) {
  .routing-table .routing-table-list { min-width: 820px; }
}

/* ====== EXCEL ONBOARDING (ahora usa MagicCard) ====== */
/* Estilos del wrapper, header, hero, title movidos a MagicCard */
/* Solo mantenemos: .excel-link, .excel-dropzone, .excel-file-chip, .excel-actions */

.excel-link{
  border: 0;
  background: none;
  color: var(--brand);
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  display: inline;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.excel-link:hover{
  color: var(--brand-2);
  text-decoration: underline;
}

.excel-dropzone{
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch; justify-content: center;
  border: 2px dashed var(--brand);
  border-radius: 12px;
  padding: 18px;
  background: #f8f8f8;
  cursor: pointer;
  min-height: 220px;
  transition: background .15s ease, box-shadow .2s ease;
}
.excel-dropzone:focus-within,
.excel-dropzone:hover{ background: #ececec; box-shadow: 0 6px 18px rgba(0,0,0,.06); }

.excel-drop-hint{
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.excel-file-chip{
  display: inline-flex; align-items: center; gap: 10px;
  justify-content: center; align-self: center;
  padding: 8px 12px; border-radius: 999px;
  background: #602166; color: #ffffff; font-weight:  600;
  border: 1px solid #602166;
}
.excel-file-chip .pill{
  margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.25); color: #ffffff; font-weight:  600; font-size: 12px;
}

.excel-preview{
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 12px;
  
  font-size: 13px;
  outline: none;
  background: #fff;
}

.excel-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  width: 100%;
}
.excel-help{ font-size: 12px; color: #6b7280; }

/* ====== TRACKING ONBOARDING (look Pinit, misma altura que mapa) ====== */
.tracking-onboarding{
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  min-height: var(--panel-min-h);
  overflow: hidden;
}

.tracking-header{
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 20px;
  flex-shrink: 0;
  border-bottom: 1px solid #f3f4f6;
}

.tracking-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px 20px;
  overflow: auto;
}

.tracking-footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding: 0 20px;
  flex-shrink: 0;
  border-top: 1px solid #f3f4f6;
}
.tracking-hero{
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 80% at 50% 50%, rgba(101,84,245,.12), rgba(101,84,245,.04));
  border: 2px dashed var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.tracking-hero i{
  font-size: 26px;
  color: #602166;
  opacity: .95;
}

.tracking-text-wrapper{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.tracking-title{
  margin: 0;
  color: var(--ink);
  font-weight:  600;
  font-size: 16px;
}

.tracking-sub{
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.tracking-textarea-wrapper{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px dashed var(--brand);
  border-radius: 12px;
  padding: 12px;
  background: #FFFFFF;
}

.tracking-textarea{
  flex: 1;
  min-height: 0;
  resize: none;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  outline: none;
}

.tracking-textarea:focus{
  outline: none;
  border: none;
  box-shadow: none;
}

.tracking-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  width: 100%;
}

.tracking-chip-container{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  pointer-events: none;
}

.tracking-chip{
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-weight:  600;
  font-size: 12px;
  border: 1px solid #c8e6d0;
}

/* ===== Selected: empty ===== */
.selected-panel.empty { flex: 1; }
.selected-empty{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 20px;
  background: var(--card);
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  color: var(--muted);
  min-height: var(--panel-min-h);
}

/* Header similar a tracking/excel */
.selected-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.selected-hero {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 80% at 50% 50%, rgba(101,84,245,.12), rgba(101,84,245,.04));
  border: 2px dashed var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.selected-hero i {
  font-size: 26px;
  color: #602166;
  opacity: .95;
}

.selected-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.selected-title {
  margin: 0;
  color: var(--ink);
  font-weight:  600;
  font-size: 16px;
}

.selected-sub {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

/* Wrapper para el input scanner */
.selected-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Botones CTA */
.selected-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-ghost{
  background: #fff;
  color: var(--ink);
  border: 1px solid #e7e9f2;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s ease, box-shadow .15s ease;
}
.btn-ghost:hover{ background: #ececec;  }

/* ===== Selected: toolbar + compact table ===== */
.selected-toolbar{
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 8px;
  padding: 10px 0px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.count-chip{
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f0ff;
  color: var(--ink-2);
  font-weight:  600;
  font-size: 12px;
  border: 1px solid #e9e5ff;
}
.toolbar-spacer{ flex: 1; }

/* quita el borde rojo de debug si lo tuvieras */
.routing-table-wrapper-form.no-debug-border { border: none !important; }

/* compacta y elimina scroll horizontal */
.table-compact{
  min-width: 0 !important;     /* anula 1000px */
  table-layout: fixed;          /* respeta colgroup */
  width: 100%;
}
.table-compact thead th{
  padding: 10px 12px !important;
  font-size: 13px !important;
}
.table-compact tbody td{
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.2;
}
.cell-address .ellipsis{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-address .ellipsis {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ajuste a los headers a los nombres cortos */
.table-compact th:first-child,
.table-compact td:first-child { width: 40px !important; padding-left: 16px !important; }
.table-compact th:last-child,
.table-compact td:last-child { width: 140px !important; padding-right: 16px !important; }


.routing-table-list.table-compact{
  table-layout: fixed;           
  min-width: 640px !important; 
}

/* anchos mínimos por columna (ajústalos si lo ves necesario) */
.table-compact .cell-tracking{
  min-width: 140px;  max-width: 160px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-compact .cell-address{
  min-width: 180px;  max-width: 220px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table-compact .cell-date{
  min-width: 110px;  max-width: 140px;
}

/* header pegajoso con borde que lo separa del contenido superior */
.routing-table .routing-table-list thead th{
  border-top: 1px solid var(--line);
  box-shadow: 0 1px 0 0 var(--line); /* subrayado sutil del header */
}

/* si quieres que la dirección NO se corte por ellipsis y dependa del scroll, usa esto: */
.cell-address .ellipsis{
  white-space: nowrap;          /* en una línea */
  overflow: hidden;            /* sin recorte */
  text-overflow: ellipsis;          /* sin … */
}

/* Input/Select base */
.pinit-input{
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border: 1px solid #E6E8F0;          /* gris claro tipo modal */
  border-radius: 8px;                  /* esquinas suaves */
  background: #fff;
  color: #000000;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: none;
  /* box-shadow: rgba(47, 42, 102, 0.14); */
}

.pinit-input:focus{
  border-color: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.pinit-input::placeholder{ color:#9CA3AF; }

/* estado de error, por si lo usas */
.pinit-input.is-invalid{
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}

.pinit-input:disabled{
  background: #F9FAFB;
  color:#6B7280;
  cursor: not-allowed;
}

/* Textarea con el mismo look */
.pinit-textarea{
  /* min-height: 220px; */
  padding: 12px;
  border: 1px solid #E6E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  resize: vertical;
}
.pinit-textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.scanbar-input.pinit-input{
  height: 42px;
  border-style: solid;                
}

.routing-stats select.pinit-input{
  height: 42px;
  padding-right: 36px;        
}

.table-compact .cell-address{ 
  min-width: var(--col-addr-min);     
}
.routing-table-list.table-compact{
  min-width: 960px !important;         
}

.cell-address .ellipsis{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}





/* El panel izquierdo scrollea solo su contenido cuando de verdad lo necesita */
.routing-table{
  display:flex; flex-direction:column; min-height:0; /* overflow:hidden; */ /* Comentado para permitir scroll */
}

/* Las vistas internas ocupan el alto y solo muestran scroll si es necesario */
.routing-table > .onboarding-hint,
.routing-table > .tracking-onboarding,
.routing-table > .magic-card,
.routing-table > .selected-panel{
  flex:1 1 auto; min-height:0 !important;
}

/* Map full height */
.routing-map-placeholder{ display:flex; align-items:stretch; }
.routing-map-placeholder > *{ flex:1 1 auto; min-height:0; }
.routing-map-placeholder .leaflet-container{ height:100% !important; }

/* 1) Congela la altura de la fila y evita que crezca */
.routing-main{
  /* height: var(--panel-fixed-h); */ /* Comentado para permitir scroll */
  /* min-height: var(--panel-fixed-h); */ /* Comentado para permitir scroll */
  /* max-height: var(--panel-fixed-h); */ /* Comentado para permitir scroll */
  /* overflow: hidden; */ /* Comentado para permitir scroll */
}

/* 2) Asegura que ambos paneles respeten esa altura */
.routing-table,
.routing-map-placeholder{
  /* height: 100%; */ /* Comentado para permitir scroll */
  min-height: 0;
  /* overflow: hidden; */ /* Comentado para permitir scroll */
}

/* 3) La vista "Selected" se comporta como layout en columna */
.selected-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;                   /* permite que el hijo con scroll calcule bien */
  /* overflow: hidden; */ /* Comentado para permitir scroll */
}

/* 4) El scroll SOLO en el contenedor de la tabla de órdenes */
.routing-table-wrapper-form{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* opcional: si quieres que aparezca siempre una pista de scroll */
  /* scrollbar-gutter: stable both-edges; */
}

/* 5) Mantén el mapa pegado a su contenedor */
.routing-map-placeholder .leaflet-container{
  height: 100% !important;
}

/* 6) (Opcional) que la barra de escaneo y la toolbar queden fijas arriba */
.scanbar,
.selected-toolbar{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  width: 100%;
}

/* 7) En móviles siempre mantener min-height de 450px */
@media (max-width: 1200px){
  .routing-main{
    min-height: 450px;
    max-height: none;
  }
}


/* ===== Pinit Scrollbars (drop-in) ===== */

/* Paleta y tamaños (puedes ajustar los valores) */
:root{
  --sb-size: 10px;                 /* grosor */
  --sb-radius: 999px;              /* pill */
  --sb-track: var(--bg-soft, #f7f8fa);
  --sb-track-bd: var(--line, #eef0f3);
  --sb-thumb: var(--ink);
  --sb-thumb-hover: var(--ink-2, #602166);
  --sb-thumb-active: #000000;
}

/* Aplica el skin a las zonas que scrollean dentro del form */
.routing-table-wrapper-form,
.selected-panel,
.tracking-onboarding,
.magic-card{
  /* estabilidad visual y buen comportamiento */
  /* scrollbar-gutter: stable both-edges; */
  overscroll-behavior: contain;

  /* Firefox */
  /* scrollbar-width: thin; */
  /* scrollbar-color: var(--sb-thumb) var(--sb-track); */

  /* Sombra interior suave tipo "scroll hint" */
  box-shadow:
    inset 0 10px 10px -12px rgba(0,0,0,.08),
    inset 0 -10px 10px -12px rgba(0,0,0,.08);
}

/* WebKit (Chrome/Edge/Safari) */
/*\n.routing-table-wrapper-form::-webkit-scrollbar,\n.selected-panel::-webkit-scrollbar,\n.tracking-onboarding::-webkit-scrollbar,\n.magic-card::-webkit-scrollbar{\n  width: var(--sb-size);\n  height: var(--sb-size);\n}\n\n.routing-table-wrapper-form::-webkit-scrollbar-track,\n.selected-panel::-webkit-scrollbar-track,\n.tracking-onboarding::-webkit-scrollbar-track,\n.magic-card::-webkit-scrollbar-track{\n  background: linear-gradient(#fff, #fff) padding-box,  relleno blanco \n              linear-gradient(var(--sb-track), var(--sb-track)) border-box;\n  border: 1px solid var(--sb-track-bd);\n  border-radius: var(--sb-radius);\n}\n\n.routing-table-wrapper-form::-webkit-scrollbar-thumb,\n.selected-panel::-webkit-scrollbar-thumb,\n.tracking-onboarding::-webkit-scrollbar-thumb,\n.magic-card::-webkit-scrollbar-thumb{\n  background: linear-gradient(180deg, var(--sb-thumb), var(--ink));\n  border-radius: var(--sb-radius);\n  border: 2px solid var(--sb-track);  crea \"pill\" y contraste \n}\n\n.routing-table-wrapper-form::-webkit-scrollbar-thumb:hover,\n.selected-panel::-webkit-scrollbar-thumb:hover,\n.tracking-onboarding::-webkit-scrollbar-thumb:hover,\n.magic-card::-webkit-scrollbar-thumb:hover{\n  background: linear-gradient(180deg, var(--sb-thumb-hover), var(--sb-thumb));\n}\n\n.routing-table-wrapper-form::-webkit-scrollbar-thumb:active,\n.selected-panel::-webkit-scrollbar-thumb:active,\n.tracking-onboarding::-webkit-scrollbar-thumb:active,\n.magic-card::-webkit-scrollbar-thumb:active{\n  background: var(--sb-thumb-active);\n}\n\n Esquinas (cuando hay scroll horizontal + vertical) \n.routing-table-wrapper-form::-webkit-scrollbar-corner,\n.selected-panel::-webkit-scrollbar-corner,\n.tracking-onboarding::-webkit-scrollbar-corner,\n.magic-card::-webkit-scrollbar-corner{\n  background: transparent;\n}\n*/\n*** End Patch

/* (Opcional) scrollbar compacto en pantallas chicas */
@media (max-width: 1024px){
  :root{ --sb-size: 8px; }
}

/* ===== Map Expand (Pinit style) ===== */
.routing-map-placeholder { position: relative; }

/* Botón tipo link/chip flotante */
.map-toggle-link{
  position: absolute;
  top: 26px; right: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e7e9f2;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-weight: 400 !important;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease, border-color .15s ease;
}
.map-toggle-link:hover{
  background: #fff;
  border-color: #dfe2f2;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}
.map-toggle-link:active{ transform: translateY(1px); }
.map-toggle-link[aria-pressed="true"]{
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(35,32,63,.16);
}
.map-toggle-link svg{ width: 16px; height: 16px; fill: currentColor; display:block; }
@media (max-width: 1280px){
  .map-toggle-link span{ display:none; } /* en chica deja sólo el ícono */
}

/* Layout: colapsa lista y deja el mapa al 100% */
.routing-main {
  transition: height .2s ease;
}

.routing-table,
.routing-map-placeholder {
  transition: width .3s ease, opacity .3s ease, min-width .3s ease, padding .3s ease;
  will-change: width, opacity;
}

.routing-main.is-map-expanded .routing-map-placeholder{
  width: 100% !important;
  min-height: 490px !important; /* Ensure height is maintained when expanded */
}

.routing-main.is-map-expanded .routing-table{
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
  /* evita que el scroll interno aparezca cuando está colapsado */
  overflow: hidden !important;
}

/* Asegura que el mapa ocupa todo el alto disponible (ya lo tenías) */
.routing-map-placeholder .leaflet-container{
  height: 100% !important;
  border-radius: 10px;
}

/* Hint visual cuando el mapa está expandido: borde sutil */
.routing-main.is-map-expanded .routing-map-placeholder{
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid var(--line);
}

/* Mobile: vuelve a layout vertical normal */
@media (max-width: 1200px){
  .routing-main.is-map-expanded .routing-map-placeholder{
    width: 100% !important;
  }
  .routing-main.is-map-expanded .routing-table{
    display: none; /* en móvil lo escondemos completamente */
  }
}


/* que el contenedor sea referencia para el overlay */
.routing-map-placeholder{ position: relative; }

/* Botón flotante arriba-derecha, por ENCIMA de Leaflet */
.map-toggle-link{
  position: absolute;
  top: 26px; right: 26px;
  z-index: 1;                 /* > .leaflet-top/.leaflet-control (~1000) */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight:  600; font-size: 12px; line-height: 1;
  cursor: pointer; user-select: none;
  transition: background .15s, box-shadow .15s, transform .06s, border-color .15s;
}

/* look “glass” muy sutil para no estorbar el mapa */
.map-toggle--glass{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(35,32,63,.14);
  color: var(--ink);
  backdrop-filter: saturate(160%) blur(6px);
}
.map-toggle--glass:hover{
  background: rgba(255,255,255,.9);
  border-color: rgba(35,32,63,.22);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.map-toggle-link:active{ transform: translateY(1px); }
.map-toggle-link[aria-pressed="true"]{ border-color: var(--brand); }

/* compacto: solo ícono; el texto aparece al hover/focus */
.map-toggle--compact span{
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .18s ease;
}
.map-toggle--compact:hover span,
.map-toggle--compact:focus-visible span{
  max-width: 120px;
}
.map-toggle-link svg{ width: 16px; height: 16px; fill: currentColor; display:block; }

/* por si el mapa tiene sombras/overflow, mantenlo visible */
.routing-map-placeholder .leaflet-container{ position: relative; z-index: 1; }


/* Sin borde al click. Ring solo con teclado (focus-visible) */
.routing-stats select.pinit-input[name="objective_type"],
.routing-stats select.pinit-input[name="routing_method"] {
  outline: none;
  box-shadow: none;
  border-color: #E6E8F0;            /* mismo borde base */
}

.routing-stats select.pinit-input[name="objective_type"]:focus,
.routing-stats select.pinit-input[name="routing_method"]:focus {
  outline: none !important;
  box-shadow: none !important;       /* mata el ring “gordo” al click */
  border-color: #E6E8F0 !important;  /* evita cambio de color */
}

/* Si navegas con TAB, muestra un ring sutil (opcional) */
.routing-stats select.pinit-input[name="objective_type"]:focus-visible,
.routing-stats select.pinit-input[name="routing_method"]:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-ring);
  border-color: var(--brand);
}

/* Mantén el borde delgadito al hacer clic */
.routing-stats select.pinit-input[name="objective_type"]:focus,
.routing-stats select.pinit-input[name="routing_method"]:focus {
  outline: none !important;
  box-shadow: none !important;                 /* sin halo grueso */
  border: 1px solid #E6E8F0 !important;        /* vuelve a 1px */
}

/* (Opcional) ring solo al navegar con teclado */
.routing-stats select.pinit-input[name="objective_type"]:focus-visible,
.routing-stats select.pinit-input[name="routing_method"]:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-ring);
  border-color: var(--brand);
}

.pinit-cluster .pinit-cluster-badge{
  min-width: 32px; height: 32px; line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-weight:  600;
  background: #602166; color: #fff;
  box-shadow: 0 0 0 3px rgba(107,79,211,.2);
  user-select: none;
}

/* Punto de orden (divIcon) */
.pinit-dot .pinit-dot-inner{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(0,0,0,.25);
}

/* Centroides */
.pinit-cluster .pinit-cluster-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:17px;
  color:#fff;
  font-weight:  600;
  font-size:12px;
  background:#602166;
  border:2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Swatches de la leyenda */
.legend-dot{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:7px;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.25);
}

.legend-centroid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:11px;
  background:#602166;
  color:#fff;
  font-weight:  600;
  box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(0,0,0,.25);
}


/* dots de órdenes */
.pinit-dot { line-height: 0; }
.pinit-dot-inner{
  display:inline-block; width:18px; height:18px; border-radius:50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.35);
}

/* badge de centroides */
.pinit-cluster .pinit-cluster-badge{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  background:#602166; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* leyenda compacta */
.legend-dot{
  width:12px; height:12px; border-radius:50%;
  display:inline-block; box-shadow:0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.25);
}
.legend-centroid{
  width:22px; height:22px; border-radius:50%;
  background:#602166; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-weight:  600;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* que los botones de capas se vean toggles */
[aria-pressed="true"]{
  background:#f1eefc; border:1px solid #602166; color:#602166; border-radius:8px;
}

/* dots de órdenes */
.pinit-dot{ line-height:0; }
.pinit-dot-inner{
  display:inline-block; width:18px; height:18px; border-radius:50%;
  box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.35);
}

/* badge de centroides con etiqueta y conteo */
.pinit-cluster .pinit-cluster-badge{
  min-width:38px; height:42px; padding:4px 6px;
  border-radius:12px; background:#602166; color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  
}
.pinit-cluster-top{ font-weight:  600; font-size:11px; line-height:1; opacity:.95; }
.pinit-cluster-count{ font-weight:  600; font-size:14px; line-height:1.1; }

/* leyenda compacta */
.legend-dot{
  width:12px; height:12px; border-radius:50%;
  display:inline-block; box-shadow:0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.25);
}
.legend-centroid{
  width:22px; height:22px; border-radius:50%;
  background:#602166; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-weight:  600;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* estado activo de chips de “Capas” */
[aria-pressed="true"]{
  background:#f1eefc; border:1px solid #602166; color:#602166; border-radius:8px;
}

/* pin con sombra suave */
.leaflet-marker-icon.pinit-pin {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* resalta cuando hay focus/hover */
.leaflet-marker-icon.pinit-pin:hover svg path {
  stroke-width: 1.8;
}


/* Resetea estilos del marcador por defecto para los DivIcon pintados por nosotros */
.leaflet-div-icon.pinit-pin,
.leaflet-marker-icon.pinit-pin {
  background: transparent !important;
  border: none !important;
  width: 24px !important;   /* sincroniza con iconSize del DivIcon */
  height: 24px !important;
  box-shadow: none !important;
}

/* Asegura que el contenido interno (nuestro SVG) se muestre */
.leaflet-div-icon.pinit-pin > * {
  display: block !important;
}

/* Un toquecito de sombra y hover (opcional) */
.leaflet-marker-icon.pinit-pin {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.leaflet-marker-icon.pinit-pin:hover svg path {
  stroke-width: 1.8;
}

/* elimina el fondo/sprite y la sombra del marker por defecto en nuestros DivIcon */
.leaflet-marker-icon.pinit-pin,
.leaflet-div-icon.pinit-pin {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 24px !important;   /* sincroniza con iconSize */
  height: 24px !important;
  overflow: visible;        /* por si algún theme hace clipping */
}

/* asegura que el SVG se pinta */
.leaflet-div-icon.pinit-pin > * {
  display: block;
}

/* opcional: una sombrita sutil al pin SVG */
.leaflet-marker-icon.pinit-pin {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}


.pinit-map-scope img.leaflet-marker-icon:not(.pinit-origin) {
  display: none !important;
}

/* Asegurar que nuestros divIcons sigan visibles y encima */
.pinit-map-scope .pinit-pin,
.pinit-map-scope .pinit-cluster {
  display: block;
}

/* Mata cualquier sombra de Leaflet dentro del mapa */
.pinit-map-scope .leaflet-shadow-pane,
.pinit-map-scope img.leaflet-marker-shadow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* Coloca el chip justo debajo del botón "Expandir mapa" */
.map-toggle-link.below-expand{
  top: 52px;          /* antes estaba ~10px: lo bajamos ~42px */
  right: 12px;
  z-index: 1;      /* por encima del mapa y controles */
}

/* si en pantallas chicas el control ocupa un poco más, baja 4-8px extra */
@media (max-width: 1280px){
  .map-toggle-link.below-expand{ top: 58px; }
}









/* Solución final para quitar scroll residual */
.routing-table-wrapper-form {
  padding-bottom: 0.1rem; /* sutil para evitar colapso */
  margin-bottom: -1px;    /* evita espacio fantasma final */
  box-sizing: border-box;
  overflow-y: auto;
  /* scrollbar-gutter: stable both-edges; */
}

/* Evita márgenes colapsados dentro del wrapper */
.routing-table-wrapper-form > *:first-child {
  margin-top: 0 !important;
}
.routing-table-wrapper-form > *:last-child {
  margin-bottom: 0 !important;
}

/* Scroll invisible pero funcional en wrapper */
.routing-table-wrapper-form {
  /* scrollbar-width: none!important; */ /* Firefox */
  /* -ms-overflow-style: none!important; */ /* IE/Edge */
}

.routing-table-wrapper-form::-webkit-scrollbar {
  /* display: none!important; */ /* Chrome, Safari, Opera */
}



/* === Reducir altura de vistas internas y evitar scroll innecesario === */

.tracking-onboarding,
.magic-card,
.selected-panel.empty {
  /* padding-top: 1rem !important;
  padding-bottom: 1rem !important; */
  min-height: unset !important;
  height: auto !important;
  overflow: visible !important;
}

.routing-table {
  min-height: unset !important;
  height: auto !important;
  overflow: visible !important;
}

/* Compactar el contenido interno de las vistas de onboarding */
.tracking-onboarding,
.magic-card,
.scan-onboarding {
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

.tracking-onboarding input,
.magic-card input,
.scan-onboarding input,
.tracking-onboarding textarea,
.magic-card textarea,
.scan-onboarding textarea {
  padding: 0.35rem 0.5rem !important;
  font-size: 0.85rem !important;
}

.tracking-onboarding button,
.magic-card button,
.scan-onboarding button {
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  height: auto !important;
}

.tracking-onboarding .form-group,
.magic-card .form-group,
.scan-onboarding .form-group {
  margin-bottom: 0.75rem !important;
}

/* Reduce la altura y padding del dropzone de Excel */
.magic-card .excel-dropzone,
.scan-onboarding .dropzone {
  padding: 1rem !important;
  min-height: 180px !important; /* antes eran ~260px o más */
  font-size: 0.85rem !important;
}

/* Reduce el tamaño del área de texto para Tracking */
.tracking-onboarding textarea {
  height: 120px !important; /* antes eran 200px+ */
  font-size: 0.85rem !important;
  padding: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Opcional: compactar el mensaje de ayuda */
.tracking-onboarding small,
.magic-card small {
  font-size: 0.75rem !important;
}

/* === Compactar altura de tracking/excel y mostrar siempre botones === */

/* TRACKING: Reducción de altura del textarea y padding */
.tracking-onboarding {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  gap: 10px !important;
}


.tracking-onboarding .tracking-textarea {
  min-height: 80px;
  max-height: none;
  height: auto;
  resize: vertical;
  flex: 1 1 auto;
}

/* Ajuste visual a los botones para que siempre estén visibles */
.tracking-onboarding .tracking-actions {
  margin-top: 6px !important;
  flex-wrap: wrap;
}


/* EXCEL: ajustes responsive para el dropzone dentro de MagicCard */
.excel-dropzone {
  min-height: 120px !important;
  padding: 12px !important;
}

.excel-actions {
  /* margin-top: 8px !important; */
  flex-wrap: wrap;
}



.cell-status {
  text-align: left;
  font-size: 13px;
  color: #7c7c7c;
  white-space: nowrap;
}

.cell-status i {
  color: darkgoldenrod;
  font-weight:  600;
  padding-left: 6px;
}


/* .btn-settings-new:hover {
  opacity: 0.8;
} */



.routing-actions-below {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.routing-actions-below .left-col {
  flex: 0 0 40%; 
}

.routing-actions-below .right-col {
  flex: 0 0 60%; 
  display: flex;
  justify-content: flex-end;
}



/* usa tus tokens ya definidos */
.order-input-group {
  width: 100%;
}

.order-input-group .form-control {
  height: 44px;
  border-radius: 999px 0 0 999px;          /* pill izquierda */
  border: 1px solid #e5e7eb;               /* línea suave */
  padding: 0 16px;
  box-shadow: none;
}

.order-input-group .input-group-append .btn.order-add-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 0 999px 999px 0;          /* pill derecha */
  border: 1px solid #e5e7eb;
  border-left: 0;                           /* sin “corte” entre input y botón */
  background: var(--ink);                   /* tu color #000000 */
  color: #fff;
  font-weight:  600;
  line-height: 1;
}

.order-input-group .input-group-append .btn.order-add-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* foco acorde a tu marca */
.order-input-group .form-control:focus,
.order-input-group .input-group-append .btn.order-add-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
  border-color: var(--brand);
}

.routing-form .scanbar .scanbar-ig{
  position: relative;
  width: 100%;
  display: block; 
}

.routing-form .scanbar .scanbar-ig-input{
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  padding-right: calc(14px + var(--scanbar-btn-w, 120px)) !important;

  border: 1px solid #E6E8F0 !important;
  border-top-right-radius: 999px!important;
  border-bottom-right-radius: 999px!important;
  background-clip: padding-box !important;     
  background: #fff !important;
  color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

.routing-form .scanbar .scanbar-ig-input.scanbar-input,
.routing-form .scanbar .scanbar-ig-input.pinit-input{
  border-style: solid !important;
  border-top-right-radius: 999px!important;
  border-bottom-right-radius: 999px!important;
}

.routing-form .scanbar .scanbar-ig-input:focus{
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  border-color: var(--brand) !important;
}

.routing-form .scanbar .scanbar-ig-btn{
  --scanbar-btn-w: 120px;

  position: absolute !important;
  z-index: 2;
  top: 4px;                 /* dentro del input (44px - 8px = 36px) */
  bottom: 4px;
  right: 6px;

  min-width: var(--scanbar-btn-w);
  padding: 0 16px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  border: 0 !important;
  height: auto !important;
  line-height: 1 !important;

  /* redondeo fuerte (semicírculo) */
  /* border-radius: 999px !important; */
  border-top-right-radius: 999px!important;
  border-bottom-right-radius: 999px!important;

  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
}

.routing-form .scanbar .btn-add.inline.scanbar-ig-btn{
  padding: 0 16px !important;
  height: auto !important;
}

.routing-form .scanbar .scanbar-ig-btn:hover{
  background: var(--ink-2) !important;
}
.routing-form .scanbar .scanbar-ig-btn:focus{
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

@media (max-width: 880px){
  .routing-form .scanbar .scanbar-ig-btn{ --scanbar-btn-w: 100px; }
  .routing-form .scanbar .scanbar-ig-input{
    padding-right: calc(14px + 100px) !important;
  }
}
@media (max-width: 600px){
  .routing-form .scanbar .scanbar-ig-btn{ --scanbar-btn-w: 90px; }
  .routing-form .scanbar .scanbar-ig-input{
    height: 42px !important;
    padding-right: calc(12px + 90px) !important;
  }
}

/* ===== Ajustes 1024–1439px: chip y botones en una sola línea ===== */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .routing-form .selected-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  /* Chip de cantidad: evitar salto de línea */
  .routing-form .selected-toolbar .count-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    height: 32px;
    padding: 6px 10px;
  }

  /* Botones de eliminar: altura estable y sin wraps */
  .routing-form .selected-toolbar .btn-danger {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    line-height: 1 !important;
    height: 36px !important;
    padding: .6rem 1rem .55rem !important; /* compactito */
  }

  /* Iconos dentro del botón: que no estiren la altura */
  .routing-form .selected-toolbar .btn-danger i {
    display: inline-block;
    margin-left: 8px;
    line-height: 1;
    flex: 0 0 auto;
  }
}

/* ===== Layout fijo a 2 columnas entre 1024 y 1200 ===== */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  /* Forzar fila (anula el stack que tienes para <=1200) */
  .routing-main {
    flex-direction: row !important;
    align-items: stretch;
    gap: 14px;
  }

  /* Proporciones y compactación del panel izquierdo */
  .routing-table {
    width: 42% !important;
    padding: 0.75rem !important;
  }

  /* El mapa queda a la derecha como en desktop */
  .routing-map-placeholder {
    width: 58% !important;
    min-height: var(--panel-min-h);
  }

  /* Compactar contenidos del panel izquierdo para que no “crezca” visualmente */
  .routing-table .selected-toolbar {
    gap: 8px;
    padding-bottom: 6px;
    margin: 4px 0 6px;
  }

  .routing-table .count-chip {
    height: 30px;
    line-height: 1;
    padding: 6px 10px;
    white-space: nowrap;
  }

  .routing-table .btn-danger {
    display: inline-flex;
    align-items: center;
    height: 34px !important;
    line-height: 1 !important;
    padding: .5rem .9rem .45rem !important;
    white-space: nowrap;
  }

  .routing-table .btn-danger i {
    margin-left: 8px;
    line-height: 1;
  }

  /* Tabla un poco más densa para que entre sin verse enorme */
  .routing-table .routing-table-list.table-compact thead th {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }

  .routing-table .routing-table-list.table-compact tbody td {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
  }

  /* Permitir que la tabla quepa sin forzar scroll horizontal grande */
  .routing-table .routing-table-list.table-compact {
    min-width: 760px !important;
  }

  /* Dirección un poco más contenida para evitar wraps */
  .routing-table .table-compact .cell-address {
    min-width: 160px;
    max-width: 200px;
  }

  /* Scanbar ligeramente más compacta */
  .routing-form .scanbar .scanbar-ig-input {
    height: 42px !important;
  }
  .routing-form .scanbar .scanbar-ig-btn {
    --scanbar-btn-w: 100px; /* ya lo reduces más abajo, reforzamos aquí para este rango */
  }

  /* Opcional: reduce un poco la altura fija del panel en este rango */
  .routing-form {
    --panel-fixed-h: 30rem;
  }

  /* Asegurar que “expandir mapa” siga funcionando en este rango */
  .routing-main.is-map-expanded .routing-map-placeholder {
    width: 100% !important;
  }
  .routing-main.is-map-expanded .routing-table {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
}

/* ===== routing-topbar fijo a 2 columnas entre 1024 y 1280 ===== */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  /* Mantener layout 2 columnas: Ingresos (izq) / Config (der) */
  .routing-topbar {
    grid-template-columns: 40% 60% !important;
    gap: 12px !important;
    align-items: start;
  }

  /* Evita wraps raros por mínimo ancho */
  .routing-topbar .ingresos-box,
  .routing-topbar .config-box {
    min-width: 0;
  }

  /* Regresar la config a 3 columnas (como desktop) */
  .routing-topbar .config-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* El 4º field (si aplica) vuelve a full width (comportamiento desktop) */
  .routing-topbar .config-row .config-field:nth-child(4) {
    grid-column: 1 / -1 !important;
  }

  /* Compactar inputs y chips para que no “crezcan” */
  .routing-topbar .pinit-input {
    height: 40px !important;
  }

  .routing-topbar .ao-summary {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .routing-topbar .ao-chip {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  /* Botón de engrane conserva su tamaño y no rompe el flujo */
  .routing-topbar .btn-settings-new {
    width: 36px !important;
    height: 36px !important;
  }

  /* Evita que la fila de chips provoque salto de línea brusco */
  .routing-topbar .ao-summary > div[style] {
    padding: 0.4rem !important; /* override del inline */
  }
}

/* ===== routing-topbar 1024–1280: 2 columnas y config compacta en 1 fila ===== */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  /* Layout principal: Ingresos (izq) / Config (der) */
  .routing-topbar {
    display: grid;
    grid-template-columns: 40% 60% !important;
    gap: 12px !important;
    align-items: start;
  }

  .routing-topbar .ingresos-box,
  .routing-topbar .config-box {
    min-width: 0; /* permite que se encojan */
  }

  /* Config en 1 sola fila: Origen + Configuración */
  .routing-topbar .config-row {
    display: grid;
    grid-template-columns: minmax(200px, 30%) 1fr !important; /* Origen / Config */
    gap: 10px !important;
    align-items: center;              /* evita crecer en altura */
    grid-auto-rows: min-content;      /* filas compactas si algo forzara altura */
  }

  /* Forzar posiciones (evitar span a 100%) */
  .routing-topbar .config-row .config-field:first-child {
    grid-column: 1 / 2 !important; /* Origen */
    min-width: 0;
  }
  .routing-topbar .config-row .config-field.span-2 {
    grid-column: 2 / 3 !important; /* Configuración */
    width: auto !important;
    min-width: 0;
  }

  /* Contenedor del resumen/chips: una sola línea, sin crecer en alto */
  .routing-topbar .ao-summary {
    display: flex !important;
    align-items: center !important;   /* centra vertical y reduce alto */
    gap: 6px !important;
    padding: 6px 8px !important;      /* más compacto */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;    /* NO crecer en alto */
    white-space: nowrap !important;
    max-height: 44px;                 /* techo de altura para que no “se haga alto” */
  }

  /* El wrapper interno que tiene chips */
  .routing-topbar .ao-summary > div {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0.25rem !important;      /* override del inline (0.5rem) */
  }

  /* Chips compactas */
  .routing-topbar .ao-chip {
    display: inline-flex;
    align-items: center;
    line-height: 1.1;
    font-size: 12px !important;
    padding: 3px 6px !important;
  }

  /* Etiquetas y controles compactos para no elevar altura */
  .routing-topbar .config-field > strong {
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .routing-topbar .pinit-input {
    height: 36px !important;
    padding: 0 8px !important;
  }
  .routing-topbar .btn-settings-new {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
  }
}

/* === ScannerInput (overrides finales) === */
.scanbar-ig {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Asegura look activo siempre */
.scanbar-ig-input.pinit-input {
  background: #fff !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

/* Botón Agregar activo */
.scanbar-ig-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

/* En el empty state algunos wrappers bajan la opacidad; forzamos activo */
.selected-empty .scanbar-ig-input,
.selected-empty .scanbar-ig-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

/* Placeholder más legible (opcional) */
.scanbar-ig-input::placeholder { color: #9aa3af; }

/* ===== MagicCard selected mode overrides ===== */

/* Contenedor principal centrado verticalmente */
.selected-empty-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 20px 0;
}

/* Wrapper del scanner - input y botón lado a lado */
.selected-scanner-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 80%;
  max-width: 600px;
}

/* Ocultar el botón interno del ScannerInput */
.selected-scanner-wrapper .scanbar-ig-btn {
  display: none !important;
}

/* Ajustar el input para que crezca y ocupe espacio disponible */
.selected-scanner-wrapper .scanbar-ig-input {
  padding-right: 14px !important;
  border-radius: 12px !important;
}

/* Asegurar que el scanner-box ocupe el espacio disponible */
.selected-scanner-wrapper .scanner-box {
  flex: 1;
  width: auto;
}

/* Ajustar el scanbar dentro del wrapper */
.selected-scanner-wrapper .scanbar {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Botones de acción centrados debajo */
.selected-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  justify-content: flex-end;
  width: 80%;
}

/* Footer de MagicCard en selected mode - botones */
.magic-card .magic-card-footer .btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e7e9f2;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.magic-card .magic-card-footer .btn-ghost:hover {
  background: #ececec;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.magic-card .magic-card-footer .btn-ghost i {
  font-size: 16px;
}

/* Botón verde "Agregar" en el footer */
.magic-card .magic-card-footer .btn-success {
  background-color: #53B66C !important;
  border-color: #53B66C !important;
  color: white !important;
  font-weight:  600;
  padding: 8px 20px;
  border-radius: 999px;
  transition: all 0.15s ease;
}

.magic-card .magic-card-footer .btn-success:hover:not(:disabled) {
  background-color: #53B66C !important;
  box-shadow: 0 6px 14px rgba(83, 182, 108, 0.3);
}

.magic-card .magic-card-footer .btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:root { 
  --ink:#000000; 
  --line:#eef0f3; 
}

.advanced-options-scope.advanced-offcanvas {
  width: 420px !important;
  max-width: 92vw;
}
@media (max-width: 768px){
  .advanced-options-scope.advanced-offcanvas {
    width: 100% !important;
    max-width: 100vw;
  }
}

.advanced-options-scope .modal-dialog {
  position: fixed;
  right: 0;
  top: 0;
  margin: 0;
  height: 100%;
  transform: none !important;
  width: 420px;
  max-width: 92vw;
}
@media (max-width: 768px){
  .advanced-options-scope .modal-dialog { width: 100vw; max-width: 100vw; }
}

.advanced-options-scope .modal-content {
  height: 100%;
  border-radius: 0;
  border-left: 1px solid var(--line);
  box-shadow: -2px 0 16px rgba(0,0,0,.12);
}

.advanced-options-scope .modal-header{
  border-bottom: 1px solid var(--line);
}
.advanced-options-scope .modal-title{
  font-weight:  600; color: var(--ink); font-size: 16px;
}
.advanced-options-scope .modal-body{
  padding: 16px 20px;
  overflow: auto;
}

/* Footer */
.advanced-options-scope .advanced-offcanvas__footer{
  display:flex; align-items:center; gap:8px;
  padding: 12px 20px; border-top:1px solid var(--line);
}
.advanced-options-scope .advanced-offcanvas__footer .spacer{ flex:1; }

/* Grid */
.advanced-options-scope .ao-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.advanced-options-scope .span-2 { grid-column: 1 / -1; }
@media (max-width: 768px){
  .advanced-options-scope .ao-grid{ grid-template-columns:1fr; }
}

/* Inputs */
.advanced-options-scope .form-label{
  color:var(--ink); font-weight:  600; font-size:13px; margin-bottom:6px;
}
.advanced-options-scope .form-control,
.advanced-options-scope select{
  height:36px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); box-shadow:none;
}
.advanced-options-scope .form-control:focus,
.advanced-options-scope select:focus{
  outline:none; box-shadow:0 0 0 2px rgba(35,32,63,.12);
}

/* Boolean pills */
.advanced-options-scope .ao-boolean{
  display:flex; gap:8px; flex-wrap:wrap;
}
.advanced-options-scope .ao-pill{
  height:32px; padding:0 12px; border-radius:999px; border:1px solid #eef0f3;
  background:#f3f4f6; color:#000000; font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.advanced-options-scope .ao-pill input{ display:none; }
.advanced-options-scope .ao-pill.active{
  background:#000000; color:#fff; border-color:#000000;
}

/* === Z-index fix === */
.advanced-options-scope {
  z-index: 12010 !important;
  position: fixed;
  right: 0; top: 0; left: auto; bottom: 0;
}
.advanced-options-scope .modal-dialog { z-index: 12020 !important; }
.advanced-options-scope + .modal-backdrop,
.advanced-options-scope ~ .modal-backdrop { z-index: 12000 !important; }
.advanced-options-backdrop {
  position: fixed !important;
  z-index: 12000 !important;
}
.advanced-options-scope .modal-dialog,
.advanced-options-scope .modal-content { z-index: 12020 !important; }

/* Caja para el switch */
.advanced-options-scope .ao-fieldbox{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:4px 10px;
  border-radius:8px;
  background:#fff;
}

/* === Switch con estados left/right === */
.advanced-options-scope .ao-switch{
  --h: 22px;
  --w: 42px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: var(--w);
  height: var(--h);
  line-height: var(--h);
  background: transparent;
  border: none;
  cursor: pointer;
}

.advanced-options-scope .ao-switch::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: var(--w);
  height: var(--h);
  border-radius: var(--h);
  background: #e9ecf1;
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease;
}

/* Izquierda = true (Peso y volumen) */
.advanced-options-scope .ao-switch.left::before {
  background: #000000;
  border-color: #000000;
}

/* Perilla */
.advanced-options-scope .ao-switch__knob{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: left .18s ease;
  left: 2px;
}

/* Derecha = false (Cantidad de paquetes) */
.advanced-options-scope .ao-switch.right .ao-switch__knob {
  left: calc(var(--w) - var(--h) + 2px);
}

.advanced-options-scope .ao-switch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(35,32,63,.18);
  border-radius: 6px;
}

.advanced-options-scope .ao-switch__state{
  font-size: 13px;
  color: var(--ink);
  user-select: none;
}

:root{--ink: #000000;--brand: #602166;--brand-ring: rgb(188 188 188 / 20%);--bg-soft: #f7f8fa;--muted: #6b7280;--card: #ffffff;--line: #eef0f3}.new-layout-module_titleWrapper__upLZE{background:transparent;width:100%;padding:0px 8px}.new-layout-module_twoColumnLayout__SoIlu{display:flex;gap:1rem;width:100%;height:calc(100vh - 200px);padding:0px}.new-layout-module_columnLeft__oxC5W{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);display:flex;flex-direction:column;overflow:hidden}.new-layout-module_columnRight__5Df0s{flex:0 0 460px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:16px;display:flex;flex-direction:column;gap:1rem;overflow:hidden}.new-layout-module_rightRow1__xQkhI{flex:1 1 auto;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.new-layout-module_rightRow2__dHHWT{flex:0 0 auto;padding-top:.5rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center}.new-layout-module_summaryGrid__AQ\+Pn{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;width:100%}.new-layout-module_summaryCard__GA4N2{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:70px}.new-layout-module_summaryCard__GA4N2:last-child:nth-child(odd){grid-column:1/-1}.new-layout-module_summaryCardRed__BY4Eu{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.2)}.new-layout-module_summaryIconWrapper__R-Q1u{width:40px;height:40px;border-radius:50%;background:rgba(96,33,102,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;justify-self:center}.new-layout-module_summaryIconWrapper__R-Q1u i{font-size:20px;color:#602166}.new-layout-module_summaryIconWrapperRed__kv0o-{background:rgba(239,68,68,.1)}.new-layout-module_summaryIconWrapperRed__kv0o- i{color:#ef4444}.new-layout-module_summaryTextContent__5EC7c{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;text-align:center;min-width:0;max-width:100%;overflow:hidden}.new-layout-module_summaryLabel__d3OdI{font-size:11px;color:#6b7280;font-weight:500;text-transform:capitalize;line-height:1.2;width:100%}.new-layout-module_summaryValue__J9nla{font-size:16px;color:#000;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:100%}@keyframes new-layout-module_spin__ifJZM{to{transform:rotate(360deg)}}.new-layout-module_container__aZeUk{margin-top:-1.5rem;margin-left:-1.5rem;margin-right:-1.5rem;display:flex;flex-direction:column;gap:1rem}.new-layout-module_header__ORElt{flex-shrink:0;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.new-layout-module_headerLeft__4Omp5{display:flex;align-items:center;gap:1rem;flex:1 1 auto;min-width:0}.new-layout-module_headerRight__An6Ml{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.new-layout-module_searchWrapper__laRtd{flex:1 1 auto;min-width:200px;max-width:400px}.new-layout-module_searchInput__Hzk26{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;transition:all .2s ease}.new-layout-module_searchInput__Hzk26:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}.new-layout-module_searchInput__Hzk26::placeholder{color:var(--muted);opacity:.7}.new-layout-module_selectedCard__XhMxO{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.06);min-height:40px;line-height:1;transition:all .2s ease}.new-layout-module_selectedCard__XhMxO.new-layout-module_isActive__3CWqp{border-color:rgba(101,84,245,.35);box-shadow:0 6px 18px rgba(101,84,245,.12)}.new-layout-module_selectedIcon__P5AFa{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:rgba(101,84,245,.1);color:var(--brand);flex-shrink:0}.new-layout-module_selectedTitle__hqJse{font-size:14px;color:var(--ink);font-weight:600}.new-layout-module_selectedSpacer__0FgAQ{flex:1}.new-layout-module_selectedBadge__E37mB{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);background:rgba(101,84,245,.1);border:1px solid rgba(101,84,245,.25);border-radius:999px;min-width:2.5rem;text-align:center;padding:.25rem .5rem}.new-layout-module_body__36fmI{flex:1 1 auto;display:flex;align-items:stretch;gap:1rem;padding:0 1.5rem}.new-layout-module_bodyLeft__bOZgD{display:flex;flex-direction:column;flex:1 1 60%;min-width:0}.new-layout-module_bodyRight__uSMJ-{display:flex;flex-direction:column;flex:1 1 40%;gap:1rem;min-width:0}.new-layout-module_tableWrapper__ysfA4{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04)}.new-layout-module_tableScroll__k65Bf{flex:1 1 auto;overflow-y:auto;overflow-x:auto;padding-bottom:1px}.new-layout-module_card__2FCAR{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.04)}.new-layout-module_paramsCard__fVxDN{flex:0 0 auto}.new-layout-module_summaryCard__GA4N2{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}.new-layout-module_cardTitle__Hyy80{margin:0 0 1rem 0;font-size:18px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:8px}.new-layout-module_footer__Hhrti{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;gap:1rem}.new-layout-module_footerLeft__\+3DB6{display:flex;align-items:center;flex:1 1 auto}.new-layout-module_footerRight__PmOZ-{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}@media(max-width: 1080px){.new-layout-module_header__ORElt{flex-direction:column;align-items:stretch}.new-layout-module_headerLeft__4Omp5,.new-layout-module_headerRight__An6Ml{width:100%}.new-layout-module_body__36fmI{flex-direction:column}.new-layout-module_bodyLeft__bOZgD,.new-layout-module_bodyRight__uSMJ-{width:100%;flex:1 1 auto}.new-layout-module_footer__Hhrti{flex-direction:column;align-items:stretch;gap:.75rem}.new-layout-module_footerLeft__\+3DB6,.new-layout-module_footerRight__PmOZ-{width:100%;justify-content:center}}.new-layout-module_miniLoader__GBQG8{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 0;background:#fff;border-radius:12px;border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.05);margin-bottom:24px}.new-layout-module_miniLoaderSpinner__5\+Pma{width:36px;height:36px;border-radius:50%;border:4px solid rgba(35,32,63,.2);border-top-color:var(--ink);animation:new-layout-module_spin__ifJZM 1s linear infinite}.new-layout-module_miniLoaderText__KejTu{margin-top:12px;font-size:14px;color:var(--ink);font-weight:600;text-align:center;opacity:.75}@keyframes new-layout-module_spin__ifJZM{to{transform:rotate(360deg)}}.new-layout-module_overlay__poEVV{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;backdrop-filter:blur(3px);z-index:99999;color:#fff}.new-layout-module_overlayCard__m3gmL{width:min(92vw, 560px);padding:28px 24px;background:#000;border:1px solid rgba(255,255,255,.08);border-radius:16px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.5)}.new-layout-module_overlayLoader__VkoOc{width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;margin:0 auto 12px;animation:new-layout-module_spin__ifJZM 1s linear infinite}
:root { --ink:#000000; --line:#eef0f3; --muted:#6b7280; }

.vehicles-filters-scope { /* scope del modal de vehículos */ }

.vehicles-filters-scope.filters-offcanvas {
  width: 420px !important;
  max-width: 92vw;
}
@media (max-width: 768px){
  .vehicles-filters-scope.filters-offcanvas {
    width: 100% !important;
    max-width: 100vw;
  }
}

.vehicles-filters-scope .modal-dialog{
  position: fixed; right: 0; top: 0; margin: 0; height: 100%;
  transform: none !important; width: 420px; max-width: 92vw;
}
@media (max-width: 768px){
  .vehicles-filters-scope .modal-dialog{ width:100vw; max-width:100vw; }
}

.vehicles-filters-scope .modal-content{
  height:100%; 
  border-left:1px solid var(--line);
  box-shadow: -2px 0 16px rgba(0,0,0,.12);
}

.vehicles-filters-scope .modal-header{ border-bottom:1px solid var(--line); }
.vehicles-filters-scope .modal-title{ font-weight: 600; color:var(--ink); font-size:16px; }

.vehicles-filters-scope .modal-body{
  padding:16px 20px; overflow:auto;
}

.vehicles-filters-scope .filters-offcanvas__footer{
  display:flex; align-items:center; gap:8px;
  padding:12px 20px; border-top:1px solid var(--line);
}
.vehicles-filters-scope .filters-offcanvas__footer .spacer{ flex:1; }
.vehicles-filters-scope .filters-offcanvas__footer .btn-primary{
  background:#000000; border-color:#000000;
}

.vehicles-filters-scope .grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width: 768px){
  .vehicles-filters-scope .grid-2{ grid-template-columns:1fr; }
}
.vehicles-filters-scope .span-2{ grid-column: 1 / -1; }

.vehicles-filters-scope .form-label{ color:var(--ink); font-weight: 600; font-size:13px; margin-bottom:6px; }
.vehicles-filters-scope .form-control, .vehicles-filters-scope select{
  height:36px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); box-shadow:none;
}
.vehicles-filters-scope .form-control:focus, .vehicles-filters-scope select:focus{
  outline:none; box-shadow:0 0 0 2px rgba(35,32,63,.12);
}

.vehicles-filters-scope .rf-chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.vehicles-filters-scope .rf-chip{
  height:28px; padding:0 10px; border-radius:999px; border:1px solid #eef0f3;
  background:#f3f4f6; color:#000000; font-size:12px; cursor:pointer;
}
.vehicles-filters-scope .rf-chip.active{ background:#000000; color:#fff; border-color:#000000; }

.vehicles-filters-scope .hint-muted{ color:var(--muted); font-size:12px; }

/* Botón/TH */
.hf-th {
  position: relative; /* ancla para el popover */
  display: inline-block;
  width: 100%;
}

.hf-btn {
  appearance: none;
  border: 1px solid var(--line, #eef0f3);
  background: #fff;
  color: var(--ink, #000000);
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
  cursor: pointer;
}
.hf-btn:hover {
  border-color: var(--brand, #602166);
  box-shadow: 0 0 0 2px var(--brand-ring, rgb(188 188 188 / 20%));
}
.hf-btn.is-open {
  border-color: var(--brand, #602166);
}

.hf-title {
  font-weight:  600;
  font-size: .9rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hf-badge {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.hf-badge.is-active {
  background: rgba(101,84,245,.18);
  border-color: rgba(101,84,245,.4);
}

.hf-icon {
  display: grid;
  place-items: center;
  opacity: .8;
}

/* Popover */
.hf-popover {
  /* position: absolute; */
  position: fixed;
  z-index: 5000;
  background: #fff;
  border: 1px solid var(--line, #eef0f3);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 10px;

  max-width: min(420px, 90vw);
}

.hf-section { display: grid; gap: 8px; }
.hf-section-title {
  font-size: .8rem;
  color: var(--muted, #6b7280);
  font-weight:  600;
}

.hf-list {
  max-height: 260px;
  overflow: auto;
  /* -webkit-overflow-scrolling: touch; centralizado globalmente */
  /* scrollbar-width: thin; */
}
/* .hf-list::-webkit-scrollbar { width: 8px; height: 8px; } */
/* .hf-list::-webkit-scrollbar-thumb { background: rgba(101,84,245,.35); border-radius: 8px; } */
/* .hf-list::-webkit-scrollbar-track { background: rgba(0,0,0,.04); } */

.hf-empty {
  font-size: .85rem;
  color: var(--muted, #6b7280);
  padding: 6px 4px;
}

.hf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.hf-check:hover { background: #ececec; }
.hf-check input { accent-color: var(--brand, #602166); }

/* Text input mode */
.hf-input-wrap { display: flex; gap: 8px; }
.hf-input {
  flex: 1;
  border: 1px solid var(--line, #eef0f3);
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
}
.hf-input:focus {
  border-color: var(--brand, #53B66C);
  box-shadow: 0 0 0 2px var(--brand-ring, rgb(188 188 188 / 20%));
}

.hf-apply {
  border: 1px solid var(--brand, #53B66C);
  background: var(--brand, #53B66C);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.hf-apply:hover { filter: brightness(.95); }

/* Footer acciones */
.hf-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hf-clear, .hf-close {
  border: 1px solid var(--line, #eef0f3);
  background: #fff;
  color: var(--ink, #000000);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.hf-clear:hover, .hf-close:hover {
  border-color: var(--brand, #602166);
  box-shadow: 0 0 0 2px var(--brand-ring, rgb(188 188 188 / 20%));
}

/* Modo compacto dentro de <th> estrechos */
@media (max-width: 1280px) {
  .hf-title { font-size: .85rem; }
}

/* Contador pequeño junto al badge (opcional) */
.hf-count {
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(101,84,245,.10);
  border: 1px solid rgba(101,84,245,.35);
  color: var(--ink, #000000);
}

/* =========================
   RoutingResults – Styles
   ========================= */

.routing-results {
  --ink: #000000;
  --ink-2: #000000;
  --brand: #602166;
  --brand-2: #7c69ff;
  --brand-ring: rgb(188 188 188 / 20%);
  --bg-soft: #f7f8fa;
  --muted: #6b7280;
  --card: #fff;
  --line: #eef0f3;

  /* Altura fija para igualar el Form */
  --panel-fixed-h: 460px;
}

.routing-results .routing-detail,
.routing-results .routing-detail-container {
  color: var(--ink);
  padding: 18px 20px 28px;
}

/* ---------- Overlay de “procesando” ---------- */
.routing-results .routing-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99999;
  color: #fff;
  pointer-events: all;
}
.routing-results .routing-overlay-card {
  width: min(92vw, 560px);
  padding: 28px 24px;
  background: #000000;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.routing-results .routing-overlay-loader {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  margin: 0 auto 12px;
  animation: routing-spin 1s linear infinite;
}
@keyframes routing-spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.routing-results .routing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.routing-results .routing-header h2 {
  margin: 0;
  font-weight:  600;
  letter-spacing: 0.2px;
}
.routing-results .routing-header .back-button {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  font-weight:  600;
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.06s, background 0.2s;
}
.routing-results .routing-header .back-button:hover {
  background: #ececec;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.routing-results .routing-header .back-button:active { transform: translateY(1px); }

/* ---------- KPIs ---------- */
.routing-results .routing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.routing-results .routing-stats > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-weight:  600;
  color: var(--muted);
}
.routing-results .routing-stats > div strong {
  display: block;
  font-size: 20px;
  color: var(--ink);
  margin-top: 4px;
}

/* ==========================================================
   LAYOUT PRINCIPAL (match con RoutingForm)
   ========================================================== */

/* Grid 40/60 como en el Form */
.routing-results .routing-detail-container .routing-main {
  display: grid !important;
  grid-template-columns: 40% 60% !important;
  gap: 20px;
  align-items: stretch;
  height: var(--panel-fixed-h);          /* clave: fija la fila */
  min-height: var(--panel-fixed-h);
  max-height: var(--panel-fixed-h);
  overflow: hidden;                      /* el scroll va interno */
}

/* Columna izquierda (contiene la/las cards) */
.routing-results .routing-detail-container .routing-left-col {
  display: grid;
  grid-template-rows: 1fr 1fr;           /* por defecto: ambas visibles */
  gap: 16px;
  min-height: 0;
  height: 100%;                          /* iguala con mapa */
}

/* Cuando quieras vista única (orders o vehicles),
   añade clase al contenedor .routing-results o data-view */
.routing-results.is-orders-view .routing-detail-container .routing-left-col,
.routing-results[data-view="orders"] .routing-detail-container .routing-left-col {
  display: flex !important;
  flex-direction: column;
}
.routing-results.is-orders-view .routing-detail-container .routing-left-col > .routing-card:nth-child(1),
.routing-results[data-view="orders"] .routing-detail-container .routing-left-col > .routing-card:nth-child(1) {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
}
.routing-results.is-orders-view .routing-detail-container .routing-left-col > .routing-card:nth-child(2),
.routing-results[data-view="orders"] .routing-detail-container .routing-left-col > .routing-card:nth-child(2) {
  display: none !important;
}

.routing-results.is-vehicles-view .routing-detail-container .routing-left-col,
.routing-results[data-view="vehicles"] .routing-detail-container .routing-left-col {
  display: flex !important;
  flex-direction: column;
}
.routing-results.is-vehicles-view .routing-detail-container .routing-left-col > .routing-card:nth-child(1),
.routing-results[data-view="vehicles"] .routing-detail-container .routing-left-col > .routing-card:nth-child(1) {
  display: none !important;
}
.routing-results.is-vehicles-view .routing-detail-container .routing-left-col > .routing-card:nth-child(2),
.routing-results[data-view="vehicles"] .routing-detail-container .routing-left-col > .routing-card:nth-child(2) {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
}

/* Cards (paneles) y scroll interno para tablas */
.routing-results .routing-detail-container .routing-card,
.routing-results .routing-detail-container .routing-map-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;                    /* necesario para overflow */
}
.routing-results .routing-detail-container .routing-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.routing-results .routing-detail-container .routing-card-header h3 {
  margin: 0; font-size: 18px; font-weight:  600; color: var(--ink);
}
.routing-results .routing-detail-container .routing-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                   /* ← scroll real aquí */
  scrollbar-gutter: stable;
}

/* Columna derecha (mapa) */
.routing-results .routing-detail-container .routing-right-col {
  position: sticky !important;
  top: 84px;
  height: fit-content;
}
.routing-results .routing-detail-container .routing-map {
  flex: 1 1 auto;
  min-height: 0;
}
.routing-results .routing-detail-container .routing-map .leaflet-container {
  border-radius: 12px;
  height: 100% !important;          /* llena el alto del card */
  min-height: var(--panel-fixed-h); /* asegura equivalencia */
}

/* ---------- Tabla (look general) ---------- */
.routing-results .routing-detail-container .routing-table-list {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}
.routing-results .routing-detail-container .routing-table-list thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  color: #2c2c2c;
  font-size: 14px; font-weight:  600;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
}
.routing-results .routing-detail-container .routing-table-list tbody tr { background: #fff; }
.routing-results .routing-detail-container .routing-table-list tbody td {
  padding: 16px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f0f2f5;
}
.routing-results .routing-detail-container .routing-table-list input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
}
.routing-results .routing-detail-container .routing-table-list .col-num { text-align: left; font-variant-numeric: tabular-nums; }
.routing-results .routing-detail-container .routing-table-list .col-more { width: 60px; text-align: center; }
.routing-results .routing-detail-container .more-cell-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  width: 36px; height: 32px; line-height: 30px; text-align: center; cursor: pointer;
}

/* ---------- Empty state ---------- */
.routing-results .routing-detail-container .empty-row td { padding: 24px 12px; }
.routing-results .routing-detail-container .empty-state { text-align: center; padding: 8px 0; color: var(--muted); }
.routing-results .routing-detail-container .empty-state .empty-title { margin: 0; font-weight:  600; color: var(--ink); }
.routing-results .routing-detail-container .empty-state .empty-sub { margin: 4px 0 0; }

/* ==========================================================
   BOTONERA DE VISTAS (opcional, por si agregas dos botones)
   ========================================================== */

.routing-results .results-actions-inline{
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 10px 0;
}

/* Botón estilo chip (similar look al Form) */
.routing-results .results-toggle{
  background: var(--ink);
  color: #fff;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: none; cursor: pointer;
  transition: background .18s ease, transform .06s ease, box-shadow .12s ease;
}
.routing-results .results-toggle:hover{ background: var(--ink-2); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.routing-results .results-toggle:active{ transform: translateY(1px); }
.routing-results .results-toggle[aria-pressed="true"]{ background: var(--brand-ring); }

/* Si quieres iconos SVG dentro del botón */
.routing-results .results-toggle svg{ width: 20px; height: 20px; display: block; }

/* Estados activos por clase en el contenedor */
.routing-results.is-orders-view .results-toggle--orders,
.routing-results[data-view="orders"] .results-toggle--orders { background: var(--brand-ring); color: var(--ink); }
.routing-results.is-vehicles-view .results-toggle--vehicles,
.routing-results[data-view="vehicles"] .results-toggle--vehicles { background: var(--brand-ring); color: var(--ink); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1200px){
  .routing-results .routing-detail-container .routing-main{
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .routing-results .routing-detail-container .routing-right-col{
    position: static !important;
  }
  .routing-results .routing-detail-container .routing-left-col{
    height: auto !important;
    grid-template-rows: auto;
  }
  .routing-results .routing-detail-container .routing-map .leaflet-container{
    min-height: 420px !important; /* mapa más bajo en móvil */
  }

  /* En móvil, si estás en vista única, que el card ocupe auto-altura */
  .routing-results.is-orders-view .routing-detail-container .routing-left-col,
  .routing-results.is-vehicles-view .routing-detail-container .routing-left-col,
  .routing-results[data-view="orders"] .routing-detail-container .routing-left-col,
  .routing-results[data-view="vehicles"] .routing-detail-container .routing-left-col{
    height: auto !important;
  }
}

  /* ===========================
    RoutingProgress 
    =========================== */

  .routing-progress {
    /* colores */
    --ink: #000000;
    --ink-2: #000000;
    --brand: #602166;
    --brand-ring: rgb(188 188 188 / 20%);
    --bg-soft: #f7f8fa;
    --muted: #6b7280;
    --card: #ffffff;
    --line: #eef0f3;

    /* layout */
    --gap: 1.25rem;      
    --pad: 1rem;           
    --sticky-top: 5.25rem; 
    --min-track: 32rem;    
    --max-track: 64rem;   
    --track-sub: 12rem;   

    color: var(--ink);
    padding: 1.125rem 1.25rem 1.75rem;
    /* margin-left: -2.5rem; */
    /* margin-right: -2.5rem; */
    /* margin-top: -2.5rem; */
  }



.routing-progress .back-button {
  background: #fff;
  border: .0625rem solid #e5e7eb;
  color: var(--ink);
  padding: .5rem .9rem;
  border-radius: .75rem;
  font-weight:  600;
  cursor: pointer;
  transition: box-shadow .12s, transform .06s, background .2s;
}

  .routing-progress .back-button:hover {
    background: #ececec;
    box-shadow: 0 .375rem .875rem rgba(0,0,0,.06);
  }

  .routing-progress .back-button:active {
    transform: translateY(1px);
  }

  .routing-progress .btn {
    padding: .5rem .75rem;
    border-radius: .625rem;
    border: .0625rem solid var(--line);
    cursor: pointer;
  }

  .routing-progress .btn-primary { background: #fff; }



  /* === Cards base (mantén tu look) === */
  .routing-progress .routing-stats-solution > div {
    background: var(--card);
  border: .0625rem solid var(--line);
  border-radius: .875rem;
  padding: .5rem .75rem;
  box-shadow: 0 .125rem .5rem rgba(0,0,0,.06);
  font-weight:  600;
  color: var(--muted);
}

  /* ===== KPIs en UNA sola fila con FLEX, sin scroll en la tira ===== */
  .routing-progress .routing-stats-solution{
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
    flex-wrap: nowrap;            /* siempre 1 fila */
    overflow: visible !important; /* nada de scroll en la tira */
    padding-bottom: 0 !important;
  }

  /* Cada card KPI alineado al centro, altura compacta y SIN scroll vertical */
  .routing-progress .routing-stats-solution > div{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px;
    height: 48px;                 /* alto fijo */
    min-width: 170px;             /* no se aplastan de más */
    box-sizing: border-box;
    overflow: hidden;             /* evita cualquier scroll vertical del card */
  }

  /* Contenedor interno de tu markup */
  .routing-progress .routing-stats-solution .routing-stats-solution-container{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    height: 100%;
    padding: 1rem;
  }

  /* === SOLO el contenido del card puede “scrollear” en X, invisible === */
  .routing-stats-solution-container span{
    display: flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;          /* 1 sola línea */
    overflow-x: auto;             /* si se desborda, scroll horizontal */
    overflow-y: hidden;           /* jamás vertical */
    width: 100%;
    /* -ms-overflow-style: none; */     /* IE/Edge */
    /* scrollbar-width: none; */        /* Firefox */
  }
  /* .routing-stats-solution-container span::-webkit-scrollbar{ display:none; }  WebKit */

  /* Label compacto */
  .routing-stats-solution-container span p{
  margin: 0 !important;
  line-height: 1 !important;
  color: var(--muted);
  font-weight:  600;
  flex: 0 0 auto;               /* no se colapsa */
}

  /* Número inline, sin salto y sin margen superior */
  .routing-progress .routing-stats-solution > div strong{
    display: inline !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 1.25rem;
    color: var(--ink);
    flex: 0 0 auto;               /* mantiene su ancho */
  }

  /* (Opcional) si el título es larguísimo, recórtalo un poquito sin romper 1 línea */
  @supports (text-overflow: ellipsis) {
    .routing-stats-solution-container span p{
      max-width: 200px;           /* ajusta si lo necesitas */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* === KPIs: scroll horizontal fino SOLO entre 1024px y 1439px === */
  /* === KPIs: scroll horizontal en el contenedor SIN estirar cards (1024–1439px) === */
  /* === KPIs: scroll horizontal en el contenedor SIN estirar cards (1024–1439px) === */
  @media screen and (min-width: 1024px) and (max-width: 1439px) {

    /* El contenedor escrolea en X (fino), nunca en Y */
    .routing-progress .routing-stats-solution{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      flex-wrap: nowrap !important;                 /* siempre una fila */
      /* -webkit-overflow-scrolling: touch; centralizado globalmente */
      /* scrollbar-width: thin; */                   /* ← comentado (antes visible) */
      /* scrollbar-color: #53B66C transparent; */   /* ← comentado (antes visible) */
      /* scrollbar-width: none; */                        /* ← invisible (Firefox) */
      /* -ms-overflow-style: none; */                     /* ← invisible (IE/Edge legacy) */
      padding-bottom: .25rem;                       /* deja el espacio por si acaso */
    }

    /* Cada card conserva su tamaño (no grow, no stretch) */
    .routing-progress .routing-stats-solution > div{
      flex: 0 0 auto !important;                    /* no grow, no shrink */
      width: max-content !important;                /* tamaño por contenido */
      min-width: 170px;                             /* tu base */
      max-width: none !important;
    }

    /* El contenido interno NO hace scroll aquí (lo hace el contenedor) */
    .routing-stats-solution-container span{
      width: auto !important;
      overflow: visible !important;
      /* -ms-overflow-style: auto !important; */
      /* scrollbar-width: none !important; */
    }
    /* .routing-stats-solution-container span::-webkit-scrollbar{ display:none !important; } */

    /* WebKit/Blink — antes estilizada; ahora la ocultamos sin romper nada (COMENTADO - no usar) */
  }






  /* ===== GRID principal con columna derecha mínima de 430px ===== */

  .routing-progress .routing-main-solution {
    display: grid !important;
    grid-template-columns: 1fr minmax(430px, 60%) !important;
    gap: var(--gap);
    align-items: start;
    height: 77vh;
    min-height: var(--min-track);
    overflow: visible;
  }

  /* ===== Columna izquierda ===== */

  .routing-progress .routing-left-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    height: 100%;
  }

  .routing-progress .routing-card {
    background: var(--card);
    border: .0625rem solid var(--line);
    border-radius: .875rem;
    box-shadow: 0 .125rem .625rem rgba(0,0,0,.06);
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .routing-progress .routing-card-header {
    display: flex;
    flex-direction: column;
    /* padding: .25rem 0 .625rem;
    border-bottom: .0625rem solid var(--line);
    margin-bottom: .5rem; */
  }

  .routing-card-header button.veh-btn,
  .routing-card-header button.assign-btn {
      border-radius: 50px;
      outline: initial !important;
      box-shadow: none !important;
      font-size: .8rem!important;
      padding: .75rem 1.3rem .6rem!important;
      background-color: var(--ink);
      color: white!important;
  }

  .routing-header-actions {
    display: flex;
    gap: 1rem;
  }

  .routing-header-actions .btn.btn-warning {
    border-radius: 50px!important;
    outline: initial !important;
    box-shadow: none !important;
    font-size: .8rem!important;
    padding: .75rem 1.3rem .6rem!important;
  }


  /* Lista de vehículos (scroll interno) */

  .veh-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .veh-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: .0625rem solid var(--line);
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .12s, border-color .12s, background .12s;
  }

  .veh-row:hover {
    box-shadow: 0 .375rem .875rem rgba(0,0,0,.06);
    background: #ececec;
  }

  .veh-row.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 .1875rem var(--brand-ring);
    background: #f7f6ff;
  }

  .veh-left { display: flex; align-items: center; gap: .625rem; min-width: 0; }

  .veh-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    box-shadow: 0 0 0 .125rem #fff, 0 0 0 .1875rem rgba(0,0,0,.06);
    flex: 0 0 .75rem;
  }

  .veh-main { min-width: 0; }

.veh-plate {
  font-weight:  600;
  color: var(--ink);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  /* Cuadrito/barrita de color debajo de la placa (usa inline-style bg) */
  .veh-color-bar {
    width: 3rem;
    height: .75rem;
    border-radius: .375rem;
    border: .0625rem solid #e5e7eb;
    margin-top: .25rem;
  }

  .veh-type {
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.1;
    margin-top: .125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .veh-meta { display: flex; gap: .5rem; align-items: center; }

  .veh-chip {
    background: #fbfbfd;
    border: .0625rem solid var(--line);
    border-radius: .625rem;
    padding: .375rem .5rem;
    min-width: 4rem;
    text-align: center;
  }

  /* Botón de desasignar como texto/chip */
.btn-unassign.text-btn {
  min-width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight:  600;
  line-height: 1;
}
  .btn-unassign.text-btn:is(:hover,:focus) { background: #ececec; }
  .btn-unassign.text-btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn-unassign.is-loading { pointer-events: none; }



  .k-label { color: var(--muted); font-size: .6875rem; }

.k-num {
  display: block;
  margin-top: .125rem;
  font-variant-numeric: tabular-nums;
  font-weight:  600;
  color: var(--ink);
}

  .qr-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    /* gap: .5rem; */
    background: #fbfbfd;
    border: .0625rem solid var(--line);
    border-radius: .625rem;
    padding: .375rem .5rem;
    min-width: 4rem;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;

  }

  .qr-chip img {
    margin-top: .2rem;
  }


  .veh-actions { display: flex; align-items: center; gap: .5rem; }

.veh-btn {
  padding: .375rem .625rem;
  border-radius: .625rem;
  border: .0625rem solid var(--line);
  background: #fff;
  font-weight:  600;
  cursor: pointer;
}

  /* ===== Columna derecha (Mapa) ===== */

  .routing-progress .routing-right-col {
    position: sticky !important;
    top: var(--sticky-top);
    align-self: start;
    height: fit-content;
  }

  .routing-progress .routing-map-card {
    background: var(--card);
    border: .0625rem solid var(--line);
    border-radius: .875rem;
    box-shadow: 0 .125rem .625rem rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
  }

  /* ocultar header y chips/legend del mapa (si quieres verlos, borra estas dos líneas) */
  .routing-progress .routing-map-card .routing-card-title { display: none; }
  .routing-progress .routing-map-card .map-legend { display: none; }

  .routing-progress .routing-map {
    height: clamp(32rem, calc(100vh - var(--track-sub) - 2rem), 50rem);
  }

  .routing-progress .routing-map .leaflet-container {
    width: 100%;
    height: 100% !important;
    border-radius: .75rem;
  }

  /* ===== Empty state ===== */

.empty-state { text-align: center; padding: .5rem 0; color: var(--muted); }
.empty-state .empty-title { margin: 0; font-weight:  600; color: var(--ink); }
  .empty-state .empty-sub { margin: .25rem 0 0; }

  /* ===== Asignación ===== */

  .assign-overlay {
    position: fixed; inset: 0;
    background: rgba(17,17,27,.28);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
  }

  .assign-panel {
    width: min(57.5rem, 92vw);
    max-height: 82vh;
    background: #fff;
    border-radius: 1.125rem;
    border: .0625rem solid var(--line);
    box-shadow: 0 1.5rem 3.75rem rgba(0,0,0,.2);
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  .assign-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem; border-bottom: .0625rem solid var(--line);
  }

.assign-x {
  background: #fff; border: .0625rem solid var(--line);
  border-radius: .625rem; padding: .375rem .5rem; cursor: pointer; font-weight:  600;
}

  .assign-body {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .75rem; padding: .75rem; min-height: 22.5rem;
  }

  .assign-col {
    background: #fbfbfd; border: .0625rem solid var(--line);
    border-radius: .875rem; padding: .625rem; min-height: 0;
    display: flex; flex-direction: column;
  }

  .assign-col.routes { overflow: auto; }
  .assign-col.ops { overflow: hidden; }

  .assign-footer {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .625rem .75rem; border-top: .0625rem solid var(--line); background: #fff;
  }

  /* ===== Responsive ===== */

  @media (max-width: 75rem) { /* 1200px */
    .routing-progress .routing-main-solution {
      grid-template-columns: 1fr !important;
      height: auto; min-height: 0; max-height: none;
    }
    .routing-progress .routing-right-col { position: static !important; top: 0; }
    .routing-progress .routing-map .leaflet-container { min-height: 26rem; }
    .assign-body { grid-template-columns: 1fr; }
  }

  /* >= 1920px */
  @media (min-width: 120rem) {
    .routing-progress {
      --min-track: 36rem;  /* más alto */
      --max-track: 80rem;  /* puede crecer más */
      --track-sub: 9rem;   /* resta menos al 100vh */
      --sticky-top: 5rem;
    }
    .routing-progress .routing-map .leaflet-container { min-height: 26rem; }
  }

  /* Opcional: >= 2560px */
  @media (min-width: 160rem) {
    .routing-progress {
      --min-track: 40rem;
      --max-track: 90rem;
      --track-sub: 7rem;
    }
  }

  /* === Parches visuales para eliminar huecos en RoutingProgress === */

  /* 1. Asegura que el grid se expanda completamente */
  .routing-progress .routing-main-solution {
    min-height: 40rem;             /* seguridad mínima */
    max-height: none;
  }

  /* 2. Elimina márgenes internos extras de las columnas */
  .routing-progress .routing-left-col,
  .routing-progress .routing-right-col {
    height: 100%;
    min-height: 0;
  }

  /* 3. Forzar a que el mapa crezca completamente */
  .routing-progress .routing-map-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .routing-progress .routing-map {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .routing-progress .routing-map .leaflet-container {
    height: 100% !important;
    min-height: 26rem; /* seguridad */
  }

  /* ==== FIX: Eliminar huecos en columnas y mapa en RoutingProgress ==== */

  /* 1. El grid principal ocupa toda la altura útil de pantalla */
  .routing-progress .routing-main-solution {
    min-height: 40rem;              /* Seguridad mínima */
    max-height: none;
  }

  /* 2. Asegura que ambas columnas crezcan completas */
  .routing-progress .routing-left-col,
  .routing-progress .routing-right-col {
    height: 100%;
    min-height: 0;
  }

  /* 3. Forzar altura completa del mapa */
  .routing-progress .routing-map-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .routing-progress .routing-map {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  /* 4. Leaflet container debe ocupar 100% */
  .routing-progress .routing-map .leaflet-container {
    height: 100% !important;
    min-height: 26rem;
  }

  /* === Override final para eliminar huecos debajo del mapa === */

  .routing-progress .routing-main-solution {
    min-height: 450px !important;
  }

  .routing-progress .routing-left-col,
  .routing-progress .routing-right-col {
    height: 100% !important;
    min-height: 0 !important;
  }

  .routing-progress .routing-map-card,
  .routing-progress .routing-map {
    height: 100% !important;
    min-height: 0 !important;
  }

  .routing-progress .routing-map .leaflet-container {
    height: 100% !important;
    min-height: 26rem !important; /* por seguridad en vacío */
  }



  /* .veh-row.selected {
    background-color: rgba(101,84,245,0.08);
    border-left: 3px solid var(--brand, #602166);
  } */


  /* .veh-row.selected {
    background-color: rgba(101, 84, 245, 0.15);
    border-left: 3px solid var(--brand, #602166);
  } */

  /* .veh-row.selected {
    background: var(--route-soft, rgba(0,0,0,.06));
    border-left: 3px solid var(--route-solid, #53B66C);
    box-shadow:
      0 6px 18px rgba(0,0,0,.06),
      0 0 0 .18rem hsl(var(--route-h, 230) var(--route-s,75%) var(--route-l,45%) / .18);
  }

  .veh-row.selected:hover {
    background: hsl(var(--route-h,230) var(--route-s,75%) var(--route-l,45%) / .20);
  }

  .veh-row .veh-dot { background: var(--route-solid, #53B66C); } */

  /* Card seleccionado usa el mismo color que el dot */
  .veh-row.selected {
    background: var(--route-soft, rgba(0,0,0,.06));
    border-left: 3px solid var(--route-solid, #53B66C);
    box-shadow:
      0 6px 18px rgba(0,0,0,.06),
      0 0 0 .18rem var(--route-ring, rgba(69,86,172,.18));
  }

  /* En hover, intensifica el mismo color (y pisa el :hover genérico) */
  .veh-row.selected:hover {
    background: var(--route-soft-strong, rgba(0,0,0,.10));
  }

  /* (opcional) Chips con borde en el mismo tono suave */
  .veh-row.selected .veh-chip,
  .veh-row.selected .qr-chip {
    border-color: var(--route-soft, rgba(0,0,0,.06));
  }

  /* (opcional) Asegura que el dot siempre refleje el color sólido */
  .veh-row .veh-dot {
    background: var(--route-solid, #53B66C);
  }


.routing-card-header button.veh-btn {
  background-color: #fff;
  border: 1px solid var(--line);
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-weight:  600;
  cursor: pointer;
  transition: background 0.2s;
}


  .routing-card-header button.veh-btn:hover {
    background-color: #ececec;
  }

  .routing-card-header {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    /* padding: 0 0 .5rem;
    border-bottom: .0625rem solid var(--line);
    margin-bottom: .5rem; */
  }

  .routing-card-header .routing-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

.routing-card-header .routing-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight:  600;
  color: var(--ink);
}

  .routing-card-header .routing-counter {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .875rem;
    color: var(--muted);
  }

.routing-card-header .routing-counter .selected-badge {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight:  600;
  font-size: .75rem;
}

.routing-card-header .routing-header-row .veh-btn {
  background-color: var(--ink);
  color: white;
  padding: .75rem 1.3rem .6rem;
  font-size: .8rem;
  border-radius: 50px;
  border: none;
  font-weight:  600;
  cursor: pointer;
  transition: box-shadow .2s;
}

  /* .routing-card-header .routing-header-row .veh-btn:hover {
    background-color: #f0f0f0;
  } */

.routing-card-header .routing-header-row .assign-btn {
  background-color: var(--ink);
  color: white;
  padding: .75rem 1.3rem .6rem;
  font-size: .8rem;
  border-radius: 50px;
  border: none;
  font-weight:  600;
  cursor: pointer;
  transition: box-shadow .2s;
}


  .routing-progress-container {
    /* height: 80vh; */
    /* max-height: 100vh; */
    display: flex;
    flex-direction: column;
    /* overflow: hidden;  */
  }

  /* 
  .routing-progress {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  } */

  .routing-progress-container {
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
  }

  .routing-progress {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* overflow: hidden;  */
  }

  .routing-main-solution {
    flex: 1 1 auto;
    display: flex;
    gap: 20px;
    min-height: 0;
    /* overflow: hidden; */
  }

  .routing-left-col,
  .routing-right-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* overflow: hidden; */
  }

  .veh-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  .routing-map-card,
  .routing-map {
    flex: 1 1 auto;
    min-height: 0;
    /* overflow: hidden; */
  }

  .no-margin {
    margin-top: 0!important;
  }

  .icon-detail-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

  }



  /* === Chips con wrap para que aparezcan debajo === */

  .veh-meta > .veh-chip,
  .veh-meta > .qr-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 60px;
    height: 60px;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
  }

  .veh-meta > .icon-detail-btn {
    width: 56px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
  }

  .veh-meta > .icon-detail-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    margin: auto;
  }

  .veh-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
    padding: 0.5rem 0;
  }

.k-num {
  display: block;
  margin-top: .125rem;
  font-variant-numeric: tabular-nums;
  font-weight:  600;
  color: var(--ink);

    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    position: relative;
    cursor: default;
  }

  .veh-meta > .veh-chip,
  .veh-meta > .qr-chip,
  .veh-meta > .icon-detail-btn {
    flex-shrink: 0;
  }

  .veh-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* -webkit-overflow-scrolling: touch; centralizado globalmente */
    padding: 0.5rem;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    border-bottom: 1px solid var(--line); 
  }

  .veh-row > * {
    flex-shrink: 0;
    min-width: max-content;
    scroll-snap-align: start;
  }

  .veh-row {
    /* … tu código existente … */
    overflow-x: auto;
    /* scrollbar-width: none; */      
    /* -ms-overflow-style: none; */   
  }

  /* .veh-row::-webkit-scrollbar {
    display: none;            
  } */

  /* ===== Scroll fino visible (lista de rutas) — 80rem–120rem ===== */
  /* ===== Scroll fino y con marca en CADA FILA (.veh-row) — 1280px–1920px ===== */
  @media screen and (min-width: 1280px) and (max-width: 1920px) {

    /* A) Habilita el scroll horizontal (lo mantenemos) */
    .routing-progress .veh-row {
      overflow-x: auto !important;
      /* -webkit-overflow-scrolling: touch !important; centralizado globalmente */

      /* Firefox: antes era thin con color — lo dejamos invisible */
      /* scrollbar-width: thin !important;  */  /* ← comentado */
      /* scrollbar-color: #53B66C transparent !important; */ /* ← comentado */
      /* scrollbar-width: none !important; */      /* ← invisible */
      /* -ms-overflow-style: none !important; */   /* IE/Edge legacy: invisible */
    }

    /* B) WebKit/Blink scrollbar — COMENTADO (no usar) */
    /* C) Feedback sutil — lo dejamos pero invisible (COMENTADO) */
  }


  /* Las filas mantienen su alto; no se encogen aunque haya muchas */
  .veh-list .veh-row {
    flex: 0 0 auto !important;  /* <- evita shrink vertical */
  }

  /* Cadena de alturas correcta para que el scroll esté DENTRO de la lista */
  .routing-left-col,
  .routing-card,
  .veh-list {
    min-height: 0 !important;
  }

  /* La lista ocupa el espacio disponible del card y scrollea en Y */
  .veh-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;      /* el X déjalo en .veh-meta si lo necesitas */
    scrollbar-gutter: stable;
  }

  /* === Scroll azul estilo marca (lista vertical de rutas) === */
  .veh-list{
    /* Firefox */
    /* scrollbar-width: thin; */                                   /* grosor fino */
    /* scrollbar-color: #53B66C transparent; */      /* thumb / track */
  }

  /* WebKit/Blink (comentado) */
  /*
  html body .routing-progress .veh-list::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 10px;
    background: transparent;
  }

  html body .routing-progress .veh-list::-webkit-scrollbar-track{
    background: transparent;
    border-radius: 10px;
  }

  html body .routing-progress .veh-list::-webkit-scrollbar-thumb{
    -webkit-appearance: none;
    background:  #53B66C;
    border-radius: 10px;
    background-clip: padding-box;
    border: 3px solid transparent;
    box-shadow:
      0 1px 4px rgba(0,0,0,.12),
      0 0 0 .125rem var(--brand-ring, rgb(188 188 188 / 20%));
  }

  html body .routing-progress .veh-list:hover::-webkit-scrollbar-thumb{
    background:  #53B66C;
  }

  html body .routing-progress .veh-list::-webkit-scrollbar-thumb:active{
    background: #53B66C;
  }

  @media screen and (min-width: 1280px) and (max-width: 1920px){
    html body .routing-progress .veh-list::-webkit-scrollbar{
      width: 8px;
    }
  }
  */



/* === Compactar SOLO los 3 botones del header de "Rutas" (1200–1460px) === */
@media screen and (min-width: 1200px) and (max-width: 1460px) {
  /* recorta solo los .assign-btn dentro del header del card de Rutas */
  .routing-left-col .routing-card .routing-card-header .routing-header-row .assign-btn {
    padding: .45rem .9rem !important;
    height: 40px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    box-shadow: none !important;
  }

  /* un pelín menos de espacio entre ellos */
  .routing-left-col .routing-card .routing-card-header .routing-header-row {
    gap: .5rem !important;
  }
}

/* === Map Expanded Mode === */
.routing-progress .kpi-grid-expanded {
  margin-bottom: 0 !important;
}

.routing-progress .routing-main-solution.map-expanded {
  display: block !important;
  margin-top: 8px !important;
  padding-top: 0 !important;
}

.routing-progress .routing-main-solution.map-expanded .routing-left-col {
  display: none !important;
}

.routing-progress .routing-main-solution.map-expanded .routing-right-col {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* MODAL CONTENEDOR */
.change-route-modal {
  max-width: 680px;
  width: 100%;
}

.change-route-modal .modal-content {
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  background: #ffffff;
  border: none;
}

/* HEADER */
.change-route-modal__header {
  background-color: #f7f8fa;
  color: var(--ink);
  font-weight:  600;
  font-size: 1.1rem;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* BODY */
.change-route-modal__body {
  padding: 24px;
}

.change-route-modal__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* SELECT */
.change-route-modal__dropdown {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}

.change-route-modal__dropdown:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(100, 61, 255, 0.2);
}

/* LISTA DE PUNTOS */
.change-route-modal__points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 8px;
  background: #f9f9fb;
  padding: 12px;
  border: 1px solid #e0e0e0;
}

.change-route-modal__point {
  font-size: 0.95rem;
  color: var(--ink);
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 6px;
}

/* BOTONES */
.change-route-modal__buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.change-route-modal__cancel-btn {
  flex: 1;
  padding: 12px;
  background-color: transparent;
  color: var(--ink);
  font-weight:  600;
  font-size: 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.change-route-modal__cancel-btn:hover {
  background-color: rgba(96, 33, 102, 0.05);
}

.change-route-modal__confirm-btn {
  flex: 1;
  padding: 12px;
  background-color: var(--ink);
  color: white;
  font-weight:  600;
  font-size: 0.95rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.change-route-modal__confirm-btn:hover {
  background-color: #602166;
}

/* CERRAR */
.change-route-modal__header .close {
  color: #666;
  font-size: 1.2rem;
  opacity: 1;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
  font-size: 14px;
}

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9f9fb;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.select-trigger .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.select-trigger .chevron {
  margin-left: auto;
  font-size: 12px;
  color: #666;
}

.select-options {
  position: absolute;
  z-index: 99;
  background: white;
  width: 100%;
  margin-top: 4px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}

.select-options li {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
}

.select-options li:hover {
  background: #ececec;
}

.select-options .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.AssignDriversPanel-module_assignBody__X0HaT{flex:1;display:flex;justify-content:flex-start;align-items:flex-start;padding:16px 0;overflow-y:auto;width:100%;min-height:300px}.AssignDriversPanel-module_assignBody__X0HaT::-webkit-scrollbar{width:8px}.AssignDriversPanel-module_assignBody__X0HaT::-webkit-scrollbar-track{background:#f5f5f5;border-radius:4px}.AssignDriversPanel-module_assignBody__X0HaT::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.AssignDriversPanel-module_assignBody__X0HaT::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.AssignDriversPanel-module_assignTable__gFpTi{width:100%;max-width:100%;border-collapse:collapse;table-layout:auto;margin:0;font-size:14px}.AssignDriversPanel-module_assignTable__gFpTi thead{position:sticky;top:0;background:#f7f8fa;z-index:10;border-bottom:1px solid #eef0f3}.AssignDriversPanel-module_assignTable__gFpTi th{padding:12px 16px;text-align:left;font-weight:600;font-size:12px;color:#555;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #eef0f3;vertical-align:middle;background:#f7f8fa}.AssignDriversPanel-module_assignTable__gFpTi tbody tr{border-bottom:1px solid #eee;transition:background-color .2s ease}.AssignDriversPanel-module_assignTable__gFpTi tbody tr:hover{background-color:#fafafa}.AssignDriversPanel-module_assignTable__gFpTi td{padding:12px 16px;vertical-align:middle;font-size:14px;color:#333}.AssignDriversPanel-module_assignTable__gFpTi td:first-child{width:40px;padding-left:12px}.AssignDriversPanel-module_assignRemoveHeader__mZEYS{width:40px !important;padding:12px !important;text-align:center !important}.AssignDriversPanel-module_assignCarrierHeader__6bFUE{min-width:230px !important}.AssignDriversPanel-module_assignCarrierCell__P54nz{min-width:230px !important}.AssignDriversPanel-module_assignOperatorHeader__9LkQc{min-width:230px !important}.AssignDriversPanel-module_assignOperatorCell__J0KjQ{min-width:230px !important}.AssignDriversPanel-module_assignRemoveBtn__BUQ8T{display:none;border:none;background:transparent;cursor:pointer;color:#6b7280;font-size:16px;padding:0;line-height:1}.AssignDriversPanel-module_assignRemoveBtn__BUQ8T:hover{color:#e53935}.AssignDriversPanel-module_assignRemoveCell__gRndO{width:40px !important;text-align:center;padding:12px 8px !important;vertical-align:middle}.AssignDriversPanel-module_assignRemoveIcon__sP9o1{display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:#e53935;cursor:pointer;user-select:none;line-height:1;transition:color .2s ease,transform .2s ease;padding:4px;border-radius:4px}.AssignDriversPanel-module_assignRemoveIcon__sP9o1:hover{color:#d32f2f;transform:scale(1.1);background-color:rgba(229,57,53,.08)}.AssignDriversPanel-module_assignRemoveIcon__sP9o1:active{transform:scale(0.95)}.AssignDriversPanel-module_assignRouteLabel__ckCNG{font-weight:600;color:#000;margin-bottom:4px;font-size:14px}.AssignDriversPanel-module_assignRouteSubinfo__KN5DS{display:flex;flex-direction:column;gap:2px}.AssignDriversPanel-module_assignRouteName__R1wsq{font-weight:600;color:#000;font-size:14px;line-height:1.3}.AssignDriversPanel-module_assignRouteMeta__3j3\+M{font-size:12px;color:#777;line-height:1.3}.AssignDriversPanel-module_assignLight__s--kA{background:#fff;color:#000;border:1px solid #ddd;padding:10px 18px;font-size:14px;border-radius:30px;cursor:pointer;transition:all .2s ease;font-weight:500}.AssignDriversPanel-module_assignLight__s--kA:hover{background:#f5f5f5;border-color:#bbb}.AssignDriversPanel-module_assignLight__s--kA:active{background:#ececec}.AssignDriversPanel-module_assignLight__s--kA:disabled{opacity:.5;cursor:not-allowed}@media(max-width: 768px){.AssignDriversPanel-module_assignTable__gFpTi{font-size:12px}.AssignDriversPanel-module_assignTable__gFpTi th,.AssignDriversPanel-module_assignTable__gFpTi td{padding:10px 12px}.AssignDriversPanel-module_assignRouteLabel__ckCNG{font-size:12px}.AssignDriversPanel-module_assignRouteName__R1wsq{font-size:12px}.AssignDriversPanel-module_assignRouteMeta__3j3\+M{font-size:11px}}.assignTable td .magic-select__control{min-height:40px;border-radius:8px}.assignTable td .magic-select__menu{z-index:1200}.AssignDriversPanel-module_assignRemoveIcon__sP9o1:focus-visible{outline:2px solid #602166;outline-offset:2px}.AssignDriversPanel-module_assignLight__s--kA:focus-visible{outline:2px solid #602166;outline-offset:2px}
.routing-detail-scope {
  --ink: #000000;
  --line: #eef0f3;
  --muted: #6b7280;
}

.routing-detail-scope.detail-offcanvas {
  width: 75% !important;
  max-width: 92vw;
}
@media (max-width: 768px) {
  .routing-detail-scope.detail-offcanvas {
    width: 100% !important;
    max-width: 100vw;
  }
}
.routing-detail-scope .modal-dialog {
  position: fixed;
  right: 0;
  top: 0;
  margin: 0;
  height: 100%;
  transform: none !important;
  width: 75%;
  max-width: 92vw;
}
@media (max-width: 768px) {
  .routing-detail-scope .modal-dialog {
    width: 100vw;
    max-width: 100vw;
  }
}
.routing-detail-scope .modal-content {
  height: 100%;
  border-radius: 0;
  border-left: 1px solid var(--line);
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.12);
}
.routing-detail-scope .modal-header {
  border-bottom: 1px solid var(--line);
}
.routing-detail-scope .modal-title {
  font-weight:  600;
  color: var(--ink);
  font-size: 16px;
}
.routing-detail-scope .routing-detail-name {
  font-weight: 400;
  font-size: 14px;
  margin-left: 8px;
  color: var(--muted);
}

.routing-detail-body {
  padding: 16px 20px;
  overflow: auto;
}

/* MagicTabs is now used instead - styles are in MagicTabs.module.css */
.routing-detail-tabs {
  margin-bottom: 16px;
}

.routing-detail-section-title {
  font-size: 15px;
  font-weight:  600;
  margin-bottom: 8px;
  color: var(--ink);
}
.routing-detail-subtitle {
  font-size: 14px;
  font-weight:  600;
  margin-bottom: 6px;
  color: var(--ink);
}

.routing-detail-operator-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.routing-detail-operator-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}
/* .routing-detail-operator-btn {
  padding: 6px 14px;
  font-size: 14px;
} */

/* .routing-detail-map-placeholder {
  width: 100%;
  height: 300px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  margin: 16px 0;
} */

.routing-detail-map-wrapper {
  width: calc(100% + 3rem); 
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  height: 300px;
  background: #f3f4f6;
  border: 1px dashed var(--line);
  /* border-radius: 6px; */
  overflow: hidden;
}


.routing-detail-map-wrapper .leaflet-container {
  height: 100% !important;
  border-radius: 6px;
}

.routing-detail-orders-wrapper {
  overflow-x: auto;
}
.routing-detail-orders-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}
.routing-detail-orders-table thead th {
  background: #fff;
  color: #2c2c2c;
  font-size: 14px;
  font-weight:  600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.routing-detail-orders-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f2f5;
  white-space: nowrap;
}
.routing-detail-orders-table thead th:first-child,
.routing-detail-orders-table tbody td:first-child {
  width: 40px;
  text-align: center;
}

.routing-detail-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight:  600;
  color: #fff;
}
.routing-detail-status-completed {
  background-color: #53B66C;
}
.routing-detail-status-pending {
  background-color: #f5b849;
}


.routing-detail-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}

.routing-detail-stat {
  flex: 1;
  min-width: 100px;
  background: #F6F6F6;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  gap: 6px;
}

.routing-detail-stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  margin-right: 6px;
}

.routing-detail-stat-value {
  font-size: 18px;
  font-weight:  600;
  color: var(--ink);
}



.routing-detail-operator-assigned .operator-name {
  font-size: 16px;
  font-weight:  600;
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  color: #000000;
}

.routing-detail-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.edit-icon-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}
.edit-icon-btn:hover {
  color: var(--ink);
}

.routing-detail-viewblock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--ink);
}

.routing-detail-row.bottom {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
}

.routing-detail-row strong {
  font-weight:  600;
  color: var(--ink);
}

.routing-detail-section.fullrow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* .routing-detail-row.top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink);
} */

.routing-detail-row.bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

.routing-detail-row select.routing-detail-operator-input {
  max-width: 220px;
}

/* .routing-detail-operator-btn {
  margin-left: auto;
} */


.routing-detail-row.top > div {
  flex: 1 1 250px;
  min-width: 200px;
}

/* .routing-detail-operator-btn {
  flex: 0 0 auto;
  white-space: nowrap;
} */


/* === Wrappers de inputs con dropdown === */
.assign-input-wrapper {
  position: relative;
  width: 220px;
  max-width: 100%;
}

.routing-detail-operator-input {
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}

/* === Dropdown de opciones === */
.assign-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 6px 6px;
}

/* === Opciones individuales === */
.assign-option {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-option:hover {
  background-color: #ececec;
}

.routing-detail-block-input {
  background: #F6F6F6;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  flex: 1 1 220px;
  min-width: 220px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.routing-detail-operator-btn.assign-btn {
  background-color: var(--ink)!important;
  color: white!important;
  padding: .75rem 1.3rem .6rem!important;
  font-size: .8rem!important;
  border-radius: 50px!important;
  border: none!important;
  font-weight:  600!important;
  cursor: pointer!important;
  transition: box-shadow .2s!important;
}

.assign-section {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.assign-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 220px;
}

.assign-label {
  font-weight:  600;
  color: #000000;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.assign-input-wrapper {
  position: relative;
}

.assign-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
}

.assign-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.assign-option {
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.assign-option:hover {
  background: #ececec;
}

.assign-btn {
  background-color: var(--ink);
  color: white;
  padding: .75rem 1.3rem .6rem;
  font-size: .8rem;
  border-radius: 50px;
  border: none;
  font-weight:  600;
  cursor: pointer;
  transition: box-shadow .2s;
}

/* Aumenta ancho fijo de los inputs dentro de assign-block sin romper estructura */
.assign-block .assign-input-wrapper {
  width: 100%;
  max-width: 100%;
}

.assign-block .assign-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.assign-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;

  /* 👇 este es el fix importante */
  z-index: 1050; /* más alto que Leaflet (400–1000) y otros componentes */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.assign-option {
  position: relative; 
}


.assign-option.disabled {
  pointer-events: none;    
  cursor: not-allowed;
  opacity: 0.45;             
  filter: grayscale(0.15);
  background-image: none;
}

.assign-option.disabled:hover {
  background: inherit;
}

.assign-option.disabled::after {
  content: "🔒";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.9;
}

.assign-option:not(.disabled):hover {
  background: #ececec;
}





.RoutingMergeRoutesModal-module_body__LO1ap{padding:24px;display:flex;flex-direction:column;gap:20px}.RoutingMergeRoutesModal-module_section__iz5LF{display:flex;flex-direction:column;gap:12px}.RoutingMergeRoutesModal-module_sectionTitle__2UbSK{font-size:16px;font-weight:600;color:var(--ink, #000000);margin:0}.RoutingMergeRoutesModal-module_sectionLabel__dQ7On{font-size:16px;font-weight:600;color:var(--ink, #000000);margin:0 0 8px 0}.RoutingMergeRoutesModal-module_routesList__bSve1{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;background:#f9f9fb;border-radius:12px;padding:12px;border:1px solid #e8e8ec}.RoutingMergeRoutesModal-module_routeItem__v9uUi{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-radius:20px;font-size:14px;color:#333;border:1px solid #e0e0e0;white-space:nowrap}.RoutingMergeRoutesModal-module_routeItem__v9uUi i{font-size:14px;color:#999}.RoutingMergeRoutesModal-module_colorDot__jC9lz{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.08)}.RoutingMergeRoutesModal-module_separator__E6lzk{display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative;padding:20px 0;gap:12px}.RoutingMergeRoutesModal-module_separator__E6lzk::before,.RoutingMergeRoutesModal-module_separator__E6lzk::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right, transparent, #e0e0e0 20%, #e0e0e0 80%, transparent)}.RoutingMergeRoutesModal-module_separator__E6lzk::before{top:0}.RoutingMergeRoutesModal-module_separator__E6lzk::after{bottom:0}.RoutingMergeRoutesModal-module_separator__E6lzk i{font-size:28px;color:#602166;background:#fff;padding:0 8px;z-index:1}.RoutingMergeRoutesModal-module_separatorLabel__QuIwB{font-size:16px;font-weight:600;color:#602166;background:#fff;padding:0 8px;z-index:1;text-align:center;white-space:nowrap}.RoutingMergeRoutesModal-module_targetSection__EYiD2{display:flex;flex-direction:column;gap:8px}.RoutingMergeRoutesModal-module_helperText__lA7Gm{font-size:12px;color:#666;line-height:1.5;margin:0;padding:12px 16px;background:#f5f5f7;border-radius:8px;border-left:3px solid #602166}.RoutingMergeRoutesModal-module_helperText__lA7Gm i{margin-right:6px;font-size:14px;color:#602166}.RoutingMergeRoutesModal-module_destinationSection__aWwhO{display:flex;flex-direction:column;gap:12px}.RoutingMergeRoutesModal-module_destinationHeader__NBY9E{display:flex;justify-content:space-between;align-items:center}.RoutingMergeRoutesModal-module_destinationTitle__6lMvS{font-size:14px;font-weight:600;color:#2e7d32;margin:0;display:flex;align-items:center;gap:8px}.RoutingMergeRoutesModal-module_destinationTitle__6lMvS i{font-size:18px}.RoutingMergeRoutesModal-module_changeButton__E2G-Q{background:none;border:none;color:#602166;font-size:12px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s}.RoutingMergeRoutesModal-module_changeButton__E2G-Q:hover{background:rgba(96,33,102,.08)}.RoutingMergeRoutesModal-module_destinationRoute__NL7J4{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);border-radius:12px;border:2px solid #4caf50}.RoutingMergeRoutesModal-module_destinationRoute__NL7J4 i{font-size:20px;color:#2e7d32}.RoutingMergeRoutesModal-module_destinationRoute__NL7J4 i:last-child{margin-left:auto}.RoutingMergeRoutesModal-module_destinationName__cB2xb{font-size:16px;font-weight:600;color:#1b5e20}.RoutingMergeRoutesModal-module_disappearSection__Jkmff{display:flex;flex-direction:column;gap:12px}.RoutingMergeRoutesModal-module_disappearTitle__z-Rsh{font-size:14px;font-weight:600;color:#666;margin:0;display:flex;align-items:center;gap:8px}.RoutingMergeRoutesModal-module_disappearTitle__z-Rsh i{font-size:18px;color:#999}.RoutingMergeRoutesModal-module_disappearList__GfpCR{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}.RoutingMergeRoutesModal-module_disappearRoute__e6RpN{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#f5f5f5;border-radius:20px;font-size:14px;color:#888;border:1px dashed #ccc;opacity:.85}.RoutingMergeRoutesModal-module_disappearRoute__e6RpN .RoutingMergeRoutesModal-module_colorDot__jC9lz{opacity:.6}.RoutingMergeRoutesModal-module_disappearBadge__vZiA0{font-size:10px;font-weight:500;color:#d32f2f;background:rgba(211,47,47,.1);padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}.RoutingMergeRoutesModal-module_infoMessage__YwNMT{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0}.RoutingMergeRoutesModal-module_infoMessage__YwNMT i{font-size:18px;color:#666;flex-shrink:0}.RoutingMergeRoutesModal-module_infoMessage__YwNMT span{font-size:12px;color:#555;line-height:1.4;flex:1}.RoutingMergeRoutesModal-module_actionButtons__Pu7eD{display:flex;justify-content:space-between;gap:12px;padding-top:8px}@media(max-width: 768px){.RoutingMergeRoutesModal-module_body__LO1ap{padding:20px}.RoutingMergeRoutesModal-module_routeItem__v9uUi{font-size:12px;padding:5px 10px}.RoutingMergeRoutesModal-module_separator__E6lzk i{font-size:24px}.RoutingMergeRoutesModal-module_helperText__lA7Gm{font-size:11px;padding:10px 12px}.RoutingMergeRoutesModal-module_destinationRoute__NL7J4{padding:10px 12px}.RoutingMergeRoutesModal-module_destinationName__cB2xb{font-size:14px}.RoutingMergeRoutesModal-module_disappearRoute__e6RpN{font-size:12px;padding:5px 10px}.RoutingMergeRoutesModal-module_disappearBadge__vZiA0{font-size:9px;padding:2px 4px}.RoutingMergeRoutesModal-module_infoMessage__YwNMT{padding:10px 12px}.RoutingMergeRoutesModal-module_infoMessage__YwNMT span{font-size:12px}}
  .modal-force-z {
    z-index: 2001 !important;
  }
  .backdrop-force-z {
    z-index: 2000 !important;
  }