:root {
    --gris-textos: #848484;
    --color-encabezados: #ABC775;
    --verde-1: #CDDBA7;
    --verde-2: #E5EECE;
    --textos-oscuros: #242424;
    --texto-botones: #FFFFFF;
    --gris-inputs: #ACACAC;
    --color-fondo: #F3F9EF;
    --color-rojo: #D47777;
    --color-azul-plantilla: #75A4C7;
    --color-azul-plantilla-rgba: rgba(117, 164, 199, 1);
    --color-blanco: rgba(255,255,255,0.7);
    --color-verde-nuevo: #077864;
    --color-gris-nuevo: #F6F6F6;
    
    --scrollbar-width: 11px;
    --scrollbar-thumb-color: var(--color-verde-nuevo);
    --scrollbar-thumb-hover-color: var(--color-verde-nuevo); /* Un tono más oscuro para hover */
    --scrollbar-thumb-border-radius: 15px; /* Redondear los bordes */
}

/* 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 */
}

/* 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 */
    }

.mb-body {
    margin-bottom: 1.5rem;
}
.notification {
    display: none;
    z-index: 2000;
    position: fixed;
    top: 20px; 
    left:50%;
    text-align:center ;
    background:  rgba(173, 216, 230, 0.5); 
    padding: 10px;
    border-radius: 5px;
}

.install-banner {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    border-radius: 15px;
    background-color: #F3F9EF;
    color: #848484;
    text-align: center;
    padding: 5px;
    z-index: 200000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Añade un pequeño sombreado para dar relieve */
}

/* Estilo del botón de cierre con la "X" */
.close-button {
    text-align:end;
    background: transparent;
    border: none;
    color: #848484;
    font-size: 20px;
    cursor: pointer;
}

    .close-button:hover {
        color: #ff0000; /* Cambia el color al pasar el cursor */
    }


  /*  .install-banner button {
        margin: 5px;
    }*/

  .border-radius-5px{
      border-radius: 5px;
  }

.color-encabezado {
    color: var(--color-encabezados);
}

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

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

.text-gris {
    color: #999999;
}

.select-css {
    border: none;
    max-width: fit-content;
    background-color: transparent;
    color: #848484;
    font-size: 15px;
}

.invitar-proveedor {
    background-color: #CDDBA7; /* Verde claro */
    color: white; /* Letra blanca */
}

.md-240px-left {
    margin-left: 240px;
}

.md-100px-top {
    margin-top: calc(100px + 0.8rem);
}

#aside-principal {
    width: 240px;
    z-index: 50;
}

#headerNuevo {
    height: 100px;
    min-height: 100px;
    width: calc(100% - 240px);
    z-index: 50;
}

#modalListaProductos{
    overflow: hidden;
}

#modalListaProductos.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translateY(100%);
}

#modalListaProductos.fade.show .modal-dialog {
    transform: translateY(0);
}

#ModalDialogProductos{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: end !important;
    max-width: none;
}

#ModalDialogProductosInner{
    max-width: 600px;
}

.drag-handle {
    width: 40%;
    height: 4px;
    background-color: #ccc;
    opacity: 0.4;
    border-radius: 2px;
}

#ModalDialogProductosInner {
    border-radius: 30px 30px 0 0;
    margin: 0;
    height: 85dvh;
    /* EL TRANSFORM TAMBIÉN ESTÁ EN JS */
    transition: transform 0.3s ease-out;
    will-change: transform;
}
/* 
    Modal Header: 50px y 1rem
    Modal Header2: 92px y 0.5rem
    Modal Footer: 105px;
    2 px de margen;
*/
#tabla-add-productos-body {
    height: calc(85dvh - 1.5rem - 50px - 92px - 105px);
    overflow-y: scroll;
}
/* TECLADO ABIERTO */
#ModalDialogProductosInner.tecladoActivo #tabla-add-productos-body {
    height: calc(100dvh - 1.5rem - 50px - 92px - 105px);
}
#ModalDialogProductosInner.tecladoActivo {
    height: 100dvh;
}

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

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

.popover-xl, .popover-xl > .driver-popover-description {
    max-width: 500px !important;
    /*  width: 500px !important;*/
}

.select2-selection--single, #select2-ListaProductos-container, .select2-selection__arrow {
    height: 36px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    color: var(--gris-textos);
}

.select2-selection__clear {
    display: none;
}


.edit-button:first-of-type {
    background-color: red !important;
}

#proveedorSelect {
    padding: 3px;
    font-size: 16px;
}

@media print {
    /* Ocultar elementos no deseados */
    .btn-close, .bi-printer, .btn {
        display: none;
    }

    /* Asegurarse de que solo el contenido del modal se imprima */
    body * {
        visibility: hidden;
    }

    .modal-content, .modal-content * {
        visibility: visible;
    }

    .NombreProductos {
        margin-left: 75px !important;
    }

    .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        width: 100%;
        height: auto;
    }

    .modal-body {
        margin-top: -20px;
        margin-bottom: 35px
    }

    h5 {
        font-size: 25px
    }

    .Fecha {
        font-size: 20px;
    }

    .modal-dialog {
        max-width: 100%;
    }

    .recuadro-formulario {
        border: none !important
    }

    .modal-content, .recuadro-formulario {
        border: none;
    }

    /* Ajustar el tamaño de la fuente y la anchura de la tabla para mejorar la legibilidad */
    .tabla-detalle-pedido, .tabla-detalle-pedido th, .tabla-detalle-pedido td {
        font-size: large; /* Ajusta este valor según sea necesario */
    }

    #notas-impresion {
        font-size: large;
        text-decoration: underline;
        margin-top: 40px;
    }

    .tabla-detalle-pedido, .tabla-detalle-pedido th, .tabla-detalle-pedido td {
        border: none !important;
    }

        /* Aplicar un borde debajo del encabezado de la tabla */
        .tabla-detalle-pedido thead th {
            border-bottom: 2px solid black !important;
        }

        /* Aplicar bordes cada dos filas en el cuerpo de la tabla */
        .tabla-detalle-pedido tbody tr:nth-child(2n) td {
            border-bottom: 1px dotted black !important;
        }
}



.field-validation-error {
    color: red;
}

body {
    font-family: 'Jost', sans-serif;
    /*font-family: Arial, sans-serif;*/
    /*background-color: #F5F5F5;*/
    background-color: var(--color-fondo);
    transition: all 0.3s ease;
}

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

.porcentaje {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
    background-color: #ABC775;
    margin-right: 5px;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    width: 24px;
    height: 24px;
    font-size: 15px;
}

#Hecho .edit-button,
#Borrados .edit-button {
    display: none;
}

#Pendiente .delete-button,
#Borrados .delete-button {
    display: none;
}

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

.modal-body-personalizado {
    max-height: 80vh; /* 80% de la altura de la ventana gráfica */
    overflow-y: auto; /* Habilita el desplazamiento vertical si es necesario */
}

.modal-lista-productos {
    max-height: 70vh; /* Altura máxima del 70% de la ventana gráfica */
    overflow-y: auto; /* Desplazamiento vertical si es necesario */
}

.btn-anadido, .btn-anadido:hover, .btn-anadido:focus, .btn-anadido:active, .btn-anadido:active:focus {
    background-color: lightgrey; /* Color de fondo */
    color: white; /* Color del texto */
    border-color: lightgray; /* Color del borde */
    box-shadow: none; /* Elimina la sombra de caja, si existe */
}

.btn-add-producto {
    text-decoration: none;
    font-size: 0.8rem;
    border: solid 1px var(--color-verde-nuevo);
    color: var(--color-verde-nuevo) !important;
    border-radius: 50px;
    font-weight: 400;
    padding: 5px 0;
    width: 90px;
}

.btn-add-producto:before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 10px;
    background-image: url('/iconos/nuevoMasVerde.png');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; 
    margin-right: 5px;
}

.btn-add-producto.btn-anadido {
    background-color: var(--color-verde-nuevo);
    color: white !important;
}

.btn-add-producto.btn-anadido:before{
    width: 15px;
    height: 18px;
    background-image: url('/iconos/check.png');
}

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

.btn-verde, .btn-verde:focus {
    transition: transform 0.25s ease-in-out, color 0.25s ease-in-out;
    background-color: var(--verde-1);
    color: white;
}
.btn-verde:hover {
    transform: scale(1.2);
    color: grey;
}

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

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

.borde-verde-abajo {
    border-bottom: solid 2px var(--color-fondo) !important;
}

.borde-verde-derecha {
    border-right: solid 2px var(--color-fondo);
}

.borde-verde-izquierda {
    border-left: solid 2px var(--color-fondo);
}

.btn_volver {
    margin: 4px 2px !important;
    padding: 6px 20px;
    font-weight: 300;
    transform: scale(0.9)
}



label {
    color: grey
}

.texto-subrayado {
    text-decoration: underline;
}

.filaColor1 {
    background-color: #e4f3e4;
}

.fondo-gris {
    background-color: #F6F3F3;
    border: none;
}

.filaColor2 {
    background-color: transparent;
}

.nueva-entrada {
    background-color: #dff0d8;
}

#TablaPedidos thead,
#tablaProductos thead,
#TablaConfirmar thead,
#TablaPedidosHechos thead,
#TablaUsuarios thead,
#TablaProductos thead,
#productos thead,
#TablaProveedores thead,
#tabla-add-productos-head thead,
#TablaOfertas thead,
#TablaNovedades thead {
    border-bottom: .5rem solid var(--color-fondo);
}

table thead th {
    background-color: var(--verde-2) !important;
    vertical-align: middle;
}

table thead th:first-of-type {
    text-align: start;
    margin-left: .5rem;
    border-radius: 5px 0 0 5px;
}

table thead th:last-of-type {
    border-radius: 0 5px 5px 0;
}

table tbody td:first-of-type {
    text-align: start;
    margin-left: .5rem;
}

.swal2-icon.swal2-success.swal2-icon-show > span {
    background-color: var(--color-verde-nuevo) !important;
}

.swal2-icon.swal2-success.swal2-icon-show > div {
    border-color: var(--color-verde-nuevo) !important;
}

@keyframes fadeHighlightOdd {
    from {
        background-color: rgba(205,219,167,0.8);
    }
    to {
        background-color: #FAFAFA;
    }
}

@keyframes fadeHighlightEven {
    from {
        background-color: rgba(205,219,167,0.8);
    }
    to {
        background-color: white;
    }
}

#tablaProductos tr.highlight:nth-child(2n+1) {
    animation: fadeHighlightOdd 2s forwards;
}

#tablaProductos tr.highlight:nth-child(2n) {
    animation: fadeHighlightEven 2s forwards;
}

#TablaConfirmar tbody tr:nth-child(2n+1),
#TablaPedidosHechos tbody tr:nth-child(2n+1),
#TablaProveedores tbody tr:nth-child(2n+1),
#TablaDetallePedido tbody tr:nth-child(2n+1) 
{
    background-color: rgb(228, 243, 228, 0.7);
}

#tabla-add-productos tbody tr:nth-child(2n+1),
#productos tbody tr:nth-child(2n+1),
.tabla-detalle-pedido tbody tr:nth-child(2n+1) {
    background-color: #FAFAFA;
}

#TablaPedidos tbody tr:hover,
#TablaProductos tbody tr:hover,
#TablaUsuarios tbody tr:hover {
    background-color: rgba(173, 216, 230, 0.5)
}

#TablaPedidos tbody,
#TablaUsuarios tbody,
#TablaOfertas tbody {
    background: white;
}

    #TablaPedidos tbody tr:last-of-type td:last-of-type {
        border-radius: 0 0 10px 0;
    }

    #TablaPedidos tbody tr:last-of-type td:first-of-type {
        border-radius: 0 0 0 10px;
    }

.tabla-detalle-pedido tbody tr {
    line-height: 40px;
}


#TablaProveedores tbody tr:hover {
    background-color: rgba(173, 216, 230, 0.5); /* Light blue with transparency */
}

#TablaProveedores tr:hover td:first-child {
    border-top-left-radius: 10px; /* ajusta el radio según lo necesites */
    border-bottom-left-radius: 10px;
}

#TablaProveedores tr:hover td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.color-letra-verde {
    color: #abc775
}

.color-letra-gris {
    color: grey;
}

.color-letra-gris a {
    color: grey;
    text-decoration: underline;
}

.whatsapp-link {
    display: inline-block;
    position: relative;
}

.whatsapp-icon {
    color: #25D366;
    margin-left: .5rem !important;
    transform: scale(1.4);
}

.fa-envelope {
    transform: scale(1.2)
}

.form-check-input:checked {
    background-color: var(--color-encabezados);
    border-color: var(--color-encabezados);
}

.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(--color-encabezados);
}


.btn_confirmar {
    background-color: #ABC775;
    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_cancelar {
    background-color: transparent !important;
    border-color: rgb(212,119,119);
    border: solid;
    border-width: 2px;
    color: rgb(212,119,119);
    font-size: 16px;
    height: 30px;
    width: 100px;
    font-weight: 400;
    margin-top: 3px;
    padding: 0px;
}

#btnCrearPlantilla {
    height: 30px;
    width: 130px;
    margin-top: 2px;
}

.btn-azul-2 {
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    background-color: transparent;
    border-color: #75A4C7;
    border: solid;
    border-width: 2px;
    color: #75A4C7;
    font-weight: 400;
}

.h-42px {
    height: 42px;
    min-height: 42px;
}

.barra-superior {
    background-color: var(--verde-1); /* Verde oscuro */
    padding: 4px .5rem; /* Ajuste del padding para alinear el texto */
    color: white;
    text-align: left; /* Alineación del texto a la izquierda */
    font-size: 1.2rem; /* Tamaño de fuente más pequeño */
    font-weight: bold; /* Texto en negrita */
    border-radius: 5px; /* Esquinas redondeadas */
    transform: scaleY(0.9); /* Aplasta el texto verticalmente */
}

.recuadro-formulario {
    border: 1px solid #ABC775; /* Color de borde suave */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 5px; /* Espacio interior para no pegar el contenido al borde */
    margin: 5px 0; /* Margen superior e inferior para separarlo de otros elementos */
    background-color: var(--color-blanco); /* Color de fondo suave, cambia según tus preferencias */
}

.modal .recuadro-formulario {
    background-color: var(--color-fondo);
}

.modal .recuadro-formulario .fondo-gris {
    background-color: white;
    border: inherit;
}

/* Resto de tus estilos CSS */


/* Resto de tus estilos CSS */

.navbar-nav .nav-item .nav-link {
    opacity: 0.85;
    text-align: center
}


    /* Estilo de hover para los enlaces de la navbar */
    .navbar-nav .nav-item .nav-link:hover {
        background-color: #e0e0e0; /* o el color que prefieras para el hover */
        opacity: 1; /* Opcional: si quieres cambiar la opacidad al hacer hover */
    }





.containter-fluid {
    margin-right: 15px;
    color: #fff;
    background-color: white !important;
    border-color: #1861ac;
}


.nav-tabs .nav-item .nav-link.active {
    background-color: #e8f5e9;
    color: grey;
    border: 2px solid lightgray;
    border-bottom-color: transparent;
}

.offcanvas, .offcanvas-end {
    transition: transform .9s cubic-bezier(0.04, 0.1, 0, 1) !important;
}



table {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    border-collapse: collapse;
    border-bottom-width: 0px !important
}


#tablaProductos td,
#tablaProductos th,
#tablaProductos tr,
.tabla-detalle-pedido td,
.tabla-detalle-pedido th{
    padding: 9px 0px;
}

#tablaProductos tr td:first-child, 
#tabla-add-productos tr td:first-child,
.tabla-detalle-pedido tr td:first-child{
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
}

#tablaProductos tr td:last-child, 
#tabla-add-productos tr td:last-child,
.tabla-detalle-pedido tr td:last-child{
    padding-right: 5px;
    border-radius: 0 10px 10px 0;
}

#tabla-add-productos tr {
    line-height: 35px;
}

#tablaProductos tr {
    line-height: 38px;
}

#tablaProductos td span{
    font-weight: 400;
    color: black;
    font-size: 1rem;
}

#tablaProductos .quantity {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#tablaProductos.loading .quantity {
    opacity: 0;
}

.table td, .table th, .table tr {
    border: none;
}



td {
    vertical-align: middle;
}

.text-azul {
    color: #5A9;
}

h1, h2 {
    color: #5A9;
    transition: color 0.3s ease;
}


select.form-control {
    -webkit-appearance: menulist-button;
    appearance: menulist-button;
}

.select-add {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
}

    .select-add:hover {
        transform: scale(1.02);
        border-color: #5A9;
    }

.fila-nuevo {
    animation: highlight 1.5s;
}



@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes flash {
    0% {
        background-color: #ff0;
    }

    50% {
        background-color: #fff;
    }

    100% {
        background-color: #ff0;
    }
}

.flash {
    animation: flash 0.5s;
}

@keyframes highlightRed {
    from {
        background-color: #ffcccc;
    }

    to {
        background-color: white;
    }
}


@keyframes highlight {
    from {
        background-color: #ccffcc;
    }

    to {
        background-color: white;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.add-highlight {
    animation: highlight 1.5s;
}

.remove-highlight {
    animation: fadeOut 1s forwards;
}

hr {
    border: 1px solid #ABC775;
    margin-top: 40px;
    margin-bottom: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.color-azul {
    color: #75A4C7;
}

.btn_guardarPlantilla {
    /* margin-top: 0px;*/
    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_enviar {
    margin-top: 20px;
    background-color: var(--verde-1);
    color: white;
    border: none;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1rem;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .btn_enviar:active {
        transform: scale(0.99);
    }


.bg-fondo-blanco {
    background-color: var(--color-blanco);
}


.styled-button {
    margin: 0 auto;
    background-color: #4CAF50; 
    color: white;
    padding: 10px 24px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    box-shadow: 0 4px #999;
}

    .styled-button:hover {
        background-color: #45a049
    }
    /* Cambio de color al pasar el ratón */

    .styled-button:active {
        background-color: #3e8e41;
        box-shadow: 0 2px #666;
        transform: translateY(2px); 
    }

.btn-plus, .btn-minus, .cantidad-producto {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    width: 50px;
}

#tablaProductos td.btn-minus {
    padding-left: 5px;
}
.margenesLaterales {
    padding-left: 35px;
    padding-right: 35px;
}

.margenesLaterales2 {
    padding-left: 30px;
    padding-right: 30px;
}

.btn-plus:hover, .btn-minus:hover, #add-product-modal:hover, #MostrarCantidades:hover{
    cursor: pointer;
}

.btn-minus button, .btn-plus button {
    border: none;
    background-color: transparent;
    display: content;
    align-items: center;
    justify-content: center;
}

.btn-minus button {
    font-size: 40px;
    opacity: 0.8;
}

.btn-plus button {
    font-size: 25px;
}

.btn-minus-inner, .btn-plus-inner, .cantidad-producto-inner {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border: solid 1px rgba(226,226,226,0.5);

}

.btn-minus-inner {
    border-radius: 20px 0px 0px 20px;
    border-right: 0;
}

.btn-plus-inner {
    border-radius: 0px 20px 20px 0px;
    border-left: 0;
}

.cantidad-producto-inner {
    border-right: 0;
    border-left: 0;
}

.btn-active {
    transform: scale(1.05);
    box-shadow: none !important;
}

.h-50px {
    height: 50px;
}

#diaDeLaSemana {
    border-width: 1px;
    border-color: var(--color-verde-nuevo);
    color: var(--color-verde-nuevo);
    font-size: 15px;
    padding: 2px;
    height: 35px;
    width: 90px;
    text-align: center;
    font-weight: 400;
    background-color: white;
    outline: none;
}

th {
    font-weight: 700;
}

td, th {
    color: #848484;
}

#pedidoConfirmado {
    height: calc(100dvh - 100px - 1rem);
}

.btn_enviar_2 {
    background-color: var(--color-verde-nuevo);
    border-radius: 15px;
}

@media (max-with:800px) {
    body {
        font-size: 0.875rem; /* ajusta según tus necesidades */
    }
}


@media (max-width: 720px) {

    #pedidoConfirmado{
        height: calc(100dvh - 55px - 1rem);
    }

    #closeBanner, #installButton {
        margin: 0;
    }

    .install-banner {
        top: inherit;
        bottom: 5px;
        width: 350px;
    }
    table {
        border-bottom-width: 0px !important;
    }

    #TablaPedidos td:first-child {
        font-size: 1.2em; /* Ajusta este valor según tus necesidades */
    }

    .chk-label {
        display: inline-block;
        width: 15px !important;
        height: 15px !important;
        border: 2px solid lightgrey;
        cursor: pointer;
    }

    .offcanvas, .offcanvas-end {
        max-width: 50% !important;
        transition: transform .9s cubic-bezier(0.04, 0.1, 0, 1) !important;
    }

    tr {
        line-height: normal;
    }

    .btn_enviar, .btn_opcion_demo {
        margin-top: 20px;
        color: white;
        border: none;
        padding: 6px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.1rem;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .btn_opcion_demo {
        background-color: rgba(171, 199, 117, 0.8);
    }

    .observaciones-mobile, .btn-editar, .btn-eliminar, .tipo-to-category-mobile {
        display: none;
    }
    
    body {
        font-size: 0.875rem; /* ajusta según tus necesidades */
    }

    tbody, td, tfoot, th, thead, tr {
        padding: 9px 3px;
    }

    /*.table td, .table th {
        border: none;
        padding: 9px 3px !important;*/ /* arriba y abajo 7px, izquierda y derecha 3px */
    /*}*/

    .btn-sm {
        padding: 0.2rem 0.4rem; /* reducir el padding de los botones */
        font-size: 0.675rem; /* reducir el tamaño de la fuente de los botones */
        line-height: 1.2;
        border-radius: 0.15rem;
        margin-right: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .same-size-btn {
        height: 25px !important;
        width: 45px !important;
        margin-top: -0px !important;
    }
}

.same-size-btn {
    width: 60px; /* ajusta según tus necesidades */
    height: 30px; /* ajusta según tus necesidades */
}

input[type=checkbox]:checked {
    background-color: #00ff00;
}

.big-checkbox {
    display: none;
}

.chk-label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid lightgrey;
    cursor: pointer;
}

.big-checkbox:checked + .chk-label {
    background-color: #00ff00;
}



.fila-eliminar {
    background-color: #ffcccc;
    animation: fadeOut 0.5s forwards;
}



button {
    touch-action: manipulation;
}

.no-bullet > ul > li {
    list-style-type: none;
}

.no-bullet > ul {
    padding: 0;
}

/* Estilos por defecto (sin modo de edición) */
.btn-remove, #DesplegableProductos, #bloqueNuevaPlantilla {
    display: none;
}

/* Estilos cuando estás en modo de edición */
.modo-edicion .btn-remove {
    display: contents;
    color: rgb(212,119,119) !important;
    font-weight: bold;
    font-size: 18px !important;
    border: none;
    box-shadow: none;
}


.fs-07 {
    font-size: 0.7rem;
}



.modo-edicion #bloqueNuevaPlantilla {
    display: inline-block;
}

.modo-edicion #DesplegableProductos {
    display: flex;
}

.badge {
    height: 13px; /* Ajustado */
    width: 8px; /* Ajustado */
    display: inline-block;
    border-radius: 50%; /* Asegura que sea un círculo */
}

    .badge:empty {
        display: inline-block !important;
    }

.new-offer {
    background-color: rgba(0, 128, 0, 0.2) !important; /* Verde con 30% de opacidad */
    color: black !important; /* Texto en negro */
}

.oferta {
    color: green;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    margin-right: 5px;
}

.select2-selection select2-selection--multiple {
    background-color: #F6F3F3 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--verde-1) !important;
    border-color: black !important;
    font-weight: 400;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #dfdfdf !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    color: black !important;
    background-color: var(--verde-1) !important;
}

.select2-selection__choice__remove {
    color: var(--color-rojo) !important;
}

.PedidoEnReparto {
    color: #5A9;
    font-weight: bold;
}

.PedidoProcesando {
    color: #aa8655;
}

.PedidoPendiente {
    color: #ababab;
}

#signature-pad {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 1px solid #000;
    display: block; /* Asegurarse de que el canvas ocupe todo el ancho posible */
}


.tab-opcion {
    color: var(--verde-1);
    background-color: white;
    border-radius: 5px;
    border: none;
    /*width: 150px;*/
    text-align: center;
    padding: 6px 10px;
}

    .tab-opcion.active {
        background-color: var(--verde-1);
        color: white;
    }

.opcion-demo > img, .opcion-demo-movil > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.75);
}

.opcion-demo > img {
    transition: all 0.5s;
    filter: blur(3px) grayscale(0.5);
}

.opcion-demo:hover{
    cursor: pointer;
}

.opcion-demo:hover > img {
    filter: none;
    transform: scale(1.01);
    z-index: 2;
}

.opcion-demo > .text-demo {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: 600;
    font-size: 2rem;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.w-150 {
    width: 150px;
}

.vertical-align-middle
{
    vertical-align: middle;
}

.color-gris-hover:hover {
    color: var(--gris-textos);
}


.icon-hover {
    transition: filter 0.3s ease;
    cursor: pointer;
}
    .icon-hover:hover {
        filter: grayscale(100%) brightness(0.7); /* Esto lo hace más gris y menos marrón */
        
    }


.notificacionVerPedido {
    display: none;
    z-index: 2000;
    position: fixed;
    top: 5%;
    margin-left: 10px;
    text-align: center;
    background: #ccffcc;
    padding: 10px;
    border-radius: 5px;
}

.loginDiv{
    height: calc(90vh - 55px);
    margin-top: 20px;
}

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

.input-number-style {
    -moz-appearance: textfield; /* Firefox */
}

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

.btn-hora:hover, .btn-hora:active {
    color: #fff;
    background-color: var(--color-encabezados);
}

.btn-hora:focus {
    box-shadow: none !important;
}

.h-fit-content{
    height: fit-content;
}

.btn-cargar-cantidades {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    border: solid 2px var(--color-verde-nuevo);
    color: var(--color-verde-nuevo);
}

.btn-cargar-cantidades:hover{
    color: var(--color-verde-nuevo);
}

.fw-300{
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}

.modalConfirmarPedido{
    max-height: 90dvh;
    overflow: hidden;
}

#listaProductosConfirmar {
    max-height: 35dvh;
}

.fondoFilaImpar:nth-child(odd) {
    background-color: #FAFAFA;
}

.text-area-confirmar {
    border-width: 2px;
    font-size: 16px;
    width: 100%;
    border-radius: 15px;
    min-height: 95px;
    border-color: #ededed;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.text-area-confirmar::placeholder {
    color: #a1a1a1;
}

.border-radius-15px {
    border-radius: 15px;
}

#bloqueFinalFormularioPedido {
    width: 100%;
    height: 170px;
    background-color: white;
}

/*
    ALTURAS CALCULADAS Menú: 100px + 0.8rem;
    ALTURAS CALCULADAS: 35px + 0.5rem margen;
    ALTURAS CALCULADAS: 36px + 0.5rem margen;
    ALTURAS CALCULADAS FINAL: 170px;
    MARGEN DE 1px;
*/

#productos {
    height: calc(100dvh - 100px - 35px - 36px - 171px - 1.8rem);
    overflow: auto;
}

/* LG */
@media (max-width: 991.98px) {
    .btn-grande {
        width: 120px;
    }
}

/* MD */
@media (max-width: 767.98px) {
    .cantidadFormularioPedido {
        display: block;
        transform: translateX(-12px);
    }

    :root {
        --scrollbar-width: 5px; /* Más delgada en móviles */
    }

    /* Para que desaparezca cuando no esté siendo usada */
    ::-webkit-scrollbar-thumb {
        opacity: 0;
        transition: opacity 0.3s ease; /* Transición suave */
    }

        /* Mostrar barra solo cuando se está desplazando */
        ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
            opacity: 1; /* Se muestra al interactuar */
        }
   
    .select-ruta {
        border: none;
        padding: 0px;
        background-image: none
    }

    .fecha-entrega{
        margin-bottom:5px;
        z-index: -5;
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }

    .md-240px-left {
        margin-left: 0px;
    }

    .md-100px-top {
        margin-top: 0px;
    }

    .navbar-expand-md, #headerAntiguo {
        height: 55px;
    }

    .notificacionVerPedido{
        bottom: 10px;
        margin-left: 0px;
        top: unset;
        width: 100%;
    }

    .min-width-110{
        min-width: 110px;
    }

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

    .margenesLaterales2 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .btn-plus, .btn-minus, .cantidad-producto {
        width: 35px;
    }

    .btn-minus-inner, .btn-plus-inner, .cantidad-producto-inner {
        height: 30px;
    }

    .btn_enviar:hover {
        transform: scale(1.02);
    }
    
    #bloqueFinalFormularioPedido {
        position: fixed;
        bottom: 0;
        left: 0;
    }
    
    /*
        ALTURAS CALCULADAS: Menú: 55px;
        ALTURAS CALCULADAS: 35px + 0.5rem margen;
        ALTURAS CALCULADAS: 36px + 0.5rem margen;
        ALTURAS CALCULADAS FINAL: 170px;
        MARGEN DE 1px;
    */
    #productos {
        height: calc(100dvh - 55px - 35px - 36px - 170px - 1rem - 1px);
        overflow: auto;
    }
}

/* MODO STANDALONE */
@media (max-width: 767.98px) and (display-mode: standalone) {
    #productos {
        height: calc(100dvh - 290px);
    }
}


@media (max-width: 350px) {
    .btn_enviar{
        font-size: 0.9rem;
    }
}

/* XL */
@media (max-width: 1199.98px) {
    .fecha-entrega {
        max-width: calc(20px + 5vw)
    }
}

/* XXL */
@media (max-width: 1399.98px) {
}