* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #1d2733;
}
.contenedor { width: min(920px, 92%); margin: 45px auto; }
.cabecera { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 24px; }
h1 { margin: 4px 0 8px; font-size: 38px; }
h2, h3 { margin-top: 0; }
.eyebrow { font-size: 12px; letter-spacing: 1.5px; font-weight: bold; color: #52606d; }
.contador { background: #1f6feb; color: #fff; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
.tarjeta { background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; box-shadow: 0 8px 24px rgba(27,39,51,.06); }
.formulario { padding: 24px; margin-bottom: 24px; }
label { display: block; font-weight: bold; margin: 14px 0 7px; }
input, textarea { width: 100%; border: 1px solid #cfd7df; border-radius: 9px; padding: 12px; font: inherit; }
input:focus, textarea:focus { outline: 2px solid #b8d3ff; border-color: #1f6feb; }
.acciones-form, .acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.boton { border: 0; border-radius: 8px; padding: 10px 13px; cursor: pointer; text-decoration: none; font-weight: bold; font-size: 14px; display: inline-block; }
.principal { background: #1f6feb; color: white; }
.secundario, .editar { background: #e9eef4; color: #263442; }
.estado { background: #def7e5; color: #176b35; }
.eliminar { background: #ffe5e5; color: #a32121; }
.lista { display: grid; gap: 14px; }
.tarea { padding: 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.tarea p { color: #52606d; line-height: 1.5; }
.tarea small { color: #7b8794; }
.tarea.completada { opacity: .68; }
.tarea.completada h3 { text-decoration: line-through; }
.acciones { justify-content: flex-end; min-width: 260px; margin-top: 0; }
.alerta { padding: 13px 16px; border-radius: 9px; margin-bottom: 18px; }
.exito { background: #e8f8ed; color: #176b35; }
.error { background: #ffe8e8; color: #9f2222; }
.vacio { padding: 25px; text-align: center; color: #607080; }
@media (max-width: 700px) {
    .cabecera, .tarea { align-items: flex-start; flex-direction: column; }
    .acciones { min-width: 0; justify-content: flex-start; }
    h1 { font-size: 31px; }
}