body.noscroll{overflow:hidden;position:fixed;width:100%}
#app{max-width:1280px;margin:0 auto;padding:0 14px}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0 8px;gap:10px}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:2rem;background:var(--sol);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;box-shadow:var(--sombra)}
h1{font-size:1.25rem;margin:0;line-height:1.1}.brand small{opacity:.7}
h2{margin:0;font-size:1.1rem}
.tabs{display:flex;gap:8px;position:sticky;top:0;z-index:5;background:var(--crema);padding:8px 0}
.tabs button{flex:1;border:0;border-radius:999px;padding:12px;font-weight:800;background:#fff;border:2px solid var(--cielo);min-height:48px}
.tabs button.on{background:var(--marino);color:#fff;border-color:var(--marino)}
.tabs button.pop{animation:pop .3s}
@keyframes pop{50%{transform:scale(1.12)}}
.cols{min-width:0}.panel{display:none;min-width:0}
html,body{overflow-x:hidden}
.chips{max-width:100%}.panel.on{display:block}
.search input,.box input,.box select{width:100%;border:2px solid var(--cielo);border-radius:16px;padding:11px 14px;background:#fff;min-height:46px}
.search input{border-radius:999px;margin:4px 0 10px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}
.chip{flex:none;border:2px solid transparent;background:var(--c,#fff);border-radius:999px;padding:8px 14px;font-weight:800;min-height:42px;white-space:nowrap}
.chip.on{border-color:var(--marino);box-shadow:0 3px 0 var(--marino)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:20px}
.card{position:relative;border:0;background:#fff;border-radius:var(--r);padding:8px 8px 12px;text-align:center;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:3px;transition:transform .15s;border-bottom:6px solid var(--c)}
.card:active{transform:scale(.95)}
.card .im{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;font-size:.9rem;background:var(--c)}
.card b{font-size:.98rem;margin-top:4px}.card small{opacity:.65;font-size:.78rem;min-height:1em}
.plus{position:absolute;right:10px;top:10px;background:var(--sol);color:var(--marino);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:1.3rem;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.box{background:#fff;border-radius:var(--r);padding:12px;box-shadow:var(--sombra);margin-bottom:12px}
.row{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;flex-wrap:wrap}.row:last-child{margin-bottom:0}
label{display:block;font-size:.8rem;font-weight:800;min-width:120px}label span{display:block;margin:0 0 3px 6px;opacity:.7}
.grow{flex:1}
.gsw{display:flex;border:2px solid var(--cielo);border-radius:999px;overflow:hidden}
.gsw button{border:0;background:#fff;padding:10px 12px;font-weight:800;min-height:46px}
.gsw button.on{background:var(--cielo)}
.stripbar{display:flex;justify-content:space-between;align-items:center;margin:4px 6px 8px}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.it{position:relative;background:#fff;border-radius:var(--r);padding:8px;text-align:center;box-shadow:var(--sombra);border-bottom:6px solid var(--sol)}
.it.drag{opacity:.4}.it.new{animation:pin .35s}
@keyframes pin{from{transform:scale(.6);opacity:0}}
.it .im{aspect-ratio:1;border-radius:16px;overflow:hidden;font-size:.9rem}
.it b{display:block;margin:5px 0;font-size:.95rem}
.n{position:absolute;left:6px;top:6px;z-index:2;background:var(--marino);color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.ctl{display:flex;justify-content:center;gap:6px}
.ctl button,.x{border:0;background:var(--crema);border-radius:12px;min-width:42px;min-height:42px;font-size:1rem}
.x{position:absolute;right:6px;top:6px;z-index:2;min-width:32px;min-height:32px;border-radius:50%;background:var(--coral);color:#fff;font-weight:900}
.empty{text-align:center;opacity:.7;grid-column:1/-1;padding:18px}.empty.big{font-size:1.1rem;background:#fff;border-radius:var(--r);border:3px dashed var(--cielo)}
.custom{display:flex;gap:8px;align-items:flex-end}.custom .btn{margin-bottom:2px}
.actions{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}.btn.big{font-size:1.15rem;min-height:58px}
.paper{margin-top:4px;align-items:flex-end}.paper select{border:2px solid var(--cielo);border-radius:14px;padding:8px;background:#fff;min-height:38px}
.paper label{min-width:0}
/* show mode */
.show{position:fixed;inset:0;z-index:50;background:linear-gradient(180deg,var(--cielo),var(--crema) 60%);display:flex;flex-direction:column;padding:12px 16px calc(14px + env(safe-area-inset-bottom));overflow:hidden;touch-action:none;overscroll-behavior:none}
.show[hidden]{display:none}
.sh-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.dots{display:flex;gap:5px;flex-wrap:wrap;flex:1}.dots i{width:12px;height:12px;border-radius:50%;background:rgba(2,48,71,.2)}.dots i.d{background:var(--mar)}.dots i.c{background:var(--sol);transform:scale(1.4)}
.lab{text-align:center;font-weight:900;font-size:1.3rem;margin:12px 0 6px;letter-spacing:.06em;text-transform:uppercase;color:var(--marino)}
.bigcard{flex:1;min-height:0;border:0;background:#fff;border-radius:34px;box-shadow:0 12px 30px rgba(2,48,71,.2);display:flex;flex-direction:column;padding:14px;gap:8px;font-size:1rem;animation:inx .45s}
.bigcard .im{flex:1;min-height:0;border-radius:24px;overflow:hidden;font-size:6rem;display:block;background:#fff}
.bigcard .im .cimg,.bigcard .im .fb{height:100%}
.bigcard b{font-size:clamp(1.6rem,6vw,2.6rem)}
.bigcard.in{animation:inx .45s}.bigcard.out{animation:outx .32s forwards}
@keyframes inx{from{transform:translateX(60px) scale(.9);opacity:0}}
@keyframes outx{to{transform:translateX(-80px) scale(.85) rotate(-3deg);opacity:0}}
.sh-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.nx small,.dn small{display:block;font-weight:800;opacity:.7;text-transform:uppercase;font-size:.75rem}
.mini{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border-radius:18px;padding:6px 12px 6px 6px;opacity:.9}
.mini .im{width:54px;height:54px;border-radius:12px;overflow:hidden;display:block;font-size:1.4rem}.mini b{font-size:.95rem}
.dn{text-align:right}.dn .btn{font-size:1.3rem;min-height:64px;padding:12px 28px}
.back{border:0;background:transparent;font-weight:800;margin-top:6px;opacity:.7;min-height:40px}
.fin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.fin h2{font-size:2.2rem}.fin .bigemo{font-size:6rem;animation:pop 1s infinite}
/* print */
#printArea{display:none}
@media print{
 body{background:#fff}#app,#show,.foot{display:none!important}
 #printArea{display:block}
 .ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6mm;border-bottom:3px solid var(--sol);padding-bottom:3mm}
 .pg{display:grid;grid-template-columns:repeat(3,56mm);gap:0;justify-content:center}
 .pc{position:relative;width:56mm;height:68mm;border:.3mm dashed #555;padding:3mm;text-align:center;break-inside:avoid;display:flex;flex-direction:column;gap:2mm}
 .pim{flex:1;min-height:0;overflow:hidden;border-radius:4mm;font-size:12mm}
 .pim .cimg,.pim .fb{height:100%}.pc b{font-size:4.2mm}
 .pn{position:absolute;left:2mm;top:2mm;z-index:2;background:var(--marino);color:#fff;border-radius:50%;width:6mm;height:6mm;font-size:3.4mm;display:grid;place-items:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .pf{font-size:3mm;text-align:center;margin-top:4mm;opacity:.7}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* desktop */
@media(min-width:820px){
 .tabs{display:none}
 .cols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
 .panel{display:block!important}
 #strip{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;padding:4px}
 .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .items{grid-template-columns:repeat(3,1fr)}
 .actions{flex-direction:row;flex-wrap:wrap}.actions .big{flex:1}.paper{width:100%}
}