@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');



*{
    margin: 0px;
    padding: 0px;
    font-family: 'Lora', serif;
}

body{
    background-color:#444D55 ;
}

#titulo {
    color: white;
    font-weight: bold;
    font-size: 8vh;
    display: inline-block;
    border-bottom: 4px solid white; /* Color y estilo del subrayado */
}

#contenedorTitulo{
    width: 20%;
}

#menu_despelgable{
    width: 200px;
}

.titulo_secundario{
    color: white;
    font-weight: bold;
    font-size: 4vh;
    display: inline-block;
}

 #wave{
    transform:rotate(0deg); transition: 0.3s ;
    position:fixed; 
    bottom:0px;
    left: 0px;
    width: 100%;
} 
/* Formulario inicar sesion */

.form-group_sesion{
    margin-top: 5%;
}

.btn_formularios{
    width: 100%;
    color: #444D55;
    background-color: white;
    font-weight: bold;
    font-size: 20px;
    margin-top: 2%;
    border-color: transparent;

    background-image: linear-gradient(to right, #ffffff, #444D55);
    background-size: 200% 100%;
    transition: background-position 0.5s;
}

.btn_formularios:hover{
    background-position: -100% 0;
    border-color: transparent;
}

.input_fomrulario{
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.426);
    border: none;
    color: white;
    margin-top: 4%;
}
.input_fomrulario:focus{
    border-color: white;
    box-shadow: 0px 0px 3px white;
    background-color: rgba(255, 255, 255, 0.426);
    color: white;
}
.input_fomrulario::placeholder {
    color: rgba(255, 255, 255, 0.818);
}

.input-icon {
    display: flex;
    align-items: center;
    
  }
  
.input-icon svg {
    margin-left: 10px; /* Ajusta el margen derecho del ícono según tu preferencia */
    
}

.contrasenaVisible{
    background-color: transparent;
    border-style: none;
    margin-top: 5%;
}

  

.linkFomrulario{
    color: white;
    text-decoration: none;
    font-size: 80%;
    margin-top: 4%;
}

#btn_inisiarSesion{
    font-size: 90%;
}

#usuario_invalido{
    display: none;
}
#contrasena_invalida{
    display: none;
}

#nombre_invalido{
    display: none;
}
#nombreUsuario_invalido{
    display: none;
}
#cuit_invalido{
    display: none;
}
#telefono_invalido{
    display: none;
}
#mail_invalido{
    display: none;
}
#nuevaContrasena_invalido{
    display: none;
}
#localidad_invalido{
    display: none;
}
#provincia_invalido{
    display: none;
}

#contenedor_registrar{
    display: none;
}

.validacion-mensaje{


    color: rgba(255, 0, 0, 0.884);
    font-weight: bold;
    letter-spacing: 1px;
}
/* Fin formulario inicar sesion */

/* Fomrulario registro */
#contenedor_registrar{
    width: 100vh;
    padding: 30px;
}
/* Fin formulario registro */


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

/* ESTILOS DE PAGINA CARRITO */

#bodyCarrito{
    background-color: white;
}

.navbar{
    background-color: #444D55;
}

#tituloBienvenida{
    color: white;
    font-size: 4vh;
}

#tituloAnoxal{
    color: white;
    font-weight: bold;
}


#contenedor-buscador{
    width: 50%;
    margin-top: 20px;
    margin-bottom: 10px;
}

#contenedor_buscar_input input{
    background-color: #444d553a;
    color: black;
}
#contenedor_buscar_input input:focus{
    box-shadow: none;
}
#contenedor_buscar_input input::placeholder{
    color: black;
}

#btn_buscar{
    border-radius: 45%;
    margin-left: 5px;
}
#btn_buscar:hover{
    background-color: #444D55;
}

#input_buscar{
    border-radius: 20px;
    border: none;
}


#contenedor_productos{
    margin-top: 12px;
    border-radius: 3px;
    width: 95%;
    box-shadow: 0px 2px 3px #444D55;

    height: 70vh; /* Altura máxima antes de que aparezca la barra de desplazamiento */
    overflow-y: auto;  /* Habilita el scroll vertical */
    padding: 10px; /* Espaciado interno */
}
#contenedor_productos::-webkit-scrollbar{
    width: 7px;
}
#contenedor_productos::-webkit-scrollbar-thumb{
    background-color: #444D55;
    border-radius: 20px;
}


.producto{
    border-radius: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px #444D55;
    width: 90%;
}

.codigo_producto{
    height: 35%; 
    width: 100%;
}
.contenedor_informacion_productos .codigo_producto .codigo{
    background-color: #444D55; 
    width: 30%; 
    color: white;
}

.descripcion_producto{
    height: 50%;
}

.cantidad_contenedor{
    height: 50%;
}
.cantidad_contenedor .input-group{
    width: 100%; 
    padding: 5px;
}

.input_cantidad{
    background-color: rgba(255, 255, 255, 0.426);
    border: 1px solid #444D55;
    border-radius: 3px;
    text-align: center;
    width: 40%;
    margin-right: 2%;
    height: 60%;
}

.imagenProducto{
    width: 100%; 
    height: 100%; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
}


.btn_agregar{
    background-color: white;
    border: 2px solid #444D55;
    transition: all 0.5s;
    width: 100%;

    border-radius: 50%;
}
.btn_agregar:hover{
    transform: scale(1.1);
    background-color: #5cb85c;
    border: 2px solid #444D55;
}


.btn_confimar_edicion{
    width: 30px; display: none;
}




.boton_verDetalle{
    color:#444D55;
    border: 3px solid #444D55;

    background-image: linear-gradient(to right, #444d5502 50%, #444D55 50%);
    background-size: 200% 100%;
    transition: background-position 0.5s;
}
.boton_verDetalle:hover{
    background-position: -100% 0;
    color: white;
    border-radius: 10px;
}




#btn_vaciar_carrito{
    color:#444D55;
    border: 3px solid #444D55;

    background-image: linear-gradient(to right, #444d5502 50%, #444D55 50%);
    background-size: 200% 100%;
    transition: background-position 0.5s;
}
#btn_vaciar_carrito:hover{
    background-position: -100% 0;
    color: white;
    border-radius: 12px;
}

.modal-pedido{
    background-color: #444D55;
    color: white;
}

#btn_confirmar_correo{
    border: 3px solid white;
    color: white;
    background-image: linear-gradient(to right, #444d5500 50%, #5cb85c 50%);
    background-size: 200% 100%;
    transition: all 0.5s;
}
#btn_confirmar_correo:hover{
    transform: scale(1.1);
    background-position: -100% 0;
    color: white;
}

#btn_confirmar_pedido{
    color:#444D55;
    border: 3px solid #444D55;
    width: 100%;

    background-image: linear-gradient(to right, #444d5500 50%, #5cb85c 50%);
    background-size: 200% 100%;
    transition: all 0.5s;
}
#btn_confirmar_pedido:hover{
    transform: scale(1.1);
    background-position: -100% 0;
    color: white;
}

.carritoAnimacion{
    animation-name: carrito;
    animation-duration: 1.5s;
    position: relative;
}

@keyframes carrito {
    0%{top: 0px; left: 0px;}
    50%{top: 0px; transform: rotate(-25deg);}
    100%{top: 0px; left: 90%;}
}


/* Carrito */

#contenedor_btns_carrito{
    width: 95%; 
    margin-top: 18px;
}

#contenedor_carrito{
    margin-top: 12px;
    border-radius: 3px;
    width: 95%;
    box-shadow: 0px 2px 3px #444D55;

    height: 64vh; /* Altura máxima antes de que aparezca la barra de desplazamiento */
    overflow-y: auto;  /* Habilita el scroll vertical */
    padding: 10px; /* Espaciado interno */
}
#contenedor_carrito::-webkit-scrollbar{
    width: 7px;
}
#contenedor_carrito::-webkit-scrollbar-thumb{
    background-color: #444D55;
    border-radius: 20px;
}

.imagen_carrito{
    width: 100%; height: 100%; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center;
}

.producto_carrito{
    border-radius: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 3px #444D55;
    width: 90%;
}

.codigo_producto_carrito{
    background-color: #444D55; 
    color: white;
    width: 45%;
    text-align: center;
}

.botones_carrito{
    border-color: #444D55;
}
.botones_carrito:hover{
    fill: white;
    background-color: #444D55;
}

.btn_confimar_edicion{
    background-color: #444D55;
    border: 2px solid white;
    transition: all 0.5s;
    color: white;
    border-radius: 5px;
}
.btn_confimar_edicion:hover{
    transform: scale(1.1);
    background-color: #5cb85c;
    border: 2px solid #444D55;
}

.contenedor_mts_carrito{
    width: 70%; background-color: #444D55; margin: 0 auto; color: white; border-radius: 5px;
}

.contenedor_cantidad_carrito{
    width: 100%; height: 100%; background-color: #444D55; margin: 0 auto; color: white; border-radius: 5px;
}

.input_cantidad_carrito{
    width: 60px; height: 20px; text-align: center;
}


#resultado_carrito{
    width: 98%; padding-top: 10px;
}

/* Fin carrito */


/* Seleccionar color */
.selecionarColor{
    margin-top: 5%;
}

#pintadoAnodizado{
    display: none;
}

#pintadoPintura{
    display: none;
}
/* Fin seleccionar color */


/* Modal descripcion del mensaje del correo */
#mensajeDescripcion{
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.426);
    border: none;
    color: white;
    margin-top: 2%;
}
#mensajeDescripcion:focus{
    border-color: white;
    box-shadow: 0px 0px 3px white;
    background-color: rgba(255, 255, 255, 0.426);
    color: white;
}
/* Fin modal descripcion */


/* Imagenes */
.contenedor_imagen{
    overflow: hidden;
    position: relative;
}
.imagen{
    display: block;
    transition: transform 0.4s ease-in-out;
}
.contenedor_imagen:hover .imagen {
    transform: scale(1.3);
  }
/* Fin imagenes */


/* Modal historial pedidos */
#modal_historail_pedidos{
    background-color: #444D55;
    color: white;

}

#contenedor_tabla{
    height: 70vh; /* Altura máxima antes de que aparezca la barra de desplazamiento */
    overflow-y: auto;  /* Habilita el scroll vertical */
    padding: 20px; /* Espaciado interno */
    margin-bottom: 10px;
}

#spinner_correo{
    display: none;
}
/* Fin modal historail pedidos */

/* Cerrar modal historial */
.cerrar_modal_hisotrial{
    background-color: transparent;
    border: none;color: white;
}
/* fin cerrar modal hisotrial */