*{box-sizing:border-box}body{color:#1f2933;background:#f4f5f7;margin:0;font-family:system-ui,sans-serif}main{max-width:520px;margin:40px auto;padding:0 16px}h1{margin-bottom:4px}.estado{margin:0 0 16px;font-size:14px}.estado.conectado{color:#1a8a3c}.estado.conectando{color:#b7791f}.estado.error{color:#c53030}.aviso{background:#fff3cd;border:1px solid #f0d78c;border-radius:6px;padding:10px 12px}form{gap:8px;margin-bottom:16px;display:flex}form input{border:1px solid #cbd2d9;border-radius:6px;flex:1;padding:10px;font-size:16px}button{color:#fff;cursor:pointer;background:#2b6cb0;border:0;border-radius:6px;padding:10px 14px;font-size:15px}button:hover{background:#2c5282}ul{margin:0;padding:0;list-style:none}li{background:#fff;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 12px;display:flex;box-shadow:0 1px 2px #00000014}li label{cursor:pointer;flex:1;align-items:center;gap:10px;display:flex}li.hecha span{color:#7b8794;text-decoration:line-through}.borrar{color:#c53030;background:0 0;padding:4px 8px}.borrar:hover{background:#fed7d7}.vacio{color:#7b8794;text-align:center}