:root {
    /*COLORES USUARIOS*/
    --mustard: #f7a81b;
    --mustard-shadow: #946410;
    --dark-mustard: #e49c00;

    --orange: #e85829;
    --orange-shadow: #6d2a14;

    --mayonnaise: #f9d8b8;
    --mayonnaise-shadow: #d49e67;
    --dark-mayonnaise: #f8c18a;
    --darker-mayonnaise: #e6bc92;

    --dark-blue: #101923;

    --max-width-hf: 1500px;

    /*COLORES ADMINISTRACION*/
    --azul-cobalto: #0047AB;
    --violeta-oscuro: #4B0082;
    --verde-azulado: #0095B6;
    --gris-claro: #E0E0E0;
    --blanco: #FFFFFF;

    --sombra-azul-cobalto: #003a83;
    --sombra-violeta-oscuro: #3a0070;
    --sombra-verde-azulado: #007890;
    --sombra-gris-claro: #B0B0B0;

    --tono-claro-azul-cobalto: #4DB2FF;
    --tono-claro-violeta-oscuro: #824BFF;
    --tono-claro-verde-azulado: #66D9FF;
    --tono-claro-gris-claro: #F0F0F0;
}

* {
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

p {
    margin-bottom: 0 !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    background-color: var(--mayonnaise);
    padding: 40px 20px;
    flex-grow: 1;
}

.admin-main-header-container,
.main-header-container {
    box-shadow: 0 2px 2px var(--dark-blue);
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-header-container,
.main-footer-container {
    width: 100%;
    height: 48px;
    background-color: var(--dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-main-header-container,
.admin-main-footer-container {
    width: 100% !important;
    height: 48px;
    background-color: var(--tono-claro-verde-azulado);
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-main-header {
    width: 100%;
    height: 48px;
    max-width: var(--max-width-hf);
    background-color: var(--tono-claro-verde-azulado);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*inicio header*/
.main-header {
    width: 100%;
    height: 48px;
    max-width: var(--max-width-hf);
    background-color: var(--dark-blue);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-main-header__title {
    margin: 10px 0 !important;
}

.admin-main-header__logo,
.main-header__logo {
    height: 60%;
    margin-right: 15px;
}

.admin-main-header__logo img,
.main-header__logo img {
    width: 100%;
    height: 100%;
}

.admin-main-header nav,
.main-header nav {
    display: none;
}

.admin-main-header__burguer-menu {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background-color: var(--verde-azulado);
    color: var(--azul-cobalto);
    border-radius: 5px;
    box-shadow:
        3px 3px var(--sombra-verde-azulado),
        /* Genero un par de sombras   */
        2px 2px var(--sombra-verde-azulado),
        /* Genero un par de sombras   */
        1px 1px var(--sombra-verde-azulado);
    display: flex;
    position: relative;
    top: -1.5px;
    justify-content: center;
    cursor: pointer;
    /*alinea la imagen del burguer*/
    align-items: center;
    /*------------*/
    font-size: 26px;
    /* para crear una ilusion 3D */
    transition:
    translate 37ms ease-in,
    rotateZ 2s ease-out;
}

.main-header__burguer-menu {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background-color: var(--mustard);
    color: var(--dark-blue);
    border-radius: 5px;
    box-shadow:
        3px 3px var(--mustard-shadow),
        /* Genero un par de sombras   */
        2px 2px var(--mustard-shadow),
        /* Genero un par de sombras   */
        1px 1px var(--mustard-shadow);
    display: flex;
    position: relative;
    top: -1.5px;
    justify-content: center;
    cursor: pointer;
    /*alinea la imagen del burguer*/
    align-items: center;
    /*------------*/
    font-size: 26px;
    /* para crear una ilusion 3D */
    transition:
    translate 37ms ease-in,
    rotateZ 2s ease-out;
}

.admin-main-header__burguer-menu:active {
    background-color: #011630;
    box-shadow: none;
    position: relative;
    transform: translate(3px, 3px);
    .fa-solid, .fa-burger {
        transform: rotateZ(0.25turn);
    }
    .admin-menu {
        display: sticky;
        opacity: 1;
    }
}

.main-header__burguer-menu:active {
    background-color: #b67c00;
    box-shadow: none;
    position: relative;
    transform: translate(3px, 3px);
    .fa-solid, .fa-burger {
        transform: rotateZ(0.25turn);
    };
    .menu {
        display: sticky;
        opacity: 1;
    }
}

.admin-menu,
.menu {
    width: 100vw;
    padding: 5px 0;
    background-color: var(--dark-blue);
    color: var(--mayonnaise);
    font-size: 16px;
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 100;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
    list-style-type: none;
    gap: 5px;
    padding-right: 10px;
}

.admin-menu li a,
.menu li a {
    color: var(--mayonnaise);
    text-decoration: none;
}

.admin-menu.admin-show,
.menu.show {
    display: flex;
}


/*fin header*/

.floating-cart-button {
    width: 50px;
    height: 50px;
    background-color: var(--mustard);
    color: var(--dark-blue);
    font-size: 25px;
    line-height: 55px;
    border: solid 2px var(--dark-mustard);
    border-radius: 50px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    position: fixed;
    right: 13px;
    bottom: 60px;
    z-index: 100;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-out;
}

.floating-cart-button:hover {
    background-color: var(--dark-blue);
    color: var(--mustard);
    border: none;
    cursor: pointer;
}

/*inicio footer*/

.admin-main-footer {
    width: 100%;
    height: 48px;
    max-width: var(--max-width-hf);
    background-color: var(--tono-claro-verde-azulado);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.main-footer {
    width: 100%;
    height: 48px;
    max-width: var(--max-width-hf);
    background-color: var(--dark-blue);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.admin-main-footer__copyright {
    color: var(--azul-cobalto);
    font-size: 0.5rem;
    text-align: center;
}

.main-footer__copyright {
    color: var(--mayonnaise);
    font-size: 0.5rem;
    text-align: center;
}

.main-footer__about-us {
    color: var(--mayonnaise);
    font-size: 0.72rem;
    text-align: right;
    display: none;
}

.main-footer__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.main-footer__socials i {
    color: var(--mayonnaise);
    font-size: 15px;
    transition: color 0.3s;
}

.social-icon-ig i:hover {
    color: #c13584;
}

.social-icon-fb i:hover {
    color: #3b5998;
}

.social-icon-tw i:hover {
    color: #1da1f2;
}

.social-icon-yt i:hover {
    color: #ff0000;
}

/*fin footer*/
@media (min-width: 375px) {

    .admin-main-footer,
    .admin-main-header,
    .main-header,
    .main-footer {
        padding: 0 40px;
    }

    .floating-cart-button {
        right: 33px;
    }

    .admin-main-footer__copyright {
        font-size: 0.72rem;
        text-align: left;
    }

    .main-footer__copyright {
        font-size: 0.72rem;
        text-align: left;
    }

    .main-footer__socials i {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
    .admin-main-header__burguer-menu,
    .main-header__burguer-menu {
        display: none;
    }

    .admin-main-header nav,
    .main-header nav {
        display: flex;
        justify-content: end;
        align-items: center;
        flex-grow: 1;
        gap: 15px;
    }

    .admin-main-header nav span a{
        width: 100%;
        height: 100%;
        color: var(--azul-cobalto);
        text-decoration: none;
    }

    .main-header nav span a {
        width: 100%;
        height: 100%;
        color: var(--mustard);
        text-decoration: none;
    }

    .admin-main-header__products,
    .main-header__products {
        margin-right: 10px;
    }

    .admin-main-header nav span a:hover{
        color: white;
    }

    .main-header nav span a:hover {
        color: var(--mayonnaise);
    }

    .admin-main-header__login,
    .main-header__login {
        width: 110px;
    }

    .admin-main-header__register--admin {
        width: fit-content;
        background-color: var(--sombra-verde-azulado);
        color: white;
        padding: 6px 12px;
        border-radius: 10px;
    }

    .admin-main-header nav .admin-main-header__register a {
        width: fit-content;
        background-color: var(--blanco);
        color: var(--dark-blue);
        padding: 6px 12px;
        border-radius: 10px;
    }

    .main-header nav .main-header__register a {
        width: fit-content;
        background-color: var(--mustard);
        color: var(--dark-blue);
        padding: 6px 12px;
        border-radius: 10px;
    }

    .floating-cart-button {
        right: 60px;
    }

    .main-footer__about-us {
        display: block;
    }
}