/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 34px;
  height: 24px;
}

.app-brand-logo.demo svg {
  width: 35px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}
.oculto {
    display: none;
}
.dt-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/*------------------------------------------*/
/*------------------------------------------*/
/*Agregado por Nicolas, los saque de los templates/
/* Carteles bonitos style */
.swal2-container {
  z-index: 20000 !important;
}

/* Tags mejorados */
#contenedorTags .tag-badge {
  background-color: #e7f3ff;
  border: 1px solid #91c6ff;
  color: #004080;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}

#contenedorTags .tag-badge .btn-close {
  font-size: 0.6rem;
  margin-left: 8px;
}

/* Cliente item */
.cliente-item {
  background-color: #fff;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: grab;
}

#zonaDropAsignar.drag-over {
  background-color: #d0eaff;
  border: 2px dashed #007bff;
}

/* Botón quitar producto */
.boton-quitar-producto {
  cursor: pointer;
  color: #0d6efd;
  font-weight: bold;
  transition: color 0.2s;
}

.boton-quitar-producto:hover {
  color: #dc3545;
}

/* Elemento bloqueado */
.bloqueado {
  pointer-events: none;
  opacity: 0.5;
}

/* Estilo modal fuerte */
.modal-content.fuerte {
  box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.45), 0 1.5rem 3rem rgba(0, 0, 0, 0.5) !important;
  border: 3px solid #08345C !important;
  border-radius: 1.2rem !important;
}

/* Fondo blur modal */
.modal-backdrop.show {
  background-color: #23272b !important;
  opacity: 0.7 !important;
  backdrop-filter: blur(2px);
}


/*------------------------------------------*/
/*------------------------------------------*/
/*Agregado  por Ramiro para el drag and drop*/
.producto-draggable {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #d3d3d3;
  margin-bottom: 5px;
  background-color: #fff;
  transition: background-color 0.2s ease;
}

.producto-draggable:hover {
  background-color: #f2f2f2;
}

.producto-draggable.selected {
  background-color: #d0ebff;
  border-color: #339af0;
}

.producto-draggable.selected {
  background-color: #7166eb !important;
  color: white;
  border: 1px solid #d12329;
}
/*para controlar el colo de las letras de los productos seleccionados*/

.producto-draggable:hover {
  cursor: pointer;
}

.producto-draggable.selected {
  background-color: #7166eb;
  color: white;
}

.producto-draggable.selected:hover {
  background-color: #7166eb;
  color: white;
}
/* Estilos para el contenedor de productos */
.drop-hover {
  outline: 2px dashed #d12329;
  background-color: #f0f0f0;
}

.producto-asignado {
  margin: 2px 0;
  padding: 3px 6px;
  background-color: #7166eb;
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Todos los botones de integración */
#botonesContainer button,
#btnObtenerTokenFin,
#btnEjecutarTodos {
  width: 100%;
  min-height: 42px;
  font-size: 0.9rem;
  margin-bottom: 6px !important;
  padding: 6px 12px;
  border-radius: 999px; /* pill */
}

/* Log de resultados */
#resultadosLog {
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-line;
  font-family: monospace;
  font-size: 0.9rem;
  background: #f9f9f9;
  border-radius: 10px;
}

@page {
  size: landscape;
}

.card.cliente-card {
  min-width: 280px;
  max-width: 320px;
  width: 100%;
}


.ruta-drop-target {
  font-size: 0.95rem;
  padding: 1rem;
  min-height: 160px;
}

.ruta-drop-target .bxs-truck {
  font-size: 4rem !important;
}

.ruta-drop-target strong {
  font-size: 1rem;
}

/* Estilos para el mapa */
.info-window-custom {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #2f2d2e;
  min-width: 220px;
  padding: 4px 8px;
}

.info-window-custom strong {
  color: #7166eb;
}

.info-window-custom .derecha {
  text-align: right;
  font-weight: bold;
  font-size: 12px;
  color: #636466;
}

.info-window-custom .total {
  font-size: 14px;
  color: #d12329;
}

#canvasContainer {
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
  background-color: #1a1b2e;
  padding: 20px;
  border-radius: 12px;
}

.vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-align: left;
  vertical-align: bottom;
  padding: 5px;
  width: 80px; /* ajustá según el diseño */
  max-width: 80px; /* ajustá según el diseño */
  min-width: 80px; /* ajustá según el diseño */
}

/* mejora el estilo del filtro de estado para el piking */
#filtroEstado {
  font-weight: 600;
  border: 2px solid var(--bs-primary);
  background-color: var(--bs-light);
  color: var(--bs-dark);
}
[data-theme="dark"] #filtroEstado {
  background-color: var(--bs-dark);
  color: var(--bs-light);
  border-color: var(--bs-primary);
}
/* Estilos para la tabla de picking */
/* child row compacto y legible */
/* Respetar anchos */
#tablaPicking { table-layout: fixed; }
#tablaPicking th:first-child,
#tablaPicking td.dtr-control { width: 28px; }





/* ===== Fix tablas claras (thead.table-light / .table) en modo oscuro ===== */
/* Cubrimos los 3 toggles más comunes: body.dark-style, [data-theme="dark"], y .theme-dark */
.dark-style .table,
[data-theme="dark"] .table,
body.theme-dark .table {
  --bs-table-color:           #e6e8ef !important;
  --bs-table-bg:              #222738 !important;  /* superficie de filas */
  --bs-table-border-color:    rgba(255,255,255,.08) !important;
  --bs-table-striped-bg:      rgba(255,255,255,.04) !important;
  --bs-table-striped-color:   #e6e8ef !important;
  --bs-table-hover-bg:        rgba(255,255,255,.07) !important;
  --bs-table-hover-color:     #e6e8ef !important;
  --bs-table-active-bg:       rgba(255,255,255,.10) !important;
  --bs-table-active-color:    #e6e8ef !important;
}

/* Header “claro” dentro del dark */
.dark-style thead.table-light,
[data-theme="dark"] thead.table-light,
body.theme-dark thead.table-light {
  background-color: #2b3043 !important;
  color: #e6e8ef !important;
  border-color: rgba(255,255,255,.08) !important;
}
.dark-style thead.table-light th,
[data-theme="dark"] thead.table-light th,
body.theme-dark thead.table-light th {
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Estados de fila que ya usás */
.dark-style .table-success,
[data-theme="dark"] .table-success,
body.theme-dark .table-success {
  --bs-table-bg: rgba(16,185,129,.18) !important;
  --bs-table-color: #d1fae5 !important;
}
.dark-style .table-warning,
[data-theme="dark"] .table-warning,
body.theme-dark .table-warning {
  --bs-table-bg: rgba(245,158,11,.18) !important;
  --bs-table-color: #fffbeb !important;
}
.dark-style .table-danger,
[data-theme="dark"] .table-danger,
body.theme-dark .table-danger {
  --bs-table-bg: rgba(239,68,68,.18) !important;
  --bs-table-color: #fee2e2 !important;
}
.dark-style .table-magenta,
[data-theme="dark"] .table-magenta,
body.theme-dark .table-magenta {
  background-color: rgba(147,51,234,.18) !important;
  color: #f5e9ff !important;
}

/* Detalles DataTables (inputs y botones) para que no “quemen” en oscuro */
.dark-style .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
body.theme-dark .dataTables_wrapper .dataTables_length select,
.dark-style .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
body.theme-dark .dataTables_wrapper .dataTables_filter input {
  background-color: #1c2230 !important;
  color: #e6e8ef !important;
  border-color: rgba(255,255,255,.12) !important;
}

#tab-extra-tab {
  text-transform: none !important;
}

/* ===== Estilos generales para TODAS las DataTables ===== */

/* Modo compacto global */
table.dataTable {
  font-size: 0.80rem;       /* texto más chico */
  line-height: 1.1;
}
table.dataTable th,
table.dataTable td {
  padding: .25rem .45rem;   /* menos padding */
  vertical-align: middle;
  white-space: nowrap;      /* evita saltos raros */
}

/* Alinear a la derecha todos los números */
table.dataTable td.dt-right,
table.dataTable th.dt-right {
  text-align: right !important;
}

/* Botones DataTables más chicos */
.dataTables_wrapper .dt-buttons .btn {
  font-size: .75rem;
  padding: .25rem .5rem;
}

/* Controles length y filter más compactos */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: .8rem;
}
.dataTables_wrapper .dataTables_filter input {
  font-size: .8rem;
  height: 28px;
  padding: .1rem .35rem;
  max-width: 160px;
}

/* También alinear encabezados numéricos */
table.dataTable thead th.dt-right {
  text-align: right !important;
}

/* No encerrar la tabla en .table-responsive; si no podés, usa: */
.dt-noflow { overflow: visible !important; transform: none !important; }

/* Pane fijo por encima y con fondo sólido */
.dtfc-fixed-left, .dtfc-fixed-right { z-index: 5; position: relative; box-shadow: 4px 0 6px rgba(0,0,0,.08); }
.dtfc-fixed-right { box-shadow: -4px 0 6px rgba(0,0,0,.08); }
.dtfc-fixed-left th, .dtfc-fixed-left td,
.dtfc-fixed-right th, .dtfc-fixed-right td,
.dtfc-fixed-left table, .dtfc-fixed-right table { background:#fff; }

/* ⚠️ Layout correcto: centro AUTO, panes fijos FIXED */
.dataTables_wrapper .dataTables_scrollBody table { table-layout: auto !important; }
.dtfc-fixed-left table, .dtfc-fixed-right table { table-layout: fixed !important; }

/* Evitar corte raro del wrapper */
.dataTables_wrapper .dataTables_scroll { overflow: visible !important; }

/* Texto: que el centro pueda envolver y que códigos no se corten */
.dataTables_scrollBody td { white-space: normal; }
td.col-codigo, td.col-ean, td.col-acciones { white-space: nowrap; }

/* Ellipsis opcional para columnas largas */
.dt-ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 520px; }

/* === FixedColumns SIEMPRE opacas === */

/* Claro */
.light-style .dtfc-fixed-left,
.light-style .dtfc-fixed-right,
.light-style .dtfc-fixed-left table,
.light-style .dtfc-fixed-right table,
.light-style .dtfc-fixed-left tr,
.light-style .dtfc-fixed-right tr,
.light-style .dtfc-fixed-left th,
.light-style .dtfc-fixed-left td,
.light-style .dtfc-fixed-right th,
.light-style .dtfc-fixed-right td {
  background-color: #fff !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
/* Pisar variables de Bootstrap que a veces quedan transparentes */
.light-style .dtfc-fixed-left table,
.light-style .dtfc-fixed-right table {
  --bs-table-bg: #fff !important;
  --bs-table-striped-bg: #fff !important;
  --bs-table-hover-bg: #fff !important;
}

/* Oscuro (por consistencia con lo que ya tenés) */
.dark-style .dtfc-fixed-left,
.dark-style .dtfc-fixed-right,
.dark-style .dtfc-fixed-left table,
.dark-style .dtfc-fixed-right table,
.dark-style .dtfc-fixed-left tr,
.dark-style .dtfc-fixed-right tr,
.dark-style .dtfc-fixed-left th,
.dark-style .dtfc-fixed-left td,
.dark-style .dtfc-fixed-right th,
.dark-style .dtfc-fixed-right td {
  background-color: #2f2d2e !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.dark-style .dtfc-fixed-left table,
.dark-style .dtfc-fixed-right table {
  --bs-table-bg: #2f2d2e !important;
  --bs-table-striped-bg: #2f2d2e !important;
  --bs-table-hover-bg: #2f2d2e !important;
}


#modalAprobarPicking .form-label { margin-bottom: .25rem; }
#modalAprobarPicking .form-select, 
#modalAprobarPicking .form-control { min-height: 40px; }


/* Chips/botones del header que se acomoden en varias líneas */
#route-config .d-flex.gap-2 { flex-wrap: wrap; row-gap: .5rem; }
.ig-compact .input-group-text { min-width: 115px; white-space: nowrap; }
.ig-compact .form-control { min-width: 0; }


/* botones del truck
/* Botonera pill + bordes suaves */
.idus-toggle-group .btn { 
  border-radius: 999px; 
  padding-inline: .8rem;
}
.rounded-pill-start { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.rounded-pill-end   { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* Activo con color marca (#502b70) y foco claro */
.idus-toggle-group .btn.active,
.idus-toggle-group .btn:has(input:checked) {
  color: #fff;
  background-color: #502b70;
  border-color: #502b70;
}

/* Hover sutil */
.idus-toggle-group .btn:hover { box-shadow: 0 1px 6px rgba(0,0,0,.08); }

/* Separador vertical fino */
.vr { width:1px; background: rgba(0,0,0,.08); height: 28px; }


/* para los botones del Geo Cliente */
.idus-toggle-group .btn{border-radius:999px;padding-inline:.8rem}
.rounded-pill-start{border-top-left-radius:999px;border-bottom-left-radius:999px}
.rounded-pill-end{border-top-right-radius:999px;border-bottom-right-radius:999px}
.idus-toggle-group .btn.active,
.idus-toggle-group .btn:has(input:checked){color:#fff;background:#502b70;border-color:#502b70}
.idus-toggle-group .btn:hover{box-shadow:0 1px 6px rgba(0,0,0,.08)}
.vr{width:1px;background:rgba(0,0,0,.08);height:28px}


/* colores de la tarjetas de ruta */
.ruta-ok {
  background-color: #e0b3ff;   /* lila Idus */
  color: #2f2d2e;              /* texto oscuro */
}

.ruta-excedida {
  background-color: #ffcccc;   /* rojo claro */
  color: #2f2d2e;
}

.ruta-picking {
  background-color: #ffcc80;   /* naranja suave */
  color: #2f2d2e;
}

/* texto del resumen dentro de cada ruta */
.ruta-resumen {
  color:#fff;                 /* fallback */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight: 500;
}
.ruta-resumen b { font-weight: 700; }

/* La tarjeta ya tiene esta clase en tu JS */
.ruta-card { position: relative; }

/* El “badge” del ícono */
.ruta-card .icono-ruta{
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Tamaño del ícono (Iconify) */
.ruta-card .icono-ruta .iconify{
  font-size: 18px;
  line-height: 1;
}

.icono-ruta .badge-circulo {
  width: 28px; height: 28px;
  border-radius: 50%;
  background:#fff;
  border:2px solid #00000033;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  line-height:1; color:#333;
}

/* swall fire configuracion para el tema*/
/* Dark */
.dark-style .swal2-popup{ background: #2f2b62 !important; color:#fff !important; }
.dark-style .swal2-title{ color:#d12329 !important; }
.dark-style .swal2-html-container{ color:#fff !important; }
.dark-style .swal2-styled.swal2-confirm{ background:#28c76f !important; color:#2f2d2e !important; }
.dark-style .swal2-styled.swal2-cancel{ background:transparent !important; border:1px solid #ff4c51 !important; color:#ff4c51 !important; }

/* Light */
.light-style .swal2-popup{ background:#fff !important; color:#2f2d2e !important; }
.light-style .swal2-title{ color:#7166eb !important; }
.light-style .swal2-html-container{ color:#2f2d2e !important; }
.light-style .swal2-styled.swal2-confirm{ background:#28c76f !important; color:#fff !important; }
.light-style .swal2-styled.swal2-cancel{ background:transparent !important; border:1px solid #ff4c51 !important; color:#ff4c51 !important; }


/* Submenú: menos indent general */
#dynamic-menu .menu-sub .menu-item > a.menu-link {
  padding-left: 1.4rem;           /* reduce la sangría del submenú */
}

/* La estrella va “metida” a la izquierda */
#dynamic-menu .menu-sub .menu-item > a.menu-link .fav-toggle {
  margin-left: -12px;             /* la empuja hacia la izquierda */
  margin-right: .35rem;           /* separa la estrella del icono del submenú */
  line-height: 1;
  display: inline-flex;
  align-items: center;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Contenedor del label */
#dynamic-menu .menu-label{
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;             /* permite medir overflow correctamente */
}

/* Texto base (queda igual para el caso sin overflow) */
#dynamic-menu .menu-label-text{
  display: inline-block;
  white-space: nowrap;
}

/* Track que se desplaza con DOS copias del texto */
#dynamic-menu .marquee-track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap, 32px);     /* espacio entre copia 1 y 2 */
  will-change: transform;
}

/* Estado: hay overflow -> activar pista y animación (pausada por defecto) */
#dynamic-menu .menu-label.is-marquee .marquee-track{
  animation: idus-marquee-loop var(--dur, 8s) linear infinite;
  animation-play-state: paused;     /* solo corre en hover/focus */
}

/* En hover o foco, que corra */
#dynamic-menu .menu-label.is-marquee:hover .marquee-track,
#dynamic-menu .menu-label.is-marquee:focus-within .marquee-track{
  animation-play-state: running;
}

/* Loop continuo: movemos el track un ancho de texto + gap */
@keyframes idus-marquee-loop{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * (var(--w, 0px) + var(--gap, 32px)))); }
}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  #dynamic-menu .menu-label.is-marquee .marquee-track{ animation: none; }
}
/* pausada por defecto */
#dynamic-menu .menu-label.is-marquee .marquee-track{
  animation-play-state: paused;
}
/* corre sólo mientras está jugando */
#dynamic-menu .menu-label.is-marquee.playing .marquee-track{
  animation-play-state: running;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Resultados de búsqueda (cards) */
#topSearchResults { z-index: 1055; }
#topSearchResults .search-card { 
  text-decoration: none; color: inherit;
  border-radius: .75rem; border: 1px solid var(--bs-border-color-translucent);
  background: var(--bs-body-bg);
}
#topSearchResults .search-card:hover { filter: brightness(1.06); }
#topSearchResults .search-card.active { outline: 2px solid var(--bs-primary); }
#topSearchResults .search-card .icon-wrap { width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
#topSearchResults{ z-index:1055; }


  /* Aplicalo al select (o globalmente si querés) */
  #prefijoPais {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

/* Todos los selects con clase .prefijoPais dentro de un input-group */
.input-group > .prefijoPais {
  flex: 0 0 150px;   /* fija el ancho en el layout flex */
  max-width: 150px;
  width: 150px;      /* evita que .form-select (width:100%) lo estire */
}