/*
 ######   ######## ##    ## ######## ########     ###    ##       
##    ##  ##       ###   ## ##       ##     ##   ## ##   ##       
##        ##       ####  ## ##       ##     ##  ##   ##  ##       
##   #### ######   ## ## ## ######   ########  ##     ## ##       
##    ##  ##       ##  #### ##       ##   ##   ######### ##       
##    ##  ##       ##   ### ##       ##    ##  ##     ## ##       
 ######   ######## ##    ## ######## ##     ## ##     ## ######## */

body {
    margin-top: 130px;
}

.contenedor-principal {
    display: flex;
    gap: 30px;
    padding: 1em;
}

.ruta {
    display: flex;
    align-items: center;
    font-size: .9em;
    font-weight: bold;
    gap: 0.5em;
    margin-left: 2em;
}

.enlace-ruta {
    color: #9e9e9e;
    text-decoration: none;
}

.enlace-ruta:hover {
    color: #001489;
}

.separador-ruta {
    margin: 0 0.3em;
    color: #666;
}

.actual-ruta {
    color: #001489;
}

/* 
########  ########   #######  ########  ##     ##  ######  ########  #######   ######  
##     ## ##     ## ##     ## ##     ## ##     ## ##    ##    ##    ##     ## ##    ## 
##     ## ##     ## ##     ## ##     ## ##     ## ##          ##    ##     ## ##       
########  ########  ##     ## ##     ## ##     ## ##          ##    ##     ##  ######  
##        ##   ##   ##     ## ##     ## ##     ## ##          ##    ##     ##       ## 
##        ##    ##  ##     ## ##     ## ##     ## ##    ##    ##    ##     ## ##    ## 
##        ##     ##  #######  ########   #######   ######     ##     #######   ######   */
.productos-contenedor {
    flex-grow: 1;
    border-radius: .5em;
    padding: .5em;
    background-color: #f8f8f8;
    text-align: center;
    width: 85%;

    & h2 {
        font-size: 2rem;
        margin: 20px 0;
        color: #001489;
    }

    & .titulo {
        text-transform: uppercase;
    }
}

.cantidad {
    right: 0;
}

.productos-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.producto {
    background-color: white; 
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
    /* margin: 10px; */
    flex: 1 1 270px;
    max-width: 270px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;

    & .imagen {
        width: 150px;
        height: 150px;
        object-fit: cover;
        margin-bottom: 15px;
    }

    & .linea {
        font-size: .8em;
        margin-bottom: 10px;
        color: #686868;
        font-weight: bold;
    }

    & .caracteristicas {
        font-size: 1rem;
        margin-bottom: 5px;
        color: #000;
    }

    & .precio {
        color: #001489;
        font-weight: bold;
    }
}

.producto:hover {
    transform: scale(1.05);
}

.footerproducto {
    margin-top: .5em;
    bottom: 0;

    & .precio-carrito {
        display: flex;
        align-items: center;
        margin-top: .5em;
        justify-content: space-between;

        & .btn-agregar-al-carrito {
            width: 30%;
            font-size: 1em;
        }
    }
}


/*
#### ##     ##    ###     ######   ######## ##    ## ########  ######      ######   ######## ##    ## ######## ########     ###    ##       ########  ######  
 ##  ###   ###   ## ##   ##    ##  ##       ###   ## ##       ##    ##    ##    ##  ##       ###   ## ##       ##     ##   ## ##   ##       ##       ##    ## 
 ##  #### ####  ##   ##  ##        ##       ####  ## ##       ##          ##        ##       ####  ## ##       ##     ##  ##   ##  ##       ##       ##       
 ##  ## ### ## ##     ## ##   #### ######   ## ## ## ######    ######     ##   #### ######   ## ## ## ######   ########  ##     ## ##       ######    ######  
 ##  ##     ## ######### ##    ##  ##       ##  #### ##             ##    ##    ##  ##       ##  #### ##       ##   ##   ######### ##       ##             ## 
 ##  ##     ## ##     ## ##    ##  ##       ##   ### ##       ##    ##    ##    ##  ##       ##   ### ##       ##    ##  ##     ## ##       ##       ##    ## 
#### ##     ## ##     ##  ######   ######## ##    ## ########  ######      ######   ######## ##    ## ######## ##     ## ##     ## ######## ########  ######  */
.producto img {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    object-fit: contain;
    transition: opacity 0.5s ease;
    opacity: 0;
    z-index: 1;
}

.producto img:nth-child(1) {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.producto:hover img:nth-child(2) {
    opacity: 1;
    z-index: 3;
    object-fit: contain;
    transition: opacity 0.5s ease;
}

.producto:hover img:nth-child(1):not(:only-of-type) {
    opacity: 0;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.wishlistarriba {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #ccc;
    transition: color 0.3s ease;
    z-index: 4;
}

.wishlistarriba:hover {
    color: #e60000;
}

.wishlistarriba.favorito {
    color: #e60000; 
}

.btn-agregar-al-carrito {
    background-color: #001489;
    color: white;
    border: 2px solid transparent;
    padding: 10px;
    width: 55%;
    text-align: center;
    margin-top: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    letter-spacing: 3.2px;
    margin-top: auto;
}

.btn-agregar-al-carrito:hover {
    background-color: #fdfdfd;
    color: #001489;
    border-color: #001489;
}

/*
########         ########  ######## ########    ###    ##       ##       ######## 
##     ##        ##     ## ##          ##      ## ##   ##       ##       ##       
##     ##        ##     ## ##          ##     ##   ##  ##       ##       ##       
########         ##     ## ######      ##    ##     ## ##       ##       ######   
##               ##     ## ##          ##    ######### ##       ##       ##       
##        ###    ##     ## ##          ##    ##     ## ##       ##       ##       
##        ###    ########  ########    ##    ##     ## ######## ######## ######## */
.producto-detalles {
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.imagen-principal {
    width: 500px;
    height: 500px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: none;
}

.imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
}

.zoom {
    position: absolute;
    display: none;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 500%;
    pointer-events: none;
    border: 2px solid rgba(0, 0, 0, 0.3);
}

.info-producto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & h1 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
}

.seleccionado {
    margin-bottom: auto;
}

.descripcion {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.precio-producto {
    margin-bottom: 20px;

    & .precio {
        color: #008000;
        font-weight: bold;
        font-size: 1.5em;
    }
}

.botones {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
}

.botones button {
    background-color: #001489;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
}

.botones button i {
    margin-right: 10px;
}

.botones .add-to-cart:hover {
    background-color: #001489;
}

.botones .wishlist {
    background-color: transparent;
    border: none;
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
}

.botones .wishlist:hover {
    color: #a50000;
}

.color {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    border: 1px solid #999;
}

.sin_color {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: #000;
}

.multi_color {
    background: conic-gradient(
        #ec2631 0deg 60deg,
        #f06448 60deg 120deg,
        #f2d401 120deg 180deg,
        #5ac17d 180deg 240deg,
        #0000FF 240deg 300deg,
        #4B0082 300deg 360deg);
}

/*
##     ## #### ##    ## ####    ###    ######## ##     ## ########     ###     ######  
###   ###  ##  ###   ##  ##    ## ##      ##    ##     ## ##     ##   ## ##   ##    ## 
#### ####  ##  ####  ##  ##   ##   ##     ##    ##     ## ##     ##  ##   ##  ##       
## ### ##  ##  ## ## ##  ##  ##     ##    ##    ##     ## ########  ##     ##  ######  
##     ##  ##  ##  ####  ##  #########    ##    ##     ## ##   ##   #########       ## 
##     ##  ##  ##   ###  ##  ##     ##    ##    ##     ## ##    ##  ##     ## ##    ## 
##     ## #### ##    ## #### ##     ##    ##     #######  ##     ## ##     ##  ######  */
.miniaturas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.miniaturas img {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    object-fit: contain;
}

.miniaturas img:hover {
    border-color: #001489;
}

/*
########         ########  ########  ######   #######  ##     ## ######## ##    ## ########     ###    ########   #######   ######  
##     ##        ##     ## ##       ##    ## ##     ## ###   ### ##       ###   ## ##     ##   ## ##   ##     ## ##     ## ##    ## 
##     ##        ##     ## ##       ##       ##     ## #### #### ##       ####  ## ##     ##  ##   ##  ##     ## ##     ## ##       
########         ########  ######   ##       ##     ## ## ### ## ######   ## ## ## ##     ## ##     ## ##     ## ##     ##  ######  
##               ##   ##   ##       ##       ##     ## ##     ## ##       ##  #### ##     ## ######### ##     ## ##     ##       ## 
##        ###    ##    ##  ##       ##    ## ##     ## ##     ## ##       ##   ### ##     ## ##     ## ##     ## ##     ## ##    ## 
##        ###    ##     ## ########  ######   #######  ##     ## ######## ##    ## ########  ##     ## ########   #######   ######  */
.productos-sugeridos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.productos-sugeridos h2 {
    font-size: 22px;
    margin-bottom: 15px;
}

.lista-productos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.lista-productos .producto {
    width: 200px;
    height: 250px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lista-productos .producto img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 5px;
}

.lista-productos .producto p {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
    word-wrap: break-word;
}

/*
 ######     ###    ########  ########  #### ########  #######  
##    ##   ## ##   ##     ## ##     ##  ##     ##    ##     ## 
##        ##   ##  ##     ## ##     ##  ##     ##    ##     ## 
##       ##     ## ########  ########   ##     ##    ##     ## 
##       ######### ##   ##   ##   ##    ##     ##    ##     ## 
##    ## ##     ## ##    ##  ##    ##   ##     ##    ##     ## 
 ######  ##     ## ##     ## ##     ## ####    ##     #######  */
.seleccion-cantidad {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cantidad-seleccionada {
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 15px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
}

.cantidad-seleccionada::-webkit-inner-spin-button,
.cantidad-seleccionada::-webkit-outer-spin-button {
    display: none;
}

.btn-cantidad {
    color: #001489;
    font-size: 18px;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
}

.btn-cantidad:hover {
    background-color: #d4d4d4;
}

.btn-eliminar {
    padding: 0; 
    font-size: 18px; 
    border-radius: 40%; 
    width: 18px; 
    height: 18px; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; 
    cursor: pointer; 
    border: none; 
}

.btn-eliminar i {
    color: #7171718b;
    font-size: 18px; 
}

.btn-eliminar i:hover {
    color: #da0b0bc4;
    font-size: 18px; 
}

/*
##    ##  #######  ########        ########    ###    ##     ##  #######  ########  #### ########  #######  
###   ## ##     ##    ##           ##         ## ##   ##     ## ##     ## ##     ##  ##     ##    ##     ## 
####  ## ##     ##    ##           ##        ##   ##  ##     ## ##     ## ##     ##  ##     ##    ##     ## 
## ## ## ##     ##    ##           ######   ##     ## ##     ## ##     ## ########   ##     ##    ##     ## 
##  #### ##     ##    ##           ##       #########  ##   ##  ##     ## ##   ##    ##     ##    ##     ## 
##   ### ##     ##    ##    ###    ##       ##     ##   ## ##   ##     ## ##    ##   ##     ##    ##     ## 
##    ##  #######     ##    ###    ##       ##     ##    ###     #######  ##     ## ####    ##     #######  */
#notificacion-favoritos {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.notificacion {
    background-color: #001489;
    color: white;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.notificacion.fade-out {
    opacity: 0;
}

/*
########  ########  ######  ########   #######  ##    ##  ######  #### ##     ##  #######  
##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ## ##     ## 
##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ## ##     ## 
########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ## ##     ## 
##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##  ##     ## 
##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##   ##     ## 
##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###     #######  */
@media (max-width: 768px) {
    .producto-detalles {
        flex-direction: column;
        align-items: center;
    }

    .miniaturas {
        flex-direction: row;
    }

    .imagen-principal {
        width: 100%;
    }

    .info-producto {
        text-align: center;
    }

    .barra-filtros {
        width: 100%;
        margin-bottom: 20px;
    }

    .productos-contenedor {
        width: 100%;
    }

    .producto {
        flex: 1 1 45%;
        max-width: 45%;
        margin: 5px;

        & .imagen {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-bottom: 15px;
        }
        
        & img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
    }

    .btn-agregar-al-carrito {
        background-color: #001489;
        color: white;
        border: 2px solid transparent;
        padding: 10px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: .6em;
        transition: background-color 0.3s ease, border-color 0.3s ease;
        letter-spacing: 3.2px;
    }

    .btn-agregar-al-carrito:hover {
        background-color: #fdfdfd;
        color: #001489;
        border-color: #001489;
    }
}