/* Estilos reestructurados para evitar el desplazamiento a la izquierda y sobreposición */
.navbar.navbar-expand {
  margin-left: 0;
  position: sticky; /* Sticky es mucho mejor que fixed para no romper el layout */
  top: 0;
  z-index: 1000;
  width: 100%;
}

.container-fluid {
  padding: 1.5rem;
  /* Eliminamos el padding-left de 18rem y margin-top duro que rompía el responsive */
}

/* Manejamos el empuje del contenido usando margin en el contenedor padre (#content-wrapper) */
@media (min-width: 768px) {
  .sidebar {
    transition: width 0.15s ease !important;
  }
  #content-wrapper {
    margin-left: 16rem; /* Mismo ancho que el sidebar expandido */
    transition: margin-left 0.15s ease;
  }
  
  body.sidebar-toggled #content-wrapper {
    margin-left: 9.5rem; /* Mismo ancho que el sidebar contraído */
  }

  #accordionSidebar.toggled {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Truco para evitar que overflow-y oculte los submenús flotantes */
  #accordionSidebar.toggled .nav-item .collapse {
    position: fixed !important;
    left: 10.25rem !important; /* 9.5rem ancho sidebar + 0.75rem de espacio */
    top: auto !important;
    margin-top: -3.8rem !important; /* Margen negativo para alinearlo con el botón */
  }
}

/* Aplicar el arreglo del logo para todos los tamaños (escritorio, contraído y móvil) */
#accordionSidebar .nav-item.mb-2 {
  margin-bottom: 0 !important; /* Quitar espacio debajo del logo */
  padding-top: 0.5rem !important;
}
#accordionSidebar .sidebar-brand {
  height: auto !important;
  padding: 0.5rem !important; /* Padding pequeño para evitar que choque con los bordes */
}
#accordionSidebar .background-logo-white {
  height: 60px !important; /* Alto ideal que funcionó en móvil */
  width: 100% !important; /* Evita que los 300px fijos desborden y se corte el logo al contraer la barra */
  background-position: center !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  #content-wrapper {
    margin-left: 0 !important;
  }
  .sidebar {
    z-index: 1040 !important; /* Sidebar por encima del topbar en móviles */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); /* Sombra para diferenciar que flota */
  }

  /* Mostrar los submenús como popout lateral a la derecha de la barra en móviles */
  #accordionSidebar .nav-item .collapse {
    position: fixed !important;
    left: 9.5rem !important; /* Ajustado exactamente al filo de la barra lateral visible */
    top: auto !important;
    margin-top: -3.8rem !important;
    z-index: 1050;
  }

  /* Reducir el espacio vacío excesivo en la parte superior del sidebar en móviles */
  #accordionSidebar {
    padding-top: 0 !important;
  }

  /* Corrección del bug "efecto fantasma": oculta los popouts si la barra lateral se esconde */
  body.sidebar-toggled #accordionSidebar .nav-item .collapse {
    display: none !important;
  }
}


/*estilo deñ scroll del navegador*/
#accordionSidebar::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar {
  width: 12px;
}

#accordionSidebar::-webkit-scrollbar-thumb {
  background-color: #e74a3b;
  border-radius: 50rem;
  border-left: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #4e73df;
  border-radius: 50rem;
  border-left: 2px solid #f5f5f5;
}

/*fin*/

.card-outline {
  border-top: 3px solid #007bff;
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

.card-outline .btn:focus {
  box-shadow: none
}

.card-outline .card-header {
  background-color: white;
}

/*rediseño a la libreria select2*/
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75em + 2px) !important;
  padding: 0.275rem 0.75rem !important;
  border: 1px solid #d1d3e2 !important;
  border-radius: 0.35rem !important;
}

/*estilos del login*/
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

body.login-page #content-wrapper {
  margin-left: 0 !important;
}

.background-presentation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/logo.png');
  background-color: #ffffff;
  /* Ruta de tu imagen de fondo inicial */
  background-position: center;
  background-size: min(100%, 800px);
  transition: opacity 1s ease-in-out;
  background-repeat: no-repeat;
  /* Transición de opacidad para la imagen */
  z-index: 1;
}


.background-image {
  /*imagen autogenerada en adobe con ia */
  background-image: url('../img/repartidora.webp');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
}


.login-container {
  margin-top: 20%;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  /* Fondo semi-transparente para mejorar la legibilidad */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.background-logo,
.background-logo-white,
.avatar_logo {
  background-size: contain;
  margin: auto;
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.background-logo {
  background-image: url('../img/logo.png');
}

.background-logo-white {
  background-image: url('../img/logo_white.png');
}

.avatar_logo {
  background-image: url('../img/user.png');
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #ff0000cd;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.login-container button:hover {
  background-color: #8e0404;
}


@media (max-width: 400px) {
  .background-logo, .background-logo-white {
    height: 70px;
    width: 250px;
  }
}

@media (max-width: 250px) {
  .background-logo, .background-logo-white {
    height: 50px;
    width: 150px;
  }
}




/*modo oscuro*/

.dark-mode {
  background-color: #222 !important;
  color: #fff !important;
}

.dark-mode-white {
  background-color: #4b4848 !important;
  color: #fff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
  outline: none;
  /* Desactiva el contorno visible en el enfoque */
}

.input-group-addon {
  padding: 8px 12px;
  font-weight: 400;
  text-align: center;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: #fff;
  color: #7a878e;
  border-radius: 3px;
  min-width: 45px;
}

/*desactiva diseño para lo numeros quitando las flechas*/
.cajaNumerico {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Estándar - todos los navegadores modernos */
}

.cajaNumerico::-webkit-inner-spin-button {
  display: none;
}

/*diseño de (?)*/
.help-icon {
  position: relative;
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  color: white;
  background-color: #3498db;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
  transition: box-shadow 0.3s ease;
  margin: auto 0 0.3rem 0.2rem;
}

.help-icon:hover {
  box-shadow: 0 0 40px rgba(52, 152, 219, 1);
}

table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_asc:before {
  display: none !important;
}

/*incio:diseño de toast pdf*/

#liveToast .toast-body {
  background-color: #f5f5f5;
}

.clic-download {
  font-size: large;
  border: 3px solid red;
  padding: 0.6rem;
  color: red;
  border-radius: 50%;
}

.clic-download:hover {
  box-shadow: 0px 0px 6px 4px #e74a3b96;
  cursor: pointer;
}

#toast-container-desing {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1050;
  /* Asegúrate de que el contenedor de los toasts tenga un z-index alto */
  margin-bottom: 10px;
  /* Un pequeño margen entre los toasts */
}

.toast {
  margin-bottom: 10px;
}

/*fin:diseño de toast pdf*/

/*inicio:diseño de filtro sucursal*/
#listadosucursales {
  overflow-y: auto;
  height: 400px;
  position: relative;
  background-color: #f9f9f9;
}

#listadosucursales .vacio {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
  pointer-events: none;
}

/*fin:diseño de filtro sucursal*/

/*inicio:colores para botones*/
.btn-excel {
  color: #fff;
  background-color: #008000;
  border-color: #008000;
}

.btn-excel:hover {
  color: #fff;
  background-color: #268f26;
  border-color: #268f26;
}

.btn-excel:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 38, 0.58);
}

.btn-liberar {
  color: #fff;
  background-color: #FFB84D;
  border-color: #FFB84D;
}

.btn-liberar:hover {
  color: #fff;
  background-color: #e89518;
  border-color: #FFB84D;
}

.btn-liberar:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgb(233, 191, 129);
}

.btn-outline-liberar {
  color: #e89518;
  border-color: #FFB84D;
}

.btn-outline-liberar:hover {
  color: #fff;
  background-color: #e89518;
  border-color: #e89518;
}

/*fin:colores para botones*/

.fila-seleccionada {
    background-color: rgba(78, 115, 223, 0.12) !important;
    border-left: 4px solid #4e73df !important;
    color: #2e59d9 !important;
    font-weight: 600;
}

#tablaArticulo_filter label,
#tablaMarca_filter label,
#tablaGrupo_filter label,
#tablaUbicacion_filter label,
#tablaControlIngreso_filter label,
#tablaControlSalida_filter label,
#tablaGuiaRemision_filter label,
#tablaCliente_filter label
{
  display: none;
}

/* ==========================================================================
   Nuevos estilos premium para modal de sucursal masivo
   ========================================================================== */

/* Header con gradiente premium */
.custom-modal-sucursal {
    border-radius: 16px !important;
    overflow: hidden;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
}

.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Badge de pasos */
.step-badge {
    background-color: #4e73df;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Tarjeta de descarga de plantilla */
.download-template-card {
    background-color: #f8f9fc;
    border: 1px solid #e3e6f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.download-template-card:hover {
    border-color: #1cc88a;
    background-color: #f3fdf9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 200, 138, 0.08);
}

.bg-success-soft {
    background-color: rgba(28, 200, 138, 0.1);
}

.transition-all {
    transition: all 0.2s ease-in-out;
}

/* Zona de arrastrar y soltar */
.drag-drop-area {
    border: 2px dashed #d1d3e2;
    background-color: #f8f9fc;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px !important;
}

.drag-drop-area:hover {
    border-color: #4e73df;
    background-color: #f4f6fd;
}

.drag-drop-area.dragover {
    border-color: #4e73df;
    background-color: #ebf0fe;
    box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.15);
}

.bg-primary-soft {
    background-color: rgba(78, 115, 223, 0.1);
    transition: transform 0.3s ease;
}

.drag-drop-area:hover .bg-primary-soft {
    transform: scale(1.1);
}

/* Animaciones y utilidades */
.cursor-pointer {
    cursor: pointer;
}

.animate-bounce {
    animation: bounce-anim 2s infinite;
}

@keyframes bounce-anim {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* ==========================================================================
   Estilos premium para la configuración de Empresa
   ========================================================================== */

.card-company-header {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%) !important;
    color: white !important;
}

.company-logo-container {
    border: 2px dashed #d1d3e2;
    background-color: #f8f9fc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.company-logo-container:hover {
    border-color: #4e73df;
    background-color: #f4f6fd;
}

.company-logo-img {
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ==========================================================================
   Nuevos estilos premium para modal de selección de items
   ========================================================================== */
.custom-modal-items .table-hover tbody tr {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.custom-modal-items .table-hover tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.05) !important;
}

.custom-modal-items .table td,
.custom-modal-items .table th {
    padding: 14px 16px;
    vertical-align: middle;
}

.custom-modal-items .close {
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-modal-items .close:hover {
    transform: scale(1.18);
    opacity: 1 !important;
}



/* ==========================================================================
   Premium styles for Ingress View Modal (#vistaModalIngreso)
   ========================================================================== */
.custom-view-modal .modal-content {
    border-radius: 16px !important;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.custom-view-modal .modal-header {
    border-bottom: 1px solid #ebedf2;
    padding: 1.5rem 2rem;
}

.custom-view-modal .modal-body {
    padding: 2rem;
}

.custom-view-modal .modal-footer {
    border-top: 1px solid #ebedf2;
    padding: 1.25rem 2rem;
}

.info-card-wrapper {
    background: #ffffff;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.3s ease;
}

.info-card-wrapper:hover {
    box-shadow: 0 5px 15px rgba(78, 115, 223, 0.05);
    border-color: #cbd3e9;
}

.info-field-premium {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background-color: #f8f9fc;
    border-left: 4px solid #e3e6f0;
    transition: all 0.2s ease;
}

.info-field-premium:hover {
    background-color: #f1f3f9;
}

.info-field-premium.border-blue {
    border-left-color: #4e73df;
}

.info-field-premium.border-green {
    border-left-color: #1cc88a;
}

.info-field-premium.border-orange {
    border-left-color: #f6c23e;
}

.info-field-premium.border-purple {
    border-left-color: #9b5de5;
}

.info-field-premium.border-teal {
    border-left-color: #36b9cc;
}

.info-field-premium.border-indigo {
    border-left-color: #6610f2;
}

.info-field-premium.border-red {
    border-left-color: #e74a3b;
}

.info-field-premium .info-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bg-blue-soft {
    background-color: rgba(78, 115, 223, 0.1);
    color: #4e73df;
}

.bg-green-soft {
    background-color: rgba(28, 200, 138, 0.1);
    color: #1cc88a;
}

.bg-orange-soft {
    background-color: rgba(246, 194, 62, 0.1);
    color: #f6c23e;
}

.bg-purple-soft {
    background-color: rgba(155, 93, 229, 0.1);
    color: #9b5de5;
}

.bg-teal-soft {
    background-color: rgba(54, 185, 204, 0.1);
    color: #36b9cc;
}

.bg-indigo-soft {
    background-color: rgba(102, 16, 242, 0.1);
    color: #6610f2;
}

.bg-red-soft {
    background-color: rgba(231, 74, 59, 0.1);
    color: #e74a3b;
}

.info-field-premium .info-content-wrapper {
    flex-grow: 1;
    min-width: 0;
}

.info-field-premium .info-label-premium {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #858796;
    letter-spacing: 0.5px;
    margin-bottom: 0.15rem;
    display: block;
}

.info-field-premium .info-value-premium {
    font-size: 0.92rem;
    font-weight: 600;
    color: #2e303e;
    word-break: break-word;
}

/* Premium styling for table */
.premium-table-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e3e6f0;
}

.premium-table-container table {
    margin-bottom: 0 !important;
}

.premium-table-container thead th {
    background-color: #f8f9fc !important;
    color: #4e73df !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e3e6f0 !important;
    padding: 12px 16px;
}

.premium-table-container tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

/* ==========================================================================
   Premium DataTables Controls styling (Search & Length Select)
   ========================================================================== */
.dataTables_wrapper .row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 15px;
}

.dataTables_wrapper .row:first-child > div {
    flex: unset !important;
    max-width: unset !important;
}

.dataTables_length label,
.dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
    color: #4e73df !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
}

.dataTables_length select,
.dataTables_filter input {
    height: 35px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.88rem !important;
    background-color: #fff !important;
    color: #334155 !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

.dataTables_filter input {
    width: 200px !important;
    margin-left: 0 !important;
}

.dataTables_filter input:focus {
    border-color: #4e73df !important;
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.15) !important;
    width: 240px !important;
}

/* Responsive adjustments for narrow viewports and mobile screen sizes */
@media (max-width: 768px) {
    .dataTables_wrapper .row:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .dataTables_length,
    .dataTables_filter {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .dataTables_length label,
    .dataTables_filter label {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .dataTables_filter input {
        width: 100% !important;
        max-width: 250px !important;
    }
    
    .dataTables_filter input:focus {
        width: 100% !important;
        max-width: 250px !important;
    }
}

/* ==========================================================================
   Premium styles for Anulacion Modal Selection
   ========================================================================== */
.anulacion-option {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background: #fff;
    text-align: center;
}
.anulacion-option:hover {
    border-color: #b0b0b0;
    background: #f8f9fa;
}
.anulacion-option.selected-primary {
    border-color: #3085d6;
    background: rgba(48, 133, 214, 0.05);
    box-shadow: 0 0 12px rgba(48, 133, 214, 0.4);
}
.anulacion-option.selected-danger {
    border-color: #d33;
    background: rgba(211, 51, 51, 0.05);
    box-shadow: 0 0 12px rgba(211, 51, 51, 0.4);
}
.anulacion-icon {
    font-size: 2.8em;
    margin-bottom: 12px;
    display: block;
    transition: transform 0.2s;
}
.anulacion-option.selected-primary .anulacion-icon,
.anulacion-option.selected-danger .anulacion-icon {
    transform: scale(1.1);
}

/* ==========================================================================
   Premium styles for Dispatch Modal (#agregar-modal)
   ========================================================================== */
.modal-dispatch-premium .modal-content {
    border-radius: 16px !important;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    background-color: #f8f9fc;
}

.modal-dispatch-premium .modal-header {
    background: linear-gradient(135deg, #4e73df 0%, #2e59d9 100%) !important;
    color: white;
    border-bottom: none;
    padding: 1.25rem 1.75rem;
}

.modal-dispatch-premium .modal-header .close {
    color: white;
    text-shadow: none;
    opacity: 0.8;
    transition: all 0.2s;
}

.modal-dispatch-premium .modal-header .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.modal-dispatch-premium .modal-body {
    padding: 1.75rem;
}

.modal-dispatch-premium .card-dispatch-step {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
    border-left: 4px solid #4e73df;
    transition: all 0.3s ease;
}

.modal-dispatch-premium .card-dispatch-step:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.modal-dispatch-premium .card-dispatch-step.border-success {
    border-left-color: #1cc88a !important;
}

.modal-dispatch-premium .card-dispatch-step.border-warning {
    border-left-color: #f6c23e !important;
}

.modal-dispatch-premium .card-dispatch-step.border-info {
    border-left-color: #36b9cc !important;
}

.modal-dispatch-premium .card-dispatch-step .card-header {
    background: transparent;
    border-bottom: 1px solid #f1f3f9;
    padding: 1rem 1.5rem;
    font-weight: 700;
    color: #2e303e;
    font-size: 1.05rem;
}

.modal-dispatch-premium .card-dispatch-step .card-body {
    padding: 1.25rem 1.5rem;
}

.modal-dispatch-premium .form-group label {
    font-weight: 600;
    color: #4e5e7a;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.modal-dispatch-premium .form-control {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    transition: all 0.2s ease-in-out;
    height: auto;
}

.modal-dispatch-premium .form-control:focus {
    border-color: #4e73df;
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.15);
}

.modal-dispatch-premium .input-group-addon {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-color: #cbd5e1;
    background-color: #f8f9fc;
    color: #4e73df;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-left: none;
}

.modal-dispatch-premium .datepickerFechaRegistro {
    display: flex;
    align-items: stretch;
}

.modal-dispatch-premium .datepickerFechaRegistro input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.modal-dispatch-premium .modal-footer {
    background-color: #ffffff;
    border-top: 1px solid #ebedf2;
    padding: 1.25rem 2rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modal-dispatch-premium .btn {
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Custom badge style for 'transportando' status */
.badge-orange {
    background-color: #fd7e14 !important;
    color: #fff !important;
}
.badge-orange.badge-shadow {
    box-shadow: 0 4px 6px rgba(253, 126, 20, 0.2) !important;
}

/* Elevación de z-index para popup de calendario datepicker (Superpone el calendario por encima del header/topbar) */
.datepicker,
.datepicker-dropdown {
    z-index: 1060 !important;
}