:root{--crema:#FFF6E0;--amarillo:#FFC93C;--rosa:#FF9ECF;--fucsia:#C2186F;--menta:#BFEFD9;--cielo:#CFF1FF;--ink:#2D2230;--ink2:#6B5A63}
*{box-sizing:border-box}
html,body{margin:0;background:var(--crema);color:var(--ink);font-family:'Fredoka',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;padding-bottom:84px}
#app{max-width:520px;margin:0 auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
h1{margin:0;font-size:30px;line-height:1.05;font-weight:700}
h2{margin:0;font-size:20px;font-weight:700}
.sub{font-size:14px;color:var(--ink2)}
.card{background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px}
.card.flat{box-shadow:none;border-radius:20px}
.row{display:flex;align-items:center;gap:10px}
.sp{justify-content:space-between}
.grow{flex:1;min-width:0}
.ic{width:56px;height:56px;flex:none}
.ic.big{width:110px;height:110px}.ic.sm{width:34px;height:34px}
button{font-family:inherit;color:var(--ink)}
.btn{font-size:16px;font-weight:700;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:14px;background:var(--amarillo);cursor:pointer}
.btn.alt{background:#fff}.btn.rosa{background:var(--rosa)}.btn.mini{min-height:36px;font-size:14px;padding:0 12px}
.btn:disabled{opacity:.5}
.seg{display:grid;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:6px}
.seg button{font-size:16px;font-weight:600;min-height:44px;border:2px solid transparent;border-radius:14px;background:#fff;cursor:pointer}
.seg button.on{background:var(--amarillo);border-color:var(--ink);font-weight:700}
.bar{height:22px;border:3px solid var(--ink);border-radius:14px;background:#fff;overflow:hidden}
.bar>i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--rosa),var(--rosa) 10px,#ffb7dc 10px,#ffb7dc 20px);transition:width .5s}
.bar.verde>i{background:repeating-linear-gradient(45deg,#7fdcb0,#7fdcb0 10px,var(--menta) 10px,var(--menta) 20px)}
.pct{font-size:40px;font-weight:700;line-height:1;color:var(--fucsia)}
.chip{display:inline-block;font-size:13px;font-weight:600;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--cielo)}
.chip.rosa{background:var(--rosa)}.chip.menta{background:var(--menta)}.chip.am{background:var(--amarillo)}
.task{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:2px dashed #e6d9c4;cursor:pointer}
.task:first-of-type{border-top:0}
.task input{width:26px;height:26px;accent-color:var(--fucsia);flex:none;margin-top:1px}
.task.hecho .t{text-decoration:line-through;color:var(--ink2)}
.task .who{font-size:12px;color:var(--ink2)}
.sides{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.side{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:8px 2px 6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.side.on{background:var(--amarillo);box-shadow:3px 3px 0 var(--ink)}
.side .ic{width:44px;height:44px}
.nota{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.nota button{min-height:44px;font-size:18px;font-weight:700;border:2px solid var(--ink);border-radius:14px;background:#fff;cursor:pointer}
.nota button.on{background:var(--rosa)}
input[type=text],textarea{font-family:inherit;font-size:16px;width:100%;padding:10px 12px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink)}
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:3px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;gap:0;padding:7px 2px 6px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:600}
nav.tabs a span{font-size:22px;line-height:1.15}
nav.tabs a.on{background:var(--amarillo)}
.toasts{position:fixed;top:10px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;pointer-events:none}
.toast{background:var(--rosa);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:10px 14px;max-width:92%;font-weight:600;animation:pop .35s}
@keyframes pop{from{transform:translateY(-20px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.flap{animation:flap 1.1s ease-in-out infinite;transform-origin:center}
@keyframes flap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-5deg)}}
.fiesta{position:fixed;inset:0;background:rgba(255,246,224,.97);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;overflow:hidden}
.conf{position:absolute;top:-20px;width:10px;height:14px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.flap,.conf,.toast{animation:none}.bar>i{transition:none}}
.dia{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:2px dashed #e6d9c4;text-decoration:none;color:var(--ink)}
.dia:first-child{border-top:0}
.dia .f{width:62px;font-weight:700;font-size:14px;flex:none}
.dia.hoy{background:#fff3b0;border-radius:12px;padding-left:6px}
.sec{font-size:14px;font-weight:700;color:var(--fucsia);margin:6px 0 2px;text-transform:uppercase;letter-spacing:.04em}
.item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:2px dashed #e6d9c4}
.item input{width:26px;height:26px;accent-color:var(--fucsia);flex:none}
.item.hecho .t{text-decoration:line-through;color:var(--ink2)}
.err{background:#ffd6d6}
a{color:var(--fucsia)}
#print{display:none}
@media print{
  body{background:#fff;padding:0}
  #app,nav.tabs,.toasts,.fiesta{display:none!important}
  #print{display:block;color:#000;font-family:Arial,sans-serif;font-size:11pt}
  #print h1{font-size:18pt;margin:0 0 6px}#print h2{font-size:13pt;margin:10px 0 4px}
  #print table{border-collapse:collapse;width:100%;table-layout:fixed}
  #print td,#print th{border:1.5px solid #000;padding:4px;vertical-align:top;font-size:9.5pt}
  #print td{height:62px}
  #print .pb{page-break-before:always}
  #print .box{display:inline-block;width:12px;height:12px;border:1.5px solid #000;margin-right:6px;vertical-align:-2px}
  #print li{list-style:none;margin:3px 0}
  #print ul{padding:0;margin:0 0 6px}
  @page{size:A4;margin:12mm}
}