:root {
    /* Colores */
    --verde-1: #CDDBA7;
    --verde-2: #E5EECE;
    --verde-suave-1: #F3F9EF;
    --verde-texto-boton: #ABC775;
    --verde-oscuro: #077864;
    --verde-oscuro-disabled: #5f7f78;
    --gris-oscuro: #848484;
    --gris-medio: #ededed;
    --gris-suave: #F6F6F6;
    --color-rojo: #D47777;
    --azul-hover: #00bcf924;
    --azul-suave: #75A4C7B3;
    --scrollbar-thumb-color: var(--verde-oscuro);
    --scrollbar-thumb-hover-color: var(--verde-oscuro);
    --scrollbar-thumb-border-radius: 12px;
    --scrollbar-width: 9px;
    /* Anchos Menús */
    --ancho-ml: 240px;
}

/* TODO: Hacer líneas verdes del menú */


/* Seleccionable de ia para productos ya preseleccionados*/

td.lineaIARevisado > .select2-container{
    border: 2px solid #28a745;
    border-radius: .5rem;
}

/* Scrolls */

/* WebKit (Chrome, Safari y otros navegadores basados en WebKit) */
::-webkit-scrollbar {
    width: var(--scrollbar-width); /* Ancho de la barra de desplazamiento */
    height: var(--scrollbar-width); /* Si aplicas también a barras horizontales */
}

::-webkit-scrollbar-corner {
    background-color: transparent; /* Evitar posibles renders en las esquinas */
}

.filtro-dia:checked {
    background-color: var(--verde-1);
    border-color: var(--verde-1);
}

/* Track de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: transparent; /* Track transparente */
}

/* Thumb de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color); /* Color de la barra de desplazamiento */
    border-radius: var(--scrollbar-thumb-border-radius); /* Bordes redondeados */
    border: 1px solid #f1f1f1; /* Bordes más gruesos y definidos */
    transition: background 0.3s ease; /* Suavidad en hover */
}

::-webkit-scrollbar-button {
    display: none;
    color: transparent; /* Ocultar las flechas en Chrome y otros navegadores basados en WebKit */
}

/* Para Edge (también basado en Chromium) */
::-webkit-scrollbar {
    -ms-overflow-style: none; /* Ocultar flechas de desplazamiento en Edge */
}
/* WebKit (Chrome, Safari y otros navegadores basados en WebKit) */
::-webkit-scrollbar-button {
    display: none; /* Ocultar las flechas arriba/abajo */
}


/* Cambia el color cuando el usuario pasa el mouse por encima */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color); /* Color en hover */
}

/* Firefox */
* {
    scrollbar-width: initial; /* Definir como 'thin' para una barra más delgada */
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Ocultar las barras deslizadoras en dispositivos móviles */
body {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

    body::-webkit-scrollbar {
        display: none; /* Safari y Chrome */
    }

.telefonoDiv > .iti {
    width: 100%;
    background-color: #f8f9fa; /* mismo que .fondo-gris */
    border: 1px solid #ced4da;
    border-radius: .375rem;
    margin-bottom: .5rem; /* ≙ mb-2 */
}

    .telefonoDiv > .iti > input {
        border: none; /* evita doble borde */
        background: transparent;
        width: 100%;
    }


input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.no-spin {
    -moz-appearance: textfield; /* Oculta los “spinner arrows” */
}

/* Body */
.body {
    padding-left: var(--ancho-ml);
    padding-top: 100px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.modal-backdrop {
    background-color: rgb(125, 146, 83);
}

    .modal-backdrop.show {
        opacity: 0.81 !important;
    }

.form-check-input:focus, .btn-check:focus + .btn, .btn:focus, .form-control:focus {
    box-shadow: 0 0 0 .25rem rgb(205, 219, 167, 0.3);
    border-color: var(--verde-texto-boton);
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.div-asignarfechapedido {
    width: 190px;
}

.input-asignarfechapedido {
    max-width: 140px;
}

.btn-addFecha {
    width: 30px;
    height: 30px;
    background-image: url(/img/Iconos/FormularioPedido/check.png);
}

.btn-calendar {
    color: var(--verde-1);
}

.dataTables_info {
    padding-top: 0 !important;
}

.fondoVerde {
    background-color: var(--verde-suave-1);
}

.montserrat {
    font-family: 'Montserrat alternates', sans-serif;
}

.color-gris {
    color: var(--gris-oscuro);
}

.link-pideFacil {
    color: gray !important;
}

.color-verde {
    color: var(--verde-1);
}

a.color-verde:hover {
    color: var(--verde-1) !important;
}

.color-verde-oscuro {
    color: var(--verde-oscuro);
}

.color-rojo {
    color: var(--color-rojo);
}

.fondo-gris {
    background-color: var(--gris-suave);
}

.bg-gris {
    background-color: var(--gris-suave);
}

.header-verde {
    background-color: var(--verde-1);
    padding: 5px 0px 1px 15px;
    border-radius: 0.3em;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

    .header-verde > h5 {
        font-size: 1.2rem;
        font-weight: bold;
    }

.borde-verde {
    border-radius: 0.8rem;
    border: 1px solid #ABC775;
    font-family: Arial, sans-serif;
}

.clickable {
    cursor: pointer;
}

.descripcionProblema {
    height: 6em;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fs-7 {
    font-size: 0.8rem;
}

.tablaPedidos {
    max-height: 65vh;
    overflow-y: auto;
}


/* MODALES */
.modal-content {
    border-radius: .6rem;
    border: none;
}

.modal-verde {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: white;
    padding: 15px;
    border-radius: 0.8rem;
    font-family: Arial, sans-serif;
}

    .modal-verde .modal-header {
        background-color: var(--verde-1);
        padding: 4px .5rem;
        color: white;
        text-align: left;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 5px;
    }

    .modal-verde .modal-body {
        background-color: var(--verde-suave-1);
        border: 1px solid #ABC775;
        border-radius: 10px;
        margin: 5px 0;
        padding-right: 3rem;
        padding-left: 3rem;
    }

.modal-footer {
    display: flex;
    justify-content: space-between;
    border-top: none;
    padding: .75rem 0;
}

.swal2-confirm.swal2-styled {
    background-color: var(--verde-1);
}

.comercial-select {
    max-width: 200px;
}

#seleccionableDiaEntrega {
    border-width: 1px;
    color: var(--verde-oscuro);
    border-color: var(--verde-oscuro);
    font-size: 15px;
    max-height: 9rem; /* aprox. 4 opciones de altura */
    overflow-y: auto;
    padding: 2px;
    width: 90px;
    text-align: center;
    font-weight: 400;
    background-color: white;
    outline: none;
}

    #seleccionableDiaEntrega > * {
        color: var(--verde-oscuro);
    }
/* BOTONES */
.btn-verde, .btn-verde:hover {
    background-color: var(--verde-1);
    color: white;
    border: none;
}

.btn-outline-verde {
    color: #ABC775;
    border: 1px solid #ABC775;
    background: transparent;
    font-weight:520;
    border-radius: 0.25rem;
    cursor: pointer;
}
.btn-outline-verde:hover{
    border-color:black;
    transform:scale(1.05);
}

    .btn-azul, .btn-azul:hover {
    background-color: var(--azul-suave);
    color: white;
    border: none;
}

.btn-close {
    filter: brightness(255) saturate(100%) invert(13%) sepia(100%) saturate(7483%) hue-rotate(357deg) brightness(100%) contrast(119%);
    align-self: start;
    padding-top: 0rem;
    margin-bottom: 0.5em;
    opacity: 1;
}

.codigoModal {
    color: var(--gris-oscuro);
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
}


.btn-blanco, .btn-blanco:hover {
    background-color: white;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.15);
    color: var(--verde-texto-boton);
    border: none;
}

.btn-rojo, .btn-rojo:hover {
    background-color: var(--color-rojo);
    color: white;
    border: none;
}

    .btn-verde:hover, .btn-blanco:hover, .btn-rojo:hover, btn-azul:hover {
        transform: scale(1.08);
    }

.btn-hora:hover {
    background-color: var(--verde-1);
}

.btn_guardarPlantilla {
    background-color: rgba(117, 164, 199, 0.7);
    color: white;
    border: none;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .btn_guardarPlantilla:hover {
        color: rgb(58, 62, 65);
    }

.ReferenciaConERP > * {
    padding: 0 !important;
}

#btnMasTelefonos {
    background-color: var(--verde-suave-1);
    color: var(--gris-oscuro);
    font-size: 15px;
    padding: 0px 5px;
    margin-top: -.5rem;
    margin-bottom: 1.5rem;
    /*border: 1px solid var(--gris-oscuro);
    border-radius: 5px;*/
    border: none;
    /*padding: .5rem .8rem;*/
}
/* TABLAS */
#tablaClientes,
#tablaComerciales,
#tablaPedidos,
#tablaProductos {
    width: 100% !important;
}

#tablaClientes_wrapper,
#tablaComerciales_wrapper,
#tablaPedidos_wrapper,
#tablaProductos_wrapper {
    margin-bottom: 10px;
}

    #tablaClientes_wrapper > .row:first-child,
    #tablaComerciales_wrapper > .row:first-child,
    #tablaPedidos_wrapper > .row:first-child,
    #tablaProductos_wrapper > .row:first-child {
        background-color: var(--verde-1);
        padding: 0.3em 0.5em;
        border-radius: 5px;
        margin-bottom: .5rem;
    }

#tablaClientes > thead th,
#tablaComerciales > thead th,
#tablaPedidos > thead th,
#tablaProductos > thead th {
    background-color: var(--verde-2);
}

.table > :not(:last-child) > :last-child > * {
    border-bottom: none;
}

.dt-layout-full {
    margin: 0;
    padding: 0;
}

.dtr-details > * {
    display: flex;
}

.dt-search > label {
    display: none;
}

.table > :not(caption) > * > * {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    box-shadow: none !important;
}

.dataTables_wrapper table.dataTable thead {
    visibility: hidden;
}

tr.impar > * {
    background-color: rgba(255, 255, 255, 0.50) !important;
}

tr.par > * {
    background-color: white !important;
}

tr.child.impar > * {
    background-color: rgba(255, 255, 255, 0.50) !important;
}

tr.child.par > * {
    background-color: white !important;
}

.dt-hasChild {
    box-shadow: inset 0 1px 0 0 #cccccc, inset 1px 0 0 0 #cccccc, inset -1px 0 0 0 #cccccc, 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 8px;
}

tr.dt-hasChild.par {
    box-shadow: inset 0 1px 0 0 #bbbbbb, inset 1px 0 0 0 #bbbbbb, inset -1px 0 0 0 #bbbbbb, 0 2px 4px rgba(0, 0, 0, 0.08);
}

tr.child {
    box-shadow: inset 1px 0 0 0 #cccccc, inset -1px 0 0 0 #cccccc, inset 0 -1px 0 0 #cccccc, 0 1px 2px rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 8px;
}

    tr.child.par {
        box-shadow: inset 1px 0 0 0 #bbbbbb, inset -1px 0 0 0 #bbbbbb, inset 0 -1px 0 0 #bbbbbb, 0 2px 4px rgba(0, 0, 0, 0.08);
    }

ul.dtr-details {
    width: 100%;
}

li > .dtr-title:empty {
    display: none !important;
    margin-right: 1em;
}

#tablaClientes thead {
    visibility: hidden;
}

.page-link {
    color: black;
}

    .page-link:hover {
        color: var(--verde-1);
        background-color: white;
    }

    .page-link:focus {
        z-index: 3;
        color: black;
        background-color: var(--verde-1);
        outline: 0;
        box-shadow: none !important;
    }

.dt-search .input-group {
    margin: auto;
    max-width: 350px;
}
    /* si no usas form-control-lg, define altura manual */
    .dt-search .input-group .form-control {
        height: 2rem;
    }

    .dt-search .input-group .input-group-text {
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Opcional: si quieres forzar un ancho mínimo */
    .dt-search .input-group .form-control {
        min-width: 220px;
    }

.page-item.active .page-link {
    z-index: 3;
    color: white;
    background-color: var(--verde-1);
    border-color: var(--verde-1);
}

.dtr-details > li > .dtr-title {
    margin-right: 1em;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0;
}

.checkPideFacil > input:checked {
    accent-color: var(--verde-2);
}

.dt-layout-start, .dt-layout-end {
    padding: 0 !important;
}

.tablaVerPedido-header {
    background-color: var(--verde-2)
}

.dt-container:first-child {
    padding: 0 !important;
}

.misma-linea {
    display: flex;
    flex-wrap: nowrap;
}

table.dataTable, .table > thead {
    vertical-align: middle;
}

.dataTables_wrapper > .row {
    align-items: center;
}

.div-asignarfechapedido {
    width: 100%;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left;
}

    table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer {
        flex-direction: row;
    }
    .input-group > input:focus {
        box-shadow: none !important;
    }

.input-group > span {
    background-color: white;
}

.dataTable tbody > tr:hover > * {
    background-color: var(--azul-hover) !important;
}

.col-observaciones{
    max-width: 200px;
}

/* CSS Plugin Teléfono */
.tlf {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: none;
}

td.nombreCliente:hover {
    cursor: pointer;
}

.iti.iti--allow-dropdown {
    width: 100%;
}

    .iti.iti--allow-dropdown, .iti__flag-container, .iti.iti--allow-dropdown > * {
        outline: none;
    }

/* Menús */
.nav-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    height: 100px;
    z-index: 99;
    border-bottom: solid 2px var(--verde-suave-1);
}

.nav-lateral {
    position: fixed;
    text-align: center;
    top: 100px;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-color: white;
    font-family: 'Jost', sans-serif;
    width: var(--ancho-ml);
    border-right: solid 2px var(--verde-suave-1);
}

.menu-selected {
    background-color: var(--verde-suave-1);
    border-left: solid 7px #ABC775;
    padding-top: 0.6rem !important;
}

/* VER PDFS */
.tablaVerPedidoPDF  .select2-container--default .select2-selection--single {
    height: 36px;
    padding: 2px 6px;
}

.volver-btn{
    margin-right: 40px;
}

.logo-nav-header {
    width: var(--ancho-ml);
    border-right: solid 2px var(--verde-suave-1);
}

.nav-lateral > nav-link {
    font-weight: 500;
}

.btn-ml-cs {
    border-top: solid 2px var(--verde-suave-1);
}

.centrar {
    display: felx;
    justify-content: center;
}

.btn-ml {
    border-bottom: solid 2px var(--verde-suave-1);
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    font-weight: 545;
    padding: 0.25rem;
    display: flex;
    justify-content: center;
}

.btn-ml-cs {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

.btn-menu-movil {
    margin: 1rem;
    padding: 1.25rem;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 0.5rem;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-menu-movil:hover {
        background-color: grey;
        color: #ffff;
    }

.btn-hora {
    background-color: white;
}

.icono-ml {
    width: 25px;
    height: 30px;
}

.icono-ml-cs {
    margin-right: 0.5rem;
}

.icono-ml-movil {
    width: 30px;
    height: 30px;
}

.margenesLaterales, .margenesLaterales2 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.nombreUsuario:hover {
    color: var(--verde-1);
}

.checkboxPideFacil:checked {
    background-color: var(--verde-1);
    border-color: var(--verde-1);
}

.checkboxPideFacil:hover {
    cursor: pointer;
}

.cabecera-linea {
    font-weight: bolder !important;
}

    .cabecera-linea > * {
        font-weight: 800;
    }

.texto-gris {
    color: #848484;
}

    .texto-gris > * {
        font-weight: 200;
    }

.texto-linea {
    color: #88888857;
    font-weight: 200;
}

.input-date-hidden {
    position: absolute;
    left: -9999px; /* fuera del viewport */
    width: 1px;
    height: 1px; /* no ocupa espacio */
    opacity: 0; /* invisible */
}

.highlight {
    font-weight: bolder;
}

.bi-eye-slash, .bi-eye {
    color: var(--verde-1);
}

html {
    touch-action: manipulation;
}

.btnEnviar-disabled {
    background-color: var(--verde-oscuro-disabled) !important;
}

table#tablaPedidos > tbody > tr.child > td.child > ul > li:last-child > span.dtr-data {
    width: 100%;
}

    table#tablaPedidos > tbody > tr.child > td.child > ul > li:last-child > span.dtr-data > div > button {
        /*padding: 0.3rem 1rem;*/
        width: 69px;
    }

.btn-fecha-icon {
    padding: 0 !important;
    border: none;
    font-size: 1.6rem;
    color: gray;
}

    .btn-fecha-icon:focus,
    .btn-fecha-icon:focus-visible {
        box-shadow: none !important;
        border: none !important;
        color: var(--verde-oscuro) !important;
    }

.dt-layout-start,
.dt-layout-end {
    width: auto;
}

#dt-length-0 {
    padding: .25rem 1.75rem .25rem .5rem;
    background-position: right .55rem center;
}

.anchoPDF > .modal-dialog {
    max-width: 1300px;
    width: 1300px;
}

/*BUSCADOR*/
.buscador {
    padding-right: 2.5rem;
    /*  border: solid 2px var(--verde-oscuro) !important;*/
    border: none !important;
}

.search-wrapper {
    position: absolute;
    display: block;
}

.search-wrapper input {
    padding: 0.5rem 2rem 0.5rem 0.5rem; /* arriba/derecha/abajo/izq */
    font-size: 1rem;
}


.search-wrapper .search-icon {
    position: absolute;
    right: 2rem;
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none; /* que no interfiera al clicar */
    font-size: 1rem;
    color: #666;
}

.search-wrapper .search-icon svg {
    fill: currentColor;
    width: 1rem;
    height: 1rem;
}

/* BORDE DE COLORES BUSCADOR */
.borde-giratorio {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    z-index: 1;
}

.borde-giratorio .inner {
    position: relative;
    z-index: 1;
    margin: 3px;
    display: flex;
    align-items: center;
    width: 100%;
}

.borde-giratorio::before {
    content: "";
    position: absolute;
    top: -290px;
    left: -100px;
    width: 700px;
    height: 700px;
    background: linear-gradient(90deg, #077864 0%, #f08a84 100%);
    animation: girarBorde 3s linear infinite;
    z-index: 0;
    border-radius: 50%;
}

@keyframes girarBorde {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

tr.fila-sin-stock {
    background: var(--color-rojo);
}

/*BUSCADOR*/
/* Circulo pedido no confirmado en ERP */
.status-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff98007d;
    margin-right: 4px;
}

/*
    SELECCIONABLE RUTAS
*/
.s2-summary .select2-selection__choice {
    display: none; /* oculta los chips individuales */
}

.s2-summary .select2-selection__choice--summary {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6c757d; /* estilo "placeholder" */
    pointer-events: none; /* que no parezca interactivo */
}

.s2-summary .select2-selection {
    height: 36px !important;
    overflow-y: scroll;
}

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .fs-sm-08 {
        font-size: 0.8rem;
    }

    .dt-layout-start, .dt-layout-end {
        margin: auto;
    }
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .tablaPedidos {
        max-height: 48vh;
    }

    .dt-layout-start {
        margin-right: auto;
    }

    .dt-layout-end {
        margin-left: auto;
    }

    .input-oculta {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: none;
        background: transparent;
    }

    .btn-fecha-icon {
        cursor: pointer;
    }

    .margenesLaterales {
        padding-left: 20px;
        padding-right: 20px;
    }

    .margenesLaterales2 {
        padding-left: 18px;
        padding-right: 10px; /* +11px del scroll*/
    }

    .offcanvas-body {
        display: flex;
    }

    .nav-lateral {
        top: 0px;
        position: relative;
        width: 100%;
        border: none;
    }

    #menuLateralMovil {
        width: 70%;
    }

    .nav-header {
        height: 60px;
    }

    .btn-verde {
        margin: 0.1rem;
    }

    .btn-ml {
        border-top: none;
        border-bottom: none;
        margin-top: 20px;
    }

        .btn-ml:first-of-type {
            border-top: none;
        }

        .btn-ml > a {
            font-weight: 400;
            padding: 0px;
        }

    .body {
        padding-left: 0px;
        padding-top: 55px;
    }

    .btn-ml-cs {
        padding-top: 15px;
    }

    ul {
        display: flex;
        justify-content: left;
    }

    .dtr-details > * {
        justify-content: space-between;
    }
}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    .dataTables_length {
        padding: 8px 0px;
    }
}
/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
}
/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
}