/* Reset básico */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Fondo */
body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#1e1e1e,#2f2f2f);
}

/* Card principal */
.card{
    background:rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius:15px;
    padding:30px;
    width:350px;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* Título */
.titulo{
    text-align:center;
    margin-bottom:20px;
}

.titulo h1{
    font-size:24px;
    letter-spacing:1px;
}

/* Zona de nueva tarea */
.nueva{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.nueva input{
    flex:1;
    padding:8px 10px;
    border:none;
    border-radius:6px;
    outline:none;
}

.nueva button{
    background:#4CAF50;
    border:none;
    padding:8px 14px;
    border-radius:6px;
    color:white;
    cursor:pointer;
    transition:0.2s;
}

.nueva button:hover{
    background:#3e9142;
}

/* Lista */
.lista{
    list-style:none;
    margin-bottom:15px;
}

/* Cada tarea */
.lista li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    background:rgba(255,255,255,0.08);
    border-radius:6px;
    margin-bottom:8px;
}

/* Checkbox */
.lista input[type="checkbox"]{
    transform:scale(1.2);
}

/* Botón borrar tarea */
.lista button{
    background:none;
    border:none;
    cursor:pointer;
    font-size:16px;
}

/* Botón borrar todo */
#borrar{
    width:100%;
    background:#d9534f;
    border:none;
    padding:10px;
    border-radius:6px;
    color:white;
    cursor:pointer;
    transition:0.2s;
}

#borrar:hover{
    background:#b93c38;
}