:root{
 --paper:#F1F3EE; --card:#FAFBF7; --sunk:#E8ECE3; --ink:#16201A; --soft:#4C594F;
 --faint:#77837A; --rule:#D4DACE; --acc:#41802A; --accw:#E2EADB;
 --sig:#9C6510; --sigw:#F3E7D2; --bad:#A33A2A; --badw:#F5E2DE;
 --f-d:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 --f-m:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
 --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
 font-family:var(--f-d);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;
 overscroll-behavior-y:contain;}
button,input,select{font:inherit;color:inherit;}
.oculto{display:none!important;}

/* ---------- login ---------- */
#login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
#login form{width:100%;max-width:20rem;display:flex;flex-direction:column;gap:.8rem;}
#login h1{font-size:1.5rem;margin:0 0 .3rem;letter-spacing:-.02em;}
#login p{margin:0 0 .8rem;color:var(--faint);font-size:.88rem;}
.campo{display:flex;flex-direction:column;gap:.3rem;}
.campo label{font-size:.7rem;font-family:var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.campo input{padding:.7rem .8rem;border:1px solid var(--rule);border-radius:9px;background:var(--card);}
.campo input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent;}
.btn{padding:.75rem 1rem;border:none;border-radius:9px;background:var(--acc);color:#fff;
 font-weight:600;cursor:pointer;min-height:44px;}
.btn:active{opacity:.85;}
.btn.sec{background:var(--sunk);color:var(--ink);}
.btn.peq{padding:.45rem .7rem;font-size:.8rem;min-height:36px;border-radius:8px;}
.err{color:var(--bad);font-size:.83rem;min-height:1.2em;}

/* ---------- estructura ---------- */
#app{min-height:100dvh;display:flex;flex-direction:column;}
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);
 padding:.7rem .8rem .55rem;}
.cab{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;}
.cab h1{font-size:1.05rem;font-weight:700;margin:0;letter-spacing:-.015em;flex:1;}
.quien{font-family:var(--f-m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--faint);border:1px solid var(--rule);border-radius:99px;padding:.25rem .55rem;
 background:none;cursor:pointer;}
.barra{height:5px;background:var(--sunk);border-radius:99px;overflow:hidden;}
.barra i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s;}
.meta{display:flex;justify-content:space-between;font-family:var(--f-m);font-size:.68rem;
 color:var(--faint);margin-top:.4rem;font-variant-numeric:tabular-nums;}
.meta b{color:var(--acc);}
main{flex:1;padding:.6rem .8rem calc(5rem + var(--safe-b));max-width:36rem;margin:0 auto;width:100%;}

/* ---------- tabs ---------- */
nav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--card);
 border-top:1px solid var(--rule);display:flex;padding-bottom:var(--safe-b);}
nav button{flex:1;background:none;border:none;padding:.55rem .2rem .6rem;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--faint);min-height:52px;}
nav button .ic{font-size:1.15rem;line-height:1;}
nav button .tx{font-size:.62rem;font-family:var(--f-m);letter-spacing:.06em;text-transform:uppercase;}
nav button.on{color:var(--acc);}

/* ---------- secciones y filas ---------- */
.sec h2{font-size:.7rem;font-family:var(--f-m);font-weight:600;letter-spacing:.13em;
 text-transform:uppercase;color:var(--faint);margin:1.1rem 0 .45rem;padding:0 .2rem;
 display:flex;align-items:center;gap:.4rem;}
.sec h2 .st{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums;}
.lst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.it{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--rule);
 border-radius:12px;padding:.5rem .55rem;min-height:104px;transition:opacity .18s;}
.it .tap{flex:1;display:flex;align-items:center;gap:.75rem;min-width:0;cursor:pointer;
 background:none;border:none;padding:.15rem 0;text-align:left;}
.tick{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--rule);border-radius:6px;position:relative;}
.tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
 border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .18s;}
.foto{flex:0 0 auto;width:88px;height:88px;border-radius:10px;overflow:hidden;background:#fff;
 display:flex;align-items:center;justify-content:center;}
.foto img{width:100%;height:100%;object-fit:contain;display:block;}
.foto .ph{color:#bbb;font-size:1.6rem;}
.txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.nm{font-size:.92rem;font-weight:600;line-height:1.3;}
.nm .q{font-family:var(--f-m);font-size:.72rem;color:var(--acc);margin-left:.3rem;}
.nt{font-size:.75rem;color:var(--faint);line-height:1.35;}
.pr{font-family:var(--f-m);font-size:.76rem;font-weight:600;color:var(--soft);
 font-variant-numeric:tabular-nums;white-space:nowrap;}
.mas{flex:0 0 auto;width:32px;height:32px;border:none;background:none;color:var(--faint);
 font-size:1.1rem;cursor:pointer;border-radius:8px;}
.mas:active{background:var(--sunk);}
.it.ok{opacity:.42;}
.it.ok .tick{background:var(--acc);border-color:var(--acc);}
.it.ok .tick::after{transform:rotate(45deg) scale(1);}
.it.ok .nm{text-decoration:line-through;text-decoration-thickness:1.5px;}
.b{display:inline-block;font-family:var(--f-m);font-size:.57rem;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;padding:.08rem .3rem;border-radius:4px;margin-right:.3rem;}
.b-c{background:var(--accw);color:var(--acc);}
.b-o{background:var(--sigw);color:var(--sig);}
.b-v{background:var(--badw);color:var(--bad);}

/* ---------- buscador ---------- */
.buscador{display:flex;gap:.5rem;margin:.3rem 0 .2rem;}
.buscador input{flex:1;padding:.65rem .8rem;border:1px solid var(--rule);border-radius:9px;background:var(--card);}
.buscador input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent;}
.pistas{font-size:.75rem;color:var(--faint);padding:.5rem .2rem;}

/* ---------- hoja modal ---------- */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:flex;align-items:flex-end;}
.hoja{background:var(--paper);width:100%;max-height:86dvh;overflow-y:auto;border-radius:16px 16px 0 0;
 padding:1rem .9rem calc(1.2rem + var(--safe-b));animation:sube .22s ease;}
@keyframes sube{from{transform:translateY(100%);}to{transform:translateY(0);}}
.hoja h3{margin:.2rem 0 .1rem;font-size:1.02rem;letter-spacing:-.01em;}
.hoja .sub{color:var(--faint);font-size:.78rem;margin:0 0 .9rem;}
.fila{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--rule);}
.fila .lb{flex:1;font-size:.87rem;}
.cant{display:flex;align-items:center;gap:.15rem;background:var(--sunk);border-radius:9px;padding:.2rem;}
.cant button{width:34px;height:34px;border:none;background:none;font-size:1.15rem;cursor:pointer;border-radius:7px;}
.cant button:active{background:var(--rule);}
.cant span{min-width:2rem;text-align:center;font-family:var(--f-m);font-weight:600;font-variant-numeric:tabular-nums;}
.acciones{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem;}
.acciones .btn{width:100%;}
.btn.mal{background:var(--badw);color:var(--bad);}
.alts{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem;}
.tirita{padding:.55rem .2rem;font-family:var(--f-m);font-size:.66rem;letter-spacing:.11em;
 text-transform:uppercase;color:var(--faint);}
.vacio{text-align:center;color:var(--faint);font-size:.87rem;padding:2.5rem 1rem;line-height:1.6;}
.aviso{background:var(--sunk);border-radius:10px;padding:.75rem .85rem;font-size:.78rem;
 color:var(--soft);line-height:1.5;margin-top:1rem;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}