:root{
  --vino:#6B0012; --vino-2:#8E1A2C; --amarillo:#F0CD02; --azul:#003398; --rojo:#D41010;
  --crema:#FBF4EC; --rosa:#F8E6E3; --tinta:#2A1A1C; --gris:#7A6A6C; --linea:#E8DCD6; --ok:#1E8A4C;
  --wa:#25D366; --admin:#3B2A2C;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--crema);color:var(--tinta);font-family:Nunito,system-ui,sans-serif;font-size:16px;line-height:1.45}
body{min-height:100vh;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--vino)}
.brand,.t,h1,h2,.prog,.big-title{font-family:Fredoka,Nunito,sans-serif;font-weight:600}
.splash{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.splash img{width:120px;border-radius:50%;background:#fff}
.splash .brand{font-size:40px;color:var(--vino)}

.shell{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + var(--safe-top)) 10px 8px;background:var(--vino);color:#fff}
.bar.owner{background:var(--azul)} .bar.admin{background:var(--admin)}
.bar .t{font-size:21px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .ib{width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:22px;border-radius:10px;cursor:pointer}
.bar .ib:active{background:rgba(255,255,255,.15)}
main{flex:1;padding:14px 16px calc(90px + var(--safe-bottom))}
main.notabs{padding-bottom:calc(24px + var(--safe-bottom))}

h1{font-size:30px;color:var(--vino);margin:6px 0 4px;line-height:1.15}
h2{font-size:21px;color:var(--vino);margin:18px 0 8px}
p{margin:6px 0}
.small{font-size:13px;color:var(--gris)}
.center{text-align:center}
.muted{color:var(--gris)}
.hello{margin:2px 0 8px;font-size:17px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:13px 14px;
  font-weight:800;font-size:15.5px;margin:9px 0;cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.vino{background:var(--vino);color:#fff}
.btn.am{background:var(--amarillo);color:var(--tinta)}
.btn.az{background:var(--azul);color:#fff}
.btn.wa{background:var(--wa);color:#fff}
.btn.g{background:#fff;color:#333;border:1px solid #ddd}
.btn.out{background:transparent;color:var(--vino);border:2px solid var(--vino)}
.btn.out.az{color:var(--azul);border-color:var(--azul);background:transparent}
.btn.ghost{background:transparent;color:var(--gris);font-weight:700}
.btn.sm{padding:8px 10px;font-size:13.5px;border-radius:11px;margin:4px 0}
.btn.big{font-size:17px;padding:16px}
.row2{display:flex;gap:8px}.row2>*{flex:1}
/* two fields side by side: when a label wraps to 2 lines, keep both inputs on the same line */
.row2>div{display:flex;flex-direction:column;justify-content:flex-end}
.gicon{font-weight:900;color:#4285F4;font-size:18px}

label.lbl{display:block;font-size:13px;color:var(--gris);margin:12px 0 4px;font-weight:700}
.input,select.input,textarea.input{width:100%;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:11px 12px;font-size:16px}
textarea.input{min-height:120px;resize:vertical;font-size:14px}
.input:focus{outline:2px solid var(--vino-2);border-color:transparent}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:12px 0}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--vino)}
.hint{font-size:13px;color:var(--vino);margin:4px 0 0}
.err-text{color:var(--rojo);font-size:13.5px;margin:6px 0}

.card{background:#fff;border-radius:18px;padding:14px;box-shadow:0 2px 12px rgba(107,0,18,.08);margin:10px 0}
.prog{font-size:22px;color:var(--vino)}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:12px 0}
.st{aspect-ratio:1;border-radius:50%;border:2px dashed #D8C3C0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#C9B2AE;font-weight:800}
.st.on{border:0;background:var(--azul);color:#fff;font-size:20px;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--azul)}
.st.gift{border-color:var(--amarillo);background:#FFF8D6;font-size:20px}
.st.gift.on{background:var(--amarillo);box-shadow:0 0 0 3px var(--vino)}
.st.pop{animation:pop .6s ease}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.chip{display:inline-block;background:var(--rosa);color:var(--vino);border-radius:20px;padding:3px 11px;font-size:12.5px;font-weight:800;border:0;cursor:pointer}
.chip.on{background:var(--azul);color:#fff}
.strip{background:#FFF8D6;border:1px solid var(--amarillo);border-radius:14px;padding:9px 12px;font-size:14px;margin:8px 0}
.bday{background:linear-gradient(135deg,#FDE3EA,#FFF8D6);border:2px solid #E9A3B5;border-radius:18px;padding:16px;text-align:center;margin:10px 0}
.bday .pct{font-family:Fredoka;font-size:34px;color:var(--vino)}
.okbox{background:#EAF7EF;border:1px solid #BFE5CC;color:#14552F;border-radius:14px;padding:12px;margin:10px 0}
.errbox{background:#FFF0F0;border:1px solid #F5C2C2;color:#8A1010;border-radius:14px;padding:12px;margin:10px 0}
.code{font:800 22px/1.2 ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--vino);background:#fff;border:2px dashed var(--vino);border-radius:12px;padding:10px;text-align:center;margin:8px 0;user-select:all}
.qrbox{display:flex;justify-content:center;margin:8px 0}
.qrbox svg,.qrbox img,.qrbox canvas{width:220px;height:220px;image-rendering:pixelated;background:#fff;border-radius:10px;padding:6px}
.list .row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;margin:7px 0;font-size:14.5px;cursor:pointer}
.list .row .r{flex:none}
.badge{display:inline-block;background:var(--amarillo);color:var(--tinta);border-radius:12px;padding:1px 9px;font-size:12px;font-weight:800}
.badge.r{background:var(--rojo);color:#fff}
.badge.az{background:var(--azul);color:#fff}
.badge.dk{background:var(--admin);color:#fff}
.req{background:#fff;border-radius:16px;padding:12px;margin:9px 0;box-shadow:0 2px 10px rgba(0,51,152,.07)}
.req.bd{border:2px solid #E9A3B5}
.req .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stat{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}

.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:center;background:#fff;border-top:1px solid var(--linea);padding-bottom:var(--safe-bottom)}
.tabs .in{display:flex;width:100%;max-width:520px}
.tabs button{flex:1;border:0;background:transparent;padding:7px 0 9px;font-size:11.5px;color:var(--gris);cursor:pointer;position:relative}
.tabs button b{display:block;font-size:20px;font-weight:400}
.tabs button.on{color:var(--azul);font-weight:800}
html.nl .tabs{padding-bottom:calc(66px + var(--safe-bottom))}
html.nl main{padding-bottom:calc(156px + var(--safe-bottom))}
html.nl main.notabs{padding-bottom:calc(80px + var(--safe-bottom))}
html.nl .toast{bottom:calc(150px + var(--safe-bottom))}
.tabs .dot{position:absolute;top:4px;left:calc(50% + 8px);background:var(--rojo);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;font-weight:800}

.drawer{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.38);display:flex}
.drawer .panel{width:84%;max-width:340px;background:#fff;height:100%;overflow:auto;padding:calc(14px + var(--safe-top)) 0 20px;animation:slide .2s ease}
@keyframes slide{from{transform:translateX(-100%)}to{transform:none}}
.drawer .head{padding:6px 18px 12px;border-bottom:1px solid var(--linea)}
.drawer .item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px 18px;font-size:15px;border-bottom:1px solid #f3ebe8;cursor:pointer;color:var(--tinta);text-decoration:none}
.drawer .item:active{background:var(--crema)}

.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:#fff;border-radius:20px;padding:20px;max-width:420px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.modal .box h2{margin-top:0}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-bottom));transform:translateX(-50%);z-index:70;background:#2A1A1C;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;max-width:90%;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}

.login-logo{width:130px;border-radius:50%;background:#fff;display:block;margin:18px auto 4px;box-shadow:0 4px 16px rgba(107,0,18,.12)}
.brand-big{font-size:46px;color:var(--vino);text-align:center;line-height:1.05}
.sep{display:flex;align-items:center;gap:10px;color:var(--gris);font-size:13px;margin:8px 0}
.sep:before,.sep:after{content:"";flex:1;height:1px;background:var(--linea)}
.lang{display:flex;justify-content:center;gap:6px;margin-top:14px}
.lang button{border:0;background:transparent;font-weight:800;color:var(--gris);cursor:pointer;padding:4px 8px;border-radius:8px}
.lang button.on{color:var(--vino);background:var(--rosa)}
.video{width:100%;border-radius:14px;background:#000;aspect-ratio:1;object-fit:cover}
.hist .row{cursor:default}

/* print sheet */
.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#fff;padding:8px;border-radius:10px}
.sticker{border:1px dashed #bbb;border-radius:8px;padding:6px 4px;text-align:center;font-size:9px;line-height:1.25;break-inside:avoid}
.sticker svg{width:100%;height:auto}
.sticker b{font-family:Fredoka;font-size:11px;color:var(--vino)}
.sticker .c{font:700 9px ui-monospace,Consolas,monospace}
@media print{
  body{background:#fff}
  .bar,.tabs,.noprint,#toast{display:none!important}
  main{padding:0!important}
  .shell{max-width:none}
  .sheet{gap:3mm;padding:0}
  .sticker{border:1px dashed #999;padding:2mm}
}