body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, rgb(0, 0, 0) , #4278c9, #273142);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}



.contenedor{

width: 500px;
height: auto;
background-color: #17d8ce;
padding: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border-radius: 14px;
}


h1{
text-align: center;

}

form {
display: flex;
flex-direction: column;
gap: 1rem;
}


input[type="text"] {
padding: 20px;
border: 2px solid #2fbec9;
border-radius: 10px;
font-size: 15px;
transition: border-color 0.8s;
}

input[type="text"]:focus {
border-color: #140cad;
outline: none;
}

button{
padding: 10px;
background-color:#9693ce;
color: white;
border: none;
border-radius: 40px;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover{

background-color:#7b77bd ;


}




#lista {
list-style: none;
padding: 0;
margin-top: 20px;
}

#lista li {
background-color: #d1f0f3;
padding: 20px;
margin-bottom: 10px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}


.eliminar {
background: crimson;
color: white;
border: none;
padding: 10px 14px;
border-radius: 10px;
cursor: pointer;
font-size: 15px;
transition: background 0.3s;
}

.eliminar:hover {
background: darkred;
}

.completada {
  text-decoration: line-through;
  color: gray;
  opacity: 0.7;
}

.editar {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  margin-right: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.editar:hover {
  background-color: #3e8e41;
}

.tarea {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.eliminando {
  opacity: 0;
}