/* CABECERA */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    font-family: 'Poppins', sans-serif;
}

button {
    border: none;
    outline: none;
    padding: 0px;
    margin: 0;
    background: none;
    cursor: pointer;
}

                                        /* FORMULARIO.HTML */

.formulario{
    width: 100%;
    background-color: #f5f5f5;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

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


.formulario-login_form{
    width: 50%;
}


.formulario-login__titulo{
	margin-bottom: 3rem;
	font-weight: 800;
    font-size: 1.5rem;
}

.form__label {
	margin-bottom: 1rem;
}


.formulario-login__input-container {
	position: relative;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
}

.input {
	background-color: #fff;
	border: none;
	box-sizing: border-box;
	border-bottom: 1px solid #0b6dee;
	padding: 1.375rem 0.5rem 0.5rem;
	height: 3.25rem;
	width: 100%;
}

.input::placeholder {
	visibility: hidden;
	color: #00000000;
}

.input:focus {
    outline: none;
}

.input-label {
	position: absolute;
	top: 1.375rem;
	left: 0.5rem;
	transition: all 0.25s;
}

.input:not(:placeholder-shown) + .input-label,
.input:focus + .input-label {
	font-size: 0.875rem;
	top: 0.25rem;
	transition: all 0.25s;
}

.input-container--invalid {
    margin-bottom: 0.5rem;
}

.input-container--invalid .input {
	border: 1px solid red;
	border-radius: 7px;
}

.input-container--invalid .input-label {
	color: red;
}

.input-message-error {
	display: none;
}

.input-container--invalid .input-message-error {
	color: red;
	display: block;
	margin-top: 0.5rem;
	padding-left: 0.5rem;
}

.input-label {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	transition: all 0.25s;
    
}

.input-container--invalid .textarea {
	border: 1px solid red;
}

.textarea-container--invalid .input-label {
	color: red;
}

.textarea-mensagem-error {
	display: none;
}

.textarea-container--invalid .textarea-mensagem-error {
	display: block;
	color: red;
	margin-top: 0.5rem;
	padding-left: 0.5rem;
}

.boton-formulario-login{
	border-radius: 70px 70px 70px 70px;
	padding: 1rem 2rem;
	color: #ffffff;
	background-color: #2A7AE4;
	font-weight: 500px;
	border: none;
    font-size: 1rem;
    width: 100%;
}

.boton-formulario-login:hover{
	box-shadow: 1px 1px 10px 0px  rgba(0, 0, 0, 0.733);
	cursor: pointer;
}

.boton-formulario-registro{
    border-radius: 70px 70px 70px 70px;
	padding: 1rem 2rem;
	color: #ffffff;
	background-color: #2A7AE4;
	font-weight: 500px;
	border: none;
    font-size: 1rem;
    width: 100%; 
    text-align: center;
}

.boton-formulario-registro:hover {
    box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.733);
	cursor: pointer;
}

.btn-3 {
    background-color: #002cef;
    margin-top: 50px;
    display: inline-block;
    padding: 13px 35px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-3:hover {
    box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.733);
    background-color: #EF8700;
}

                                            /* TODOS LOS PRODUCTOS */

                                                    /* AGREGAR PRODUCTOS */

.agregar {
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60vh;
    background-color: rgb(238, 238, 238);
}

.agregar__container {
    width: 70%;
    padding-top: 20px;
    margin: 0 auto;
    text-align: center;
}

.agregar__container label{
    display: block;
    width: 50%;
    padding: 5px;
    font-size: 12px;
    color: #A2A2A2;
    margin: 0 auto;
    background-color: white;
    text-align: left;
}

.agregar-producto {
    padding: 5px 9px;
    background-color: #FFFFFF;
    color: #000000;
    border: 4px solid #2A7AE4;
    transition: .5s all ease-in-out;
    text-decoration: none;
    border-bottom-right-radius: 10%;
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 10%;
}

.agregar-producto:hover {
    transform: scale(2.2);
    box-shadow: 5px 5px 10px black;
    background-color: #b7d2f3;
    color: white;
}

.agregar__container input {
    margin-bottom: 20px;
    width: 50%;
    padding: 5px;
    outline: none;
    border: 1px solid transparent;
}

.agregar__titulo {
    margin: 30px 0;
}

.agregar__text-area {
    width: 50%;
    font-size: 12px;
    color: #A2A2A2;
    border: 0px solid transparent;
    outline: none;
}

/* respuesta de la busqueda de los productos  */

.cabecera__lupa {
    background-color: transparent;
    border: none;
    color: black; 
    margin-left: 1px;
  }
  .cabecera {
      display: flex;
      align-items: center;
    }

    .cabecera__buscador {
      background-color: transparent;
      border: none;
      color: rgb(0, 0, 0);
    }

    #resultados {  
    flex-wrap: wrap;
    margin-top: 55px;
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(250px, 1fr)) ;
    gap: 20px;
      
      
    }

    .resultado-content {
        margin-top: 55px;
        display: grid;
        grid-template-columns:repeat(auto-fit,minmax(250px, 1fr)) ;
        gap: 20px;
    }
    
    .resultado-item{
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 35px;
    border-radius: 1rem;
    transition: all 0.4s;
    }
   
    .resultado-item:hover {
        transform: scale(1.1);
        box-shadow: 5px 5px 10px black;
        background-color: #87b7f7;
        color: white;
   
}



.imagen-resultados {
    width: 150px;
    height: 130px;
    margin-bottom: 10px;
}

/* Sergio Corrección Buscador*/


.buscador {
    display: flex;
    align-items: center; 
}

.cabecera__lupa img {
    width: 200px; 
    height: 16px; /* Establece la altura deseada para la imagen de la lupa */
}