:root { --ink:#17222E; --paper:#EEF1EF; --line:#D3DAD6; --red:#B3202A; --blue:#24508A; --brass:#A9844E; }
html { -webkit-text-size-adjust: 100%; }
body { padding-top: env(safe-area-inset-top, 0px); }

/* Franja del poste de barbería: el único adorno de la página */
.pole-top { position: relative; }
.pole-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 10px, #fff 10px 20px, var(--blue) 20px 30px, #fff 30px 40px);
}

.step-title { display:flex; align-items:center; gap:.6rem; font-family:'Archivo Narrow',Archivo,sans-serif; font-weight:700; font-size:1.5rem; line-height:1.2; margin-bottom:.35rem; }
.step-num { display:inline-grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:999px; background:var(--ink); color:#fff; font-size:.95rem; }

.btn-primary { background:var(--red); color:#fff; font-weight:700; border-radius:.6rem; padding:.7rem 1.1rem; transition:filter .15s; }
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn-primary:disabled { background:#9aa3a0; cursor:not-allowed; }
.btn-dark { background:var(--ink); color:#fff; font-weight:600; border-radius:.6rem; padding:.55rem .9rem; }
.btn-light { background:#fff; color:var(--ink); font-weight:600; border-radius:.6rem; padding:.6rem .9rem; border:1px solid var(--line); display:inline-block; }
.btn-ghost { padding:.35rem .65rem; border-radius:.5rem; font-weight:600; }
.btn-ghost:hover { background:rgba(23,34,46,.08); }
.btn-sm { font-size:.8rem; padding:.35rem .65rem; border-radius:.5rem; font-weight:600; border:1px solid var(--line); background:#fff; }
.btn-sm:hover { border-color:var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

.field { display:block; font-size:.85rem; font-weight:600; }
.field > span { display:block; margin-bottom:.25rem; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem; font-weight:400; background:#fff; font-size:1rem; }

.tab { border-radius:.4rem; padding:.45rem; color:rgba(23,34,46,.65); }
.tab-on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(23,34,46,.12); }

.choice { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; text-align:left; width:100%; background:#fff; border:1.5px solid var(--line); border-radius:.7rem; padding:.8rem .9rem; }
@media (hover:hover) { .choice:hover { border-color:var(--ink); } }
.choice[aria-pressed="true"] { border-color:var(--blue); background:#F2F6FB; box-shadow:inset 0 0 0 1px var(--blue); }
.chip { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.45rem .9rem; font-weight:600; font-size:.9rem; }
.chip[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }

.day { aspect-ratio:1; border-radius:.5rem; font-weight:600; font-size:.9rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1.5px solid transparent; }
.day:not(:disabled):hover { border-color:var(--ink); }
.day:disabled { color:#a6aeab; cursor:default; }
.day[aria-pressed="true"] { background:var(--ink); color:#fff; }
.dot { display:inline-block; width:.5rem; height:.5rem; border-radius:999px; }

.slot { border:1.5px solid var(--line); background:#fff; border-radius:.55rem; padding:.6rem .2rem; font-weight:700; font-size:.9rem; }
@media (hover:hover) { .slot:hover { border-color:var(--ink); } }
.slot[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }

.modal { position:fixed; inset:0; z-index:60; align-items:center; justify-content:center; padding:1rem; background:rgba(23,34,46,.72); overflow-y:auto; }
.modal-card { width:100%; max-width:28rem; background:#fff; border-radius:1rem; padding:1.25rem; max-height:calc(100dvh - 2rem); overflow-y:auto; }

/* Ticket del cupo: el elemento memorable */
.ticket { background:#fff; border-radius:1rem; overflow:hidden; position:relative; }
.ticket-head { background:var(--ink); color:#fff; padding:1rem 1.25rem 1.1rem; position:relative; }
.ticket-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:repeating-linear-gradient(-45deg, var(--red) 0 8px, #fff 8px 16px, var(--blue) 16px 24px, #fff 24px 32px); }
.ticket-code { font-family:'Archivo Narrow',Archivo,sans-serif; font-weight:700; font-size:2.6rem; letter-spacing:.06em; line-height:1; font-variant-numeric:tabular-nums; }
.ticket-cut { position:relative; border-top:2px dashed var(--line); margin:0 1rem; }
.ticket-cut::before, .ticket-cut::after { content:""; position:absolute; top:-12px; width:22px; height:22px; border-radius:999px; background:rgba(23,34,46,.72); }
.ticket-cut::before { left:-28px; } .ticket-cut::after { right:-28px; }
.ticket-row { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; padding:.3rem 0; }
.ticket-row dt { color:rgba(23,34,46,.6); } .ticket-row dd { font-weight:600; text-align:right; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

.day-strip { scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.daypill { scroll-snap-align:start; flex:0 0 auto; width:3.6rem; border:1.5px solid var(--line); background:#fff; border-radius:.7rem; padding:.45rem 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.daypill:disabled { color:#a6aeab; background:transparent; }
.daypill[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.slot:disabled { background:transparent; color:#a6aeab; text-decoration:line-through; border-style:dashed; cursor:default; }
.choice:disabled { opacity:.55; cursor:not-allowed; }
.choice:disabled:hover { border-color:var(--line); }

/* Calendario estilo agenda */
.cday { position:relative; margin:0 auto; width:2.6rem; height:2.6rem; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1rem; line-height:1; }
.cday:not(:disabled):hover { background:#EAF0F7; }
.cday:disabled { color:#b9c0bd; cursor:default; }
.cday .hoy { position:absolute; bottom:2px; font-size:8px; font-weight:700; color:var(--blue); letter-spacing:.05em; }
.cday[aria-pressed="true"] { background:var(--blue); color:#fff; font-size:1.15rem; font-weight:600; }
.cday[aria-pressed="true"] .hoy { color:#fff; }
.tpill { border:1.5px solid var(--blue); color:var(--blue); background:#fff; border-radius:999px; padding:.55rem .2rem; font-size:.85rem; font-weight:600; }
.tpill:not(:disabled):hover { background:#EAF0F7; }
.tpill[aria-pressed="true"] { background:var(--blue); color:#fff; font-size:.95rem; }
.tpill:disabled { border-color:#dfe4e2; color:#b9c0bd; cursor:default; }
.ticket-ok { width:3.5rem; height:3.5rem; border-radius:999px; background:#fff; color:var(--blue); display:grid; place-items:center; margin:0 auto .5rem; font-size:1.8rem; font-weight:800; border:3px solid var(--blue); }

/* =====================================================================
   TEMA "EPIC" para la página del cliente (body.epic): oscuro y compacto
   ===================================================================== */
body.epic { background:#0b0f19; color:#f3f4f6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:14px; }
body.epic .font-narrow, body.epic .step-title { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:0; }
body.epic .pole-top { background:#0b0f19 !important; border-bottom:1px solid #1f2937; }
body.epic .pole-top::after { display:none; }
body.epic .bg-white { background:#111827 !important; }
body.epic .bg-paper { background:#0f172a !important; }
body.epic .bg-ink { background:#0b0f19 !important; }
body.epic .text-ink { color:#f3f4f6 !important; }
body.epic [class*="text-ink/"] { color:#9ca3af !important; }
body.epic .border-line, body.epic .border-b, body.epic .border-t, body.epic .border-l { border-color:#1f2937 !important; }
body.epic .bg-pole-blue { background:linear-gradient(135deg,#052e24,#0b3b2e) !important; border-bottom:1px solid rgba(16,185,129,.35); }
body.epic .text-pole-blue { color:#34d399 !important; }
body.epic .text-pole-red { color:#f87171 !important; }
body.epic .step-title { font-size:1.05rem; font-weight:800; }
body.epic .step-num { background:#10b981; color:#000; width:1.4rem; height:1.4rem; font-size:.75rem; }
body.epic h2.font-narrow { font-size:1rem !important; letter-spacing:.12em; }

body.epic .btn-primary { background:#10b981; color:#000; font-weight:800; border-radius:.75rem; padding:.6rem 1rem; font-size:.85rem; }
body.epic .btn-primary:hover:not(:disabled) { background:#34d399; filter:none; }
body.epic .btn-primary:disabled { background:#1f2937; color:#6b7280; }
body.epic .btn-dark { background:#1f2937; color:#f3f4f6; border:1px solid #374151; border-radius:.75rem; font-size:.8rem; }
body.epic .btn-light, body.epic .btn-sm { background:#1f2937; color:#e5e7eb; border:1px solid #374151; border-radius:.75rem; }
body.epic .btn-sm:hover, body.epic .btn-light:hover { border-color:#10b981; }
body.epic .btn-ghost:hover { background:rgba(255,255,255,.06); }
body.epic .field { font-size:.75rem; color:#9ca3af; font-weight:600; }
body.epic .field input, body.epic .field select, body.epic .field textarea { background:#1f2937; border:1px solid #374151; color:#fff; border-radius:.75rem; padding:.55rem .75rem; font-size:.9rem; }
body.epic .field input:focus { outline:none; border-color:#10b981; }
body.epic .tab { color:#9ca3af; }
body.epic .tab-on { background:#1f2937; color:#fff; box-shadow:none; }

body.epic .chip { background:#1f2937; border:1px solid #374151; color:#d1d5db; font-size:.75rem; padding:.3rem .75rem; }
body.epic .chip[aria-pressed="true"] { background:#10b981; color:#000; border-color:#10b981; }
body.epic .choice { background:rgba(31,41,55,.6); border:1px solid #374151; border-radius:.9rem; padding:.65rem .8rem; color:#f3f4f6; }
body.epic .choice:hover { border-color:#10b981; }
body.epic .choice[aria-pressed="true"] { border-color:#10b981; background:rgba(16,185,129,.1); box-shadow:inset 0 0 0 1px #10b981; }
body.epic .choice .text-xs { color:#9ca3af; }
body.epic .tpill { background:transparent; border:1px solid rgba(16,185,129,.55); color:#6ee7b7; font-size:.8rem; padding:.45rem .2rem; }
body.epic .tpill:not(:disabled):hover { background:rgba(16,185,129,.12); }
body.epic .tpill[aria-pressed="true"] { background:#10b981; color:#000; border-color:#10b981; font-weight:800; }
body.epic .cday { width:2.3rem; height:2.3rem; font-size:.85rem; color:#e5e7eb; }
body.epic .cday:not(:disabled):hover { background:#1f2937; }
body.epic .cday:disabled { color:#374151; }
body.epic .cday .hoy { color:#34d399; }
body.epic .cday[aria-pressed="true"] { background:#10b981; color:#000; font-size:.95rem; font-weight:800; }
body.epic .cday[aria-pressed="true"] .hoy { color:#000; }

body.epic .modal { background:rgba(0,0,0,.8); backdrop-filter:blur(4px); }
body.epic .modal-card { background:#111827; border:1px solid #1f2937; border-radius:1rem; color:#f3f4f6; }
body.epic .ticket { background:#111827; border:1px solid #1f2937; }
body.epic .ticket-head { background:#0b0f19; border-bottom:1px solid rgba(16,185,129,.35); }
body.epic .ticket-head::after { display:none; }
body.epic .ticket-code { color:#fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:2rem; }
body.epic .ticket-cut { border-top-color:#374151; }
body.epic .ticket-row dt { color:#9ca3af; } body.epic .ticket-row dd { color:#f3f4f6; }
body.epic .ticket-ok { background:#10b981; color:#000; border-color:#10b981; }
body.epic #bookBar { background:rgba(11,15,25,.95) !important; border-color:#1f2937 !important; }

/* Etiquetas de estado sobre fondo oscuro */
body.epic .bg-amber-100 { background:rgba(245,158,11,.15) !important; color:#fcd34d !important; }
body.epic .bg-sky-100 { background:rgba(14,165,233,.15) !important; color:#7dd3fc !important; }
body.epic .bg-emerald-100 { background:rgba(16,185,129,.15) !important; color:#6ee7b7 !important; }
body.epic .bg-rose-100 { background:rgba(244,63,94,.15) !important; color:#fda4af !important; }
body.epic .bg-slate-200 { background:#1f2937 !important; color:#9ca3af !important; }
body.epic .bg-amber-50 { background:rgba(245,158,11,.1) !important; color:#fcd34d !important; }

/* Dropzone del comprobante */
.drop { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:1rem; border:1.5px dashed var(--line); border-radius:.9rem; background:var(--paper); color:rgba(23,34,46,.7); font-size:.85rem; text-align:center; cursor:pointer; }
.drop:hover { border-color:var(--blue); }
.field input.bad { border-color:var(--red); }
.field input.good { border-color:#059669; }
.spin { display:inline-block; width:1rem; height:1rem; border:2px solid rgba(36,80,138,.25); border-top-color:var(--blue); border-radius:999px; animation:spin .8s linear infinite; vertical-align:-3px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Menú lateral del panel (estilo Claude / Epic): cajón en celular, barra fija en computador */
.sidenav { position:fixed; inset:0 auto 0 0; z-index:50; width:17rem; max-width:85vw; background:#fff; padding:1rem .75rem; box-shadow:0 10px 40px rgba(0,0,0,.25); transform:translateX(-105%); transition:transform .2s ease; overflow-y:auto; padding-top:max(1rem, env(safe-area-inset-top)); }
.sidenav.open { transform:none; }
@media (min-width:1024px) {
  .sidenav { position:sticky; top:5rem; z-index:auto; width:15rem; flex-shrink:0; align-self:flex-start; transform:none; box-shadow:none; background:transparent; padding:0; max-height:calc(100vh - 6rem); }
}
.navitem { display:flex; align-items:center; gap:.75rem; width:100%; padding:.65rem .8rem; border-radius:.7rem; font-weight:600; font-size:.92rem; color:rgba(23,34,46,.78); text-align:left; }
.navitem i { width:1.15rem; text-align:center; color:rgba(23,34,46,.55); }
.navitem:hover { background:#fff; color:var(--ink); }
@media (max-width:1023px) { .navitem:hover { background:var(--paper); } }
.navitem[aria-current="page"] { background:var(--ink); color:#fff; }
.navitem[aria-current="page"] i { color:#fff; }

/* Menú del panel como Epic: cuadros con ícono arriba en celular, lista lateral en computador */
.admin-tab { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; padding:.75rem .35rem; border-radius:.9rem; border:1px solid var(--line); background:#fff; color:rgba(23,34,46,.7); font-size:11px; font-weight:700; line-height:1.15; text-align:center; transition:color .15s, border-color .15s, background-color .15s; }
.admin-tab i { font-size:1.05rem; }
.admin-tab:hover { color:var(--ink); border-color:rgba(23,34,46,.3); }
.admin-tab[aria-current="page"] { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.45); color:#047857; }
.admin-tab[aria-current="page"] i { color:#059669 !important; }
@media (min-width:1024px) {
  .admin-tab { flex-direction:row; justify-content:flex-start; gap:.7rem; padding:.7rem .85rem; font-size:13px; text-align:left; }
  .admin-tab i { width:1.1rem; text-align:center; font-size:.95rem; }
}

/* Colores propios de cada tienda (Apariencia) */
body.branded { background:var(--b-bg) !important; }
body.branded header.pole-top { background:var(--b-header) !important; color:var(--b-on-header) !important; }
body.branded header.pole-top .text-white\/70, body.branded header.pole-top .text-white\/80 { color:var(--b-on-header) !important; opacity:.75; }
body.branded .pole-top::after { background:var(--b-primary); }
body.branded .bg-pole-blue { background:var(--b-primary) !important; }
body.branded .bg-pole-blue h2 { color:var(--b-on-primary) !important; }
body.branded .btn-primary { background:var(--b-primary); color:var(--b-on-primary); }
body.branded .tpill { border-color:var(--b-primary); color:var(--b-primary-text); }
body.branded .tpill[aria-pressed="true"], body.branded .cday[aria-pressed="true"] { background:var(--b-primary); color:var(--b-on-primary); border-color:var(--b-primary); }
body.branded .cday .hoy { color:var(--b-primary-text); }
body.branded .cday[aria-pressed="true"] .hoy { color:var(--b-on-primary); }
body.branded .chip[aria-pressed="true"] { background:var(--b-header); color:var(--b-on-header); border-color:var(--b-header); }
body.branded .choice[aria-pressed="true"] { border-color:var(--b-primary); box-shadow:inset 0 0 0 1px var(--b-primary); background:#fff; }
body.branded .tab-on { color:var(--b-primary-text); }
body.branded .ticket-head { background:var(--b-header); color:var(--b-on-header); }
body.branded .ticket-head::after { background:var(--b-primary); }
body.branded .ticket-ok { color:var(--b-primary-text); border-color:var(--b-primary); }
body.branded .text-pole-blue { color:var(--b-primary-text) !important; }
body.branded .bg-pole-blue.text-white, body.branded button.bg-pole-blue { color:var(--b-on-primary) !important; }
.acct-tab { border-radius:.4rem; padding:.45rem; color:rgba(23,34,46,.65); }
.acct-tab[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(23,34,46,.12); }

/* Encabezado del panel, estilo limpio tipo Proton */
.hdr-pill { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:600; font-size:.82rem; white-space:nowrap; transition:background .15s, border-color .15s; }
.hdr-pill:hover, .hdr-pill[aria-expanded="true"] { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }
.hdr-avatar { width:2.25rem; height:2.25rem; border-radius:999px; background:#fff; color:var(--ink); font-weight:800; font-size:.85rem; display:grid; place-items:center; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.hdr-avatar.hidden, .hdr-pill.hidden { display:none; }
.hdr-menu { position:absolute; right:0; top:calc(100% + .5rem); z-index:70; width:17rem; max-width:calc(100vw - 2rem); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:1rem; padding:.85rem; box-shadow:0 18px 50px rgba(15,23,42,.22); }
.menu-item { display:flex; align-items:center; gap:.7rem; width:100%; padding:.6rem .65rem; border-radius:.6rem; font-size:.9rem; font-weight:600; text-align:left; color:var(--ink); }
.menu-item i { width:1.1rem; text-align:center; color:rgba(23,34,46,.55); }
.menu-item:hover { background:var(--paper); }
.menu-item.text-pole-red, .menu-item.text-pole-red i { color:var(--red); }
@media (max-width:420px) { .hdr-pill span { display:none; } .hdr-pill { padding:.5rem .6rem; } }

/* Panel del negocio con la marca y el menú personalizado */
body.branded .admin-tab[aria-current="page"] { background:var(--b-primary-soft); border-color:var(--b-primary-line); color:var(--b-primary-text); }
body.branded .admin-tab[aria-current="page"] i { color:var(--b-primary-text) !important; }
body.branded .hdr-pill { color:var(--b-on-header); border-color:currentColor; background:transparent; }
body.branded .hdr-avatar { background:var(--b-primary); color:var(--b-on-primary); }
#tabs.tabs-list .admin-tab { flex-direction:row; justify-content:flex-start; gap:.6rem; padding:.65rem .75rem; font-size:12.5px; text-align:left; }
#tabs.tabs-mono .admin-tab i { color:currentColor !important; }

/* Tarjeta del link para clientes */
.link-ico { background:rgba(16,185,129,.12); color:#047857; }
body.branded .link-ico { background:var(--b-primary-soft); color:var(--b-primary-text); }
.link-act { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.55rem .1rem; border-radius:.7rem; border:1px solid var(--line); background:#fff; }
.link-act i { font-size:1rem; color:var(--ink); }
.link-act:hover { border-color:rgba(23,34,46,.35); }

/* Pago compacto */
.pay-amount { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-radius:.9rem; background:var(--paper); padding:.75rem .9rem; }
.pay-row { display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:.8rem; padding:.55rem .65rem; background:#fff; }
.pay-ibtn { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.6rem; border:1px solid var(--line); background:#fff; color:var(--ink); flex-shrink:0; }
.pay-ibtn.main { background:var(--blue); border-color:var(--blue); color:#fff; }
body.branded .pay-ibtn.main { background:var(--b-primary); border-color:var(--b-primary); color:var(--b-on-primary); }
.pay-drop { display:flex; align-items:center; gap:.75rem; border:1.5px dashed var(--line); border-radius:.9rem; padding:.6rem .75rem; cursor:pointer; background:var(--paper); }
.pay-drop:hover { border-color:var(--blue); }
.pay-drop-ico { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.7rem; background:#fff; color:var(--blue); flex-shrink:0; }
body.branded .pay-drop-ico { color:var(--b-primary-text); }

/* ================= Estilo "sp": claro y frío (panel del negocio) ================= */
.sp { --canvas:#F2F5F8; --paperw:#FFFFFF; --sink:#14213D; --soft:#5B6782; --hair:#DDE3EA; --sblue:#2B59C3; --sred:#D7263D; --mint:#1E9E63; --sky:#3F8FD6; --amber:#C77700;
  background:var(--canvas); color:var(--sink); font-family:Figtree, system-ui, sans-serif; }
.sp .disp { font-family:"Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.01em; }
.sp .soft { color:var(--soft); }
.sp .sp-card { background:var(--paperw); border-radius:20px; padding:14px; }
.sp .sp-h { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin:20px 2px 8px; }
.sp .sp-h h2 { font-family:"Bricolage Grotesque", system-ui, sans-serif; font-size:18px; font-weight:700; }
.sp .sp-h span, .sp .sp-h button { font-size:12.5px; color:var(--soft); }
.sp .admin-tab { background:#fff; }
.sp .t-ok { background:#e2f5ec; color:#16774b; } .sp .t-trial { background:#e3f0fc; color:#1f6fb3; }
.sp .t-due { background:#fff3dc; color:#9a5a00; } .sp .t-late { background:#fde8eb; color:#b81d33; } .sp .t-off { background:#eceff3; color:#5b6782; }
.sp .todo { background:var(--paperw); border-radius:16px; padding:11px 12px; display:flex; gap:11px; align-items:center; margin-top:8px; }
.sp .todo .ic { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; font-size:15px; }
.sp .todo .act { font-size:12.5px; font-weight:700; border-radius:999px; padding:8px 12px; white-space:nowrap; flex-shrink:0; }
/* barra inferior */
.sp-bnav { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:50; background:var(--sink); border-radius:22px;
  display:flex; align-items:center; justify-content:space-around; padding:9px 4px; box-shadow:0 14px 34px -14px rgba(20,33,61,.6); }
.sp-bnav .nv { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:600; color:#9fb0cf; min-width:52px; }
.sp-bnav .nv i { font-size:18px; }
.sp-bnav .nv[aria-current="page"] { color:#fff; }
.sp-bnav .nv-quick { display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:-34px; }
.sp-bnav .nv-quick span { width:58px; height:58px; border-radius:19px; background:#fff; color:var(--sink); display:grid; place-items:center; font-size:30px; font-weight:700; line-height:1; border:3px solid var(--sink); box-shadow:0 12px 26px -10px rgba(20,33,61,.7); }
body.branded .sp-bnav .nv-quick span { background:var(--b-primary); color:var(--b-on-primary); }
.sp-bnav .nv-quick small { font-size:10.5px; font-weight:700; color:#fff; }
@media (min-width:1024px) { .sp-bnav { display:none !important; } }
@media (max-width:1023px) { #sideNav { display:none; } body.show-more #sideNav { display:block; } body.show-more #adminContent { display:none; } }
.sp-quick-side { align-items:center; gap:.6rem; justify-content:center; border-radius:16px; padding:.85rem; background:var(--sink); color:#fff; font-weight:800; }
body.branded .sp-quick-side { background:var(--b-primary); color:var(--b-on-primary); }
/* en vivo */
.live-bar { display:flex; align-items:center; gap:9px; border-radius:16px; padding:11px 13px; background:#e9f7f0; font-size:13.5px; }
.live-bar.off { background:#eef1f5; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(30,158,99,.18); flex-shrink:0; }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation:livePulse 1.8s ease-in-out infinite; } }
@keyframes livePulse { 50% { box-shadow:0 0 0 7px rgba(30,158,99,0); } }
.who-row { display:flex; align-items:center; gap:9px; font-size:13px; padding:8px 0; }
.who-row + .who-row { border-top:1px solid var(--hair); }
.who-av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:800; flex-shrink:0; }
/* hoy en la silla */
.chair-lane { position:relative; height:38px; background:#f4f6f9; border-radius:11px; margin-top:5px; overflow:hidden; }
.chair-blk { position:absolute; top:4px; bottom:4px; border-radius:8px; font-size:10.5px; font-weight:700; padding:0 6px; display:flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chair-free { position:absolute; top:4px; bottom:4px; border-radius:8px; border:1.5px dashed #c9d2de; }
.chair-now { position:absolute; top:0; bottom:0; width:2px; background:var(--sred); }
/* estados */
.story-btn { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; width:66px; flex-shrink:0; }
.story-ring { width:60px; height:60px; border-radius:50%; padding:3px; background:conic-gradient(#D7263D, #f59e0b, #2B59C3, #D7263D); }
.story-ring > span { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; border:3px solid #fff; background-size:cover; background-position:center; color:#fff; font-size:10px; font-weight:800; text-align:center; overflow:hidden; padding:4px; line-height:1.1; }
.story-ring.seen { background:#cfd6df; }
.story-add { width:60px; height:60px; border-radius:50%; border:2px dashed #b9c3d0; display:grid; place-items:center; font-size:22px; color:var(--soft); background:#fff; }
/* cita rápida */
.q-day { border:1px solid var(--hair); background:#fff; border-radius:14px; padding:7px 11px; text-align:center; flex-shrink:0; min-width:58px; }
.q-day b { display:block; font-size:16px; font-family:"Bricolage Grotesque", system-ui, sans-serif; }
.q-day small { font-size:10.5px; color:var(--soft); text-transform:capitalize; }
.q-day[aria-pressed="true"] { background:var(--sink); border-color:var(--sink); color:#fff; }
.q-day[aria-pressed="true"] small { color:#cbd5e6; }
.q-slot { border:1.5px solid var(--hair); background:#fff; border-radius:999px; padding:11px 4px; font-weight:700; font-size:14px; }
.q-slot:hover { border-color:var(--sink); }
.q-slot[aria-pressed="true"] { background:var(--sink); border-color:var(--sink); color:#fff; }
.q-chip { border:1px solid var(--hair); background:#fff; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600; white-space:nowrap; }
.q-chip[aria-pressed="true"] { background:var(--sink); border-color:var(--sink); color:#fff; }
@media (prefers-reduced-motion: no-preference) { .q-pop { animation:qPop .28s ease-out both; } }
@keyframes qPop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
/* página del cliente: estados y aviso */
.c-stories { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.c-stories::-webkit-scrollbar { display:none; }
.story-view { position:fixed; inset:0; z-index:140; background:#0b0f19; display:flex; flex-direction:column; color:#fff; }
.story-bars { display:flex; gap:4px; padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; }
.story-bars span { flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden; }
.story-bars span i { display:block; height:100%; width:0; background:#fff; }
.story-stage { position:relative; flex:1; display:grid; place-items:center; overflow:hidden; }
.story-stage img { max-width:100%; max-height:100%; object-fit:contain; }
.story-text { position:absolute; left:16px; right:16px; bottom:24px; text-align:center; font-size:20px; font-weight:800; line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.6); white-space:pre-line; }

/* guía de configuración */
.guide-glow { outline:3px solid #2B59C3; outline-offset:4px; border-radius:12px; }
@media (prefers-reduced-motion: no-preference) { .guide-glow { animation:guideGlow 1.2s ease-in-out 3; } }
@keyframes guideGlow { 50% { outline-color:rgba(43,89,195,.25); } }
.guide-tip { position:fixed; left:12px; right:12px; bottom:calc(96px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; align-items:flex-start; gap:10px;
  background:#14213D; color:#fff; border-radius:18px; padding:12px 12px 12px 14px; box-shadow:0 18px 40px -16px rgba(20,33,61,.7); max-width:560px; margin:0 auto; }
@media (min-width:1024px) { .guide-tip { bottom:24px; } }
.chair-free { cursor:pointer; background:rgba(215,38,61,.06); border-color:#e7a3ad; }
.chair-free:hover { background:rgba(215,38,61,.14); }

/* estado del barbero (disponible / descanso) */
.status-pill { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; border-radius:999px; padding:7px 11px; font-size:12.5px; font-weight:700; background:#e2f5ec; color:#16774b; white-space:nowrap; }
.status-pill .sdot { width:8px; height:8px; border-radius:50%; background:#1E9E63; box-shadow:0 0 0 3px rgba(30,158,99,.2); }
.status-pill.busy { background:#fde8eb; color:#b81d33; }
.status-pill.busy .sdot { background:#D7263D; box-shadow:0 0 0 3px rgba(215,38,61,.2); }
.team-chip { display:flex; align-items:center; gap:8px; border-radius:16px; padding:9px 12px; background:#fff; font-size:13px; flex-shrink:0; }
/* actividad */
.bars { display:flex; align-items:flex-end; gap:6px; height:110px; }
.bars > div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; }
.bars .b { width:100%; border-radius:7px 7px 3px 3px; background:#c9d6ef; min-height:3px; }
.bars .b.on { background:var(--sblue); }
.bars small { font-size:10px; color:var(--soft); }
.bars b { font-size:11px; }
.funnel-row { display:grid; grid-template-columns:7.5rem 1fr 2.6rem; align-items:center; gap:8px; font-size:12.5px; padding:5px 0; }
.funnel-row .track { height:12px; border-radius:999px; background:#eef1f5; overflow:hidden; }
.funnel-row .fill { height:100%; border-radius:999px; background:var(--sblue); }

/* ===== Al tocar, que se sienta el botón ===== */
button, a, [role="button"], label.btn-sm, label.btn-light { -webkit-tap-highlight-color: transparent; }
:where(button, a.btn-primary, a.btn-light, a.btn-sm, a.btn-ghost, a.btn-dark, a.link-act, a.menu-item, a.todo, a.sp-card, a.act, label.btn-sm, label.btn-light, label.pay-drop, [role="button"]) {
  transition: transform .09s ease, filter .12s ease, box-shadow .12s ease;
}
:where(button, a.btn-primary, a.btn-light, a.btn-sm, a.btn-ghost, a.btn-dark, a.link-act, a.menu-item, a.todo, a.sp-card, a.act, label.btn-sm, label.btn-light, label.pay-drop, [role="button"]):not(:disabled):active {
  transform: scale(.96); filter: brightness(.94);
}
:where(.q-slot, .chip, .fchip, .q-chip, .q-day, .story-btn, .admin-tab, .nv, .slot):not(:disabled):active { transform: scale(.93); }
.sp-bnav .nv-quick:active span, .nv-quick:active span { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  :where(button, a, label, [role="button"]):active { transform: none !important; }
}
.nv-quick span { transition: transform .09s ease; }

/* ===== Asistente de inicio ===== */
.wizard { position:fixed; inset:0; z-index:110; background:var(--canvas, #F2F5F8); display:flex; flex-direction:column; color:var(--sink, #14213D);
  padding:calc(12px + env(safe-area-inset-top, 0px)) 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
body.wiz-on { overflow:hidden; }
body.wiz-on .sp-bnav { display:none !important; }
.wz-top { display:flex; align-items:center; gap:10px; padding:0 16px 10px; max-width:560px; width:100%; margin:0 auto; }
.wz-x { width:34px; height:34px; border-radius:50%; background:#fff; font-size:15px; flex-shrink:0; }
.wz-bar { flex:1; height:6px; border-radius:6px; background:#dde3ea; overflow:hidden; }
.wz-bar i { display:block; height:100%; background:var(--sblue, #2B59C3); border-radius:6px; transition:width .35s ease; }
.wz-body { flex:1; overflow-y:auto; padding:6px 16px 16px; max-width:560px; width:100%; margin:0 auto; }
.wz-h { font-family:"Bricolage Grotesque", system-ui, sans-serif; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.01em; margin-top:6px; }
.wz-sub { font-size:14px; color:var(--soft, #5B6782); margin:6px 0 14px; line-height:1.45; }
.wz-opt { display:flex; align-items:center; gap:10px; width:100%; border:1.5px solid var(--hair, #DDE3EA); background:#fff; border-radius:16px; padding:11px 12px; margin-top:8px; }
.wz-opt[aria-pressed="true"] { border-color:var(--sink, #14213D); box-shadow:0 0 0 1px var(--sink, #14213D); }
.wz-foot { display:flex; gap:8px; padding:8px 16px 0; max-width:560px; width:100%; margin:0 auto; }
.wz-skip { display:block; margin:8px auto 0; font-size:13px; color:var(--soft, #5B6782); text-decoration:underline; }
/* redes en la página de citas */
.biz-social a { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:15px; }

/* ===== Ubicación visible en la página de citas ===== */
.loc-bar { align-items:center; gap:12px; background:#fff; border:1px solid var(--line, #D3DAD6); border-radius:20px; padding:12px; box-shadow:0 6px 20px -14px rgba(23,34,46,.45); }
.loc-pin { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#fde8eb; color:#D7263D; font-size:20px; flex-shrink:0; }
@media (prefers-reduced-motion: no-preference) { .loc-pin i { animation:pinBounce 2.4s ease-in-out infinite; } }
@keyframes pinBounce { 0%, 70%, 100% { transform:translateY(0); } 80% { transform:translateY(-4px); } 90% { transform:translateY(0); } }
.loc-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:88px; border-radius:12px; padding:7px 10px; font-size:13px; font-weight:800; text-decoration:none; }
.loc-waze { background:#33ccff; color:#0b2540; }
.loc-maps { background:#fff; color:#17222E; border:1px solid var(--line, #D3DAD6); }

/* ===== Encabezado: logo con estados (como Epic), Mi cuenta y salir ===== */
.logo-ring { position:relative; border-radius:9999px; padding:3px; background:transparent; }
.logo-ring.has-stories { background:conic-gradient(#D7263D, #f59e0b, #2B59C3, #D7263D); cursor:pointer; }
.logo-ring.has-stories.seen { background:#6b7280; }
.logo-ring .logo-in { display:grid; place-items:center; width:60px; height:60px; border-radius:9999px; overflow:hidden; background:rgba(255,255,255,.12); border:3px solid var(--ink, #17222E); font-family:"Archivo Narrow", system-ui, sans-serif; font-size:20px; font-weight:800; color:#fff; }
body.branded .logo-ring .logo-in { border-color:var(--b-header); }
.logo-ring .logo-in img { width:100%; height:100%; object-fit:cover; }
.story-pill { position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; font-size:9px; font-weight:900; letter-spacing:.06em; padding:1px 7px; border-radius:9999px; background:#f59e0b; color:#1a1200; border:2px solid var(--ink, #17222E); }
@media (prefers-reduced-motion: no-preference) { .story-pill { animation:pillBeat 1.6s ease-in-out infinite; } }
@keyframes pillBeat { 0%, 100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.1); } }
.logout-round { display:grid; place-items:center; width:38px; height:38px; border-radius:9999px; background:#D7263D; color:#fff; font-size:15px; box-shadow:0 6px 14px -6px rgba(215,38,61,.8); }
.biz-social a { width:32px; height:32px; font-size:16px; }

/* encabezado con foto: íconos de redes semitransparentes con desenfoque */
header.has-photo { color:#fff; }
header.has-photo .biz-social a { background:rgba(255,255,255,.18); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
header.has-photo .logo-ring .logo-in { border-color:rgba(15,22,32,.9); }

/* el asistente usa la altura real visible (sin quedar debajo de la barra del navegador) */
.wizard { height:100dvh; bottom:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
.wz-skip { margin:0 auto 8px; }

/* ===================== COMPUTADOR ===================== */
@media (min-width:1024px) {
  /* Página de citas: servicios a la izquierda y el resumen fijo a la derecha */
  .book-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
  .book-grid #bookBar { position:sticky; top:20px; }
  .book-grid #servSection.hidden + #bookBar { grid-column:1 / -1; }
  #mainServices .choice:hover, #extraServices .choice:hover { box-shadow:0 8px 22px -14px rgba(23,34,46,.45); }
  .loc-bar { max-width:680px; }
  /* Panel: Inicio en dos columnas */
  .home-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start; }
  .home-grid .home-col > :first-child { margin-top:0; }
  /* Asistente: tarjeta centrada sobre el panel, no pantalla completa */
  body.wiz-on::before { content:""; position:fixed; inset:0; z-index:109; background:rgba(20,33,61,.45); backdrop-filter:blur(3px); }
  .wizard { inset:auto; left:50%; top:4vh; transform:translateX(-50%); width:600px; height:92vh; border-radius:28px; box-shadow:0 30px 80px -30px rgba(20,33,61,.6); padding-top:16px; }
  /* Modales un poco más amplios */
  .modal-card { max-width:560px; }
  /* Botones: brillo al pasar el mouse */
  .btn-primary:hover:not(:disabled), .btn-light:hover, .btn-sm:hover { filter:brightness(.97); }
  .todo:hover { box-shadow:0 8px 22px -16px rgba(20,33,61,.4); }
}
@media (min-width:1280px) {
  .home-grid { gap:28px; }
}
@media (min-width:1280px) { body.sp .sp-main { max-width:980px; } }

/* campana de novedades */
.bell-btn { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:9999px; background:#fff; color:var(--sink, #14213D); font-size:17px; flex-shrink:0; box-shadow:0 1px 0 var(--hair, #DDE3EA); }
.bell-btn.hidden { display:none; }
.bell-badge { position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#D7263D; color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; border:2px solid var(--canvas, #F2F5F8); }
@media (prefers-reduced-motion: no-preference) { .bell-badge { animation:bellBeat 1.6s ease-in-out infinite; } }
@keyframes bellBeat { 50% { transform:scale(1.15); } }

/* la franja de barbería (poste rojo/azul) solo para barberías; los demás negocios llevan una línea de su color */
header.pole-top.no-pole::after { background: var(--b-primary, #24508A); height:5px; bottom:-5px; }

/* Paso de pago del registro: solo se ve "Mi plan" hasta que pague o elija Gratis */
body.plan-gate #sideNav, body.plan-gate .sp-bnav, body.plan-gate #planBanner, body.plan-gate #tabs, body.plan-gate #btnBell, body.plan-gate #myStatus { display:none !important; }
body.plan-gate .tab-panel:not(#tab-plan) { display:none !important; }

/* sugerencias del correo */
.mail-sug { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mail-sug:empty { display:none; }
.mail-sug button { border:1px solid #DDE3EA; background:#fff; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; color:#14213D; }
.mail-sug button.fix { background:#fff7e6; border-color:#f3c27a; color:#7a4b00; font-weight:600; }
.mail-sug .bad { font-size:12px; color:#b81d33; }
/* volver al panel cuando el dueño mira su página */
.back-panel { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:90; background:#14213D; color:#fff; border-radius:999px; padding:11px 18px; font-weight:800; font-size:14px; box-shadow:0 10px 26px -10px rgba(20,33,61,.7); white-space:nowrap; }

/* cupos por hora y por profesional */
.tpill.tpill-n { display:flex; flex-direction:column; align-items:center; line-height:1.1; padding-top:6px; padding-bottom:6px; }
.tpill.tpill-n small { font-size:10.5px; font-weight:600; opacity:.7; margin-top:2px; }
.chip .chip-n { font-weight:600; opacity:.65; font-size:.85em; }
.chip.chip-empty { opacity:.55; }