
_PALETA_{
    color: #07182B;
    color: #BDE8F3;
    color: #1C538E;
    color: #07182B;
    color: #F03535;
    
    color: #d9d9d933;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    text-decoration: none;
    list-style: none;
    /* font-family: sans-serif; */
}
* a{
    scroll-behavior: smooth;
    text-decoration: none;
}
* button{
    cursor: pointer;
}

body{
    font-family: 'Maven Pro', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 14px;
}

.fa-solid, .fa-brands{
    color: #1C538E;
}
.fa-cart-shopping{
    color: #FFFFFF;
}
.fa-trash-can{
    color: #F03535;
}
.fa-pen-to-square{
    color: #07182B;
}

/*_______________________________________________________________*/
.header{
    background-color: #07182B;
    width: 100vw;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    z-index: 1;
}
.hdrTopCart{
    margin-right: 20px;
    position: fixed;
    right: 0;
}
.hdrTopRedes{
    display: flex;
    gap: 2vw;
}
.burger{
    position: fixed;
    /* left: 0; */
    /* top: 85px; */
    margin-left: 20px;
}
.burger-menu{
    background-color: #1C538E;
    color: white;
    display: block;
    max-width: 50px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}
.hdrBot{
    width: 100%;
}
.hdrBotLogo{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hdrLogo > a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo{
    max-width: 60%;
}
.encabezado{
    font-size: 10px;
    color: #BDE8F3;
}
.burger-links{
    display: none;    
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
    background-color: #07182B;
    height: 70vh;
    width: 75vw;
    position: fixed;
    z-index: 1;
    padding: 5px 0 10px 20px;
    font-size: 40px;
}
.burger-links > ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.burger-links > * a{
    color: #FFFFFF;
}
.home{
    font-weight: 700;
}
.catalogo-ul{
    display: flex;
    gap: 20px;
}
.catalogo-ul > ul{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.catalogo-span{
    display: inline-block;
    height: inherit;
    width: 5px;
    border-left: 1px solid #FFFFFF;
}
.catalogo-carrito{
    font-size: 30px;
}







/*_______________________________________________________________*/
main{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='390' height='1819' preserveAspectRatio='none' viewBox='0 0 390 1819'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1010%26quot%3b)' fill='none'%3e%3crect width='390' height='1819' x='0' y='0' fill='url(%23SvgjsLinearGradient1011)'%3e%3c/rect%3e%3cpath d='M-19.13 89.65 a106.21 106.21 0 1 0 212.42 0 a106.21 106.21 0 1 0 -212.42 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M86.07215709655894 1705.9692899768947L112.85387687857758 1832.560484874186 198.21905986432995 1758.353663433416z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M32.717%2c924.84C54.803%2c925.1%2c77.244%2c915.893%2c87.606%2c896.387C97.488%2c877.785%2c90.538%2c855.58%2c78.8%2c838.09C68.502%2c822.746%2c51.187%2c814.031%2c32.717%2c814.601C15.222%2c815.141%2c0.898%2c826.147%2c-8.687%2c840.792C-19.544%2c857.38%2c-28.744%2c877.338%2c-19.983%2c895.122C-10.431%2c914.512%2c11.103%2c924.586%2c32.717%2c924.84' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M93.92156333549043 243.85840839849476L88.30576174298903 351.01428619617576 195.46163954067003 356.63008778867714 201.07744113317142 249.47420999099617z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M165.9424768481186 1725.1207482102288L208.09839898692275 1669.1779500352955 152.15560081198944 1627.0220278964914 109.9996786731853 1682.9648260714248z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M101.6 650.56 a111.65 111.65 0 1 0 223.3 0 a111.65 111.65 0 1 0 -223.3 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1010'%3e%3crect width='390' height='1819' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1011'%3e%3cstop stop-color='rgba(22%2c 56%2c 90%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 59%2c 134%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}

.main-catalogo{
    margin-top: 160px;
    text-align: center;
    background-position: center;
    /* height: 100vh; */
    width: 100vw;
    min-height: 100vh;
}
.catalogo{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 50px 0;
    gap: 20px;
}
.catalogo-producto{
    background-color: #d9d9d933;
    /* max-height: 200px; */
    width: 80vw;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.catalogo > p{
    font-size: 30px;
}
.catalogo-producto > form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.admin-categorias{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.admin-categorias > select{
    width: 100%;
    border-radius: 5px;
    text-align: center;
    /* border-block-color: #d9d9d9; */
}
.admin-botones{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.admin-botones > button, .admin-botones > input  {
    background-color: #07182B;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    padding: 3px 15px;
    font-weight: 700;
}
/* .cargar{
    display: none;
} */
.admin-cargar, .admin-editar{
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 15px;
    min-width: 90%;

}
.admin-cargar > div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.admin-cargar > * input{
    border-block-color: #d9d9d9;
    border-radius: 5px;
    /* text-align: center; */
    min-width: 40vw;
    width: 200px;
    padding-left: 5px;
}
.admin-cargar > * label{
    min-width: 65px;
}
.backArrow{
    position: fixed;
    /* left: 10vw;
    top: 185px; */
}
.backArrow > * i{
    color: #07182B;
    font-size: 25px;
}
.catalogo-logo{
    max-width: 80%;
}
.catalogo-titulo{
    color: white;
    font-size: 25px;
    padding: 5px;
    text-align: center;
    max-width: 80vw;
    font-size: 30px;
    text-transform:uppercase;
}
.catalogo-titulo::after{
    content: '+';
    position: absolute;
    right: 20vw;
}
.catalogo-titulo::before{
    content: '+';
    position: absolute;
    left: 20vw;
}
.item-logo{
    max-width: 80%;
}
.catalogo-item{
    display: flex;
    background-color: #d9d9d933;
    border-radius: 10px;
    padding: 10px;
}
.catalogo-item-izq{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 50%;
    gap: 20px;
}
.catalogo-item-der{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 50%;
}
.shopping{
    border-radius: 15px;
    background-color: #F03535;
    width: 80%;
    display: block;
    padding: 7px;
    text-align: center;
    line-height: 1;
    font-size: 18px;
    border: none;
    color: white;
}
.item-titulo{
    font-size: 20px;
    font-weight: 700;
}
.item-precio{
    font-size: 15px;
    padding-bottom: 7px;
    font-weight: 700;
}
.edit-btns{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.edit-btns > button{
    background-color: transparent;
    border: none;
}
.edit-btns > * i{
    font-size: 15px;
}
.edit-catalogo-item{
    display: flex;
    justify-content: space-around;
}
.edit-catalogo-item > table{
    text-align: left;
    border-spacing: 15px 5px;
}
#delete_form{
    display: none;
    position: absolute;
    background-color: #d9d9d9;
    color: black;
    /* max-height: 200px; */
    max-width: 80vw;
    padding: 20px;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#edit_form{
    display: none;
    position: absolute;
    background-color: #d9d9d9;
    color: black;
    /* max-height: 200px; */
    max-width: 80vw;
    padding: 20px;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}



.whatsapp-button{
    display: inline-block;
    width: 50px;
    height: 80px;
    padding: 10px 0;
    position: fixed;
    bottom: 50px;
    right: 20px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    z-index: 100;
    animation: wiggle ease;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-delay: 4s;
}
@keyframes wiggle {
    0% { transform:translate(0,0) }
    1.78571% { transform:translate(5px,0) }
    3.57143% { transform:translate(0,0) }
    5.35714% { transform:translate(5px,0) }
    7.14286% { transform:translate(0,0) }
    8.92857% { transform:translate(5px,0) }
    10.71429% { transform:translate(0,0) }
    100% { transform:translate(0,0) }
}





