/*.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dataTables_wrapper .dataTables_length {
    float: left;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
}*/

.modal-body{
    background: white !important;
}
.modal-header {
    z-index: 1 !important;
}

.swal2-cancel{
    background: #000000 !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #F2941A !important;
    border-color: #F2941A !important;
}
.bg-warning{
    background-color: #F2941A !important;
}
.text-warning{
    color: #F2941A !important;
}

.swal2-confirm{
    background: #F2941A !important;
}

div.dt-buttons {
    margin-left: 15px; /* Ajusta este valor al espacio que quieras */
}

.truncate-cell {
    max-width: 100px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.pin-code-inputs { display: flex; justify-content: center; gap: 10px; }
.pin-code-input {
    width: 45px; height: 50px; text-align: center; font-size: 1.25rem;
    border-radius: 0.375rem; border: 1px solid #d1d3e2;
    padding: 0;
}
.pin-code-input:focus {
    border-color: #4e73df;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    outline: none;
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(255, 255, 255, 0.85);*/
    background: #ffffff;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: opacity 0.3s ease;
}

#page-loader .spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #F2941A;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.card {
    /*border: 1px solid #ccc;*/
    padding: 20px;
    border-radius: 12px;
}

.sidebar, .sidebar-content {
    background: black !important;
}

.sidebar-item.active .sidebar-link:hover,
.sidebar-item.active > .sidebar-link {
    background: #F2941A !important;
}
.sidebar-link, a.sidebar-link {
    background: black !important;
}

.text-primary {
    color: #F2941A !important;
}

.active>.page-link, .page-link.active {
    background-color: #F2941A !important;
    border-color: #F2941A !important;
}

/* ===== DataTables – Estilo global ===== */
.dataTables_wrapper {
    overflow-x: hidden;
}

.dataTables_wrapper .dt-search label {
    width: 100%;
    margin: 0;
}
.dataTables_wrapper .dt-search input {
    width: 100% !important;
}

.dataTables_wrapper .dt-left .dataTables_length,
.dataTables_wrapper .dt-left .dataTables_info {
    margin: 0;
    padding: 0;
}
.dataTables_wrapper .dataTables_info {
    color: #6c757d;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}
.dataTables_wrapper .page-item .page-link {
    padding: .25rem .5rem;
    min-width: 34px;
    line-height: 1;
    text-align: center;
    border-radius: .5rem;
}


.dataTables_wrapper .dt-search {
    margin-right: 1%;
}

@media (max-width: 992px) {
    .dataTables_wrapper .dt-search {
        margin-right: 1.5%;
    }
}

.dataTables_wrapper .page-link {
    border-radius: 0 !important;
}

.dataTables_wrapper .page-item:first-child .page-link {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
}

.dataTables_wrapper .page-item:last-child .page-link {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

/* === Mobile === */
@media (max-width: 576px) {

    .dataTables_wrapper .dt-search {
        margin-right: 2%;
    }

    .dataTables_wrapper .dt-left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dt-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
    }
}

/* ===== Buscador DataTables ===== */
.dataTables_wrapper .dt-search input {
    border: none;
    border-bottom: 2px solid #e0e0e0;
    border-radius: 0;
    height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    box-shadow: none;
    transition: border-color .2s ease;
}


.dataTables_wrapper .dt-search input:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: #F2941A;
}

.dataTables_wrapper .dt-search input::placeholder {
    color: #adb5bd;
}

.dataTables_wrapper thead th {
    white-space: nowrap;
    vertical-align: middle;
}


.dataTables_wrapper thead .sorting:before,
.dataTables_wrapper thead .sorting:after {
    color: #adb5bd;
}


.dataTables_wrapper thead .sorting_asc:before,
.dataTables_wrapper thead .sorting_asc:after,
.dataTables_wrapper thead .sorting_desc:before,
.dataTables_wrapper thead .sorting_desc:after {
    color: #F2941A;
}


.modal-backdrop.show {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}

.modal {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Tarjeta moderna con bordes redondeados del area de paquetes */
.card-modern {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden; /* Para contener el overlay */
    position: relative;
}

/* Inputs con estilo ligero */
.form-select-modern, .form-control-modern {
    background-color: #f8f9fc;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.form-select-modern:focus, .form-control-modern:focus {
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.15);
    border-color: #4e73df;
}

/* Iconos de los inputs */
.input-group-text-modern {
    background-color: #f8f9fc;
    border: 1px solid #e3e6f0;
    border-right: none; /* Sin borde derecho para fusionar */
    color: #4e73df;
    /* Redondear SOLO esquinas izquierdas */
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control-modern,
.input-group > .form-select-modern {
    border-left: none;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* Mantener redondas las derechas */
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Overlay de Carga (La animación) */
.filter-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px); /* Efecto borroso moderno */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-loading-overlay.active {
    display: flex;
    opacity: 1;
}

/* Animación de pulsación para el spinner */
.pulse-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4e73df;
    animation: scaleout 1.0s infinite ease-in-out;
}

@keyframes scaleout {
    0% { transform: scale(0); }
    100% {
        transform: scale(1.0);
        opacity: 0;
    }
}


/* Contenedor de la fila */
.guide-item {
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f2f5;
}
.guide-item:last-child {
    border-bottom: none;
}
.guide-item:hover {
    background-color: #f8f9fc;
}

/* Estilo de Icono tipo "App" */
.company-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px; /* Bordes suaves */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Colores de Marcas Específicos */
.icon-dhl { background-color: #ffcc00; color: #d40511; } /* Amarillo/Rojo DHL */
.icon-fedex { background-color: #4d148c; color: white; } /* Morado FedEx */
.icon-estafeta { background-color: #c8102e; color: white; } /* Rojo Estafeta */
.icon-default { background-color: #eaecf4; color: #858796; }

/* Ajustes Mobile */
@media (max-width: 576px) {
    .guide-item {
        padding: 0.75rem !important; /* Menos padding en celular */
    }
    .company-icon {
        width: 38px; /* Icono un poco más chico */
        height: 38px;
        font-size: 1rem;
    }
}

/* Colores de Iconos (Asegúrate de tenerlos) */
.icon-dhl { background-color: #ffcc00; color: #d40511; }
.icon-fedex { background-color: #4d148c; color: white; }
.icon-estafeta { background-color: #c8102e; color: white; }
.icon-default { background-color: #eaecf4; color: #858796; }


#paquetes-table.dataTable tbody td img {
    vertical-align: middle;
}


/* CLIENTES */
.input-group .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    position: relative;
    z-index: 0;
}

/* Efecto hover en las tarjetas */
.hover-scale:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    background-color: #f8f9fa;
    cursor: pointer;
}

/* Ajuste responsive para la línea divisora */
@media (max-width: 768px) {
    .border-end-md {
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}

/* Caja del icono de fecha */
.icon-box {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* contenedor de botones */
.btn-actions {
    width: 100%;
}
@media (min-width: 768px) {
    .btn-actions {
        width: 210px;      /* ajusta 180–240 a gusto */
        margin-left: auto; /* pegado a la derecha */
    }
}

/* logo fedex/paquetería */
.carrier-logo {
    width: 64px;         /* antes 50px */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.carrier-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Estilos para el Timeline de Ruta */
.timeline-track {
    position: absolute;
    left: 24px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background-image: linear-gradient(to bottom, #cbd5e1 50%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 2px 10px;
    background-repeat: repeat-y;
    z-index: 0;
}

.timeline-item {
    position: relative;
    z-index: 1;
    padding-left: 60px; /* Espacio para el icono */
}

.timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .modal-body-split {
        flex-direction: column;
    }
    .col-resumen, .col-formulario {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }
}

/* Importante: Eleva la lista de Google por encima del Modal */
.pac-container {
    z-index: 10000 !important;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.swal2-container {
    z-index: 20000 !important;
}