:root{--bg:#f6f5f1;--card:#fff;--line:#e8e6df;--tx:#1d2420;--mu:#6b746e;--sage:#a9bfae;--sage-l:#e8efe9;--ac:#1f6f4a;--bad:#c0392b;--sh:0 1px 2px #1d24200d,0 6px 18px #1d24200a;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
main{max-width:760px;margin:0 auto;padding:1.2rem 1rem 6.5rem}h1{font-size:1.6rem;margin:.2rem 0 .6rem;letter-spacing:-.02em}h2{font-size:1.05rem;margin:0 0 .5rem}small,.mu{color:var(--mu)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.1rem;margin-bottom:.9rem;box-shadow:var(--sh)}
.feature{background:linear-gradient(135deg,#1f6f4a,#2c8760);color:#fff;border:0}.feature small,.feature .mu{color:#d6eadd}.feature h2{font-size:1.3rem}.feature button{background:#fff;color:var(--ac)}
.hero{margin-bottom:1rem}.pill{display:inline-block;background:var(--sage-l);color:var(--ac);border-radius:99px;padding:.25rem .7rem;font-size:.8rem;font-weight:600}
.grid{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}@media(max-width:480px){.grid{grid-template-columns:1fr}}
.btn,button{background:var(--ac);color:#fff;border:0;border-radius:12px;padding:.65rem 1.1rem;font-weight:600;cursor:pointer;font-size:.95rem;text-decoration:none;display:inline-block;transition:transform .12s,opacity .12s}
button:active,.btn:active{transform:scale(.97)}button.sec{background:var(--sage-l);color:var(--ac)}button.dng{background:transparent;color:var(--bad);padding:.3rem .5rem}button:disabled{opacity:.45;cursor:not-allowed}
input,select{width:100%;background:#fff;color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:.65rem;font-size:1rem}input:focus,select:focus{outline:2px solid var(--sage);border-color:var(--ac)}
label{display:block;margin:.8rem 0 .3rem;font-size:.88rem;color:var(--mu)}.err{color:var(--bad);font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}.chips label{margin:0;color:var(--tx)}.chips input{display:none}
.chips span{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);border-radius:99px;cursor:pointer;background:#fff}
.chips input:checked+span{background:var(--ac);color:#fff;border-color:var(--ac);font-weight:600}
.tile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.9rem .4rem;background:var(--sage-l);color:var(--ac);border-radius:16px;text-decoration:none;font-size:.8rem;font-weight:600;text-align:center}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fffffff0;backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav a{flex:1;text-align:center;padding:.55rem 0;color:var(--mu);text-decoration:none;font-size:.7rem}nav .ic{display:block;margin:0 auto 2px}nav a.on{color:var(--ac);font-weight:700}
.ic{width:22px;height:22px}.tile .ic{width:26px;height:26px}
@media(min-width:900px){nav{top:0;right:auto;width:96px;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);padding-top:1rem}main{margin-left:calc(50% - 380px + 48px);padding-bottom:2rem}}
.bar{height:8px;background:#ece9e1;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);border-radius:9px;transition:width .4s}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}.tabs{display:flex;gap:.4rem;margin-bottom:.9rem;overflow-x:auto}
.tabs a{padding:.45rem .9rem;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--mu);text-decoration:none;white-space:nowrap}.tabs a.on{background:var(--ac);color:#fff;border-color:var(--ac);font-weight:600}
.set{display:grid;grid-template-columns:2rem 1fr 1fr 2.5rem;gap:.4rem;align-items:center;margin:.3rem 0}.set input[type=checkbox]{width:1.6rem;height:1.6rem;accent-color:var(--ac)}
details summary{cursor:pointer;color:var(--ac);font-weight:600}#toast{position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%);background:var(--tx);color:#fff;padding:.65rem 1.1rem;border-radius:14px;display:none;font-weight:600;z-index:9}
svg:not([width]){width:100%;height:auto}.big{font-size:2rem;font-weight:800;letter-spacing:-.02em}.warn{background:#fbf6e6;border-color:#eadfb6;color:#6b5a1c;font-size:.85rem}
.dots{display:flex;gap:.4rem;margin:.4rem 0}.dots i{width:22px;height:22px;border-radius:50%;background:#ece9e1}.dots i.on{background:var(--ac)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 .25rem 0 .5rem}
.empty{border:1px dashed var(--sage);border-radius:14px;padding:1rem;text-align:center;color:var(--mu);font-size:.9rem}.fade{animation:f .35s ease}@keyframes f{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.modal{position:fixed;inset:0;background:#1d242066;display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));animation:f .25s}
@media(min-width:600px){.modal{align-items:center}.sheet{border-radius:22px}}
.sug{background:var(--sage-l);border-radius:12px;padding:.6rem;margin:.4rem 0;font-size:.85rem;display:flex;gap:.6rem;align-items:center;justify-content:space-between}
/* Fase 2.2: móvil */
.sheet{max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}body.lock{overflow:hidden}
button,.btn{min-height:44px}button.dng{min-height:40px}input,select{min-height:44px}
.row{flex-wrap:wrap}.row>span:last-child{display:flex;flex-wrap:wrap;gap:.2rem}
#toast{max-width:90vw;text-align:center;z-index:30;bottom:calc(5.5rem + env(safe-area-inset-bottom))}
@media(max-width:360px){main{padding-left:.7rem;padding-right:.7rem}.tiles{gap:.4rem}.tile{font-size:.72rem}.big{font-size:1.7rem}}
@media(min-width:900px){.storewarn{margin-left:110px}}
/* Fase 3: selector de fecha del diario */
.datebar button{min-width:44px}.datebar input[type=date]{min-width:0}
.sug{flex-wrap:wrap}
/* Fase 4: móvil / Safari / accesibilidad */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select,label,summary{touch-action:manipulation}
nav{-webkit-backdrop-filter:blur(10px)}
main{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
@supports(padding:max(0px)){main{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}@media(max-width:360px){main{padding-left:max(.7rem,env(safe-area-inset-left));padding-right:max(.7rem,env(safe-area-inset-right))}}}
@media(min-width:900px){main{padding-bottom:2rem}}
button.dng{min-height:44px}
/* Chips: las casillas siguen existiendo para teclado y lectores de pantalla (antes display:none) */
.chips label{position:relative}.chips input{display:block;position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;pointer-events:none}
.chips input:focus-visible+span{outline:2px solid var(--ac);outline-offset:2px}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sheet:focus{outline:none}
.chk{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0}.set .chk input{width:1.6rem;height:1.6rem;min-height:0}
.set{grid-template-columns:2rem 1fr 1fr 2.9rem}
#res{max-height:18rem;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Fase 4: objetivos táctiles de 44 px (auditados) */
.tabs a{display:inline-flex;align-items:center;min-height:44px}
.chips span{display:inline-flex;align-items:center;min-height:44px}
details summary{padding:.8rem 0}