body{
    background-image: url('callejon.2jpg.jpg');
    background-size: cover;
 margin: 0;
   display: flex;
    height: auto;
  justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.cuadro{
    background-color: white;
    border-radius: 3% ;
    padding: 30px;
    width: auto;
    height: auto;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.lista{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Comic Sans MS';

}
.lista h2{
     
     align-items: center;
}
.agregar {
    font-family: 'Google Sans';
    padding: 10px 45px;
    width: 100%;
    border: 2px solid #f7b2e1;
    background-color: white;
    color: black;
    font-weight: bold;
    font-size: 16px
}

.agregar:hover{
    background-color: #E77BCE;
     border: 2px solid #f7b2e1;
     color: white;
}
.formu{
    display: none;
}

.formu.visible{
    display: block;
}

.formu fieldset{
    display: flex;         
    align-items: center;   
    gap: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: white;
    
    
}
.formu input{
padding: 15px 35px;

border:none;
}

.formu input:hover,
.formu fieldset:hover {
    background-color: #F7C6E7;
}

.agenda button{
    padding: 5px 5px;
    border: 1px solid #ccc;
     background-color: white;
       width: 35px; 
    height: 35px;
}
.btn-paloma {
    padding: 5px; 
    border: 1px solid #ccc;
    background-image: url('marca-de-verificacion.png');
    background-repeat: no-repeat;  
    background-position: center;  
    background-size: 60%;          
    cursor: pointer; 
}
.btn-paloma:hover {
    background-image: url('marca-de-verificacion\ \(1\).png');
    background-color: #635AF7; 
}

.btn-lapiz {
    padding: 5px; 
    border: 1px solid #ccc;
    background-image: url('dibujar.png');
    background-repeat: no-repeat;  
    background-position: center;  
    background-size: 60%;          
    cursor: pointer; 
}
.btn-lapiz:hover {  
  background-image: url('dibujar\ \(1\).png');
  background-color: #635AF7; 
}

.btn-x {
    padding: 5px; 
    border: 1px solid #ccc;
    background-image: url('x.png');
    background-repeat: no-repeat;  
    background-position: center;  
    background-size: 60%;          
    cursor: pointer; 
}
.btn-x:hover {  
  background-image: url('x\ \(1\).png');
  background-color: #635AF7; 
}

.btn-paloma.activo {
  padding: 5px; 
    border: 1px solid #ccc;
    background-image: url('recargar.png');
    background-repeat: no-repeat;  
    background-position: center;  
    background-size: 60%;          
    cursor: pointer; 
}

.btn-paloma.activo:hover {  

    background-image: url('recargar\ \(1\).png'); 
    background-color: #635AF7; 
    border-color: #635AF7;

}
.formu.completada input {
    text-decoration: line-through; 
    
    color: #a0a0a0; 
    
    background-color: transparent; 
}