:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#27251f;background:#e9e5da}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:20px 14px;background:linear-gradient(135deg,#e8e3d6,#f5f1e8)}.sheet{width:min(680px,100%);min-height:90vh;margin:auto;padding:28px 24px 20px;background:#fffdf5;border-radius:22px;box-shadow:0 16px 50px #29250f22;position:relative;overflow:hidden}.sheet:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 43px,#8cc6d322 44px 45px)}header{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:1}.eyebrow{margin:0 0 4px;text-transform:capitalize;color:#777064;font-size:14px}.subtitle{margin:4px 0 0;color:#6d675c}h1{font-size:clamp(34px,8vw,52px);line-height:1;margin:0;font-weight:800}.progressRing{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#46a36b var(--p,0%),#e4dfd1 0);position:relative;flex:0 0 auto}.progressRing:after{content:"";position:absolute;width:54px;height:54px;background:#fffdf5;border-radius:50%}.progressRing span{z-index:1;font-weight:800}.progress{height:9px;background:#e6e0d3;border-radius:20px;overflow:hidden;margin-top:22px;position:relative}.progress div{height:100%;width:0;background:#46a36b;transition:.25s}.counter{margin:8px 0 16px;color:#6d675c;font-weight:600;position:relative}ul{list-style:none;margin:0;padding:0;position:relative}li{display:grid;grid-template-columns:48px 1fr 42px;align-items:center;gap:8px;min-height:62px;border-bottom:1px solid #c7dfe355}.check{width:38px;height:38px;border:2px solid #9b9589;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:25px;cursor:pointer}.taskText{font-size:20px;word-break:break-word}.completed .taskText{text-decoration:line-through;color:#999286}.completed .check{background:#dff2e5;border-color:#46a36b}.delete{border:0;background:transparent;font-size:20px;color:#aaa;cursor:pointer;padding:10px}.delete:hover{color:#a84040}form{display:flex;gap:10px;margin-top:22px;position:relative}input{min-width:0;flex:1;border:1px solid #d5cec0;background:#fff;padding:15px;border-radius:13px;font:inherit;font-size:16px;outline:none}input:focus{border-color:#5a9d70;box-shadow:0 0 0 3px #5a9d7020}button{border:0;border-radius:13px;background:#2f7950;color:#fff;padding:0 18px;font:inherit;font-weight:750;cursor:pointer}.doneMessage{margin:22px 0 4px;padding:20px;text-align:center;border-radius:16px;background:#e8f6eb;position:relative}.doneMessage strong,.doneMessage span{display:block}.doneMessage strong{font-size:22px}.doneMessage span{margin-top:4px;color:#477256}details{margin-top:24px;position:relative;color:#777064}summary{cursor:pointer}.options{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.options button{padding:10px 12px}.secondary{background:#817a6e}.danger{background:#9b4d4d}footer{text-align:center;color:#918b80;font-size:12px;margin-top:28px;position:relative}@media(max-width:480px){body{padding:0}.sheet{min-height:100vh;border-radius:0;padding:24px 18px}form{flex-direction:column}form button{padding:14px}.progressRing{width:64px;height:64px}.progressRing:after{width:48px;height:48px}}

.dragHandle{border:0;background:transparent;font-size:22px;line-height:1;padding:10px 8px;margin:-8px 0 -8px -6px;color:#8a8376;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dragHandle:active{cursor:grabbing}
#taskList>li.dragging{position:relative;z-index:10;transform:scale(1.02);box-shadow:0 10px 28px #27251f26;background:#fffaf0;opacity:.96}
body.isReordering{user-select:none;-webkit-user-select:none;overscroll-behavior:none}
body.isReordering #taskList{touch-action:none}

/* Check visual: CSS-drawn so it looks identical on Android/iOS/desktop */
.check{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:0;
  line-height:1;
  font-size:0;
  overflow:visible;
}
.completed .check::after{
  content:"";
  width:7px;
  height:13px;
  border-style:solid;
  border-width:0 3px 3px 0;
  transform:translateY(-1px) rotate(45deg);
  transform-origin:center;
  border-radius:1px;
}

/* v4: fila con 4 elementos: mover | check | tarea | eliminar */
#taskList > li{
  display:grid;
  grid-template-columns:40px 42px minmax(0,1fr) 42px;
  align-items:center;
  column-gap:10px;
  width:100%;
  min-height:64px;
}
#taskList .dragHandle{
  width:40px;
  height:48px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  background:transparent;
  color:#918b80;
  border-radius:10px;
  touch-action:none;
}
#taskList .taskText{
  min-width:0;
  width:auto;
  font-size:20px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#taskList .delete{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
}
#taskList > li.dragging{
  cursor:grabbing;
  box-shadow:0 8px 24px rgba(39,37,31,.18);
  transform:scale(1.015);
}
@media(max-width:480px){
  #taskList > li{
    grid-template-columns:34px 40px minmax(0,1fr) 36px;
    column-gap:8px;
  }
  #taskList .dragHandle{width:34px}
  #taskList .delete{width:36px}
}