/* Reserves · demo v5: estilos de lo nuevo (alta, tareas, cartel, analíticas, planes, ayuda) */
.ok{color:var(--free);font-weight:600}
.up{color:var(--free);font-weight:600} .down{color:var(--danger);font-weight:600}
.tag.pro{background:transparent;color:var(--seated);border-color:var(--seated)}
.tag.seg-fiel{color:var(--seated);border-color:transparent;background:var(--seated-bg)}
.tag.seg-habitual{color:var(--free);border-color:transparent;background:var(--free-bg)}
.tag.seg-nuevo{color:var(--booked);border-color:transparent;background:var(--booked-bg)}
.segcell .tag:first-child{margin-left:0}
.brand .tag{border:0;background:none;padding:0;margin:1px 0 0;font-size:12px;font-weight:400;color:var(--faint)}
.plan .pill{align-self:flex-start}
.segchips .cnt{color:var(--faint);font-weight:500;margin-left:4px}
.segchips button.on .cnt{color:inherit;opacity:.7}
.cols.even{grid-template-columns:1fr 1fr}
.seg.tabs{display:inline-flex}
.bellbtn{position:relative}
.bellbtn .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.evdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.evdot.new{background:var(--free)} .evdot.cancel{background:var(--danger)} .evdot.confirm{background:var(--seated)} .evdot.wait,.evdot.waitN{background:var(--booked)}

/* Barra lateral: progreso de tareas */
.side-tasks{display:block;margin:14px 6px 4px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);text-align:left;font-size:13px;font-weight:600}
.side-tasks .faint{float:right;font-weight:500}
.side-tasks i{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:9px;overflow:hidden}
.side-tasks i b{display:block;height:100%;background:var(--free)}
.side-foot a{line-height:1.9}

/* Tareas */
.tasks-card{margin-bottom:16px}
.progress{height:6px;border-radius:3px;background:var(--raised);overflow:hidden}
.progress b{display:block;height:100%;background:var(--free);border-radius:3px;transition:width .4s}
.progress.full b{background:var(--danger)}
.tasks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.sheet .tasks{grid-template-columns:1fr}
.task{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;text-align:left;min-height:58px}
.task:hover{background:var(--hover)}
.task .tick{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:flex;align-items:center;justify-content:center}
.task.done .tick{background:var(--free);border-color:var(--free);color:#fff}
.task.done .tick svg{width:14px;height:14px}
.task .grow{flex:1;min-width:0}
.task b{display:block;font-weight:600;font-size:14px}
.task .sub{font-size:12px;color:var(--muted)}
.task.done b{color:var(--muted);text-decoration:line-through}
.task>svg{color:var(--faint)}
.steps-list{margin:14px 0 4px;padding-left:20px;line-height:1.6;color:var(--ink)}
.steps-list li{margin-bottom:8px}
.quote{background:var(--raised);border-radius:9px;padding:12px 14px;font-size:14px;line-height:1.55}
.ctx{margin-top:14px;font-size:13px;color:var(--muted);background:var(--raised);border-radius:9px;padding:10px 12px}

/* Cartel QR */
.poster-wrap{margin:16px 0 4px;display:flex;justify-content:center;background:var(--raised);border-radius:10px;padding:18px}
.poster{width:100%;max-width:340px;aspect-ratio:1/1.414;background:#fff;color:#18181b;border-radius:6px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.25);font-family:var(--sans)}
.poster .p-top{background:var(--accent);color:var(--accent-ink);padding:18px;text-align:center}
.poster .p-top img{max-height:40px;max-width:120px;object-fit:contain;display:block;margin:0 auto 6px}
.poster .p-name{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.01em}
.poster .p-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px;text-align:center}
.poster h2{font-family:var(--head);font-size:22px;margin:0;font-weight:700;letter-spacing:-.02em}
.poster .sub2{font-size:14px;color:#55555c;margin-top:2px}
.poster .qr{width:62%;height:auto;margin:14px 0 8px}
.poster .p-url{font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:600}
.poster p{font-size:12px;color:#55555c;margin:8px 0 0;line-height:1.5}
.poster p span{color:#72727a}
.poster .p-foot{font-size:11px;color:#72727a;text-align:center;padding:10px;border-top:1px solid #eee}
/* El estilo general reduce los svg a tamaño de icono; el QR necesita su tamaño real */
svg.qr{width:200px;height:200px;border-radius:6px}
.qr-off{width:200px;height:200px;border:1px dashed #aaa;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:#777;padding:14px;margin:14px 0}
#print{display:none}
@media print{
  body>*:not(#print){display:none!important}
  #print{display:block!important}
  #print .poster{max-width:none;width:190mm;height:270mm;aspect-ratio:auto;box-shadow:none;border-radius:0;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print .poster .p-name{font-size:40px} #print .poster h2{font-size:44px} #print .poster .p-url{font-size:22px} #print .poster p{font-size:18px} #print .poster .p-foot{font-size:16px}
  #print .poster .p-top{padding:40px} #print .poster .p-top img{max-height:90px;max-width:240px}
}

/* Visita guiada */
#tour.tour-on{position:fixed;inset:0;z-index:70}
.tour-hole{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.62);transition:all .25s;pointer-events:none}
.tour-tip{position:fixed;width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);animation:pop .2s ease}
.tour-tip p{margin:6px 0 14px;font-size:15px}
@keyframes pop{from{opacity:0;margin-top:6px}}

/* Analíticas */
.vbars{display:flex;align-items:flex-end;gap:4px;height:calc(var(--h) + 40px);padding-top:4px}
.vb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:default}
.vb i{display:block;width:100%;max-width:38px;background:var(--muted);opacity:.55;border-radius:4px 4px 0 0;max-height:var(--h)}
.vb:last-child i{opacity:.95;background:var(--ink)}
.vb:hover i{opacity:1}
.vb.off i{background:transparent}
.vb .vv{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:17px}
.vb .vl{font-size:11px;color:var(--faint);margin-top:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.vbars:has(.vb:nth-child(10)) .vb:nth-child(even) .vl{visibility:hidden}
.hbars{display:flex;flex-direction:column;gap:10px}
.hb{display:grid;grid-template-columns:140px 1fr 90px;gap:10px;align-items:center;font-size:14px}
.hb .hl{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .ht{height:10px;background:var(--raised);border-radius:5px;overflow:hidden}
.hb .ht i{display:block;height:100%;background:var(--muted);opacity:.7;border-radius:5px}
.hb .hv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.dtable{margin-top:12px;font-size:13px;color:var(--muted)}
.dtable summary{cursor:pointer;width:max-content}
.dtable .tbl td,.dtable .tbl th{padding:6px 8px}
.tip{position:absolute;z-index:80;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:6px 10px;border-radius:7px;pointer-events:none;white-space:nowrap}
.minibars{display:flex;gap:4px;align-items:flex-end;height:74px}
.mb-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.mb-col i{display:block;width:100%;background:var(--seated);opacity:.75;border-radius:3px 3px 0 0}
.mb-col span{font-size:10px;color:var(--faint);margin-top:4px}

/* Planes y bloqueos */
.upsell{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--seated);background:var(--seated-bg);border-radius:10px;margin:10px 0}
.upsell>svg{color:var(--seated)}
.upsell .grow{flex:1}
.upsell .sub{font-size:13px;color:var(--muted)}
.locked-prev{filter:blur(4px);opacity:.45;pointer-events:none;user-select:none;margin-top:6px;max-height:620px;overflow:hidden}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.plan{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px}
.plan.on{border-color:var(--ink)}
.plan .pn{font-weight:600}
.plan .pp{font-family:var(--head);font-size:24px;font-weight:600;letter-spacing:-.02em}
.plan .pp span{font-size:13px;color:var(--faint);font-family:var(--sans);font-weight:500}
.plan ul{margin:4px 0 8px;padding-left:16px;font-size:13px;color:var(--muted);flex:1}
.plan li{margin-bottom:4px}
.plan-now{display:flex;justify-content:space-between;gap:12px;background:var(--raised);border-radius:10px;padding:12px 14px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--raised);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.pwmeter{height:4px;border-radius:2px;background:var(--raised);margin-top:8px;overflow:hidden}
.pwmeter b{display:block;height:100%;width:0;transition:width .2s}

/* Web de ejemplo con el botón */
.site-mock{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:12px;background:#fafaf8}
.sm-bar{display:flex;gap:5px;align-items:center;padding:8px 10px;background:#ececea;font-size:11px;color:#777}
.sm-bar i{width:8px;height:8px;border-radius:50%;background:#cfcfcb}
.sm-bar span{margin-left:8px}
.sm-body{position:relative;padding:16px;height:130px}
.sm-h{font-family:var(--head);font-weight:600;color:#222;margin-bottom:10px}
.sm-l{height:8px;background:#e4e4e0;border-radius:4px;width:80%;margin-bottom:8px}
.sm-l.short{width:50%}
.sm-btn{position:absolute;right:14px;bottom:14px;height:40px;padding:0 18px;border-radius:20px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.18)}

/* Avisos en la parte superior */
#banners:empty{display:none}
#banners{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.banner{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.banner .grow{flex:1}
.banner.warn{border-color:var(--booked);background:var(--booked-bg)}
.banner.support{border-color:var(--seated);background:var(--seated-bg)}

/* Ayuda */
.ticket{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px}
.tmsg{margin-top:10px;padding:10px 12px;border-radius:9px;background:var(--raised);font-size:14px}
.tmsg.soporte{border-left:3px solid var(--seated)}

/* Página pública: extras */
.wl-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 14px;background:var(--raised);border-radius:10px;font-size:14px}
.guar{display:flex;gap:12px;margin-top:16px;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--raised);font-size:14px}
.guar p{margin:4px 0 0}
.bot{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--faint);margin-top:8px}
.bot svg{width:14px;height:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.days button.full small{color:var(--danger)}

/* Inicio de sesión */
.auth{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:minmax(280px,38%) 1fr;background:var(--bg)}
.auth-side{background:var(--surface);border-right:1px solid var(--line);padding:40px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.auth-side p{color:var(--muted);margin:0;font-size:16px;max-width:300px}
.auth-brand{font-family:var(--head);font-weight:700;font-size:28px;letter-spacing:-.03em}
.auth-main{display:flex;flex-direction:column;overflow:auto}
.auth-top{display:flex;justify-content:flex-end;padding:16px}
.auth-box{width:100%;max-width:400px;margin:auto;padding:16px 16px 48px}
.auth-box h1{font-family:var(--head);font-weight:600;font-size:26px;letter-spacing:-.02em;margin:0 0 18px}
.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:14px;color:var(--muted)}
.auth-links a{color:var(--ink);font-weight:600}
.demo-hint{margin-top:18px;font-size:13px;color:var(--faint);background:var(--surface);border:1px dashed var(--line);border-radius:9px;padding:10px 12px}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:1px}
.okmsg{color:var(--free);font-size:14px;margin-top:12px}

/* Alta guiada */
.onb{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:auto;display:flex;flex-direction:column}
.ob-top{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}
.ob-dots{display:flex;gap:6px}
.ob-dots span{width:28px;height:4px;border-radius:2px;background:var(--line);transition:background .3s}
.ob-dots span.on{background:var(--ink)}
.ob-box{width:100%;max-width:640px;margin:0 auto;padding:16px 16px 60px;animation:slide .35s ease}
.ob-box h1{font-family:var(--head);font-weight:600;font-size:28px;letter-spacing:-.02em;margin:0 0 6px}
.ob-box>p.muted{margin:0 0 22px}
@keyframes slide{from{opacity:0;transform:translateX(18px)}}
.ob-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:26px}
.ob-nav .btn{min-width:140px}
.ob-turn{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--surface)}
.ob-turn.off{opacity:.6}
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.ob-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.ob-floor{position:relative;height:190px;background:var(--raised);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ob-tb{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1.5px solid var(--free);background:var(--free-bg);animation:popin .35s cubic-bezier(.3,1.6,.6,1) both}
.ob-tb.round{border-radius:50%;width:26px;height:26px}
.ob-tb.rect{border-radius:5px;height:26px}
.ob-tb.s4{width:36px} .ob-tb.s6{width:46px} .ob-tb.s8{width:56px}
@keyframes popin{from{opacity:0;scale:.3}}
.ob-art{height:96px;position:relative;margin-bottom:18px}
.art-hello span{position:absolute;bottom:10px;width:46px;height:46px;border-radius:50%;border:2px solid var(--free);background:var(--free-bg);animation:bob 2.4s ease-in-out infinite}
.art-hello span:nth-child(1){left:0}
.art-hello span:nth-child(2){left:58px;border-radius:9px;width:70px;animation-delay:.2s;border-color:var(--booked);background:var(--booked-bg)}
.art-hello span:nth-child(3){left:140px;animation-delay:.4s;border-color:var(--seated);background:var(--seated-bg)}
.art-hello span:nth-child(4){left:198px;width:32px;height:32px;animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-12px)}}
.art-store i{position:absolute;left:0;bottom:8px;width:120px;height:70px;border:2px solid var(--ink);border-radius:6px 6px 2px 2px}
.art-store b{position:absolute;left:-6px;bottom:72px;width:132px;height:18px;background:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 28px);border-radius:4px;animation:awn 3s ease-in-out infinite;transform-origin:bottom}
@keyframes awn{50%{transform:scaleY(1.25)}}
.art-clock i{position:absolute;left:0;bottom:6px;width:84px;height:84px;border-radius:50%;border:2px solid var(--ink)}
.art-clock b{position:absolute;left:41px;bottom:46px;width:2px;height:34px;background:var(--ink);transform-origin:bottom center;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-done i{position:absolute;left:0;bottom:6px;width:84px;height:84px;border-radius:50%;background:var(--free);color:#fff;display:flex;align-items:center;justify-content:center;animation:popin .5s cubic-bezier(.3,1.6,.6,1) both}
.art-done i svg{width:40px;height:40px}

/* Agenda: calendario mensual */
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.month .mh{font-size:12px;color:var(--faint);padding:0 4px 2px;font-weight:500}
.mday{background:var(--surface);border:1px solid var(--line);border-radius:9px;min-height:96px;padding:8px 9px;text-align:left;display:flex;flex-direction:column;gap:2px}
.mday:hover{border-color:var(--muted)}
.mday .mn{font-family:var(--head);font-weight:600;font-size:15px;margin-bottom:2px}
.mday .mp{font-size:13px;color:var(--ink)} .mday .mp b{font-weight:600;font-variant-numeric:tabular-nums}
.mday .mr{font-size:12px;color:var(--faint)}
.mday .mcl{font-size:11px;color:var(--danger);font-weight:600}
.mday .mbar{display:block;height:4px;border-radius:2px;background:var(--raised);overflow:hidden;margin-top:auto}
.mday .mbar b{display:block;height:100%;background:var(--muted)}
.mday .mbar b.hot{background:var(--danger)}
.mday.today{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mday.out{opacity:.35}
.mday.past .mp,.mday.past .mn{color:var(--muted)}
.mday.closed{background:var(--raised)}

@media (max-width:900px){
  .month{gap:3px}
  .mday{min-height:64px;padding:5px;border-radius:7px}
  .mday .mn{font-size:13px}
  .mday .mr,.mday .mcl{display:none}
  .mday .mp{font-size:11px} .mday .mp{white-space:nowrap;overflow:hidden}
  .mday.closed::after{content:"—";color:var(--danger);font-size:12px}
  .cols.even{grid-template-columns:1fr}
  .tasks{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .ob-grid{grid-template-columns:1fr}
  .hb{grid-template-columns:110px 1fr 80px}
  .seg.tabs{display:flex}
  .seg.tabs button{flex:1;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.done h2{justify-content:center}