@import url(../fawesome-all.css);
@import url(../colores.css);
@import url(../fonts.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
    text-decoration: none;
    list-style: none;
}

:root {
    --violeta-oscuro: #4942CE;
    --violeta-claro: #857FFF;
    --blanco: white;
    --gris-claro: #8F8E8E;
    --gris-oscuro: #2E2E2E;
    --azul-oscuro: #22263E;
    --verde-claro: #5AC25B;
    --naranja: #FF8200;
    --amarillo: yellow;
    --celeste: #64c1ec;
    --btn-verde: #1cac49;
    --btn-rojo: #f32e2e;
    ;
}


body {
    height: 100%;
    width: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    overflow: auto;
}

.me-2 {
    margin-right: .5em;
}


.d-flex-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info.izquierda {
    align-items: flex-start;
}

.d-flex-fila {
    display: flex;
    gap: 0;
    width: 100%;
    justify-content: space-between;
}

.info hr {
    width: 99%;
}

p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.letra-azul {
    color: var(--violeta-oscuro);
}

.letra-blanca {
    color: var(--blanco);
}

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

.letra-gris {
    color: var(--gris-claro);
}

.letra-violeta {
    color: var(--violeta-claro);
}

.letra-roja{
    color: var(--btn-rojo);
}

.letra-naranja{
    color: var(--naranja);
}

main {
    font-size: 1em;
    font-weight: 700;
    min-height: 85vh;
    width: 100%;
    background-color: var(--azul-oscuro);
    padding: 2em 1em;
    padding-top: 7%;
}

footer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
    color: white;
    background-color: var(--violeta-claro);
    font-size: 15px;
    gap: 2em;
    text-wrap: nowrap;

    .info {
        display: flex;
        height: 100%;
        flex: 0 0 20%;
        position: relative;
        flex-direction: column;

        .redes,
        .contactos {
            width: 60%;
            margin: auto;
            align-content: center;
            justify-content: space-evenly;
            font-size: 30px;
        }

        i {
            color: white;
            cursor: pointer;
            padding-top: 20px;
            font-size: 20px;
        }

        i:hover:first-child {
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            transform: scale(1.2);
        }

        i:hover:last-child {
            color: black;
            transform: scale(1.2);
        }

        i:hover:nth-child(2) {
            color: blue;
            transform: scale(1.2);
        }

        .contactos {
            flex-direction: column;
            justify-content: start;
            width: auto;

            span {
                padding-right: 10px;
            }


            p:first-child span:hover {
                color: red;
            }

            p:last-child span:hover {
                color: green;
            }
        }
    }

    h5 {
        padding-top: 10px;
        text-align: center;
    }

    p {
        padding: 10px;
    }
}

.derechos_autores {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--gris-oscuro);
    user-select: none;
    padding: 10px 0;
    font-size: 14px;
    color: white;

    i {
        margin-right: 5px;
    }

}

/* 
#menucito{
    position: absolute;
    top: 60px;
    height: 100px;
    width: 80%;
    right: -100%;
    background-color: red;
    display: none;
}
.mostralo{
    display: block!important;
    right: 0!important;
} */

header {
    width: 100%;
    height: 7%;
    background-color: var(--violeta-oscuro);
    color: var(--blanco);
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


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

    .logo {
        display: flex;
        width: 20%;
        height: 80px;
    }

    nav {
        display: flex;
        z-index: 0;
        position: relative;
        align-items: center;
        justify-content: end;
        width: 40%;

        ul {
            display: flex;
            width: 60%;
            justify-content: end;
        }

        li {
            display: flex;
            align-items: center;
            justify-content: end;
            padding-right: 15px;
        }



        ul li a {
            position: relative;
            margin: 15px;
            color: var(--blanco);
            margin-left: 8px;
            text-wrap: nowrap;
        }

        ul li:hover a {
            color: var(--gris-oscuro);
        }
    }
}

.icono {
    display: flex;
    position: relative;
    width: 50%;
    height: 30px;
    line-height: 35px;
    align-items: end;
    justify-content: center;

}

img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#menuIcon {
    display: none;
}


/* INPUTS Y BOTONES */

.linea_registro {
    color: var(--blanco);
    background: transparent;
    width: 100%;
    border: none;
    border-bottom: 1px solid white;
    outline: none;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 30px;

}

.btn_registro {
    width: 100%;
    margin: 20px 0px 20px 0px;
    padding: 10px;
    font-size: 15px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: var(--violeta-oscuro);
    border-radius: 25px;
}

.buscador,
.btn_lupa {
    height: 30px;
    width: 240px;
    font-size: 15px;
    background-color: var(--blanco);
    border: none;
    outline: none;
    cursor: pointer;
    padding-left: 10px;
}


.btn_lupa {
    width: 40px;
    top: -1px;
}

.input_trasparente,
.select_opc {
    background: rgba(211, 211, 211, 0.2);
    border: 1px solid white;
    color: var(--blanco);
    width: 85%;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 25px;
    border-radius: 10px;
}

.opc_RolyState {
    background-color: var(--violeta-claro);
    color: var(--blanco);
}

.hiden {
    overflow: hidden;
}

/*FIN DE INPUTS Y BOTONES   */

/* INICIO DE LOGIN Y REGISTER*/
.main-login {
    height: 100vh;
    width: 100%;
    background-color: var(--azul-oscuro);
    display: flex;
    flex-direction: column;

    .logo {
        top: 50px;
        left: 15px;
        display: flex;
        position: relative;
        width: 100%;
        justify-content: start;
        min-height: 200px;
        img{
            height: auto; 
            max-height: 140px; 
            width: auto; 
        }
        a{
            display: inline-block;
            height: auto; 
        }
    }

    .contenedor-login {
        display: flex;
        height: 100%;
        width: 50%;
        margin: auto;
        text-align: center;
        justify-content: start;
        align-items: center;

        form {
            width: 100%;
        }

        .login {
            /* height: 65%; */
            width: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-radius: 15px;
            padding: 3em;
            background: rgba(211, 211, 211, 0.2);
            border: 1px solid white;

            .fila {
                justify-content: start;
                width: 100%;
            }
        }
    }

    .imagen_login {
        height: 50%;
        width: 45%;
        position: absolute;
        /* background-color: #a8a7bb; */
        bottom: 0;
        right: 0;
        overflow: hidden;

        img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
    }

    .linea_registro {
        padding-left: 30px;
    }

    form {
        padding: 10px;
    }

    h3 {
        text-wrap: nowrap;
        padding-top: 10px;
    }

    h5.sub-title {
        padding-bottom: 10px;
        text-wrap: nowrap;
    }

    .txt {
        text-align: left;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    input {
        color: var(--blanco);
    }

    a {
        color: var(--blanco);
    }
}

/* FIN DE LOGIN Y REGISTER*/

/* INICIO DE MODIFICAR EMPLEADOS */
.main-empleado {
    display: grid;
    place-items: center;
    width: 100%;

    .agrandar {
        height: 100%;
        width: 60%;
    }

    .alineacion_izq {
        width: 85%;
    }

    .Cammpo_btn {
        display: flex;
        margin: auto;
        height: 90px;
        width: 300px;
    }
}


/* FIN DE MODIFICAR EMPLEADOS */

.movile-compras {
    display: flex;
}

.agregarEmpleado {
    background-color: var(--verde-claro);
    padding: 5px;
    border-radius: 15px;

    i {
        font-size: 14px;
        padding: 5px;
    }
}

/* INICIO DE MAIN DE LISTADO DE PRODUCTOS*/

main.main-carrito,
main.compras_cliente,
main.main_opiniones_usuario {
    .container_productos {
        display: flex;
        flex: 1 0 250px;
    }


    .info-contenedor {
        display: flex;
        flex: 0 0 calc(100% / 1 - 15px - 0.5em);
        height: 175px;
        width: 100%;
        background-color: white;
        cursor: auto;
    }

    .contenedor_detalles {
        background-color: white;
        border-radius: 15px 0px 0px 15px;
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;

        .imagen_produ {
            height: 80%;
            width: 80%;
            object-fit: cover;
        }
    }


    .btn_cart {
        border-radius: 0 15px 15px 0;
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        #cantidad,
        #sumar,
        #restar {
            background-color: white;
            border: 1px solid black;
        }

        #cantidad {
            font-size: 11px;
            border-left: none;
            border-right: none;
            padding-top: 8px;
            padding-bottom: 8px;
            width: 20px;
            text-align: center;

        }

        #restar {
            border-right: none;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            padding: 8px 18px 8px 18px;
        }

        #sumar {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            border-left: none;
            padding: 8px 18px 8px 18px;

        }

        .iconos {
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        .iconos i {
            transition: color 0.3s;
        }

        .iconos:hover i {
            color: var(--violeta-claro);
        }

        button {
            border: none;
            background-color: white;
        }

    }

    .btn_cart:last-child {
        i {
            font-size: 24px;
            color: var(--gris-oscuro);
            cursor: pointer;
        }
    }

    .flex {
        gap: 15px;
    }

    .columna-center {
        justify-content: center;
    }

    .pimba {
        justify-content: space-around;
    }
}

main.main_estado_compra {
    display: flex;
    flex-direction: column;
    align-items: center;

    .detalles_compra {
        display: flex;
        flex-direction: row;
        width: 80%;
        height: 20%;
        border-radius: 15px;
        background-color: white;
        align-items: center;

        .contenedor-cart {
            border-radius: 15px;
            width: 80%;
            justify-content: center;
            align-items: start;
        }
    }

    .contenedor_detalles {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;

        .round-image {
            height: 95px;
            width: 95px;
        }
    }

    .contenedor_estado {
        margin: 10px;
        padding: 1em;
        border-radius: 15px;

        .round-image {
            height: 150px;
            width: 150px;
        }

        .fila {
            justify-content: center;
            gap: 10px;

            .columna {
                justify-content: center;
                align-items: center;
            }

            .precio {
                cursor: pointer;
            }
        }

        .flex {
            width: 200px;
            justify-content: space-between;
        }


    }

    .informacion_compra {
        display: flex;
        flex-direction: column;
        width: 100%;

        .border-bottom {
            padding-bottom: 5px;
        }

        .flex {
            align-items: center;

        }
    }

    .border-der {
        padding-right: 10px;
    }
}

.contenedor_estado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    background-color: #006b21;

}

.contenedor_informacion_compra {
    display: flex;
    flex-direction: column;
    background-color: green;
    padding: 1em;
    width: 80%;
    border-radius: 15px;
}

main.compras_cliente,
.main_opiniones_usuario {

    .flex {
        .flex-end {
            width: 30%;
            align-items: center;
        }
    }

    .flex-start {
        width: 100%;
        padding-bottom: 15px;
    }

    .container_productos {
        width: 90%;
        gap: 10px;

        .flex-start {
            border-bottom: 1px solid var(--gris-claro);
        }
    }

    .info-contenedor {
        height: 160px;
        cursor: pointer;
        overflow: hidden;

    }

    .contenedor-cart {
        width: 30%;
        align-items: start;
    }

    .columna-compu {
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: end;
        padding: 0.5em;
    }

    .columna,
    .columna-compu {
        margin: 5px;
        width: 40%;
        margin: auto;
    }

    .btn_registro {
        text-wrap: nowrap;
        width: 55%;
        background-color: var(--violeta-oscuro);
        color: white;
        border-radius: 10px;
    }

    .btn_registro:last-child {
        background-color: rgb(207, 204, 204);
        color: var(--violeta-oscuro);
    }

    .icono {
        width: auto;

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

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

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

    .filtros:last-child {
        border: none;
    }

    .opc_RolyState {
        text-align: start;
    }
}

main.compras_cliente {
    .container_productos {
        gap: 15px;
        width: 100%;
    }
    .flex-justify{
        align-items: center;
    }
}

.filtro_compra {
    background: none;
    border: none;
}

.bloquear_contenedor {
    display: block;
}

.contenedor-cart {
    background-color: white;
    height: 100%;
    width: 45%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
}

.factura,
.container_desc_producto {
    display: flex;
    flex: 0 0 400px;
    background-color: #006b21;
    padding: 10px;
}

.resumen,
.container_desc_producto {
    display: flex;
    flex: 0 0 300px;
    background-color: #006b21;
    padding: 10px;
}

.columna-compu {
    display: block;
}

.container-factura {
    width: 100%;

    .content-title {
        font-size: 19px;
        display: flex;
        justify-content: center;
    }

    .content_panel {
        width: 50%;
        height: fit-content;
    }

    .panel_admin {
        height: auto;
        padding: 12px;
    }

    .content_panel:last-child {
        text-align: end;
    }

    .btn_registro {
        margin: auto;
        width: 50%;
    }
}

main.main_opiniones_usuario {
    display: flex;
    flex-direction: column;
    align-items: center;

    .flex-start {
        width: 100%;
        padding-bottom: 15px;
        justify-content: space-between;
    }

    .contenedor-cart {
        width: 30%;
    }

    .contenedor_detalles {
        width: 20%;
        border-radius: 15px;

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

    .columna-center {
        width: 30%;
        position: relative;

    }

    .info-contenedor {
        .columna {
            width: 20%;
        }
    }
}

.info-absolute {
    display: flex;
    position: absolute;
    top: 0;
}

.border-right {
    border-right: 1px solid var(--gris-claro);
}

main.main-detalles-productos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;

    .contendor-detalles-producto-admin {
        align-items: start;
        width: 100%;

        .container_desc_producto {
            align-self: center;
            justify-content: center;
            flex: 0 450px;
            height: auto;
            min-height: 320px;


        }
    }

    .d-flex-col {
        width: 80%;
        background-color: white;
        border: 1px solid var(--gris-claro);
        border-radius: 15px;
    }

    .info-contenedor {
        display: flex;
        flex: 0 0 calc(100% / 1);
        height: auto;
        width: 100%;
        cursor: auto;
        background-color: white;
        box-shadow: none;
        align-items: center;

        .contenedor-cart {
            width: 30%;
        }
    }

    .contenedor_detalles {
        background-color: white;
        height: 90%;
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--gris-claro);

        .imagen_produ {
            height: 64%;
            width: 80%;
            object-fit: cover;
        }
    }

    .contenedor_1 {
        display: flex;
        width: 65%;
        .contenedor_detalles {
            border-bottom: none
        }
    }


    .contenedor_2 {
        width: 35%;
    }


    .container_desc_producto {
        flex-direction: column;
        background-color: white;
        padding: 1em;
        border-radius: 15px;
        border: 1px solid var(--gris-claro);

        .flex {
            justify-content: end;

            .precio {
                color: var(--naranja);
            }
        }

        .columna {
            justify-content: center;
            align-items: center;

            .btn_registro {
                width: 100%;
                background-color: var(--violeta-oscuro);
                color: white;
                border-radius: 10px;
            }

            .btn_registro:last-child {
                background-color: rgb(207, 204, 204);
                color: var(--violeta-oscuro);
            }
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
    }

    .flex {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .font-title {
        font-size: 30px;
    }

    .title-desc-producto {
        padding-bottom: 15px;
    }

    .flex-start {
        height: 20%;
        width: 100%;
    }

    .container_vendedor {
        display: flex;
        position: relative;
        height: 100%;
        width: 70%;
        justify-content: space-between;
        gap: 10px;
        background-color: white;
        padding: 2em;

        .container_productos_comprador {
            display: flex;
            height: 300px;
            width: 220px;
            border: 1px solid var(--gris-claro);
            border-radius: 12px;

            .columna {
                justify-content: start;
                align-items: center;

                .contenedor_detalles {
                    display: flex;
                    width: 90%;
                    height: 55%;
                }
            }

        }

        #slider {
            display: flex;
            scroll-behavior: smooth;
            background-color: white;
            overflow-x: hidden;
            gap: 20px;
            padding: 1em;
        }

        #next {
            position: absolute;
            top: 50%;
            right: 0;
            border: 1px solid black;
            padding: 1em;
            border-radius: 25px;
            background-color: white;
            z-index: inherit;
        }

        #prev {
            position: absolute;
            top: 50%;
            left: 18px;
            border: 1px solid black;
            padding: 1em;
            border-radius: 25px;
            background-color: white;
            z-index: inherit;
        }
    }

    .container_productos_comprador:hover {
        box-shadow: 5px 5px 5px -5px var(--gris-claro);
    }

    .detalles-producto {
        height: auto;
        width: 100%;
        padding: 1em;
    }

    .opinion_usuario {
        flex-direction: column;
        width: 100%;
        height: fit-content;
    }

    .calificacion_producto {
        width: 40%;
    }

    #contenedor_opinion {
        width: 100%;
    }

    #contenedor_opinion_popup {
        width: 100%;
    }

    .contenedor_opinion {
        display: flex;
        width: 100%;
        background-color: white;
    }

    .flex {
        padding: 1em;
        justify-content: space-evenly;
        align-items: center;
    }

    .select_opc {
        background-color: rgba(73, 66, 206, .15);
        margin-right: 15px;
        color: var(--violeta-oscuro);
    }

    .comentario {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 1em;

        .fila {
            gap: 5px;
            font-size: 12px;
            justify-content: flex-end;
        }
    }

    #popupComentario {
        padding: 1em;
        cursor: pointer;
    }

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

    .modal-comentario {
        display: flex;
        background-color: white;
        margin: 15% auto;
        border: 1px solid #888;
        width: 75%;
        height: 70%;
        overflow-y: auto;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        overflow-x: hidden;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;

    }

    .close:hover,
    .close:focus {
        color: black;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1em;
}

.contenedor_select {
    display: flex;
    padding: 1em;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.contenedor_select_popUp {
    display: flex;
    padding: 1em;
    justify-content: space-evenly;
    align-items: center;
    width: 70%;
}

.m4em {
    margin-left: 4em;
}

.title-desc-producto {
    font-size: 24px;
    font-weight: 500;
    text-transform: capitalize;
}

.contenedor_medios_pago {
    background-color: white;
    width: 30%;
    position: sticky;
    top: 0px;
    border: 1px solid var(--gris-claro);
    border-radius: 15px;

    .medios_pago {
        display: flex;
        flex-direction: column;
        padding: 1em;
    }

    .round-image {
        height: 60px;
        width: 60px;
        object-fit: contain;
    }

    .imagenes_tarjetas {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
}

.contendor-detalles-producto-admin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 81%;
}

main.perfil_usuario {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

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

    .contenedor-general-perfil {
        display: flex;
        flex-direction: row;
        flex: 0 1 450px;
        width: 95%;
        align-items: center;
        justify-content: center;

        .contenedor-der-perfil {
            flex-direction: column;
            height: 100%;
            width: 30%;
            background-color: white;
            border-radius: 15px;
            margin-right: 25px;

            .contenedor_detalles {
                height: 30%;
                display: flex;
                width: 100%;
                justify-content: center;
            }

            .columna {
                padding: 1em;
                height: 40%;

                .font-subtitle {
                    font-size: 18px;
                }

                p {
                    margin-top: 15px;
                }

                .btn_registro {
                    text-align: center;
                }

            }
        }
        .contenedor-izq-perfil {
            padding: 1em;
            border-radius: 15px;
            height: 100%;
            width: 70%;
            background-color: white;

            .info_extra_usuario {
                display: flex;
                width: 100%;
                height: 100px;
                cursor: pointer;
                border-bottom: 1px solid var(--gris-oscuro);

                .iconos_usuario {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 5%;

                    i {
                        padding: 10px;
                        border-radius: 50%;
                        border: 1px solid var(--gris-oscuro);
                        font-size: 25px;
                        color: var(--gris-oscuro);
                    }
                }

                .contenedor_info_extra_usuario {
                    padding: 1em;
                    width: 90%;
                    align-items: start;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                }

                .icono_modificar {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 5%;
                    height: 100%;

                    i {
                        font-size: 25px;
                    }
                }
            }

        }
    }
    .popupEliminarCuenta {
        display: none;
        position: fixed;
        right: 50px;
        top: 7%;
        width: 200px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-center {
        a {
            width: 50%;
        }
    }
}

.ver_tarjeta_usuario {
    display: flex;
    flex-direction: column;
    align-items: center;

    .contenedor-general-perfil {
        display: flex;
        flex-direction: column;
        width: 100%;

        .contenedor-tarjeta-perfil {
            display: flex;
            background-color: white;
            height: 140px;
            width: 100%;
            border-bottom: 1px solid var(--gris-oscuro);

            .contenedor_detalles {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20%;

                .round-image {
                    height: 100px;
                    width: 100px;
                    object-fit: contain;
                    border: 1px solid var(--gris-claro);
                    border-radius: 50%;
                }
            }

            .contenedor_info_extra_usuario {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                width: 70%;
            }

            .eliminar_tarjeta {
                display: flex;
                align-items: center;
                justify-content: start;
                width: 10%;
            }
        }

        .contenedor-tarjeta-perfil:last-child {
            border-radius: 0 0 15px 15px;
        }

        .contenedor-tarjeta-perfil:first-child {
            border-radius: 15px 15px 25px 2px;
        }
    }

}

.modal-perfil {
    display: none;
    position: fixed;
    right: 50px;
    top: 7%;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content-perfil {
    background-color: white;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.title-name{
    height: 40%;
}

.productos-contenido{
    height: 60%;
}
.main-productos {
    display: flex;
    padding-bottom: 15px;
    flex-direction: column;


    .info-contenedor {
        flex: 0 0 calc(100%/5 - 15px - 0.5em);
        border-radius: 15px 15px 10px 10px;
        cursor: pointer;
        background-color: rgb(207, 204, 204);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 350px;

        .btn_registro {
            width: 70%;
            background-color: var(--violeta-oscuro);
            color: white;
            border-radius: 1px;
        }

        .stock {
            font-weight: 700;
            color: rgb(62, 145, 62);
            padding-left: 5px;
        }

        .contenedor_produ {
            height: 40%;

            .imagen_produ {
                position: relative;
                width: 100%;
                border-radius: 15px 15px 5px 5px;
                object-fit: cover;
            }
        }

        .contenedor_info {
            height: 40%;
            width: 100%;
            flex: 1;
        }


        .p10 {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-align: left;
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flex {
            width: 100%;
        }

        h4:last-child {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-align: left;
            font-size: 25px;
            font-weight: 700;
        }

        h4.letra-negra.font-title.p10 {
            text-overflow: ellipsis;
        }
    }


    .precio {
        padding: 2px;
    }


}

.icon-absolute-abajo {
    color: var(--naranja);
    display: flex;
    position: relative;
    padding-left: 15px;
    width: 100%;
}

/* FIN DE LISTADO DE PRODUCTOS*/

/* INICIO DE PANEL ADMINISTRADOR */
main.main-panel-Admin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .titulo_productos {
        height: 30%;
        display: flex;
        height: 15%;
        width: 93%;
        background-color: var(--violeta-claro);
        justify-content: space-around;
        align-items: center;
        border-radius: 5px;
        margin: auto;
    }

    .content_panel {
        height: 100%;
        width: 50%;
        background-color: var(--violeta-claro);
        border-radius: 15px;

        .titulo_productos {
            text-transform: uppercase;
            height: 15%;
            letter-spacing: 3px;
            font-size: 20px;
        }
    }

    .content_panel:first-child {
        margin-right: 15px;
    }


}

.panel_admin {
    padding: 1em;
    height: 80%;
    width: 95%;
    display: flex;
    flex-direction: row;
    margin: auto;
}

.titulo_productos {
    text-transform: uppercase;
    height: auto;
    text-transform: math-auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*FIN DE PANAL DEL ADMINISTRADOR*/

/*INICIO DE GRAFICO*/
main.main-grafico,
main.main-buscar-archivo,
main.main-informes {
    .flex {
        width: 85%;
        justify-content: space-around;
        align-items: center;

        .titulo_productos {
            width: 50%;
            height: 100%;
            justify-content: center;
            align-items: end;
            padding-right: 30px;

        }
    }

    .contenedor_esta {
        display: flex;
        width: 50%;
        justify-content: space-between;

    }

    .info_esta {
        background-color: var(--violeta-claro);
        border: 2px solid white;
        margin-left: 15px;
        text-wrap: nowrap;
    }



    .titulo_productos {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 20%;
        justify-content: space-around;
        align-items: center;
        border-radius: 5px;

    }

    .panel_admin {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 80%;

        .titulo_produtos {
            height: 10%;
            width: 100%;
            background-color: red;
        }

    }

    .content_panel {
        display: flex;
        min-height: 500px;
        width: 85%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        background: rgba(211, 211, 211, 0.2);
        border-radius: 15px;
    }
    #donutChart{
        height: 450px;
    }

}


/*FIN DE GRAFICO*/

/* INICIO DE MOSTRAR INFORMES */

main.main-informes {
    padding: 1em;
    scrollbar-color: #f57171a2 white;

    .info-contenedor {
        display: flex;
        flex-direction: column;
        flex: 0 0 calc(100%/6 - 0.5em);
        border-radius: 15px 15px 10px 10px;
        cursor: pointer;
        height: 300px;

    }

    .container_productos {
        .info-contenedor {
            background: transparent;
            box-shadow: none;

            .titulo_productos {
                justify-content: end;
            }
        }
    }

    #pdf_render {
        overflow: hidden;
        margin: auto;
        height: fit-content;
        border-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}


/* FIN DE MOSTRAR INFORMES */

/*INICIO DE BUSCAR ARCHIVOS*/

main.main-buscar-archivo,
main.main-informes {
    .flex {
        height: 100%;
        width: 90%;
        flex-direction: column;

        .filtros {
            display: flex;
            height: 100%;
            align-items: flex-end;
            width: 100%;

            .filtros-container {
                width: 50%;
                display: flex;

                .p12L {
                    cursor: pointer;
                }
            }

            .p12R {
                border-right: 2px solid white;
            }

            .icono {
                width: 50%;
            }
        }

        .titulo_producto {
            margin: auto;

        }

        .contenedor_filtro {
            display: flex;
            width: 100%;
        }

    }

    form.flex {
        width: 100%;
        flex-direction: row;

        .form-informes {
            display: flex;
            text-wrap: nowrap;
            align-items: center;
        }

        .form-informes:last-child {
            width: 20%;
        }

        .input-date {
            border-radius: 15px;
            height: 40%;
            padding: 5px 50px 5px 50px;
            cursor: pointer;
        }

        .select_opc {
            margin: auto;
            width: 100%;
        }

    }

    .contenedor_esta {
        display: flex;
        width: 40%;
        justify-content: space-between;

    }

    .info_esta {
        background-color: var(--violeta-claro);
        border: 2px solid white;
        margin-left: 15px;
        text-wrap: nowrap;
    }

    .content-title {
        font-size: 20px;
        height: 15%;
        width: 100%;
        ;
    }

    .titulo_productos {
        height: 25%;
    }

    section.container_productos {
        .panel_admin {
            flex-direction: column;
            width: 40%;

            .content_panel {
                width: 100%;
                height: 250px;
            }
        }

        .titulo_productos {
            padding-top: 15px;
        }

    }

}

/*FIN DE BUSCAR ARCHIVOS*/

.info_esta {
    width: auto;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
}

#chart-container {
    width: 80%;
}

.titulo_produtos {
    width: 100%;
    height: 10%;
    text-align: center;
}

/* POSICIONAR DIVS EN COLUMNAS */
.Cammpo_registro {
    float: right;
    position: relative;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}
.left-icon {
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
}

.eye-icon {
    position: absolute;
    right: 40px;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
}

#togglePassword{
    cursor: pointer;
}

.flex-center {
    display: flex;
    justify-content: center;
}

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

.ocultar_contenido {
    display: none;
}


.boton_link {
    border: none;
    background-color: transparent;
}

.ver_direcciones_usuario{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .contenedor-general-direcciones{
        display: flex;
        flex-direction: column;
        flex: 1 1 550px;
        width: 90%;
        align-items: center;
        justify-content: center;
        background-color: wheat;
    } 
    .contenedor-direcciones-perfil{
        display: flex;
        background-color: white;
        height: 140px;
        width: 100%;
        border-bottom: 1px solid var(--gris-oscuro);
    }
    .contenedor-icon{
        display: flex;
        width: 20%;
        justify-content: center;
    }   
    .contenedor-direccion-info{
        display: flex;
        flex-direction: column;
        width: 80%;
        background-color: #006b21;
        justify-content: start;
        .flex-end{
            align-items: end;
            flex-direction: column;
        }
    }   

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

    .titulo_productos {
        width: 100%;
        height: auto;
        margin-bottom: 5px;
        text-align: left;
    }

    .container_productos {
        width: 67%;
        background-color: var(--gris-oscuro);
        border: 1px solid black;
        border-radius: 15px;

        h5.txt {
            font-weight: 700;
            font-size: 18px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

    }

    .linea_registro {
        background-color: rgba(211, 211, 211, 0.2);
        width: 50%;
    }
}



form.form-tarjetas,
.form-tarjetas2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 2em;

    .fila {
        width: 100%;
        text-wrap: nowrap;
    }

    .contenedor_2 {
        display: flex;
        flex-direction: column;
        width: 46%;

    }

    .nombre {
        text-transform: uppercase;
    }

    .flex {
        justify-content: space-between;
    }

    .input_trasparente {
        width: 100%;
    }
}


.error_tarjeta {
    display: none;
    position: relative;
    left: 8px;
    bottom: 24px;
    font-size: 14px;
    font-weight: 100;
    color: rgb(255, 96, 96);

}

.form-tarjetas2 {
    justify-content: center;
    align-items: center;
}

.tarjeta {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    height: 250px;
    aspect-ratio: 3 / 2;
    background-color: rgba(211, 211, 211, 0.2);
    position: relative;
    color: #fff;
    transition: .3s ease all;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    z-index: 2;

    .logo_tarjeta {
        border-radius: 5px;
        height: 30%;
        width: 25%;
        background-color: rgba(211, 211, 211, 0.4);
    }
}

.tarjeta.active {
    transform: rotateY(180deg);
}

.tarjeta>div {
    padding: 30px;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 10px 0 rgba(90, 116, 148, 0.3);
    background-color: rgba(211, 211, 211, 0.2);
}


.columna {
    display: flex;
    flex-direction: column;
}

.tarjeta .delantera {
    padding: 1em;
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 15px;
}

.delantera .logo-marca {
    text-align: right;
    min-height: 50px;
}

.delantera .logo-marca img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 80px;
}

.delantera .grupo .label {
    font-size: 16px;
    color: #7d8994;
    margin-bottom: 5px;
    margin-top: 8px;
}

.delantera .grupo .numero,
.delantera .grupo .nombre,
.delantera .grupo .expiracion {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px;
    text-overflow: ellipsis;
}

.delantera .flex {
    justify-content: space-between;
}


.container_tarjetas {
    display: flex;
    width: 100%;
    height: 85%;
}

.trasera {
    background-size: cover;
    position: absolute;
    top: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.trasera .barra-magnetica {
    height: 40px;
    background: #000;
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
}

.trasera .datos {
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;

}

.trasera .datos p {
    margin-bottom: 5px;
}

.flex-compu {
    display: flex;
    width: 85%;
}

.trasera .datos #cvv {
    width: 20%;
}

.trasera .datos #cvv .cvv {
    background-color: rgba(211, 211, 211, 0.9);
    height: 40px;
    color: #000;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
}


/* CONTENEDOR DE PRODUCTOS Y EMPLEADOS */

.container_productos {
    display: flex;
    position: relative;
    gap: 30px;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1em;
    height: unset;
}

/* 
.info-contenedor {
    text-align: center;
    position: relative;
    width: 100%;
    padding: 15px;
    background: rgba(211, 211, 211, 0.2);
    border-radius: 20px;
    cursor: pointer;
} */

.info-contenedor {
    flex: 0 0 calc(90%/6 - 15px - 0.5em);
    border-radius: 15px 15px 10px 10px;
    cursor: pointer;
    background-color: rgb(207, 204, 204);
    box-shadow: 5px 5px 5px -5px var(--gris-claro);
}

.contenedor_produ {
    margin: auto;
    width: 100%;

    .imagen_produ {
        position: relative;
        width: 80%;
        border-radius: 50%;
    }
}


/*FIN DE TITULOS Y FUENTES*/


@media (max-width: 1100px) {

    header {
        .logo {
            display: flex;
            width: 30%;
            height: 80px;
        }

        .icono {
            width: 100%;
            justify-content: flex-start;
        }
    }

    .main-login {
        .logo {
            top: 35px;
            left: 15px;
            height: 120px;
            width: 150px;
        }

        .contenedor-login {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 65%;
            height: 100%;

            .login {
                width: 50%;
                padding: 30px;

            }
        }

        .imagen_login {
            height: 50%;
        }
    }

    .main-grafico {

        .flex {
            .contenedor_esta {

                width: 80%;
            }

            .titulo_producto {
                width: 20%;
            }
        }
    }

    .main-productos {
        .info-contenedor {
            flex: 0 0 calc(90%/3 - 15px - 0.5em);
        }
    }

    .main-tarjetas {
        .container_productos {
            width: 80%;
        }

        .tarjeta {
            height: 200px;
        }

        .form-tarjetas2 {
            padding: 0%;
        }
    }

    main.main-detalles-productos {
        .d-flex-col {
            width: 95%;
        }

        .modal-comentario {
            padding: 1em;
            width: 100%;
            height: 70%;
        }
    }
}

/* Tablets grandes y pantallas medianas (hasta 992px) */
@media (max-width: 992px) {
    header {
        .logo {
            display: flex;
            width: 30%;
            height: 80px;
        }

        .icono {
            width: 100%;
            justify-content: flex-start;
        }

        nav {
            position: absolute;
            display: block;
            right: 0;
            width: 35%;
            z-index: 100;

            #menuIcon {
                display: block;
                position: absolute;
                right: 15px;
                top: -10px;
                cursor: pointer;
            }

            ul {
                display: none;
                position: absolute;
                width: 80%;
                height: calc(100vh - 96px);
                top: 60px;
                right: -100%;
                background-color: var(--violeta-oscuro);
            }

            ul li {
                margin-top: 20px;
                margin-left: 20px;
                width: 80%;
                height: 40px;
                position: relative;
                justify-content: start;
                align-items: center;
            }

            .mostrar {
                display: block;
                top: 20px;
            }
        }
    }

    .main-login {
        .contenedor-login {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 85%;
            height: 100%;

            .login {
                width: 50%;
                padding: 30px;

            }
        }

        .imagen_login {
            height: 50%;
        }
    }

    .main-carrito {
        .factura {
            display: flex;
            flex: 0 0 300px;
            padding: 1em;
        }

        .container_productos {
            .info-contenedor {
                height: 150px;
            }
        }

        .contenedor-cart {
            width: 60%;
        }
    }

    main.compras_cliente {
        .btn_registro {
            width: 100%;
        }
    }


}

/* Tablets pequeñas y celulares grandes (hasta 768px) */
@media (max-width: 768px) {
    header {
        .logo {
            display: flex;
            width: 40%;
            height: 80px;
        }

        .icono {
            width: 60%;
        }

        nav {
            position: absolute;
            display: block;
            right: 0;
            width: 35%;
            z-index: 1;

            #menuIcon {
                display: block;
                position: absolute;
                right: 15px;
                top: -10px;
                cursor: pointer;
            }

            ul {
                display: none;
                position: absolute;
                width: 80%;
                height: calc(100vh - 96px);
                top: 60px;
                right: -100%;
                background-color: var(--violeta-claro);
            }

            ul li {
                margin-top: 20px;
                margin-left: 20px;
                width: 80%;
                height: 40px;
                position: relative;
                justify-content: start;
                align-items: center;
            }

            .mostrar {
                display: block;
                top: 30px;
            }
        }
    }

    main {
        min-height: 96vh;
    }

    .main-productos {
        h3 {
            font-size: 35px;
        }

        h4 {
            font-size: 24px;
        }

        .info-contenedor {
            flex: 0 0 calc(90%/2 - 15px - 1em);
            border-radius: 15px 15px 10px 10px;
            cursor: pointer;
            background-color: rgb(207, 204, 204);
            box-shadow: 5px 5px 5px -5px var(--gris-claro);

        }

        padding: 2em;
    }

    .titulo_productos {
        text-wrap: nowrap;
    }


    main.main-grafico {
        background-color: #006b21;

        .contenedor_esta {
            width: 90%;
        }

        .titulo_producto {
            width: 10%;
        }

        .flex {
            width: 95%;
        }

        .info_esta {
            padding: 8px;
        }
    }


    .main-empleado {
        .agrandar {
            width: 90%;
        }
    }

    main.main-panel-Admin {
        padding: 0%;

        .titulo_productos {
            display: flex;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 5px;
        }

        .panel_admin {
            flex-direction: column;
            width: 100%;

            .content_panel {
                width: 99%;
                margin-bottom: 15px;
            }
        }

    }


    .derechos_autores {
        z-index: 1;
    }

    .hide_mobile {
        display: none;
    }

    .show_derechos {
        display: block;
    }

    .main-login {
        h5 {
            font-size: 16px;
        }

        h3 {
            font-size: 30px;
        }

        .contenedor-login {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 90%;
            height: 80%;

            .login {
                width: 50%;
                padding: 30px;

            }
        }
    }

    .main-carrito {
        .factura {
            display: flex;
            position: fixed;
            bottom: 40px;
            width: 100%;
            left: 0;
            background-color: #006b21;
            z-index: 10;
        }

        .container_productos {
            height: 480px;
            position: relative;
            overflow: auto;

            .info-contenedor {
                height: 150px;
            }
        }
    }

    main {
        height: auto;
    }

    .derechos_autores {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .main-carrito {
        .container_productos {
            .info-contenedor {
                height: 150px;
            }
        }
    }

    .show_derechos {
        bottom: 0;
        left: 0;
    }

    .main-tarjetas {
        .flex {
            flex-direction: column;
        }

        .container_productos {
            width: 100%;
            padding: 10px;
        }

        form.form-tarjetas {
            display: flex;
            padding: 1em;
            width: 50%;

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

        form.form-tarjetas,
        .form-tarjetas2 {
            .flex {
                flex-direction: row;
                justify-content: space-between;
            }
        }

        .contenedor_2 {
            .fila {
                font-size: 13px;
            }
        }
    }

    main {
        padding-top: 10%;
        padding-left: 0%;
        padding-right: 0%;
    }

    main.compras_cliente {
        .contenedor_detalles {
            width: 30%;
        }
        .container_productos {
            width: 100%;
            padding: 0.5em;
        }
        .columna-compu {
            display: flex;
            flex-direction: column;
            align-items: end;
            padding-right: 10px;

            .btn_registro {
                width: 80%;
                font-size: 12px;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        .flex{
            .flex-justify{
                flex-direction: column;
            }
        }

        .flex-start {
            flex-direction: column;
        }
    }

    main.main_estado_compra {

        .detalles_compra,
        .contenedor_estado {
            width: 90%;
        }
    }

    .contenedor_informacion_compra {
        width: 90%;
    }

    main.main_opiniones_usuario {

        .container_productos {
            width: 100%;
            padding: 5px;
        }

    }

    main.main-detalles-productos {
        .container_desc_producto{
            .columna{
                .btn_registro{
                    width: 50%;
                }
            }
        }
        .info-contenedor {
            flex-direction: column;
        }
        .contenedor_1,
        .contenedor_2 {
            width: 100%;
            height: auto;
            min-height: 350px;
        }

        .contenedor_1 {
            .contenedor_detalles {
                width: 100%;

                .imagen_produ {
                    width: 85%;
                }
            }
        }

        .detalles-producto {
            border-bottom: 1px solid var(--gris-claro);
        }

        .container_vendedor {
            border-bottom: 1px solid var(--gris-claro);
            width: 100%;
        }

        .contenedor_opinion {
            display: flex;
            flex-direction: column;
        }

        .contendor-detalles-producto-admin {
            flex-direction: column;

            .container_desc_producto {
                width: 100%;
                border-left: none;
                border-right: none;
                border-radius: 0%;
            }
        }

        .contenedor_select {
            width: 90%;
        }

        .contenedor_medios_pago {
            width: 100%;
            border: none;
        }

        .bloquear_contenedor {
            display: none;
        }
    }

    .ver_tarjeta_usuario {
        .contenedor-general-perfil {
            .contenedor-tarjeta-perfil {
                .contenedor_info_extra_usuario {
                    width: 70%;
                }

                .contenedor_detalles {
                    width: 20%;

                    .round-image {
                        height: 90px;
                        width: 90px;
                    }
                }
            }
        }
    }
    main.perfil_usuario {
        .contenedor-general-perfil {
            
            .contenedor-der-perfil {
                width: 40%;
                margin-right: 5px;
            }
        }
    }
}

/* Celulares grandes (hasta 576px) */

@media (max-width: 576px) {
    header {
        .logo {
            display: flex;
            width: 40%;
            height: 80px;
        }

        .icono {
            width: 70%;
            justify-content: flex-start;
        }

        nav {
            position: absolute;
            display: block;
            right: 0;
            width: 35%;
            z-index: 1;

            #menuIcon {
                display: block;
                position: absolute;
                right: 15px;
                top: -10px;
                cursor: pointer;
            }

            ul {
                display: none;
                position: absolute;
                width: 100%;
                height: calc(100vh - 96px);
                top: 60px;
                right: -100%;
                background-color: var(--violeta-claro);
            }

            ul li {
                margin-top: 20px;
                margin-left: 20px;
                width: 200%;
                height: 40px;
                position: relative;
                justify-content: start;
                align-items: center;
            }

            .mostrar {
                display: block;
                top: 30px;
            }
        }
    }


    .main-productos {
        h3 {
            font-size: 30px;
        }

        h4 {
            font-size: 18px;
        }

        .info-contenedor {
            flex: 0 0 calc(90%/2 - 15px - 0.5em);
            border-radius: 15px 15px 10px 10px;
            cursor: pointer;
            background-color: rgb(207, 204, 204);
            box-shadow: 5px 5px 5px -5px var(--gris-claro);

        }

        section.container_productos {
            padding: 0%;
        }
    }

    main.main-grafico {
        .flex {
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;

            .contenedor_esta {
                width: 100%;
            }

            .titulo_producto {
                width: 10%;
            }
        }

        .content_panel {
            height: 65%;
            width: 100%;
        }

        .info_esta {
            margin-left: 5px;
        }
    }

    main.main_opiniones_usuario {
        .bloquear_contenedor {
            display: none;
        }

        .info-contenedor {
            flex: 0 0 calc(100% / 1);
            height: 130px;
        }

        .contenedor_detalles {
            width: 40%;
        }

        .contenedor-cart {
            width: 60%;
        }

        .font-20 {
            font-size: 14px;
        }

    }

    .main-empleado {
        .agrandar {
            display: flex;
            flex-direction: column;
            width: 90%;

            .Cammpo_registro {
                width: 100%;

                .alineacion_izq {
                    text-align: center;
                }
            }

            .btn_registro {
                width: 100%;
            }

            .Cammpo_btn {
                width: 260px;
            }
        }
    }

    .main-login {
        h5 {
            font-size: 16px;
        }

        h3 {
            font-size: 30px;
        }

        .contenedor-login {
            width: 85%;
            height: 75%;

            .login {
                margin: auto;
                width: 70%;
                padding: 30px;

            }
        }
    }

    .imagen_login {
        display: none;
    }

    .main-tarjetas {
        .flex {
            flex-direction: column;

        }

        .tarjeta {
            display: none;
        }

        .container_productos {
            width: 100%;
        }

        form.form-tarjetas {
            display: flex;
            width: 100%;

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

        form.form-tarjetas,
        .form-tarjetas2 {
            .flex {
                flex-direction: row;
                justify-content: space-between;
            }
        }

        .form-tarjetas2 {
            display: none;
        }
    }

    main {
        padding-top: 20%;
        padding-left: 0%;
        padding-right: 0%;
    }

    main.main-carrito {
        .columna-compu {
            display: none;
        }
    }

    main.compras_cliente {
        .icono {
            margin-bottom: 5px;
        }

        .movile-compras {
            padding: 1em;
            align-items: center;
            justify-content: space-around;
        }

        .columna {
            .btn_registro {
                font-size: 12px;
            }
        }

        .columna-compu {
            display: none;
        }

        .contenedor-cart {
            width: 62%;
        }

        .contenedor_detalles {
            width: 35%;
        }

        .info-contenedor {
            height: 140px;
        }
        .card {
            height: 350px;
            width: 450px;
            flex: 0 0 calc(100% / 1 - 5px);
        }
    
    }

    main.main_estado_compra {
        .detalles_compra {
            height: 130px;
        }

        .contenedor_detalles {
            .round-image {
                height: 85px;
                width: 85px;
            }
        }
    }

    main.main-detalles-productos {
        .contenedor_select,.contenedor_select_popUp {
            width: 100%;
        }

        .d-flex-col {
            width: 100%;
            border-radius: 0%;
        }

        .modal {
            padding: 0%;
        }

        .modal-comentario {
            height: 96%;
            width: 100%;
            margin: 0%;
            border-radius: 0%;
        }
    }

    .ver_tarjeta_usuario {
        .contenedor-general-perfil {
            width: 100%;
            .contenedor-tarjeta-perfil {
                .contenedor_info_extra_usuario {
                    width: 50%;
                }
            }
        }
    }
    main.perfil_usuario {

        .contenedor-general-perfil {
            .contenedor-der-perfil {
                flex-direction: column;
                height: 100%;
                width: 90%;
                background-color: white;
                border-radius: 15px;
                .contenedor_detalles {
                    height: 30%;
                    display: flex;
                    width: 100%;
                    justify-content: center;
                }
            }
        }
        .bloquear_contenedor{
            display: none;
        }
        .ocultar_contenido{
            display: block;
        }
        .btn_registro:last-child{
            background-color: rgba(243,46,46,10);
        }
    }
}


/* Celulares medianos (hasta 480px) */
@media (max-width: 480px) {
    header {
        .logo {
            display: none;
        }

        .icono {
            width: 65%;
            align-items: flex-start;
            justify-content: flex-start;
        }

        nav {
            position: absolute;
            display: block;
            right: 0;
            width: 35%;
            z-index: 1;

            #menuIcon {
                display: block;
                position: absolute;
                right: 15px;
                top: -10px;
                cursor: pointer;
            }

            ul {
                display: none;
                position: absolute;
                width: 100%;
                height: calc(100vh - 96px);
                top: 60px;
                right: -100%;
                background-color: var(--violeta-claro);
            }

            ul li {
                margin-top: 20px;
                margin-left: 20px;
                width: 100%;
                height: 40px;
                position: relative;
                justify-content: start;
                align-items: center;
            }

            .mostrar {
                width: 150%;
                display: block;
                top: 30px;
            }
        }
    }

    main.main-grafico {
        .flex {
            width: 100%;

            .titulo_productos {
                height: 50%;
            }

            .contenedor_esta {
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: space-around;
            }

            .titulo_producto {
                width: 10%;
            }
        }

        .content_panel {
            height: 65%;
            width: 100%;
        }

        .info_esta {
            margin-bottom: 15px;
        }
    }

    .main-login {
        .logo {
            display: flex;
            width: 90%;
            justify-content: center;
        }

        h5 {
            font-size: 16px;
        }

        h3 {
            font-size: 30px;
        }

        .contenedor-login {
            display: flex;
            justify-content: start;
            align-items: center;
            width: 95%;
            height: 80%;

            .login {
                margin: auto;
                width: 90%;
                padding: 30px;

            }
        }
    }

    .main-productos {
        h3 {
            font-size: 27px;
        }

        .info-contenedor {
            flex: 0 0 calc(90%/1 - 15px - 1em);
            border-radius: 15px 15px 10px 10px;
            cursor: pointer;
            background-color: rgb(207, 204, 204);
            box-shadow: 5px 5px 5px -5px var(--gris-claro);


        }

        section.container_productos {
            padding: 1em;
        }
    }

    main.main-panel-Admin {
        .content_panel {
            .titulo_productos {
                font-size: 12px;
            }
        }

        .info_esta {
            font-size: 16px;
        }

    }

    main.main-carrito {
        .contenedor-cart {
            padding: 1em;
            width: 100%;
        }

        .contenedor_detalles {
            width: 35%;
        }

        .btn_cart {
            font-size: 15px;

            #cantidad {
                font-size: 12px;
                padding-top: 5px;
                padding-bottom: 5px;

            }

            #restar {
                padding: 5px 10px 5px 10px;
            }

            #sumar {
                padding: 5px 10px 5px 10px;

            }

        }

        .container_productos {
            gap: 5px;
            padding: 0%;

            .info-contenedor {
                height: 130px;
            }
        }

        .btn_cart:last-child {
            button {
                i {
                    font-size: 20px;
                }
            }

        }

        .flex-compu {
            padding: 0.5em;
            flex-direction: column;
        }
    }

    .container-factura {
        .panel_admin {
            padding: 5px;
        }

        .btn_registro {
            font-size: 12px;
        }
    }

    main.main_estado_compra {

        .detalles_compra {
            height: 120px;

            .contenedor-cart {
                width: 75%;
            }
        }

        .detalles_compra,
        .contenedor_estado {
            width: 96%;
        }
    }

    .contenedor_informacion_compra {
        width: 96%;
    }

    main.main-detalles-productos {
        .contenedor_1 {
            display: flex;
            flex-direction: column;

            .contenedor_detalles {
                flex: 1;

                .imagen_produ {
                    width: 100%;
                }
            }
        }
        .container_desc_producto{
            .columna{
                .btn_registro{
                    width: 70%;
                }
            }
        }
    }
    main.compras_cliente{
        .filtros{
            flex-direction: column;
            width: 100%;
            margin: 5px;
        }
        .btn{
            width: 50%;
            margin-top: 25px;
        }
        .flex{
            margin-top: 5px;
        }
        .container_productos{
            .flex-justify{
                flex-direction: row;
            }
        }
        .flex-justify{
            flex-direction: column;
        }
        .agregarEmpleado{
            margin:25px
        }
    }
    .ver_tarjeta_usuario {
        .contenedor-general-perfil {
            .contenedor-tarjeta-perfil {
                .contenedor_info_extra_usuario {
                    font-size: 12px;
                }
            }
        }
    }
    main.perfil_usuario {

        .contenedor-general-perfil {
            width: 100%;
            .contenedor-der-perfil{
                width: 100%;
            }
        }
    }

}



/* Estilos específicos para celulares pequeños */
@media (max-width: 320px) {
    main {
        padding-top: 15%;
    }

    header {
        .logo {
            display: none;
        }

        .icono {
            display: flex;
            position: relative;
            width: 80%;
            height: 30px;
            line-height: 25px;
            justify-content: start;

            .buscador {
                width: 200px;
            }
        }

        nav {
            position: absolute;
            display: block;
            right: 0;
            width: 50%;
            z-index: 1;

            #menuIcon {
                display: block;
                position: absolute;
                right: 15px;
                top: -10px;
                cursor: pointer;
            }

            ul {
                display: none;
                position: absolute;
                width: 80%;
                height: calc(90vh - 7%);
                top: 60px;
                right: -100%;
                background-color: var(--violeta-claro);
            }

            ul li {
                margin-top: 20px;
                margin-left: 50px;
                width: 50%;
                height: 40px;
                position: relative;
                justify-content: flex-start;
                align-items: center;
            }

            .mostrar {
                display: inline-block;
                top: 26px;
                width: 200%;
            }
        }
    }

    .main-productos {
        h3 {
            font-size: 25px;
        }

        .info-contenedor {
            flex: 0 0 calc(90%/1 - 15px - 0.5em);
            border-radius: 15px 15px 10px 10px;
            cursor: pointer;
            background-color: rgb(207, 204, 204);
            box-shadow: 5px 5px 5px -5px var(--gris-claro);


        }

        section.container_productos {
            padding: 0%;
        }
    }

    .main-empleado {
        .agrandar {
            display: flex;
            flex-direction: column;
            width: 90%;

            .Cammpo_registro {
                width: 100%;

                .alineacion_izq {
                    text-align: center;
                }
            }

            .btn_registro {
                width: 100%;
            }

            .Cammpo_btn {
                width: 260px;
            }
        }
    }

    main.main-grafico {
        padding: 0%;

        .titulo_productos {
            font-size: 20px;
            height: 30%;
        }

        .info_esta {
            font-size: 12px;
            margin-bottom: 15px;
        }

        .panel_admin {
            height: 70%;
        }
    }

    .hide_mobile {
        display: none;
    }

    .main-login {

        .contenedor-login {
            width: 100%;
            height: 75%;

            .login {
                width: 100%;
                padding: 30px;

            }
        }
    }

    main.main-panel-Admin {
        .panel_admin {
            padding: 0%;
        }

        .titulo_productos {
            padding: 0%;
        }

        .info_esta {
            font-size: 13px;
        }

        i {
            display: none;
        }

        .content_panel {
            .titulo_productos {
                font-size: 15px;
            }
        }
    }


    main {
        padding-top: 25%;
    }

    main.main-carrito {
        padding-right: 0%;
        padding-left: 0%;

        .contenedor_detalles {
            .imagen_produ {
                height: 60%;
            }
        }

        .btn_cart {
            width: 20%;
        }

        .info-contenedor {
            height: 120px;
            flex: 0 0 calc(100% / 1 - 5px);
        }
    }

    .container-factura {
        .panel_admin {
            width: 100%;
            padding-top: 5px;
        }
    }

    
    main.compras_cliente {
        .container_productos {
            padding: 0em;
        }

        .info-contenedor {
            height: 120px;
            flex: 0 0 calc(100% / 1);
        }
        .font-12{
            font-size: 11px;
        }


    }

    main.main_estado_compra {

        .detalles_compra,
        .contenedor_estado {
            width: 100%;
        }

    }

    .contenedor_informacion_compra {
        width: 100%;
    }

    main.main_opiniones_usuario {
        .font-9 {
            font-size: 10px;
        }

    }

    .ver_tarjeta_usuario {
        .contenedor-general-perfil {
            .contenedor-tarjeta-perfil {
                .contenedor_detalles {
                    width: 20%;
                    .round-image {
                        height: 75px;
                        width: 75px;
                    }
                }
            }
        }
    }
}

.modal-center {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.mostrar {
    right: 0;
}

.flex-start {
    display: flex;
    justify-content: start;
}

.me-0 {
    margin-right: 0;
}

.ml-8 {
    margin-left: 2em;
}

.ml-2 {
    margin-left: .5em;
}

.mt-2 {
    margin-top: 2em;
}

.p12R {
    padding-right: 12px;
}

.p12L {
    padding-left: 12px;
}

.p12T {
    padding-top: 12px;
}

.p10T {
    padding-top: 10px;
}

.m12t {
    margin-top: 12px;
}

.p12B {
    padding-bottom: 12px;
}

.m12b {
    margin-bottom: 12px;
}

.m20t {
    margin-top: 20px;
}

.font-17 {
    font-size: 17px;
    font-weight: 400px;
}

.font-9 {
    font-size: 12px;
}

.font-12 {
    font-size: 15px;
}

.p10 {
    padding: 10px;
}

.txt-center {
    text-align: center;
}

.m10r {
    margin-right: 10px;
}

.txt_mayus {
    text-transform: uppercase;
}

.border-bottom {
    border-bottom: 1px solid var(--gris-claro);
}

.border-der {
    border-right: 1px solid var(--gris-claro);
}

.round-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.flex {
    display: flex;
    justify-content: start;
}

.fila {
    position: relative;
}

/* TITULOS Y FUENTES */
.font-title,
.font-subtitle {
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.font-subtitle {
    font-size: 18px;
}

.font-comentario {
    font-size: 15px;
    font-weight: 400;
}

.font-20 {
    font-size: 20px;
    font-weight: 400;
}

.font-price{
    font-weight: bold;
    font-size: 22px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.mb4 {
    position: absolute !important;
    bottom: -17px;
}

.pa {
    position: absolute !important;
}

.r0 {
    right: 0;
}

.titulo_importante {
    font-size: 40px;
}

.columna-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pimba {
    width: 230px !important;
}

.naranja {
    background-color: var(--naranja);
    width: 100%;
}

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

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

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

.celeste {
    background-color: var(--celeste);
}

.font-25 {
    font-size: 25px;
}

.active_opinion {
    padding-left: 2px;
    padding-bottom: 13px;
    border-bottom: 3px solid var(--violeta-oscuro);
    z-index: 1;
}

.producto_inactivo {
    /* background-color: rgba(187, 187, 187, 0.836); */
    background-color: red;
    user-select: none;
    color: gray;
}


.flex-end {
    display: flex;
    justify-content: end;
}


.card,
.card_productos_admin {
    display: flex;
    flex-direction: column;
    height: 330px;
    border-radius: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 400px;
    flex: 0 0 calc(100%/5);
    box-shadow: 5px 5px 5px -5px var(--gris-claro);
    cursor: pointer;
}

.card {
    height: 350px;
    width: 500px;
    flex: 0 0 calc(100%/3 - 5px);
}


.card_productos_admin {
    height: 450px;
    width: 350px;
    flex: 0 0 calc(100%/4 - 5px - 0.5em);
}

.card:hover {
    transform: scale(1.1);
    box-shadow: 5px 5px 5px -5px var(--violeta-claro);
}

.card-header,
.card-header-productos-admin {
    background-color: var(--gris-claro);
    border-radius: 10px 10px 0 0;
    padding: 15px 0px 15px 12px;
}

.card-header-productos-admin {
    background-color: white;
}

.card-body {
    padding: 1em;
    background-color: white;

    li {
        list-style: disc;
    }

    a {
        border: 1px solid black;
        border-radius: 15px;
        padding: 8px 25px 8px 25px;
    }

    a:hover {
        background-color: black;
        color: white;
    }
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    height: 100%;
    background-color: var(--gris-claro);
    border-radius: 0 0 10px 10px;
    padding: 10px;

    .btn {
        cursor: pointer;
        padding: 10px 12px 10px 12px;
        border-radius: 10px;
        color: var(--violeta-oscuro);
        background-color: white;
        border: none;
        transition: none;
    }

    .btn:hover {
        color: white;
        background-color: var(--violeta-claro);
    }
}

.card-footer-productos-admin {
    background-color: white;
    border-top: 1px solid var(--gris-claro);
    border-radius: 0 0 10px 10px;
    .btn {
        cursor: pointer;
        border-radius: 10px;
        background-color: white;
        border: none;
        transition: none;
        border: 1px solid var(--gris-claro);
    }
    button{
        margin-left: 5px;
    }

    .btn:hover{
        .letra-roja,.letra-naranja,.letra-gris{
            color: white;
        }
    }
    .btn:hover:nth-child(1) {
        background-color: var(--btn-rojo);
    }
    .btn:hover:nth-child(2) {
        background-color: var(--naranja);
    }
    .btn:hover:nth-child(3) {
        background-color: var(--gris-claro);
    }
    #habilitar{
        padding: 15px;
    }
}

.btn {
    cursor: pointer;
    padding: 10px 25px 10px 25px;
    border-radius: 10px;
    color: white;
    background-color: var(--violeta-oscuro);
    border: none;
}

.font-resgistro{
    font-family: 'emoji';
    font-weight: 400;
    font-size: 18px
}

.flex-end-contenido{
    display: flex;
    align-items: end;
}