:root {
    --target-rojo-oscuro: #f0696d;
    --target-rojo-claro: #f6a39e;
    --target-rojo-claro2: rgb(247, 207, 205);
    --target-rojo-claro3: rgba(255, 176, 172, 0.295);
    --target-rojo-menu-highlight: rgb(216, 216, 216);
    --target-aqua-claro: #b1dcc5;
    --target-aqua-oscuro: rgb(139, 207, 191);
    --target-aqua-oscuro2: rgb(71, 172, 148);
}

/* WebKit */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: black #f1f1f1;
}


.toast {
    background-color: rgba(0,0,0,0.9);
}

.toast-message {
    font-family: "Jost", sans-serif !important;
}

.toast-success {
    background-size: 14px 14px;
}

.toast-error {
    background-color: #ad0202;
    opacity: 1 !important;
    box-shadow: none !important;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
    font-family: 'Work sans', sans-serif;
}

html {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    max-width: 2560px;

    -webkit-font-smoothing: antialiased;
    font-smooth: always;
}

.dimmed {
    background-color: red;
}

.margenProductos {
    margin-top: 7.5rem;
}


.menu-vertical-flecha-abajo {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIC00LjUgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIC0xLCAwLCAwKSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDx0aXRsZT5hcnJvd191cCBbIzM0MF08L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGRlZnM+IDwvZGVmcz4gPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJEcmliYmJsZS1MaWdodC1QcmV2aWV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwLjAwMDAwMCwgLTY2ODMuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+IDxnIGlkPSJpY29ucyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYuMDAwMDAwLCAxNjAuMDAwMDAwKSI+IDxwYXRoIGQ9Ik04NCw2NTMyLjYxMDM1IEw4NS40MDUzNjcyLDY1MzQgTDk0LjAxMzExNTQsNjUyNS43Mzg2MiBMOTQuOTMxMTk0NSw2NTI2LjYxOTg2IEw5NC45MjYxNTAxLDY1MjYuNjE1MDIgTDEwMi41NzM0NDYsNjUzMy45NTU0NSBMMTA0LDY1MzIuNTg2MTQgQzEwMS44ODY0LDY1MzAuNTU3MzYgOTUuOTg1NDcyMiw2NTI0Ljg5MzIxIDk0LjAxMzExNTQsNjUyMyBDOTIuNTQ3MjE1NSw2NTI0LjQwNjExIDkzLjk3NTc4NjksNjUyMy4wMzQ4NiA4NCw2NTMyLjYxMDM1IiBpZD0iYXJyb3dfdXAtWyMzNDBdIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPiA8L2c+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
  }
  
  
  
  .menu-vertical-flecha-arriba {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIC00LjUgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZmlsbD0iIzAwMDAwMCI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDx0aXRsZT5hcnJvd191cCBbIzM0MF08L3RpdGxlPiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gPGRlZnM+IDwvZGVmcz4gPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+IDxnIGlkPSJEcmliYmJsZS1MaWdodC1QcmV2aWV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwLjAwMDAwMCwgLTY2ODMuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+IDxnIGlkPSJpY29ucyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYuMDAwMDAwLCAxNjAuMDAwMDAwKSI+IDxwYXRoIGQ9Ik04NCw2NTMyLjYxMDM1IEw4NS40MDUzNjcyLDY1MzQgTDk0LjAxMzExNTQsNjUyNS43Mzg2MiBMOTQuOTMxMTk0NSw2NTI2LjYxOTg2IEw5NC45MjYxNTAxLDY1MjYuNjE1MDIgTDEwMi41NzM0NDYsNjUzMy45NTU0NSBMMTA0LDY1MzIuNTg2MTQgQzEwMS44ODY0LDY1MzAuNTU3MzYgOTUuOTg1NDcyMiw2NTI0Ljg5MzIxIDk0LjAxMzExNTQsNjUyMyBDOTIuNTQ3MjE1NSw2NTI0LjQwNjExIDkzLjk3NTc4NjksNjUyMy4wMzQ4NiA4NCw2NTMyLjYxMDM1IiBpZD0iYXJyb3dfdXAtWyMzNDBdIj4gPC9wYXRoPiA8L2c+IDwvZz4gPC9nPiA8L2c+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
  }

main {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedor-principal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

.contenedor-principal-home {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-top: 7rem;
}

.contenedor-btnacceder {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/*-------------------------------- CABECERA (DESLOGUEADO) --------------------------------*/
.barratop{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: fixed;
    background-color: white;

    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;  
}

.menu-ppal:not(.menu-ppal a){
    color: #84A59D;
}

.menu-ppal a{
    text-decoration: none;
    color: #F28482;
} 
  
/*-------------------------------- CARROUSEL --------------------------------*/

.carrousel{
    width: 100%;
    position: relative;
    overflow: hidden;
}

.contenedor-imagenes-carrousel{
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.img-carrousel{
    min-width: 100%;
    width: 100%;
    transition: opacity 0.5s ease;
    
}

.dots{
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    background: #f2f2f2;
    padding-top: 10px;
}

.dot{
    border: 2px solid #72777c;
    border-radius: 50%;
    width: 15PX;
    height: 15px;
    color: #333;
    margin: 5px;
    cursor: pointer;
}

.active{
    border: 2px solid #333;
    background: #333;
}

/* CARROUSEL SHOP */



.prevcarrousel{
    position: absolute;
    align-self: center;
    color: #fff;
    background: #f1696c;
    padding: 10px;
    border-radius: 3px;
    margin-left: 5px;
    display: none;
    cursor: pointer;
}

.nextcarrousel{
    position: absolute;
    align-self: center;
    right: 0;
    color: #fff;
    background: #f1696c;
    padding: 10px;
    border-radius: 3px;
    margin-right: 5px;
    display: none;
    cursor: pointer;
}

.prevcarrousel:hover,
.nextcarrousel:hover{
    background: #F08277;
}


.carrousel-left-arrow, .carrousel-imp-left-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.carrousel-right-arrow, .carrousel-imp-right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.carrousel-left-arrow, .carrousel-right-arrow, .carrousel-imp-left-arrow, .carrousel-imp-right-arrow {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.5);
    padding: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 600;
    color: black;
    transition: background-color 0.3s ease;
}

.carrousel-left-arrow:hover, .carrousel-right-arrow:hover, .carrousel-imp-left-arrow:hover, .carrousel-imp-right-arrow:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.8);
}

/* CARROUSEL IMPORTADORES */


.carrousel-importadores {
    position: relative;
    width: 500px;
    overflow: hidden; 
}

.contenedor-imagenes-carrousel-importadores {
    display: flex;
    transition: transform 0.5s ease;
}

.img-carrousel-importadores {
    width: 500px; 
    height: 400px; 
}

@media screen and (max-width: 500px) {
    .img-carrousel-importadores {
        transform: scale(0.6);
    }
}

/******************************************************
QUIENES SOMOS
******************************************************/

.quienes-somos{
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
}

@media screen and (max-width: 500px){
    .quienes-somos {
        padding: 0px 20px;
    }
}

.quienes-somos * {
    font-family: 'work sans', sans-serif;
}

.descripcion-somos {
    margin: 5rem 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 0px;
    color: #808080;
}

.quienes-somos-desc {
    font-size: 0.9rem;
    color: black;
    width: 900px;
    font-weight: 400;
    text-align: left;
    line-height: 25px;
    padding: 0px 10rem;
}

.quienes-somos-desc span {
    font-size: 0.9rem;
    font-weight: 500;
}


@media screen and (max-width: 630px){
    .quienes-somos-desc {
        font-size: 0.8rem;
        width: 100%;
        padding: 0px;
        text-align: center;
    }
}


/* 
@media screen and (max-width:1550px){
    .descripcion-somos {
        padding: 3rem 8rem !important;
    }
}

@media screen and (max-width:1300px){
    .descripcion-somos {
        padding: 3rem 5rem !important;
    }
}

@media screen and (max-width:700px){
    .descripcion-somos {
        padding: 3rem 2rem !important;
    }
}

@media screen and (max-width:500px){
    .descripcion-somos {
        padding: 3rem 0rem !important;
    }
} */

.descripcion-somos .bienvenido{
    color: #72777c;
    text-align: center;
}

.descripcion-somos h2{
    font-weight: 500;
    padding: 15px;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
    color: black;
}

.btn-contactar{
    border: none;
    border-radius: 2px;
    background-color: var(--target-rojo-oscuro);
    color: #fff;
    font-size: 0.8rem;
    padding: 15px;
    text-decoration: none;
    margin-top: 2rem;
    transition: background-color 0.3s ease;
}

.btn-contactar:hover {
    cursor: pointer;
    background-color: black;
}

.img-somos{
    width: 100%;
    padding: 20px;
}

.img-somos img{
    width: 100%;
    border-radius: 5px;
}

/******************************************************
GALERIA
******************************************************/

.galeria{
    padding: 1rem 0rem;
    height: auto;
    width: 100%;
    background: #F08277;  
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.gifs-container {
    padding: 1rem 0rem;
    height: auto;
    width: 1500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.img-galeria{
    display: flex;
    justify-self: center;
    align-items: center;
    margin: 10px;
    max-width: 600px;
    overflow: hidden;
}

.galeria img{
    max-width: 600px;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
}

.galeria img:hover {
    transform: scale(1.1);
}

@media screen and (max-width: 1440px){
    .galeria img{
        width: 400px;
    }
}

@media screen and (max-width: 860px){
    .galeria img{
        width: 300px;
    }
}

/* .galeria-row{
    width: 100%;
    display: flex;
    flex-direction: row;
} */

/******************************************************
SLIDE MARCAS
******************************************************/
.marcas-responsive{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 5rem auto;
}

.marcas-responsive img {
    width: 100%;
}

.row-responsive{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;
}

.row-responsive img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 300px;
    width: 100%;
}
.una-imgR{
    width: 100%;
}

/******************************************************
CONDICIONES DE COMPRA
******************************************************/

.condiciones-compra{
    background-color: #f7cfcd60;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8rem 40px;
    margin: auto;
}

.condiciones-compra h3 {
    text-align: center;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.condiciones-compra-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 560px){

    .condiciones-compra {
        padding: 3rem 1rem !important;
    }

    .condicion {
        width: 90% !important;
    }
}

.condicion{
    width: 450px;
    height: 100%;
    line-height: 27px;
    text-align: center;
    padding: 50px;
    margin: 10px;
    background: #fff;
}

.condicion h4 {
    margin-top: 0.5rem;
    font-weight: 500;
}

.condicion p {
    margin-top: 0.5rem;
    font-weight: 300;
}

.condicion img{
    width: 55px;
}


/******************************************************
SECCION NEW
******************************************************/

.section-new{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 600PX;
    text-align: center;
    font-size: 21px;
}

@media screen and (max-width: 660px){
    .section-new {
        min-height: 0;
        height: 400px;
        background-color: rgba(255, 0, 0, 0.171);
    }
}

.section-new img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.section-new h3{
    font-size: 80px;
    color: #2c2628;
    font-weight: 400;
    line-height: 4rem;
    margin-bottom: 3rem;
}

@media screen and (max-width: 700px){
    .section-new h3 {
        font-size: 3rem !important;
        line-height: 3rem !important;
    }
}


.section-new p{
    font-family: 'work sans', sans-serif;
    color: black;
    font-weight: normal;
    background: rgba(255,255,255,0.7);
    padding: 10px;
    width: 80%;
    border-radius: 5px;
    line-height: 27px;
}

@media screen and (max-width: 420px){
    .section-new p {
        font-size: 0.7rem;
    }
}

/******************************************************
QUIENES SOMOS 2
******************************************************/

.quienes-somos2{
    width: 100%;
    padding: 40px;
    margin: 3rem 0rem;
    display: flex;
    gap: 2rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: white;
}

.descripcion-somos2{
    width: 50%;
    text-align: center;
    padding: 20px;
    line-height: 27px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.descripcion-somos2 * {
    font-family: 'work sans', sans-serif;
}

#desc-2 {
    line-height: 25px;
    width: 500px;
}

@media screen and (max-width: 550px){
    #desc-2 {
        width: 100%;
        font-size: 0.8rem;
    }

    .descripcion-somos2 {
        width: 100%;
        padding: 5px 30px;
    }

    .descripcion-somos2 h2 {
        font-size: 1.1rem !important;
    }

    .quienes-somos2 {
        padding: 35px 10px 20px 10px;
    }
}

.img-somos2{
    width: 100%;
    padding: 20px;
}

.img-somos2 img{
    width: 100%;
    border-radius: 5PX;
}

.descripcion-somos2 h2{
    color: #72777c;
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 1rem;
}

.descripcion-somos2 p{
    text-align: center;
    line-height: 27px;
    color: #72777c;
} 

#contacto {
    justify-content: center;
    align-self: center !important;
}

/******************************************************
PIE HOME
******************************************************/

.pie-pagina{
    width: 100%;
    background: #242424;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px;
    color: #e6e6e6;
    font-weight: lighter;
    line-height: 27px;
}

@media screen and (max-width:555px) {
    .pie-pagina{
        padding: 5px !important;
    }

    .ubicacion-contenedor {
        text-align: center;
    }

    .ubicacion-contenedor p {
        text-align: center !important;
    }

    .ubicacion-medios-contacto {
        justify-content: center;
        align-items: center;
    }

    .titulo-contacto h2 {
        font-size: 1.5rem !important;
        margin-top: 0.2rem;
    }

    .titulo-contacto p {
        width: 100% !important;
        font-size: 0.9rem;
        line-height: 1.1rem;
    }

}


@media screen and (max-width:452px) {

    .ubicacion-contenedor {
        padding: 0px 0px !important;
    }

    .formulario-contenedor form {
        width: 100% !important;
    }

    .titulo-contacto {
        padding-bottom: 0px !important;
    }

}

@media screen and (max-width:370px) {

    .titulo-contacto p {
        padding: 0px 0px !important;
    }

}

.titulo-contacto{
    text-align: center;
    padding: 20px;
    line-height: 27px;
}

.titulo-contacto h2{
    font-family: "Work Sans", sans-serif;
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 20px;
    color: #f1696c;
}

.titulo-contacto p {
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    width: 600px;
}

.seccion2-pie{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
}

.formulario-contenedor{
    width: 50%;
    display: flex;
    justify-content: center;
    max-width: 900px;
}

.formulario-contenedor * {
    font-family: "Work sans", sans-serif;
}

.formulario-contenedor form{
    width: 85%;
}

.formulario-contenedor form input:hover, .formulario-contenedor form textarea:hover {
    background-color: rgb(220,220,220);
}

.formulario-contenedor form input, textarea{
    padding: 10px;
    width: 100%;
    display: block;
    margin-top: 20px;
    border-radius: 5px;
    border: none;
}

.ubicacion-contenedor{
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 900px;
}

.ubicacion-contenedor * {
    font-family: "Work Sans", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.ubicacion-contenedor h4{
    font-weight: bold;
    color: #f1696c;
    line-height: 18px;
}

.ubicacion-contenedor p{
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: normal;
    font-weight: 300;
    text-align: justify;
}

.ubicacion-contenedor .google{
    color: #84A59D;
    font-weight: bold;
}

.ubicacion-medios-contacto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 5px 0px;
}

.ubicacion-icon-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ubicacion-icon-container p {
    margin: 0px !important;
}

.fa-envelope, .fa-phone {
    color: var(--target-rojo-oscuro);
}

#contacto-boton {
    font-family: "Work sans", sans-serif;
    text-transform: uppercase;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    padding: 15px;
    color: #fff;
    font-size: 18px;
    background-color: var(--target-rojo-oscuro);
}

#contacto-boton:hover {
    cursor: pointer;
    background: var(--target-rojo-claro);
}

.google-maps {
    margin: 2rem 0px;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:1400px){

    .google-maps {
        width: 100%;
    }

    .google-maps iframe {
        width: 80%;
        border-radius: 25px;
    }
}


@media screen and (max-width:900px) {

    .seccion2-pie{
        flex-direction: column;
    }

    .formulario-contenedor{
        width: 600px;
        align-items: center;
        justify-content: center;
    }

    .ubicacion-contenedor{
        margin-top: 40px;
    }
    
}

@media screen and (max-width:600px) {

    .formulario-contenedor{
        width: 100%;
    }

    .titulo-contacto {
        margin-top: 1rem;
    }

    .titulo-contacto p {
        padding: 0px 30px;
        line-height: 20px;
    }

    .ubicacion-contenedor {
        width: 100%;
        padding: 0px 50px;
    }

    .pie-pagina {
        padding: 0px !important;
    }


}

@media screen and (max-width:1010px) {
    * p{
        font-size: 16px;
    }

    .img-somos{
        display: none;
    }

    .quienes-somos2{
        flex-direction: column;
    }

    .galeria-row{
        flex-direction: column;
    }

    .fija{
        display: none;
    }
}

@media screen and (max-width:920px) {
    .condiciones-compra{
        flex-wrap: wrap;
    }
    .condicion{
        padding: 20px;
    }
}

@media screen and (max-width: 680px) {
    .barratop{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .menu-ppal{
        margin-top:25px;
    }
    .carrousel {
        padding-top: 2rem;
    }
}

@media screen and (max-width: 412px){
    .menu-ppal .menu-item {
        font-size: 0.7rem !important;
    }

}

/******************************************************
LOGIN 
******************************************************/
.greyBackground
{
	background-color: #f1f1f1;
	height: 100vh;
    width: 100%;
	text-align: center;
    margin: auto;
    overflow:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.loginForm
{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    padding: 26px 24px 46px;
    font-weight: 400;
    overflow: hidden;
	width: 60%;
	text-align: left !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    border-radius: 5px;
	color: #72777c;
    display: flex;
    flex-direction: column;
}

.loginForm * {
    font-family: 'work sans', sans-serif;
}

.row-acceso{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.loginForm p input{
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.loginForm p{
    margin-top: 20px;
}

.loginForm .btnAcceder{
    border: none;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    background-color: #f1696c;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.btnAcceder:hover {
    background-color: black;
}

.contenedor-pass{
    margin-top: 20px;
}

.pass-question{
    font-family: 'work sans', sans-serif;
    font-size: 15px;
    color: #808080;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    
}

.red-text, .credenciales-invalidas {
    display: none;
    border: 1px solid var(--target-rojo-claro);
    background:rgb(252, 236, 236);
    border-radius: 5px;
    padding: 10px;
    font-size: 0.8rem;
    color: rgb(53, 53, 53);
    align-items: center;
    justify-content: center;
    text-align: center;
    width: fit-content;
    align-self: center;
}

@media screen and (max-width:800px) {
    .loginForm{
        width: 95%;
}
}

/**********************************************************************************************/

/******************************************************
CABECERA LOGUEADO
******************************************************/

#header-wrapper {
    position: relative; 
    height: auto;
}

.header-nav{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: white;
    max-width: 2560px;
    border: 1px solid rgb(246, 246, 246);

    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar-logueado{
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.admin-bg {
    background-color: var(--target-rojo-menu-highlight);
}

.header_logo {
    width: 225px;
}

@media screen and (max-width: 876px) {
    .header_logo {
        width: 200px;
    }
}

.logo {
    width: fit-content;
    order: 1;
}

.logo a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo{
    width: 50px;
    transition: transform 0.3s ease-in-out;
}

.header-logo:hover {
    transform: scale(1.05);
    filter: saturate(120%);
}

.logo a img{
    width: 200px;
}

/******************************************************
FORM BUSCADOR
******************************************************/

.form-buscador{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.form-input{
    width: 100%;
    padding: 10px;
    height: 40px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px ;
    border: 1px solid #ccc;
    background-color: rgb(238, 238, 238);
}

.form-input:hover {
    background-color: rgb(223,223,223);
}

.btn-lupa{
    color: #fff;
    background: black;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px ;
    padding: 10px;
    height: 40px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.btn-lupa:hover{ 
    background-color: var(--target-rojo-oscuro);
}

/******************************************************
McCUENTA
******************************************************/

.micuenta-contenedor{
    width: fit-content;
    margin-right: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    order: 3;
}

.micuenta-contenedor * {
    font-family: "work sans", sans-serif;
}

@media screen and (max-width:1180px) {

    .micuenta-contenedor{
        margin-right: 20px;
    }

}

@media screen and (max-width:827px) {

    .micuenta-contenedor{
        margin-right: 5px;
    }

}

.micuenta-opciones {
    display: none; 
    gap: 0.3rem;
    text-decoration: none;
    text-align: left;
    flex-direction: column;
    position: absolute;
    right: 4rem;
    background: white;
    padding: 15px 20px;
    border-radius: 0px 0px 5px 5px;
    z-index: 1;

    -webkit-box-shadow: 0px 2px 31px -15px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 31px -15px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 31px -15px rgba(0,0,0,0.75);
}

.micuenta:hover .micuenta-opciones {
    display: flex;
}

.micuenta-opciones a{
    display: block; 
    text-decoration: none;
    color: black;
    font-size: 0.9rem;
}

.micuenta-opciones a:hover{
    color: grey;
    cursor: pointer;
}

.denegado {
    color: var(--target-rojo-oscuro);
    font-size: 2rem;
    font-family: "work sans", sans-serif;
}

.micuenta-opciones-mobile {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 7px;
    background-color: rgba(255, 255, 255, 0.9);
    padding-top: 4rem;
    border-bottom: 3px solid black;
}

.micuenta-opciones-mobile * {
    padding-left: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    
    font-family: "work sans", sans-serif;
    color: black;
    font-size: 0.7rem;
    font-weight: 500;
}

.micuenta-opciones-mobile *:hover {
    cursor: pointer;
    color: darkslategray;
}

/******************************************************
CARRITO
******************************************************/

.test {
    background-color: red !important;
}


.usuario {
    font-size: 1.5rem;
    color: rgb(117, 117, 117);
}

.usuario:hover {
    cursor: pointer;
    color: var(--target-rojo-oscuro);
}

/* .header-links{
    color: #808080;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
    overflow: visible;
} */

#btncarrito {
    padding: 0px 5px;
}

.cart-extra {
    font-size: 1.3rem;
    color: rgb(54, 54, 54);
    transition: transform 0.3s ease;
}

.cart-extra:hover {
    color: var(--target-rojo-oscuro);
}

#cantidad-carrito {
    font-size: 0.8rem;
    color: black;
    padding: 2px;
}

.carrito-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); 
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.carrito-preview-overlay.visible {
    display: flex;
}


.optionsCarrito{
   display: none; 
   position: absolute;  
   right: 0px;
   top: 75px;
   background: #fff;
   padding: 10px;
   border-radius: 0px 0px 5px 5px;
   border: 2px solid #ccc;
   width: 15%;
   justify-content: right;
   align-items: center;
   float: right;
   min-width: 400px; 
   max-width: 360px; 
   overflow: auto;
   max-height: 850px;
   height: fit-content;
/*    height: auto; */
   z-index: 11;
}

.optionsCarrito * {
    font-family: 'work sans', sans-serif;
}

@media screen and (max-width:420px) {
    .optionsCarrito{
        position: relative;
        top: 0px;
        left: 0px;
        min-width: 0px !important;
        width: 100%;
    }
} 

.carrito-header {
    width: 100%;
    padding: 3px;
    padding-top: 0px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid lightgrey;
}

.carrito-header h2 {
    font-size: 0.9rem;
    color: darkslategrey;
}

.carrito-header p {
    color: darkslategrey;
    font-size: 0.8rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.carrito-header p:hover {
    cursor: pointer;
}

.carrito-img-preview {
    width: 70px;
    height: 70px;
    padding: 5px;
    max-width: 70px;
}

.carrito-info {
    position: relative;
    width: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.carrito-info-eliminar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    position: absolute;
    top: -5px;
    right: 10px;
    color: black;
}

.carrito-info-eliminar:hover {
    cursor: pointer;
    background: lightgray;
}

.carrito-preview-boton-eliminar {
    color: darkslategrey;
}

.carrito-info-desc {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.carrito-info-nombre {
    text-align: left;
    line-height: 20px;
    font-size: 0.9rem;
    color: darkslategrey;
}

.carrito-info-nombre:hover {
    color: var(--target-rojo-oscuro);
}

#carrito-item-precio {
    font-size: 0.9rem;
    color: darkgreen;
    font-weight: bold;
}

#carrito-item-cantidad {
    color: gray;
    font-size: 0.8rem;
    position: relative;
    bottom: 5px;
}

.pieCarritoList{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.carrito-subtotal-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#carrito-subtotal {
    color: green;
    font-weight: bold;
}


.unProducto{
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #F7EDE2;
  /*   width: 60%; */
}

.botonesGroup{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 20px;
    letter-spacing: 1px;
}

.botonesGroup a {
    width: 100%;
    text-align: center;
    padding: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: white;
}

.botonesGroup a:hover {
    cursor: pointer;
}

.btn-finalizar {
    background-color: black;
    border: 1px solid black !important;
    color: white;
}

.btn-finalizar:hover {
    border: 1px solid black;
    background-color: white;
    color: black;
}

.btn-ver-carrito {
    background-color: rgb(179, 179, 179);
    color: black !important;
}

.btn-ver-carrito:hover {
    background-color: rgb(229, 229, 229)
}

.listProductos{
    font-family: 'Roboto', sans-serif;
    line-height: 27px;
    text-align: center;
    background-color: #fff;
    width: 100%;
    max-height: 500px;
    overflow: scroll;
    overflow-x: hidden;
}

.carrito-link {
    margin-top: 10px;
    width: 100%;
    text-decoration: none;
    display: flex;
}

.listProductos li {
    display: flex;
    padding: 10px 0px;
    border-bottom: 1px dashed rgb(202, 202, 202);
    transition: background-color 0.3s ease;
}

.listProductos li:hover {
    background-color: #e8e8e8;
}

.listProductos img{
    width: 100%;
}

.carrito-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0rem;
}

#carrito-spinner {
    align-self: center !important;
    height: 40px;
    width: 40px;
    background-image: url('../images/spinner.gif');
    object-fit: contain;
}

.primary{
    background: #84a59d;
    cursor: pointer;
}
.success{
    background: #f28482;
    cursor: pointer;
}

.primary {
    background: #588b8b;
}

.success:hover{
    background: #F08277;
}

.cto-finalizado-main {
    margin: 1rem;
    padding: 4rem;
}

@media screen and (max-width: 532px){
    .cto-finalizado-main {
        padding: 1rem;
    }
}

.cto-finalizado-main * {
    font-family: "Work Sans", sans-serif;
}

.cto-finalizado-main h2 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--target-rojo-oscuro);
    text-align: center;
}

.cto-finalizado-main p {
    line-height: 30px;
    text-align: center;
}

.checkok {
    font-size: 5rem;
    color: #3ebba6;
    margin-bottom: 1rem;
}

/* MENU: *************************************************************************************/

.box-menu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:768px) {
    .box-menu {
        display: none !important;
    }

} 

.titulo-categoria:hover {
    cursor: pointer;
}

.categoria{
    display: flex;
    justify-content: center;
    padding-top: 15px;
    /* margin-top: 25px; */
}

.nombre-categoria{
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    color: #808080;
    line-height: 30px;
}

.categoria .subcategoria{
    display: none;
    margin-top: 30px;
    padding: 10px;
    border: 2px solid black;
}

.nombre-subcategoria{
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    color: #808080;
    line-height: 30px;
    text-align: left;
    display: block;
}

.categoria:hover .subcategoria{
    display: block;
    position: absolute;
    overflow: hidden;
    width: auto;
    background: #fff;
    min-width: 8%;
    border-radius: 0px 0px 5px 5px;
}

.nombre-subcategoria:hover{
    width: 100%;
    border-radius: 5px;
    background: #F5CAC3;
    color: #f2f2f2;
}


/******************************************************
FORMAS DE PAGO
******************************************************/
.contenedor-formasdepago{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #f2f2f2;
    padding: 40px;
/*     padding-top: 60px; */
}

.row-one{
    display: flex;
    flex-direction: row;
}

.row-two{
    display: flex;
    flex-direction: row;
}

.forma-pago{
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #f2f2f2;
    padding: 20px;
    width: 100%;
    max-height: 200px;
    min-height: 100px;
    background: #fff;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    min-width: 379px;
}

.icon-pago{
    padding: 5px;
}

.text-pago{
    padding: 5px;
}

@media screen and (max-width: 460px){

    .contenedor-formasdepago{
        padding: 10px 10px 30px 10px;
    }

    .forma-pago {
        width: 95% !important;
        min-width: 98% !important;
        padding: 10px;
    }


    .text-pago p{
        font-size: 0.8rem;
    }
}

.forma-pago i{
    font-size: 40px;
}

.forma-pago .card{
    color: #3483FA;
}

.forma-pago .cheque{
    color: #ffbf00;
}

.forma-pago .dollar{
    color: #425934;
}

/******************************************************
OFERTAS
******************************************************/
.contenedor-ofertas{
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    background: #f2f2f2;
    width: 100%;
    padding-top: 40px;
}

.imagenes-ofertas{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.img-oferta{
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-oferta img{
    width: 400px;
    /*border-radius: 10px; */
    cursor: pointer;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
}
/******************************************************
LOS MAS VENDIDOS
******************************************************/
.contenedor-masvendidos{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: linear-gradient(25deg, #f6a29e85, #b1dcc58f,  #f8d0ce91);

    -webkit-animation: masvendidos 2s ease infinite;
    -moz-animation: masvendidos 2s ease infinite;
    animation: masvendidos 2s ease infinite;
}

@-webkit-keyframes masvendidos {
    0%{background-position:4% 0%}
    50%{background-position:27% 100%}
    100%{background-position:94% 0%}
}
@-moz-keyframes masvendidos {
    0%{background-position:4% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}
@keyframes masvendidos {
    0%{background-position:4% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}

.titulo-seccion{
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 1rem;
    color: #333;
    text-transform: uppercase;
}

.imagenes-masvendidos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    border-radius: 6px;
}

.imagenes-masvendidos img{
    width: 400px;
    cursor: pointer;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    transition: transform 0.3s ease-in-out;

}

.imagenes-masvendidos img:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 1360px){

    .imagenes-masvendidos {
        gap: 2rem;
    }

    .imagenes-masvendidos img {
        width: 350px;
    }
}

@media screen and (max-width: 1250px){

    .imagenes-masvendidos {
        gap: 2rem;
    }
    .imagenes-masvendidos img {
        width: 300px;
    }
}

@media screen and (max-width: 1250px){

    .imagenes-masvendidos {
        gap: 1rem;
    }
    .imagenes-masvendidos img {
        width: 200px;
    }
}

@media screen and (max-width: 720px){

    .imagenes-masvendidos {
        flex-wrap: wrap;
        gap: 1rem;
    }

}


/******************************************************
NOVEDADES
******************************************************/
.contenedor-novedades{
    display: none;
    flex-direction: column;
 /*    margin-top: 20px; */
    padding: 20px; 
    width: 100%;
    background: #f2f2f2;
}

.imagenes-novedades{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.img-novedad{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-novedad img{
    width: 90%;
    cursor: pointer;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    border-radius: 6px;
}

@media screen and (max-width:935px) {
    .contenedor-formasdepago{
        flex-direction: column;
        margin: auto;
    }
    .extremo-izquierdo{
        border-radius: 6px 6px 0px 0px;
    }
    .extremo-derecho{
        border-radius: 0px 0px 6px 6px;
    }
} 
/**********************************************************************************************************/




/*--------------------------------------- FOOTER (LOGUEADO) ---------------------------------------*/ 

.footer{
    bottom: 0;
}

.contenedor-pie{
    background: rgb(22, 22, 22);
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 40px;
    line-height: 31px;
}

.contenedor-pie * {
    font-family: "Work Sans", sans-serif;
}

.contenedor-elementos{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.primero, .segundo, .tercero{
    padding: 30px;
    width: 33%; 
}

.segundo a {
    display: flex;
    gap: 1rem;
    align-items: center;
    color: white;
    text-decoration: none;
}

.segundo a:hover {
    color: var(--target-rojo-oscuro);
}

.primero p, .tercero p {
    font-size: 0.9rem;
    line-height: 27px;
}

.titulo-pie{
    font-weight: 700;
}

.subrayado-pie{
    background: #fff;
    direction: ltr;
    opacity: .3;
    height: 3px;
    width: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
}

/* Pie copyright: ******************************************/

.piecopyright{
    padding: 10px;
    text-align: right;
}

.piecopyright strong{
    color: #F28482;
}

@media screen and (max-width:1690px) {
    .contenedor-pie{
    padding-left:20px;
    padding-right:20px;
    }
    .contenedor-elementos{
        width: 95%;
    }
}

@media screen and (max-width:1025px) {

    .contenedor-elementos{
        flex-direction: column;
    }
    .primero, .segundo, .tercero{
        padding: 20px;
        width: 100%; 
    }

    #primero-br, #primero-br1 {
        display: none;
    }
}

@media screen and (max-width: 420px){
    .footer-text {
        font-size: 0.8rem !important;
    }

    #primero-br {
        display: block;
    }

    .primero, .segundo, .tercero {
        padding: 20px 0px !important;
    }
}
/**********************************************************************************************************/


/******************************************************
MIS COMPRAS
******************************************************/
.misCompras{
    max-width: 1200px;
    line-height: 27px;
   /*  margin-top: 100px; */
    padding: 40px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;  
}

.titulo-misCompras{
    padding: 10px;
    line-height: 41px;
}

.titulo-misCompras p{
    font-size: 14px;
    color: #808080;
}

.unaCompra{
    border-radius: 5px;
    padding: 20px;
    background: #fff;
    margin: 20px auto;
    width: 100%;
}

.fechaCompra{
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}


.detalles{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.boton-vermas button{
    background: #84A59D;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    padding: 10px;
}

@media screen and (max-width:700px) {
    .detalles{
        flex-direction: column;
        align-items: center;
    }
    .detalles div{
        margin-bottom: 10px;
        margin-top: 10px;
    }
}
/**********************************************************************************************************/

/******************************************************
PRODUCTOS INDEX
******************************************************/
/******************************************************
BAR FILTROS RESPONSIVE 
******************************************************/

.responsive-filtros{
    display: flex;
    flex-direction: row;
    width: 80%;
    align-items: center; 
    justify-content: space-between;
    padding: 20px;
    display: none;
    margin: auto;
}

.filtroprecio-container-responsive{
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
}

.displayrowfiltroprecio{
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

.precio-range-responsive{
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    /* height: 25px; */ /* Specified height */
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s; 
    transition: opacity .2s;
    border-radius: 5px;
  }

  .precio-range-responsive:hover {
    opacity: 1;
  }
  
  .precio-range-responsive::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
     width: 22px;
     height: 22px;
     border-radius: 5px;
    background: #f1696c;
    cursor: pointer; 
  }
  
  .precio-range-responsive::-moz-range-thumb {
     width: 22px; 
    height: 22px; 
    background: #f1696c;
    cursor: pointer;
  }

.contenedor-ordenar-responsive{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.contenedor-ordenar-por-responsive p{
    text-align: left;
}

.contenedor-select-responsive{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

/******************************************************
ORDENAR POR...
******************************************************/
.contenedor-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 90%;
    justify-content: right;
    background: #f2f2f2;
    padding: 20px;
    /* display: none; */
}

.contenedor-ordenar-por p{
    font-weight: 700;
    font-size: 0.8rem;
}



#ordenar-por:hover {
    background-color: rgb(233,233,233);
    cursor: pointer;
}

.selector-orden{
    border: none;
    background: #f2f2f2;
}

.selector-orden:focus{
    outline: none;
}

.option-orden{
    font-size: 0.7rem;
}

/******************************************************
CONTENEDOR DE LA SECCION PRODUCTOS + ASIDE BAR
******************************************************/
.contenedor-productos{
    display: flex;
    flex-direction: row;
    width: 90%;
    background: #f2f2f2;
}

/******************************************************
ASIDE BAR CON CATEGORIAS
******************************************************/
.aside-options{
    width: 10%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px;
    background: #f2f2f2;
  /*   display: none; */
}

.categorias-aside a{
    display: block;
    text-decoration: none;
    color: #666666;
    font-size: 0.7rem;
    line-height: 31px;
}

/******************************************************
ASIDE BAR CON CATEGORIAS: Filtrar POR PRECIO
******************************************************/
.filtroprecio-container {
    /* width: 80%; */
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
  }

  .filtroprecio-container p{
    padding-bottom: 10px;
}

.precio-input-group{
    display: flex;
    flex-direction: row;
   /*   width: 80%;  */
    justify-content: space-between;
}

.precio-input-group input{
    border: 1px solid #666666;
    outline: none;
    border-radius: 5px;
    width: 60px;
    padding:5px
    /* width: 50%;  */
}

.precio-btn-filtro{
    padding-top: 10px;
}
 
/* .precio-btn-filtro button */.btnfiltraprecio{
    padding: 6px;
    border-radius: 5px;
    border: none;
    background: #f1696c;
    color: #fff;
    justify-self: flex-end;
    align-self: flex-end;
    margin-left: 2px;
}

.precio-btn-filtro button{
    padding: 3px;
    border-radius: 5px;
    border: none;
    background: #f1696c;
    color: #fff;
/*     justify-self: flex-end;
    align-self: flex-end;
    margin-left: 2px; */
}
/*   .precio-range {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s; 
    transition: opacity .2s;
    border-radius: 5px;
  }
  
  .precio-range:hover {
    opacity: 1;
  }
  
  .precio-range::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
     width: 22px;  
     height: 22px;  
     border-radius: 5px;
    
    background: #f1696c;
    cursor: pointer; 
  }
  
  .precio-range::-moz-range-thumb {
    width: 22px; 
    height: 22px;  
    background: #f1696c;
    cursor: pointer;
  } */

/******************************************************
LISTA DE PRODUCTOS
******************************************************/
.los-productos{
    display: flex;
    flex-direction: column;
    width: 90%;
    justify-content: center;
    align-items: center;
}

.row-productos{
    display: flex;
    flex-direction: row;
    width: 90%;
    padding: 10px;
}

.first-producto{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    margin-right: 10px;
    background: #fff;
    cursor: pointer;
}

.second-producto{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    margin-left: 10px;
    background: #fff;
    cursor: pointer;
}

.producto-nohay{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    margin-left: 10px;
    background: #f2f2f2;
}

.img-producto-first{
    width: 100%;
}

.img-producto-first img{
    width: 100%;
}

.img-producto-second{
    width: 100%;
}

.img-producto-second img{
    width: 100%;
}

.descripcion-producto-fisrt{
    line-height: 31px;
}

.descripcion-producto-second{
    line-height: 31px;
}

/******************************************************
CARTELITOS E ICONOS DE CADA PRODUCTO
******************************************************/

.cartelitos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cartelitos2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.check-product{
   color:#03AB14;
   /* color: #84A59D; */
   width: 1.5rem; 
}

.cartel-nuevo{
    background-color: #FF7733; 
    color: white; 
    width: 80px; 
    border-radius: 3px;
    text-align: center;
    align-self: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cartel-oferta{
    background-color: #3483fa; 
    color: white; 
    width: 80px; 
    border-radius: 3px;
    text-align: center;
    align-self: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cartel-novedad{
    background-color: #e6f7ee; 
    color: #00a650; 
    width: 160px; 
    border-radius: 3px;
    text-align: center;
    align-self: center;
    padding-top: 5px;
    padding-bottom: 5px;
}


/******************************************************
PREVIEW MODAL
******************************************************/

.contenedor-preview{
    /* display: flex; */    
    justify-content: center; 
    position: fixed;
    overflow: auto; 
    z-index: 1; 
    align-items: center;  
    /* margin-top: 120px; */
    width: 100%;
    height: 111%; 
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.4); 
    display: none; 
    padding: 40px;
    margin-top: -227.8px;
}

.close-modal{
    width: 100%;
   text-align: right;
   font-size: 1.4rem;
   cursor: pointer;
   color: #bb0000;
}

.contenedor-preview .prevSup, .contenedor-preview .nextSup{
    color: #fff;
    font-size: 30px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

.contenedor-preview .prevSup:hover,
.contenedor-preview .nextSup:hover{
   opacity: 0.5;
}

.preview{
    width: 40%;
    margin: 100px auto;
    border: 2px solid #F5CAC3;
    border-radius: 5px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.descripcion-articulo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.descripcion-articulo .datos{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 27px;
}

.cant-buttons{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.cant-buttons button{
    color: #fff;
    background: #F28482;
    border: 2px solid #F28482;
    padding: 10px 14px;
    cursor: pointer; 
}

.cant-buttons button:hover{
    opacity: .9;
    border: 2px solid #F5CAC3;
}

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

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

.cant-buttons .inputbtn{
    background-color: white;
    border: 1px solid #F28482;
    color: #808080;
    padding: 10px 14px;
    cursor: pointer; 
    /* float: left;  */
    text-align: center;
    cursor: unset;
    width:80px
}

.preview .btn-agregar{
    color: #fff;
    background: #84A59D;
    border-radius: 5px;
    font-size: 16px;
    border: none;
    padding: 10px;
    display: inline;
    cursor: pointer;
}

.preview .btn-agregar:hover{
    background: #588b8b;
    transition: 0.3s;
}

.bulto-div {
    width: 100%;
}

.bulto-agregar, .bulto-agregar-detalle {
    border: none;
    margin: 0px 5px;
    padding: 0px 6px;
    background-color: black;
    color: white;
    transition: background-color 0.3s ease;
}

.bulto-agregar:hover, .bulto-agregar-detalle:hover {
    cursor: pointer;
    background-color: grey;
    color: black;
}

/******************************************************
IMAGENES SLIDE DEL MODAL
******************************************************/

.slide-images{
    display: flex;
    flex-direction: row;   
    align-items: center;
    justify-content: center;
    width: 70%;
}

.slide-images img{
 width: 100%;
}

.preview .prev, .preview .next{
    font-size: 2em;
    color: #F6BD60;
    cursor: pointer;
}

.preview .prev:hover, 
.preview .next:hover{
    color: #f78f20;
}

.imagenesSlider{
    display: none;
}


/******************************************************
OTRAS UTILIDADES
******************************************************/

.whatsapp {
    position: fixed;
    bottom: 26px;
    right: 70px;
    z-index: 9999;
}

.whatsapp-btn {
    height: 50px;
    width: 50px;
}

.whatsapp-btn:hover {
    cursor: pointer;
}

.scrollUp {
    position: fixed;
    bottom: 30px;
    right: 10px;
    color: black;
    border: 1px solid black;
    background-color: white;
    padding: 0.5rem;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease;
    z-index: 4;
}

.scrollUp i {
    font-size: 2rem !important;
    height: 100px;
    width: 100px;
}

.scrollUp:hover{
    cursor: pointer;
    background-color: rgb(199, 199, 199);
}


/******************************************************
MEDIA QUERIES
******************************************************/

@media screen and (max-width:810px) {
    .row-productos{
        flex-direction: column;
    }
    .first-producto{
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .second-producto{
        margin-left: 0px;
    }
}

@media screen and (max-width:660px)/* (max-width:570px)  */{
    .aside-options{
        display: none;
    }
    .contenedor-right{
        display: none;
    }
    .responsive-filtros{
        display: flex;
    }
    .los-productos{
        margin: auto;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width:515px) {
    .responsive-filtros{
        margin: auto;
        width: 100%;
    }
}

@media screen and (max-width:1200px) {
    .preview{
        width: 60%;
    }
}

@media screen and (max-width:750px) {
    .preview{
        width: 80%;
    }
}

@media screen and (max-width:1270px) {
    .aside-options{
        width: 20%;
    }
}

@media screen and (max-width:1011px) {
    .contenedor-principal{
        margin-top: 0px;
    }
}

/**********************************************************************************************************/
/*                                      MENU DE CATEGORIAS                                                */
/**********************************************************************************************************/


.expandir {
    display: inline;
    border: 1px solid blue;
    padding: 1px 5px;
    margin-left: 15px;
    color: grey;
    font-size: 0.7rem !important;
}

.menu-arrows {
    width: 15px;
    height: 15px;
    padding: 2px 4px;
    float: right;
    margin-right: 2px;
    margin-top: 3px;
}

.fa-caret-up {
    color: black !important;
}

.fa-caret-down {
    font-size: 1rem;
}

.header-nav-new {
    position: relative;
}

.box-menu-categories-new {
    display: flex;
}

.contenedor-categorias-new {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0px 10px 0px;
}

.categoria-new {
    position: relative;
    display: flex;
    /* justify-content: space-between; */
    gap: 0.2rem;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

.categoria-new:hover {
    cursor: pointer;
    background: var(--target-rojo-menu-highlight);
}

.categoria-new:hover > .nombre-categoria-new {
    cursor: pointer;
    color: darkslategrey;
    font-weight: 600;
}

.nombre-categoria-new {
/*     font-family: "Barlow", sans-serif; */
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    width: 100%;
    font-size: 12px;
    text-decoration: none;
    line-height: 20px;
    padding-right: 5px;
}

@media screen and (max-width: 1460px){
    .nombre-categoria-new {
        font-size: 0.7rem;
    }
}

.nombre-categoria-new.parent-category {
    font-weight: 600;
}

.categoria-new a{
    text-decoration: none;
    color: #17202A;
}

.subcategoria-new {
    position: absolute;
    top: 230%; /* Start offscreen */
    left: 0;
    flex-direction: column;
    background-color: white;
    z-index: 1;
    padding: 0.5rem;
    box-shadow: -2px 0px 12px 3px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden; /* Esconde elemento, mantiene layout */
    transition: opacity 0.3s ease, top 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility to prevent interaction during transition */
}

.categoria-new:hover > .subcategoria-new {
    visibility: visible; 
    opacity: 1;
    top: 120%; /* 140 */
    transition-delay: 0s; 
}

.categoria-new > .subcategoria-new > .categoria-new {
    justify-content: space-between;
}

.categoria-new .subcategoria-new .categoria-new .subcategoria-new {
    top: 0;
    left: 102%;
}

.cat-arrow {
    color: #ABB2B9;
}

.highlight {
    background-color: var(--target-rojo-claro2); /* Change to your preferred highlight color */
}

/* CATEGORIAS RESPONSIVE */

.menu-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    display: none;
    padding: 0.3rem;
    margin: 5px 0px;
}

.categoria-new-responsive {
    text-align: center;
    padding: 0.3rem;
    background-color: rgb(58, 58, 58);
    display: flex;
    justify-content: center;
    align-items: center;
}

.nombre-categoria-new-responsive {
    text-decoration: none;
    color: white;
    font-size: 0.7rem;
}

.nombre-categoria-new-responsive:hover {
    color: var(--target-rojo-claro);
}

@media screen and (max-width: 768px){
    .menu-responsive {
        display: flex;
    }
}

.categorias-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 0.5rem;
    transition: background-color 0.3s ease;
    background-color: white;
    color: black;
    border: 1px solid black;
}

.categorias-mobile:hover {
    cursor: pointer;
    background-color: rgb(233,233,233);
}

.fa-sitemap {
    color: var(--target-rojo-claro);
}

.box-menu-mobile {
    text-align: center;
}


/**********************************************************************************************************/
/*                                      PAGINA DE PROD X CATEGORIA NUEVA                                  */
/**********************************************************************************************************/

.prod-by-cat-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prod-by-cat-contenedor-ppal {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px 50px;
    margin-bottom: 5rem;
}

@media screen and (max-width: 1390px) {

    .prod-by-cat-contenedor-ppal {
        margin-top: 10px;
    }

}


@media screen and (max-width: 1024px) {
    .prod-by-cat-contenedor-ppal {
        padding: 0px 20px;
    }
}

@media screen and (max-width: 1024px) {
    .prod-by-cat-contenedor-ppal {
        padding: 0px 5px;
    }
}

.prod-by-categoria-contenedor-padre {
    width: 100% ;
    display: flex;
    border: 1px solid lightgray;
    border-radius: 5px;
    justify-content: center;
}

.prod-by-categoria-contenedor-padre * {
    font-family: "work sans", sans-serif;
}

.prod-by-categoria-contenedor-izq {
    height:fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    position: relative;
    width: 350px;
    padding: 20px;
    min-width: 330px;
    z-index: 5;
}

@media screen and (max-width: 950px) {
    .prod-by-categoria-contenedor-izq {
        display: none;
        position: absolute;
        top: 50px;
        background: white;
        width: 500px;
        border: 1px solid black;
    }

    .prod-by-categoria-contenedor-padre {
        position: relative;
    }
    
}

@media screen and (max-width: 610px) {
    .prod-by-categoria-contenedor-izq {
        width: 100%;
    }

    .nombre-categoria-new-vertical {
        font-size: 0.7rem !important;
    }

    #ordenar-por {
        width: 100px;
    }

    .categorias-mobile {
        padding: 9px !important;
        margin: 0px 5px;
    }
}


.prod-by-categoria-contenedor-der {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.prod-by-categoria-header {
    margin: 10px 0px;
    font-size: 0.9rem;
    color: darkslategrey;
}

@media screen and (max-width: 670px){
    .prod-by-categoria-header {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 474px){
    .prod-by-categoria-header {
        text-align: center;
        font-size: 0.7rem;
    }
}

.prod-by-categoria-contenedor-productos {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.prod-by-categoria-contenedor-productos:hover {
    cursor: pointer;
}

.item-count {
    margin: 1rem 0px;
    font-size: 0.8rem;
    color: black;
}

#visible-items-count, #total-items-count {
    font-size: 0.8rem;
}

.prod-by-categoria-item {
    position: relative;
    margin: 10px;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #D5D8DC;
    border-radius: 5px;
    transition: box-shadow 0.3s ease-in-out;
    height: 390px;
    max-height: 800px;
}

.prod-by-categoria-item:hover {
    -webkit-box-shadow: 0px 4px 9px -1px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 4px 9px -1px rgba(0,0,0,0.33);
    box-shadow: 0px 4px 9px -1px rgba(0,0,0,0.33);
}

@media screen and (max-width: 460px) {
    
    .prod-by-categoria-contenedor-productos {
        width: 100%; 
    }

    .prod-by-categoria-item {
        width: 90% !important;
    }

    .prod-info {
        padding-left: 0px !important;
    }

}

@media screen and (max-width: 370px){
    .prod-by-categoria-item {
        width: 100% !important;
        margin: 2px 0px !important;
    }
}

.preview-img {
    width: 250px;
}

@media screen and (max-width: 768px) {
    .preview-img {
        width: 200px;
    }


    .pagination-container-left-box {
        padding-left: 0px !important;
    }
}

@media screen and (max-width: 425px) {

    .pagination-container-left-box {
        gap: 5px !important;
    }
}

.prod-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0px;
}

.prod-info-nombre-y-precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.prod-nombre {
    font-family: "Work Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    color: black;
}

.prod-nombre, .prod-precio {
/*     padding: 5px; */
    text-align: center;
}

.prod-precio {
    color: rgb(110,110,110);
    font-size: 0.9rem;
    font-weight: bold;
}

.pagination-container {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-right: 5rem;
}

@media screen and (max-width: 710px){
    .pagination-container {
        justify-content: center;
        padding-right: 0px;
    }
}

.prod-by-categoria-icons form {
    width: fit-content;
}

.prod-by-categoria-icons form {
    display: flex;
    gap: 1rem;
}

.prod-icon:hover {
    cursor: pointer;
}

#quantity {
    width: 50px;
    border-radius: 3px;
    text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

.fa-shopping-bag {
    color: black;
}

.icon-tainer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 2px;
    position: relative;
    border: 1px solid gray;
    transition: background 0.2s; 
}

.icon-tainer:hover {
    background: black;
    cursor: pointer;
}

/* Define the keyframe animation for scaling and background color change */
@keyframes scaleAndColorChange {
    0% {
        transform: scale(1);
        background-color: rgba(97, 247, 97, 0.756);
    }
    50% {
        transform: scale(0.9);
        background-color: rgb(103, 165, 103);
    }
    100% {
        transform: scale(1);
        background-color: rgba(97, 247, 97, 0.756);
    }
}

/* Add a class for animation */
.icon-tainer.animate {
    animation: scaleAndColorChange 1s;
}

.icon-tainer:hover .prod-icon-plus{
    color: white;
}

.icon-tainer:hover .fa-eye{
    color: white;
}

.icon-tooltip {
    width: 90px;
    background: black;
    color: white;
    text-align: center;
    border-radius: 25px;
    padding: 5px;
    font-size: 0.6rem;
    position: absolute;
    bottom: 40px;
}

#icon-tooltip-carrito, #icon-tooltip-vista {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}

.image-and-buttons-container {
    position: relative;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prod-by-categoria-icons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    bottom: 0px;
    left: 30%;
    transform: translate(-30%, 0);
    visibility: hidden;
    opacity: 0; 
    transition: opacity 0.5s, bottom 0.5s;
}

.enCarrito {
    display: flex;
    gap: 1rem;
    background-color: var(--target-aqua-oscuro);
    color: black;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
}

.enCarrito p {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.enCarrito svg {
    font-size: 14px;
}

@media screen and (max-width: 730px){
    .prod-by-categoria-icons {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 770px){
    .prod-by-categoria-icons {
        position: relative;
        /* top: 1rem; */
    }

    .prod-info {
        /* position: relative; */
        /* top: 1rem; */
    }
}


.fa-arrow-circle-left, .fa-arrow-circle-right {
    color: var(--target-rojo-claro);
}

.fa-arrow-circle-left:hover, .fa-arrow-circle-right:hover {
    color: var(--target-rojo-oscuro);
}

.paginacion-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prod-by-cat-link {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
}

.ver-como {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media screen and (max-width: 400px) {
    #vista {
        display: none;
    }
}

.ver-como-icon {
    color: black;
}

.ver-como-icon:hover {
    color: rgb(133, 133, 133);
    cursor: pointer;
}

.preview-modal-detalles {
    display: none;
}

.preview-modal-detalles-div p {
    color: darkslategrey;
    margin-right: 5px;
    font-weight: 400;
    font-size: 0.9rem;
    text-align: left;
}

.preview-modal-precio-container, .detalle-precio-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#modal-precio-final {
    font-size: 14px;
    color: darkslategrey;
    display: none;
}

#detalle-precio-final {
    width: fit-content;
    font-size: 14px !important;
    color: darkslategrey;
}

#preview-modal-precio {
    color: var(--target-aqua-oscuro2);
    font-size: 20px;
}

#preview-modal-precio-tachado{
    font-weight: 400;
    font-size: 0.8rem;
    color: darkslategrey;
    display: none;
}

.detalle-precio-tachado  {
    font-weight: 400;
    font-size: 0.8rem;
    color: darkslategrey;
    text-decoration: line-through;
}

#ordenar-por, #ordenar-por option, #pagina, .results-info{
    color: black;
    font-size: 0.8rem;
    padding-left: 5px;
    background-color: white;
    border: 1px solid black;
    height: 35px;
}

.popup-input-container {
    display: flex;
    align-items: center;
}

.popup-input-container button {
    width: 20px;
    height: 20px;
    margin: 0px 5px;
    border-radius: 25px;
    background-color: black;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 1s ease;
}

.popup-input-container button:hover {
    transform: scale(1.2);
}

/**********************************************************************************************************/
/*                                      MENU DE CATEGORIAS VERTICAL                                       */
/**********************************************************************************************************/

.categorias-vertical * {
    font-family: "Work Sans", sans-serif;
}

.categoria-new-vertical {
    border-bottom: 1px solid rgb(230, 230, 230);
    padding: 3px 0px;
}

.categoria-new-vertical:last-child {
    border-bottom: none;
}

.categoria-new-vertical:hover {
    cursor: pointer;
}

.categoria-new-vertical a {
    width: 100%;
    color: rgb(59, 59, 59);    
    text-decoration: none;
}

.nombre-categoria-new-vertical {
    padding-right: 10px;
    font-size: 0.7rem;
    font-family: "Inter", sans-serif;
}

.nombre-categoria-new-vertical:hover {
    color: black;
    font-weight: 500;
}

.subcategoria-new-vertical {
    margin-left: 20px;
    display: none;
}

.subcategoria-new-vertical a {
    color: black;
    text-decoration: none;
}

.active-category {
    background-color: rgba(104, 104, 104, 0.06);
}

.active-category a {
    color: rgb(59, 59, 59);    
}

.bold {
    font-weight: bold;
    margin-left: 5px;
}

/**********************************************************************************************************/
/*                                      MODAL PREVIEW DE PRODUCTO                                         */
/**********************************************************************************************************/

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; 
}

#overlay-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#overlay-card * {
    font-family: 'work sans', sans-serif;
}

#overlay-card div {
    display: flex;
    position: relative;
}

.preview-close {
    position: absolute;
    top: 0px;
    right: 0px;
}

.preview-close:hover {
    cursor: pointer;
}

.preview-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#preview-imagen-img {
    width: 400px;
    height: 400px;
}

.preview-info {
    width: 400px;
    padding: 20px;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0.5rem;
}

#preview-modal-descri {
    font-weight: bolder;
    font-size: 1.3rem;
    color: black;
}

#producto-detalle-descri {
    font-weight: bolder;
    font-size: 1.3rem;
}

@media screen and (max-width: 900px) {
    #producto-detalle-descri {
        width: 100%;
        text-align: center;
    }

    #producto-detalle-descri {
        margin-top: 1rem;
    }
}

#preview-modal-detalles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    color: darkslategray;
    margin: 10px 0px;
}

.preview-detalles {
    display: none;
    padding-bottom: 1rem;
}

.preview-detalles * {
    font-family: "Jost", sans-serif !important;
}

.preview-detalles-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: start;
    gap: 3px;
}

.preview-detalles p {
    font-size: 0.9rem;
}

.preview-detalles span {
    color: rgb(82, 81, 81);
    font-size: 0.8rem;
    text-transform: uppercase;
}

#preview-modal-info {
    text-align: left;
}

.modal-descripcion {
    font-family: "Jost", sans-serif !important;
    font-size: 0.9rem;
    color: black;
}

#preview-modal-stock {
    color: #b3af54 !important;
}

#preview-modal-stock-sin {
    color: var(--target-rojo-oscuro);
}


.preview-agregar {
    display: flex;
    gap: 1rem;
    margin: 1rem 0px;
}

@media screen and (max-width: 900px) {
    .preview-agregar {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 425px) {
    .preview-agregar {
        flex-direction: column;
        align-items: center;
    }

}

.preview-agregar-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.en-carrito-input input[type=number] {
    border: 1px solid var(--target-aqua-oscuro) !important;
}

.preview-agregar-input input[type=number], .en-carrito-input input[type=number] {
    -moz-appearance: textfield; /* Quita flechas en Firefox */
    appearance: textfield; /* Quita flechas en otros browsers */
    text-align: center;
    width: 50px;
    border: none;
}

.preview-agregar-input input[type=number]::-webkit-inner-spin-button, 
.preview-agregar-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Remove arrows in WebKit browsers */
    margin: 0;
}

.preview-agregar-input button {
    width: 30px;
    height: 20px;
    background-color: #555;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
}

.decrement, .increment {
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-agregar-input button:active {
    background-color: grey;
}

#modal-input, #producto-input {
    font-weight: bolder;
}

#producto-input, #modal-input {
    padding: 5px 3px;
    margin: 0px 0.5rem;
    background: rgb(222,222,222);
}

#producto-input:hover, #modal-input:hover {
    background-color: rgb(200,200,200);
}

.black-btn {
    background-color: black;
    padding: 0.7rem;
    color: white;
    font-size: 0.7rem;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.3s ease;
}

.increment-bulto, .decrement-bulto {
    background-color: #888 !important;
}

.black-btn:hover {
    cursor: pointer;
    background-color: #17202A;
    transform: scale(1.05);
}

@media screen and (max-width: 425px) {
    .black-btn {
        margin-left: 0px !important;
    }
}

@media screen and (max-width: 890px) {
    #icon-tainer-vista {
        display: none;
    }
}

.modal-input-icon {
    transform: scale(0.5);
}



/**********************************************************************************************************/
/*                                              PAGINA DETALLE DE PROD                                    */
/**********************************************************************************************************/

.producto-container {
    width: 80%;
    margin: 1rem 10rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
    border: 2px solid lightgray;
    border-radius: 10px;
    position: relative;
}

.producto-container * {
    font-family: 'Work sans', sans-serif;
}

@media screen and (max-width: 1300px) {
    .producto-container {
        width: 95%;
    }
}

@media screen and (max-width: 900px) {
    .producto-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .producto-imagen {
        width: 100% !important;
    }

    #imgZoom {
        width: 100%;
        object-fit: contain;
    }

    .producto-descripcion {
        width: 100% !important;
        justify-content: center !important;
    }

    .preview-info-prod {
        padding: 0px 10px !important;
    }

    #producto-overlay {
        visibility: hidden;
    }

    .detalle-precio-container {
        width: 100%;
        align-items: center;
    }

    .agregar-a-carrito, .en-carrito {
        width: 100%;
    }

    .en-carrito-btns {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start !important;
    }

    .oferta-cartel-detalle {
        text-align: center;
        margin-top: 1rem;
    }

    .producto-nuevo-detalle {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 420px) {

    .producto-container {
        padding: 2rem 0.5rem !important;
    }

    .preview-info-prod {
        width: 100% !important;
    }

}

@media screen and (max-width: 350px) {

    #imgZoom {
        width: 100% !important;
        object-fit: contain;
    }

}

.producto-imagen {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 900px){
    .producto-imagen {
        margin-top: 1rem;
    }
}

.producto-imagen img {
    width: 500px;
    height: 500px;
}

@media screen and (max-width: 1024px) {
    .producto-imagen img {
        width: 350px !important;
        height: 350px !important;
    }
}

@media screen and (max-width: 425px) {
    .producto-imagen img {
        width: 300px !important;
        height: 300px !important;
    }
}

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

.producto-descripcion {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.prod-back-arrow {
    padding: 0.5rem;
    border-radius: 50%;
    color: grey;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: color 0.3s ease;
}

.prod-back-arrow:hover {
    cursor: pointer;
    color: black;
    background-color: rgb(233,233,233);
}

#producto-overlay {
    position: absolute;
/*     top: 30px;
    right: 120px; */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display:inline-block;
    background-repeat:no-repeat;
    border-radius: 15px;
    display: none;
    z-index: 10;
}

.preview-info-prod {
    width: 400px;
    padding: 20px;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0.5rem;
}

#thumbnailsContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

#thumbnailsContainer img {
    border: 2px solid lightgray;
    width: 80px !important;
    height: 80px !important;
    opacity: 60%;
}

#thumbnailsContainer img:hover {
    opacity: 100%;
}

@media screen and (max-width: 600px){
    #thumbnailsContainer img {
        width: 50px !important;
        height: 50px !important;
    }

    #producto-detalle-descri {
        font-size: 1.2rem;
    }
}

.agregar-a-carrito {
    border: 1px solid rgba(0, 0, 0, 0.192);
    background: rgba(0, 0, 0, 0.062);
    border-radius: 5px;
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.en-carrito {
    border: 1px solid var(--target-aqua-oscuro);
    background: #b1dcc546;
    border-radius: 5px;
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.en-carrito-input {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    width: 100%;
}

.en-carrito-input p {
    text-transform: uppercase;
    font-size: 0.7rem;
}

.en-carrito-btns {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
}

.en-carrito-modif-btn {
    margin-left: 1rem;
    background-color: rgb(131, 131, 131);
    padding: 0.7rem;
    color: white;
    font-size: 0.7rem;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.3s ease;
}

/**********************************************************************************************************/
/*                                              BUSQUEDA                                                  */
/**********************************************************************************************************/

.search-div {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 40vw;
    order: 2;
}

@media screen and (max-width: 768px) {
    .search-div, .search-suggestions {
        width: 100%;
        margin-top: 0.5rem;
        order: 4;
    }

    .logo a img {
        width: 150px;
    }
}

.search-suggestions {
    overflow-y: auto;
    display: none;
    position: absolute;
    top: 40px;
    width: inherit;
    border: 1px solid lightgray;
    border-radius: 0px 0px 10px 10px;
    background: white;
    z-index: 2;
}

.search-suggestion-title {
    width: 100%;
    font-size: 0.7rem;
    color: darkslategrey;
    padding-left: 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid lightgray;
    margin-top: 10px;
    margin-bottom: 5px;
}

.search-suggestions ul li {
    list-style: none;
}

.search-suggestions ul li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.search-suggestions ul li:hover {
    background-color: rgb(238, 238, 238);
    cursor: pointer;
}

.search-suggestions-desc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-suggestions-sku {
    font-family: monospace;
    font-size: 0.7rem;
    color: lightslategray;
}

.search-suggestions-name {
    font-size: 0.9rem;
    color: darkslategrey;
}

.search-suggestions-name-cat {
    font-size: 0.7rem !important;
}

.search-suggestions-img {
    width: 40px;
    height: 40px;
    padding: 5px;
    margin-left: 10px;
}

@media screen and (max-width: 610px){
    .carrito-preview-productos {
        margin-bottom: 0.5rem !important;
    }

    .search-suggestions-name {
        font-size: 0.7rem;
    }

    .search-suggestions {
        height: 400px;
    }

}



.ver-todos-los-productos {
    border-top: 1px solid lightgrey;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.7rem;
    font-style: normal;
} /*monospace*/

.search-suggestions-categories-a {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0px !important;
    padding: 0.2rem 0.8rem;
}

.busqueda-texto {
    text-align: center;
    padding: 0.6rem;
    font-size: 0.7rem;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.oferta-cartel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    border: 1px solid gold;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 1px;
    background-color: rgba(250, 243, 205, 0.8);
    padding: 3px 0px;
}

.oferta-cartel-detalle, .oferta-cartel-modal {
    border: 1px solid gold;
    width: 100%;
    font-size: 0.7rem;
    letter-spacing: 1px;
    background-color: rgba(250, 243, 205, 0.8);
    padding: 3px 10px;
    text-align: left !important;
    z-index: -1;
}

.oferta-cartel-modal {
    display: none;
}

#oferta-cartel-modal-numero {
    font-size: 0.7rem;
}

.fecha-alta {
    width: 100%;
    background: rgba(255,0,0,0.3);
    font-size: 0.7rem;
    line-height: 15px;
    padding: 5px 0px;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.producto-nuevo {
    width: fit-content;
    background: rgb(235, 59, 47);
    color: white;
    font-size: 0.7rem;
    line-height: 15px;
    padding: 4px 10px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 3;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.producto-nuevo-modal, .producto-nuevo-detalle {
    width: fit-content;
    background: red;
    color: white;
    font-size: 0.7rem;
    line-height: 15px;
    padding: 4px 10px;
    text-align: center;
    position: absolute;
    right: 0px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#carritoContainer {
    display: flex;
    gap: 0.1rem;
}

#carritoContainer:hover {
    cursor: pointer;
}

                                                                    /* PAGINA CARRITO NUEVA */

.carrito-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carrito-container * {
    font-family: 'Work sans', sans-serif;
}


.carrito-title {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: darkslategrey;
}

.carrito-table {
    width: 100%; 
    margin: 1rem 0px;
    padding: 20px;
    border-top: 1px dashed lightgray;
    border-bottom: 1px dashed lightgray;
}

@media screen and (max-width:1020px){
    .carrito-container {
        width: 100%;
    }
}

.carrito-item {
    display: flex;
    flex-direction: column;
}

.table-row td {
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid lightgray;
}

.carrito-img {
    width: 80px;
    height: 80px;
}

.carrito-link {
    text-decoration: none;
}

.carrito-nombre-art:hover {
    cursor: pointer;
    color: var(--target-rojo-oscuro);
}

.carrito-checkout {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0px;
}

.carrito-iva {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 300px;
    flex-wrap: wrap;
    height: 50px;
}

.carrito-iva p {
    text-align: center;
}

.carrito-warning {
    border: 1px solid red;
    width: fit-content;
    margin: 2rem 0px;
    padding: 0.3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: rgb(255, 230, 230);
}

.carrito-warning-exclusivo {
    border: 1px solid black;
    width: fit-content;
    margin: 2rem 0px;
    padding: 0.3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: rgb(235, 235, 235);
}

@media screen and (max-width: 700px) {

    .carrito-title {
        font-size: 1.2rem;
    }

    .carrito-warning {
        margin: 0px 5vw;
    }
}

.carrito-warning-circle {
    width: 25px;
    height: 25px;
    padding: 0.5rem;
    border-radius: 50%  ;
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-exclamation {
    color: red;
    font-size: 0.7rem;
}

.carrito-warning-circle-exclusivo {
    width: 25px;
    height: 25px;
    padding: 0.5rem;
    border-radius: 50%  ;
    border: 2px solid rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrito-total {
    width: 300px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid black;
    border-radius: 5px;
}

.carrito-total h2 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid black;
}

.carrito-total-detalle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.carrito-total-detalle div {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 0px;
}

.carrito-finalizar {
    width: fit-content;
    background-color: black;
    border: none;
    border-radius: 5px;
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: background-color 0.5s ease;
}

.carrito-finalizar:hover {
    background-color: var(--target-rojo-oscuro);
    cursor: pointer;
}

.carrito-eliminar-item {
    color: red;
    transition: transform 0.3s ease;
    background-color: rgb(233,233,233);
    width: 30px;
    height: 30px;
    padding: 0.3rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrito-eliminar-item:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.carrito-cantidad {
    height: 120px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.carrito-cantidad-mod {
    font-size: 0.8rem;
    padding: 5px 0px;
}

.carrito-cantidad-mobile {
    margin: 0.8rem 0px;
    height: fit-content;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrito-input {
    width: 50px;
    text-align: center;
}

.carrito-btn-cantidad {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 40px;
    height: 30px;
    background-color: black;
    color: white;
    margin: 0px 5px;
}

.carrito-btn-cantidad p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.carrito-btn-cantidad p span {
    font-size: 12px;
}

.carrito-btn-cantidad:hover {
    cursor: pointer;
    background-color: white;
    border: 1px solid black;
    color: black;
}

.carrito-precio-subtotal-mobile {
    display: none;
}

#notas-carrito {
    min-height: 170px;
    width: 100% !important;
    border: 1px solid black;
    align-self: center !important;
    margin-top: 2.5rem;
}

#notas-carrito:hover {
    background-color: rgb(233,233,233);
}

#carrito-nota {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

.carrito-disabled {
    background-color: rgb(180, 0, 0);
}

.carrito-disabled:hover {
    cursor: not-allowed;
}

.carrito-data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    width: 900px;
}

.btn-modif-activo {
    background-color: orange;
}

.btn-modif-activo:hover {
    cursor: pointer;
    background: radial-gradient(circle, rgba(254,205,115,1) 0%, rgba(255,188,42,1) 76%, rgba(255,188,42,1) 100%);
}

/*---------------------------------- CARRITO MOBILE ----------------------------------*/ 

.carrito-mobile-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

#carrito-mobile-nombre {
    font-weight: 600;
}

.carrito-mobile-nombre-precio {
    margin-top: 2rem;
    width: 100%;
    padding-left: 1rem;
}

.carrito-mobile-subtotal {
    padding-left: 1rem;
    margin-top: 1rem;
}

.row {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.carrito-mobile-gris {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.080);
    padding-bottom: 0.8rem;
}

.row-mobile {
    min-width: 355px;
    max-width: 355px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    border: 1px solid var(--target-rojo-claro);
    border-radius: 5px;
    padding: 1rem;
}

.row-mobile * {
    font-family: "work sans", sans-serif;
}

.td-subtotal {
    font-weight: 500;
}

@media screen and (max-width: 380px){
    .row-mobile {
        width: 95% !important;
        max-width: 95% !important;
        min-width: 95% !important;
    }

    .ped-detalle-row td {
        width: 140px !important;
    }

    .pedidos-detalle-nota {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
    }
}

.carrito-table-mobile {
    display: none;
}

.carrito-cantidad-nro-mobile {
    font-size: 0.9rem;
}

.ver-pdf-span {
    font-family: 'work-sans', sans-serif;
    margin: 1rem;
}

.btn-mostrar-pdf {
    background-color: black;
    border: none;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
}

.btn-mostrar-pdf:hover {
    cursor: pointer;
    background-color: grey;
    color: black;
}

@media screen and (max-width: 852px){
    .btn-ver-pdf {
        display: none;
    }

    .mispedidos-pdf {
        display: none;
    }
}

@media screen and (max-width: 950px) {

   .carrito-data {
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 0.5rem;
    }
    
    .carrito-total {
        width: 100%;
    }
    
    .carrito-finalizar {
        text-align: center;
    }
    .carrito-total-detalle {
        flex-direction: column;
    }

    .carrito-table {
        display: none;
    }

    .carrito-iva {
        margin-bottom: 0px !important;
    }

    .carrito-iva {
        margin-top: 1rem !important;
    }

    .carrito-table-mobile {
        padding-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .carrito-table-mobile .row {
        border: 1px solid rgba(0, 0, 0, 0.308);
        width: 300px;
        min-width: 280px;
        margin: 0px 10px;
    } 

    .carrito-img-mobile {
        align-self: center;
        padding: 1rem 0px;
    }

    .asignar-cliente {
        padding-top: 2rem !important;
    }

    #cliente {
        margin-top: 1rem;
        margin-left: 0px !important;
        width: 95% !important;
        padding-left: 0px !important;
    }

    #carrito-nota, #notas-carrito {
        width: 95% !important;
    }

    #notas-carrito {
        margin-top: 5px !important;
    }
}

@media screen and (max-width: 530px) {
    .carrito-total {
        width: 100%;
    }
    
    .carrito-finalizar {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {

    .carrito-imagen-container, .carrito-imagen-head {
        display: none;
    }

    .carrito-nombre-art, .td-subtotal {
        font-size: 0.8rem;
    }

    .carrito-precio-subtotal-mobile {
        font-size: 0.7rem;
        font-weight: bold;
        color: darkslategrey;
    }
}

@media screen and (max-width: 460px) {

    .carrito-nombre-art, .td-precio, .td-subtotal, .carrito-cantidad-mod {
        font-size: 0.6rem;
    }

    th, .carrito-cantidad-nro {
        font-size: 0.7rem;
    }

    .carrito-eliminar-head, .carrito-eliminar-item {
        display: none;
    }
}


@media screen and (max-width: 420px) {

    .td-subtotal, .th-subtotal {
        display: none;
    }

    .carrito-precio-subtotal-mobile span {
        font-size: 0.6rem;
        margin-top: 5px;
        color: black;
        font-weight: normal;
    }

    .carrito-precio-subtotal-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

}

/**********************************************************************************************************/
/*                                              MI CUENTA                                                 */
/**********************************************************************************************************/

.mi-cuenta {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

.mi-cuenta * {
    font-family: "work sans", sans-serif;
}

.mi-cuenta h2 {
    margin: 1.5rem 0px;
    font-size: 1.5rem;
    color: darkslategrey;
}

.mi-cuenta-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem;
}

@media screen and (max-width: 420px){
    .mi-cuenta-info * {
        font-size: 0.8rem !important;
    }
}

.mi-cuenta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mi-cuenta-item span {
    font-size: 1rem;
    color: darkslategrey;
    font-weight: bold;
}

.mi-cuenta-item p {
    font-size: 1rem;
    color: darkslategrey;
}

.loading-spinner {
    margin: 2rem;
    color: black;
    display: none;
}

.burger-mobile {
    height: 30px;
    width: fit-content;
    display: none;
    z-index: 10;
}

.burger-mobile-content {
    width: 100%;
    display: none;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

#nav-icon1 {
    width: 60px;
    position: relative;
    top: -43px;
    left: -20px;
    margin: 50px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transform: scale(0.3);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }


  #nav-icon1 span{
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  
#nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2) {
    top: 18px;
  }
  
  #nav-icon1 span:nth-child(3) {
    top: 36px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  #nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }



@media screen and (max-width:950px){

    .micuenta {
        display: none;
    }

    .admpedidos {
        display: none;
    }

    .burger-mobile {
        display: block;
    }


    .google-maps iframe {
        width: 80%;
        border-radius: 25px;
    }
}



/* ----------------------------- FILTRO POR PRECIO ---------------------------------- */

.filtro-precio {
    margin: 1rem 0px;
    padding: 1rem;
    border: 1px solid rgb(173, 178, 183);
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.filtro-precio label {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}

.filtro-precio input {
    width: 90%;
    border: 1px solid rgb(168, 168, 168);
    padding: 5px;
}

.filtro-precio input:hover {
    cursor: pointer;
    background-color: rgb(233,233,233);
}

.filtro-precio button {
    padding: 5px 10px;
    border: none;
    background-color: black;
    color: white;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
}

.filtro-precio button:hover {
    cursor: pointer;
    background-color: rgb(175, 175, 175);
    color: black;
}

.hidden-by-price {
    display: none;
}

.productos-filtrados {
    margin: 1rem 0px;
    color: var(--target-rojo-oscuro);
    font-family: 'Work sans', sans-serif;
    font-size: 0.9rem;
}

.filter-controls-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.filtro-mover-arriba:hover {
    color: var(--target-rojo-oscuro);
    cursor: pointer;
}

/**********************************************************************************************************/
/*                                              MIS PEDIDOS                                               */
/**********************************************************************************************************/

.pedidos-titulo {
    font-family: "Work Sans", sans-serif;
    font-size: 1.5rem;
    color: black;
    margin: 2rem 0px 1rem 0px;
}

@media screen and (max-width: 700px) {
    .pedidos-titulo {
        font-size: 1.2rem;
    }
}

.pedidos-container {
    width: 85%; 
    padding: 1rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.281);
    margin: 1rem;
    margin-bottom: 3rem;
    background-color: rgba(0, 0, 0, 0.030);
}

.pedidos-container * {
    font-family: "Work Sans", sans-serif;
}

.sin-pedidos {
    background-color: black;
    padding: 0.6rem 1rem;
}

.sin-pedidos:hover {
    background-color: var(--target-aqua-oscuro);
    cursor: pointer;
}

.sin-pedidos:hover a {
    color: black;
}

.sin-pedidos a {
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
}

@media screen and (max-width: 700px){
    .pedidos-container {
        width: 95%;
        padding: 1rem 0px 1rem 0px !important;
        margin: 0px !important;
    }

    .pedidos-titulo {
        margin: 1rem 0px 1rem 0px;
    }

    .pedidos-item {
        width: 90% !important;
    }

    .pedidos-item-box {
        flex-direction: column;
    }
}

.pedidos-item-link {
    width: 100%;
    padding: 1rem;
    text-decoration: none;
    color: darkslategray;
    display: flex;
    justify-content: space-between;
}

.pedidos-item-link-pdf {
    text-decoration: none;
}

.pedidos-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.178);
    text-decoration: none;
    background-color: white;
    color: darkslategray;
}

.pedidos-item-link:hover, .pedidos-item-link-pdf:hover {
    cursor: pointer;
    border-bottom: 2px solid black;
}

.pedidos-item-box {
    display: flex;
    gap: 1rem;
}

.pedidos-item-box-pdf {
    height: 100% !important;
    padding: 1rem;
    display: flex;
}

.pedidos-item-box-pdf p {
    padding-left: 1rem;
    text-decoration: none;
    font-size: 0.8rem;
    color: black;
}

.fa-file {
    color: black;
}

.fa-file:hover{
    color: var(--target-rojo-oscuro);
}


.pedido-precio-total {
    font-weight: bold;
    color: darkgreen;
}

/* PEDIDOS DETALLE */

.pedidos-detalle-main {
    position: relative;
    border: 2px solid rgb(192, 192, 192);
    width: 1000px;
    padding: 0px 4rem 2rem;
    margin: 1rem;
    border-radius: 5px;
}

@media screen and (max-width: 900px){
    .pedidos-tabla-detalles {
        display: none;
    }
}

.pedidos-detalle-info {
    margin: 2rem 0px;
}

.pedidos-detalle-info * {
    font-family: "Work Sans", sans-serif;
}

.pedidos-detalle-titulo {
    font-family: "Work Sans", sans-serif;
    font-size: 1.2rem;
    margin: 20px 0px;
}

.pedidos-detalle-nota {
    max-width: 500px;
}

.pedidos-detalle-tbody-1 {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pedidos-detalle-tbody-1 tr {
    display: flex;
    gap: 1rem;
}

.pedidos-detalle-tbody-1-column-name {
    min-width: 150px;
    color: darkslategray;
    font-weight: bold;
    text-align: right;
}

.pedidos-detalle-items-campo {
    text-align: center;
    border-bottom: 1px dotted lightgray;
    padding: 10px 5px;
}

.pedidos-tabla-detalles {
    border: 1px solid rgb(197, 197, 197);
    padding: 1rem;
    width: 100%;
}

.pedidos-tabla-detalles * {
    font-family: "Work Sans", sans-serif;
}

.pedidos-tabla-detalles-head {
    padding-bottom: 10px;
    border-bottom: 1px solid lightgray;
}

.precio-total {
    font-weight: bold;
}

#pedido-back-arrow {
    position: absolute;
    top: 0;
    left: 0;
}

.ped-detalle-row td {
    width: 200px;
}

/* ADM DE PEDIDOS */

.admpedido-container {
    width: 80%;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.admpedido-container * {
    font-family: "Work Sans", sans-serif;
}

.admpedidos {
    text-decoration: none;
    color: rgb(82, 82, 82);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    padding-right: 15px;
}

.admpedidos:hover {
    color: var(--target-rojo-claro);
}

.admpedido-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.admpedido-filtro-div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#admpedido-filtrar {
    padding-left: 10px;
    font-family: 'work sans', sans-serif;
    width: 200px;
}

#admpedido-filtrar::placeholder {
    color: #ccc; 
    opacity: 1;
}

#admpedido-filtrar-btn {
    border-radius: 5px;
    background-color: black;
    border: none;
    color: white;
    padding: 0px 10px;
    height: 100%;
}

@media screen and (max-width:650px){

    .admpedido-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .admpedido-nav span {
        display: none;
    }

}

@media screen and (max-width:500px){

    .admpedido-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .admpedido-nav span {
        display: none;
    }

}

@media screen and (max-width:340px){
    .admpedido-card {
        min-width: 260px !important;
        margin: 0px 10px 0px 10px;
        min-height: fit-content !important;
        padding: 1rem !important;
    }

}

.admpedido-titulo {
    font-family: "Work Sans", sans-serif;
    width: 80vw;
    text-align: center;
    font-size: 1.5rem;
    margin: 2rem 0px 1rem 0px;
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgrey;
}

.admpedido-card {
    min-height: 390px;
    min-width: 300px;
    max-width: 300px;
    padding: 2rem;
    border: 1px solid rgb(216, 216, 216);
    border-radius: 10px;
    text-decoration: none;
    color: darkslategray;
    display: flex;
    flex-direction: column;
    transition: background-color 0.4s ease-in-out;
}

.admpedido-card:hover {
    background-color: rgb(241, 241, 241);
}

.admpedido-info {
    display: flex;
    flex-direction: column;
}

.admpedido-info h2 {
    font-size: 0.9rem;
    padding-bottom: 10px;
}

.admpedido-div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admpedido-div span {
    font-size: 0.8rem;
}

#admpedido-p {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: grey;
}

.admpedido-razsoc {
    color: black;
    font-weight: 500;
    font-size: 0.9rem;
}

.admpedido-btn-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#admpedido-filtrar-btn:hover {
    cursor: pointer;
    background-color: rgb(173, 173, 173);
}

.admpedido-btn {
    font-size: 0.9rem;
    background-color: rgb(199, 90, 90);
    color: white;
    border: none;
    padding: 5px 0px;
    transition: background-color 0.2s ease;
}

.clonar-solicitud {
    background-color: var(--target-aqua-oscuro);
}

.clonar-solicitud:hover {
    background-color: black !important;
}

.admpedido-btn:hover {
    cursor: pointer;
    background-color:#f16767;
}

.admpedido-disabled {
    background-color: rgb(95, 95, 95) !important;
}

.admpedido-disabled:hover {
    cursor: not-allowed;
}

.admpedido-nav-link {
    font-family: "Work Sans", sans-serif;
    color: darkslategray;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.admpedido-nav-link:hover {
    color: var(--target-rojo-oscuro);
}

.admpedido-hidden {
    display: none;
}

#modal-spinner {
    height: 40px;
    width: 40px;
    background-image: url('../images/spinner.gif');
    object-fit: contain;
}

.arSinStock{
    background-color: #ffe6bd;
}

.arSinStock-card {
    margin: 1rem;
    border: 1px solid orange;
    width: fit-content;
    padding: 0.3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: #ffe6bd;
}

.productoExcluido {
    background: linear-gradient(135deg, 
        #e6e6e6, 
        #f9f9f9,
        #d6d6d6,
        #f9f9f9,
        #e6e6e6
    );
    background-size: 200% 200%;
    animation: shimmer 10s infinite;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.stock-container {
    position: relative;
    display: inline-block;
}

.stock-container img {
    display: block;
    max-width: 100%;
}

.stock-container.sin-stock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: orange; /* Color naranja */
    z-index: 1;
    mix-blend-mode: multiply;
}

.stock-container.sin-stock img {
    position: relative;
    z-index: 2;
}


.asignar-cliente {
    padding: 10px 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#asignar-div {
    margin-top: 10px;
}

#cliente {
    width: 500px;
    border: 1px solid lightgray;
    margin-left: 10px;
    padding-left: 5px;
}

/**********************************************************************************************************/
/*                                              MODAL DE VERIFICACIO                                      */
/**********************************************************************************************************/

#overlay-home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

#overlay-home * {
    font-family: "Work Sans", sans-serif;
}

#modal-verificacion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#modal-verificacion-div {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

#modal-verificacion h2 {
    font-weight: normal;
    padding: 20px;
    margin-top: 15px;
}

.modal-verificacion-form {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#input-verificacion {
    margin: 0px 1rem;
    width: 70px;
    height: 100%;
    background-color: rgb(235, 235, 235);
    border-radius: 5px;
    padding-left: 0.5rem;
    border: none;
}

#verif-mail-btn {
    height: 30px;
    width: 30px !important;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--target-rojo-claro);
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#verif-mail-btn:hover {
    cursor: pointer;
    background: var(--target-rojo-oscuro);
}

#cod-not-valido {
    margin-top: 5px;
    font-size: 12px;
    color: red;
    display: none;
    width: 300px;
    padding: 5px;
}

.consulta-error {
    font-weight: normal;
    font-size: 12px;
    color: red;
    display: none;
}

.modal-verificacion-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.modal-verificacion-close:hover {
    cursor: pointer;
}

.espere {
    cursor: not-allowed;
    pointer-events: none; 
    
    background: linear-gradient(5deg, #f0696d, #f6a39e, #b1dcc5, #8bcfbf);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}
@keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}

.fa-user-circle:hover {
    fill: var(--target-rojo-claro) !important;
    stroke: var(--target-rojo-claro) !important;
}

/* FORMULARIO DE RECUPERACIÓN DE CONTRASEÑA */
#requestForm h1 {
    font-size: 0.9rem;
    font-weight: 400;
}

#text_user_pass {
    font-weight: 400;
}

#request-error {
    display: none;
    border: 1px solid var(--target-rojo-claro);
    background:rgb(252, 236, 236);
    border-radius: 5px;
    padding: 10px;
    font-size: 0.8rem;
    color: rgb(53, 53, 53);
    align-items: center;
    justify-content: center;
}

/* VENDEDORES */

.vendedores-main {
    width: 100%;
    height: 100%;
    padding-top: 1rem;
}

.lista-clientes-container {
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.saldo-total {
    background: var(--target-rojo-claro3);
    border: 1px solid var(--target-rojo-claro);
    padding: 5px 10px;
    width: fit-content;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

#saldo-total {
    font-weight: bold;
}

#clientes-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1200px;
}

.clientes-container {
    min-width: 300px;
    width: 1fr;
}

#clientes-form > div {
    flex: 1 1 calc(33.33% - 10px);
    box-sizing: border-box;
}

.cliente-checkbox {
    margin-right: 8px;
}

@media screen and (max-width: 650px){

    .clientes-container {
        padding-left: 1rem;
    }
}

.clientes-label {
    font-size: 0.8rem;
}

.tabla-deudas-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: rgb(240,240,240);
    padding: 1rem;
    width: 70vw;
    overflow-x: auto;
    margin: 2rem 0;
}

@media screen and (max-width: 1700px){
    .tabla-deudas-container {
        width: 90vw;
    }
}

.tabla-deudas {
    background-color: white;
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
}

.tabla-deudas th {
    padding: 0.3rem;
    background-color: var(--target-rojo-claro);
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9rem;
    border: 1px solid #db827d !important;
}

.tabla-deudas th, .tabla-deudas td {
    border: 1px solid rgb(216, 216, 216);
    text-align: center;
    font-size: 0.8rem;
    padding: 5px;
}

.deuda-boton-container {
    display: flex;
    gap: 1rem;
}

.descargar-csv {
    width: fit-content;
    padding: 5px 10px 5px 10px;
    background-color: black;
    color: white;
    text-transform: uppercase;
    border: none;
    font-size: 0.8rem;
}

.descargar-csv:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.478);
}

.traza-de-categorias {
    position: relative;
    top: 5px;
}

.traza-de-categorias a, .separator {
    font-size: 12px !important;
    color: rgb(77, 77, 77);
    text-decoration: none;
}

.traza-de-categorias a:hover {
    color: black;
    text-decoration: underline;
}

.flecha-navegacion { 
    width: 40px;
    height: 40px;  
    background-color: rgba(224, 224, 224, 0.267);
    padding: 5px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.flecha-navegacion:hover {
    cursor: pointer;
    background-color: rgba(224, 224, 224, 0.616);
}

.flecha-navegacion p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
    bottom: 1px;
    color: #888;
}

.nav-prev {
    left: 10px;
}

.nav-next {
    right: 10px;
}

.modal-preview-nav {
    padding: 5px;
    background-color:#ebeaea;
    height: fit-content;
    width: 150px;
    border-radius: 5px;

    position: absolute;
    top: 20%;
    transform: translateY(-20%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.modal-preview-nav p {
    font-size: 12px;
    text-transform: uppercase;
    padding-left: 5px;
    padding-bottom: 10px;
}

.preview-imagen-nav {
    width: 140px;
    height: 140px;
}

.preview-previo {
    left: -10px;
    visibility: hidden;
    opacity: 0;
}

.preview-siguiente {
    right: -10px;
    visibility: hidden;
    opacity: 0;
}

#empresas {
    height: fit-content;
    font-size: 0.9rem;
}

#empresas option {
    font-size: 0.9rem;
}

.clientes-div {
    width: 100%;
    background: rgb(250,250,250);
    border: 1px solid lightgray;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.clientes-div h1 {
    margin-bottom: 0.5rem;
}

.clientes-div p, .clientes-div span {
    font-size: 0.8rem;
}

.clientes-div span {
    padding-top: 1rem;
}

@media screen and (max-width: 650px){

    .clientes-div h1 {
        margin-bottom: 0;
    }

    .clientes-div p {
        padding: 1rem;
        font-size: 0.7rem;
    }
}

.deudas-select-div {
    background: rgb(250,250,250);
    border: 1px solid lightgray;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
}

@media screen and (max-width: 400px){
    .deudas-select-div {
        flex-direction: column;
    }
}

.deudas-select-div p {
    padding-top: 0;
}

.estado-ctas {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.estado-ctas h2 {
    font-size: 1rem;
}

.estado-ctas p {
    font-size: 0.7rem;
    color: lightslategrey;
}









.mantenimiento-main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mantenimiento-main * {
    font-family: "Work Sans", sans-serif;
}

.mantenimiento-main h2 {
    font-size: 1.5rem;
    color: #F0696D;
}

.mantenimiento-main p {
    text-align: center;
}

.mantenimiento-meme {
    filter: sepia(0.56);
}





.container-password {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: fit-content;
}

.container-password input {
    width: 100%;
    height: 39px;
    padding: 8px 40px 8px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.container-password svg {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

#login-eye-ocultar {
    display: none;
}









.prod-vendidos {
    background: rgb(0, 0, 0, 0.8);
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 2px 0;
    border-radius: 0 0 0 5px;
}

.prod-ultima-venta {
    font-size: 0.75em;
    color: #000;
    text-align: center;
    width: 100%;
    padding: 3px 0;
    box-sizing: border-box;
    z-index: 1;
    border-radius: 0 0 5px 0px;
}

.prod-ultima-venta.last-sale-lightgray {
    background-color: #f0f0f0;
    color: #333;
}

.prod-ultima-venta.last-sale-yellow {
    background-color: rgb(247, 220, 111);
    color: #333;
}

.prod-ultima-venta.last-sale-orange {
    background-color: rgb(243, 156, 18);
    color: #fff;
}

.prod-ultima-venta.last-sale-red {
    background-color: rgb(231, 76, 60);
    color: #fff;
}

.prod-ultima-venta.last-sale-default {
    background-color: #e0e0e0;
    color: #333;
}



.estadisticas-nota {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem;
    padding: 10px;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.38);
    -webkit-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.38);
    -moz-box-shadow: 0px 0px 15px -6px rgba(0,0,0,0.38);
}

.estadisticas-colores {
    display: flex;
    gap: 10px;
}

.estadisticas-colores div {
    display: flex;
    gap: 10px;
}

.estadisticas-comentario {
    font-size: 12px;
}

@media screen and (max-width: 808px){
    
    .estadisticas-nota {
        flex-direction: column;
    }

    .estadisticas-colores {
        flex-direction: column;
    }
    
    .estadisticas-comentario {
        text-align: center;
    }
    
}

.prod-stock-info-bar {
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 2px 0;
    border-radius: 0 0 0 5px;
}