:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.5,.64,1);
  --sheet-ease:cubic-bezier(.32,.72,0,1);
  --ball:#DDF247;--ball-ink:#0A1422;
  --court:#1E4FD6;--court-2:#163FB3;
  --nav-h:4.3rem;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
html[data-theme="dark"]{--violet:#B39CFF;--violet-soft:rgba(167,139,250,.16);--orange:#FF9F5A;--orange-soft:rgba(255,159,90,.15);--green-2:#2FB37A;--free:rgba(70,211,154,.07);--free-b:rgba(70,211,154,.32);--conf:#8FB0FF;--conf-soft:rgba(64,120,255,.17);--warn-soft:rgba(255,184,77,.14);
  --bg:#0A1422;--surface:#101E30;--surface2:#172A40;--surface3:#223953;
  --line:rgba(173,204,255,.09);--text:#EEF3FA;--muted:#8597AE;
  --accent-text:#DDF247;--accent-soft:rgba(221,242,71,.13);
  --danger:#FF6B6B;--danger-soft:rgba(255,107,107,.13);
  --ok:#46D39A;--ok-soft:rgba(70,211,154,.13);--warn:#FFB84D;
  --seg-on:#2A4462;--shadow:0 14px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
html[data-theme="light"]{--violet:#6D4AE0;--violet-soft:rgba(109,74,224,.1);--orange:#C25A12;--orange-soft:rgba(194,90,18,.1);--green-2:#0B7A4E;--free:rgba(17,144,95,.05);--free-b:rgba(17,144,95,.3);--conf:#1E4FD6;--conf-soft:rgba(30,79,214,.11);--warn-soft:rgba(184,110,0,.11);
  --bg:#EEF2F7;--surface:#FFFFFF;--surface2:#E4EAF2;--surface3:#D3DCE8;
  --line:rgba(12,26,43,.08);--text:#0C1A2B;--muted:#5C6D82;
  --accent-text:#1E4FD6;--accent-soft:rgba(30,79,214,.10);
  --danger:#DC3545;--danger-soft:rgba(220,53,69,.10);
  --ok:#11905F;--ok-soft:rgba(17,144,95,.10);--warn:#B86E00;
  --seg-on:#FFFFFF;--shadow:0 14px 40px rgba(12,26,43,.14);
  color-scheme:light;
}
html[data-size="1"]{font-size:16px}
html[data-size="2"]{font-size:18px}
html[data-size="3"]{font-size:20px}
html[data-size="4"]{font-size:22px}

*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--text);overscroll-behavior:none}
body{font:400 1rem/1.4 var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;overflow:hidden}
input,textarea,select{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
button,a{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .35s,color .35s,border-color .35s!important}

#app{height:100%;display:flex;flex-direction:column}
.num,[data-count]{font-variant-numeric:tabular-nums}
.small{font-size:.82rem}
.muted{color:var(--muted)}
.danger{color:var(--danger)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.hide{display:none!important}

/* ---------- encabezado ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:calc(env(safe-area-inset-top) + .8rem) 1.25rem .7rem;max-width:1100px;width:100%;margin:0 auto;flex:none}
.top-club{display:flex;align-items:center;gap:.7rem;min-width:0}
.top-logo{flex:none}
.top-name{font-weight:750;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-sub{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:.5rem 1.25rem calc(var(--nav-h) + env(safe-area-inset-bottom) + 6.5rem);max-width:1100px;width:100%;margin:0 auto}
.main.solo{padding-bottom:calc(env(safe-area-inset-bottom) + 6.5rem)}
.view-in{animation:viewIn .32s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateX(var(--dx,0))}to{opacity:1;transform:none}}

.h1{font-weight:800;font-stretch:112%;font-size:1.85rem;letter-spacing:-.025em;margin:.3rem 0 1rem}
.sec{font-size:.9rem;font-weight:700;color:var(--muted);margin:1.5rem .15rem .6rem}

/* ---------- barra inferior ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);
  padding:.4rem max(.5rem,calc((100% - 560px)/2)) calc(env(safe-area-inset-bottom) + .4rem);
  background:var(--bg);background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);border-top:1px solid var(--line)}
.nav-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.22rem;padding:.45rem 0 .2rem;font-size:.68rem;font-weight:600;color:var(--muted);transition:color .25s}
.nav-btn svg{width:1.4rem;height:1.4rem;transition:transform .35s var(--spring)}
.nav-btn.on{color:var(--text)}
.nav-btn.on svg{color:var(--accent-text);transform:translateY(-1px)}
.nav-btn:active svg{transform:scale(.82)}
.nav-ind{position:absolute;left:0;top:.5rem;width:3.4rem;height:2.1rem;border-radius:999px;background:var(--accent-soft);transition:transform .5s var(--spring);z-index:0}

/* ---------- botón flotante ---------- */
.fab{position:fixed;z-index:15;right:1.25rem;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  width:3.6rem;height:3.6rem;border-radius:1.2rem;background:var(--ball);color:var(--ball-ink);display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(221,242,71,.25),var(--shadow);transform:scale(0) rotate(-90deg);opacity:0;pointer-events:none;
  transition:transform .45s var(--spring),opacity .2s}
.fab.solo{bottom:calc(env(safe-area-inset-bottom) + 1.25rem)}
.fab.show{transform:none;opacity:1;pointer-events:auto}
.fab.show:active{transform:scale(.88);transition-duration:.15s}
.fab svg{width:1.6rem;height:1.6rem;stroke-width:2.4}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3.1rem;padding:0 1.1rem;border-radius:.95rem;background:var(--surface2);font-weight:650;font-size:.95rem;white-space:nowrap;transition:transform .18s var(--ease),background .2s,opacity .2s}
.btn svg{width:1.15rem;height:1.15rem;flex:none}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--ball);color:var(--ball-ink)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-block{width:100%}
.btn[disabled]{pointer-events:none}
.btn.loading{color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:1.15rem;height:1.15rem;border-radius:50%;border:2.5px solid var(--text);border-right-color:transparent;animation:spin .7s linear infinite}
.btn-primary.loading::after{border-color:var(--ball-ink);border-right-color:transparent}
.btn-row{display:flex;gap:.6rem;margin-top:1.2rem}
.btn-row>.btn{flex:1}
.icon-btn{flex:none;width:2.6rem;height:2.6rem;border-radius:.85rem;display:grid;place-items:center;background:var(--surface2);transition:transform .18s var(--ease)}
.icon-btn svg{width:1.2rem;height:1.2rem}
.icon-btn:active{transform:scale(.88)}
.icon-btn.sm{width:2.1rem;height:2.1rem;border-radius:.7rem;background:transparent;color:var(--muted)}

/* ---------- formularios ---------- */
.field{display:block;margin-bottom:.9rem}
.field>span{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 .38rem .2rem}
.input{width:100%;height:3.1rem;padding:0 1rem;border-radius:.95rem;background:var(--surface2);border:1.5px solid transparent;outline:none;font-size:1rem;appearance:none;-webkit-appearance:none;transition:border-color .2s,background .2s,box-shadow .2s}
textarea.input{height:auto;min-height:5.2rem;padding:.8rem 1rem;resize:none;line-height:1.4}
select.input{padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238597AE' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.2rem}
.input:focus{border-color:var(--accent-text);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.input::placeholder{color:var(--muted);opacity:.8}
.input.money{height:3.8rem;font-size:1.7rem;font-weight:800;font-stretch:115%;letter-spacing:-.02em}
input[type="date"].input{display:flex;align-items:center}
.hint{font-size:.78rem;color:var(--muted);margin-top:.6rem;text-align:center}

.seg{display:flex;gap:.25rem;padding:.25rem;background:var(--surface2);border-radius:.95rem}
.seg button{flex:1;height:2.55rem;border-radius:.72rem;font-size:.86rem;font-weight:650;color:var(--muted);transition:background .25s,color .25s,box-shadow .25s,transform .15s}
.seg button.on{background:var(--seg-on);color:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.seg button:active{transform:scale(.95)}

.switch{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.85rem 1rem;background:var(--surface2);border-radius:.95rem;margin-bottom:.9rem;font-weight:600;text-align:left}
.tog{position:relative;flex:none;width:3.1rem;height:1.85rem;border-radius:1rem;background:var(--surface3);transition:background .25s}
.tog::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .38s var(--spring)}
.tog.on{background:var(--ok)}
.tog.on::after{transform:translateX(1.25rem)}

.stepper{display:flex;align-items:center;gap:.5rem}
.stepper .input{text-align:center;font-weight:800;font-size:1.3rem;font-stretch:115%}
.stepper .icon-btn{width:3.1rem;height:3.1rem;border-radius:.95rem}

.search{position:relative;margin-bottom:.8rem}
.search svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:1.15rem;height:1.15rem;color:var(--muted);pointer-events:none}
.search .input{padding-left:2.7rem}
.search .input::-webkit-search-cancel-button{display:none}

.chips{display:flex;gap:.45rem;overflow-x:auto;margin:0 -1.25rem .9rem;padding:0 1.25rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}
.chip{flex:none;height:2.25rem;padding:0 1rem;border-radius:999px;background:var(--surface2);font-size:.86rem;font-weight:650;color:var(--muted);transition:background .25s,color .25s,transform .15s}
.chip.on{background:var(--text);color:var(--bg)}
.chip:active{transform:scale(.93)}

/* ---------- listas ---------- */
.list{display:flex;flex-direction:column;gap:.5rem}
.row{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;padding:.8rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:1.15rem;transition:transform .18s var(--ease),background .2s}
.row:active{transform:scale(.98);background:var(--surface2)}
.avatar{flex:none;width:2.7rem;height:2.7rem;border-radius:.9rem;background:var(--surface2);display:grid;place-items:center;font-weight:750;font-size:.86rem;color:var(--muted)}
.avatar svg{width:1.3rem;height:1.3rem}
.avatar.acc{background:var(--accent-soft);color:var(--accent-text)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}
.row-end{flex:none;text-align:right;font-weight:750;font-size:.94rem;font-variant-numeric:tabular-nums}
.badge{flex:none;display:inline-flex;align-items:center;height:1.75rem;padding:0 .65rem;border-radius:.6rem;font-size:.8rem;font-weight:750;background:var(--surface2);font-variant-numeric:tabular-nums}
.badge.danger{background:var(--danger-soft)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}

.anim-in,.anim-row{animation:inUp .45s var(--ease) both;animation-delay:calc(var(--i,0) * 32ms)}
.no-anim .anim-in,.no-anim .anim-row,.no-anim.view-in{animation:none}
@keyframes inUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- inicio: la cancha ---------- */
.court{position:relative;overflow:hidden;border-radius:1.5rem;padding:1.35rem 1.4rem 1.25rem;margin-bottom:.7rem;color:#fff;
  background:linear-gradient(160deg,var(--court) 0%,var(--court-2) 100%);box-shadow:0 18px 40px rgba(22,63,179,.28)}
.court::before{content:"";position:absolute;inset:.7rem;border:1.5px solid rgba(255,255,255,.42);border-radius:.6rem;pointer-events:none}
.court::after{content:"";position:absolute;top:.7rem;bottom:.7rem;left:62%;border-left:1.5px dashed rgba(255,255,255,.5);pointer-events:none}
.court-lines{position:absolute;inset:.7rem;pointer-events:none}
.court-lines::before{content:"";position:absolute;top:50%;left:22%;right:38%;border-top:1.5px solid rgba(255,255,255,.3)}
.court-lines::after{content:"";position:absolute;top:0;bottom:0;left:22%;border-left:1.5px solid rgba(255,255,255,.3)}
.court-ball{position:absolute;right:1.4rem;top:1.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--ball);box-shadow:0 4px 10px rgba(0,0,0,.3);animation:bote 2.8s var(--ease) infinite}
@keyframes bote{0%,100%{transform:translate(0,0)}45%{transform:translate(-1.2rem,2.2rem)}55%{transform:translate(-1.4rem,2.3rem) scale(1.1,.9)}}
.court-label{position:relative;font-size:.85rem;font-weight:600;opacity:.85}
.court-num{position:relative;font-size:2.7rem;font-weight:800;font-stretch:125%;letter-spacing:-.03em;line-height:1.1;margin-top:.25rem}
.court-sub{position:relative;font-size:.8rem;opacity:.8;margin-top:.45rem}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.7rem}
.stat{text-align:left;padding:.95rem 1rem;border-radius:1.15rem;background:var(--surface);border:1px solid var(--line);transition:transform .18s var(--ease)}
.stat:active{transform:scale(.97)}
.stat-num{font-size:1.45rem;font-weight:800;font-stretch:118%;letter-spacing:-.02em}
.stat-lbl{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}

/* ---------- detalle ---------- */
.detail-top{text-align:center;padding:.4rem 0 1.2rem}
.big{font-size:2.6rem;font-weight:800;font-stretch:125%;letter-spacing:-.03em;line-height:1.15;margin:.15rem 0}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.nota{margin-top:1rem;padding:.85rem 1rem;border-radius:.95rem;background:var(--surface2);font-size:.9rem;color:var(--muted);-webkit-user-select:text;user-select:text}
.mov{display:flex;align-items:center;gap:.6rem;padding:.75rem .15rem;border-bottom:1px solid var(--line)}
.mov:last-child{border-bottom:0}
.mov-main{flex:1;min-width:0}
.mov-t{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mov-s{font-size:.76rem;color:var(--muted)}
.mov-m{font-weight:750;font-variant-numeric:tabular-nums}
.total{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-radius:.95rem;background:var(--accent-soft);margin-bottom:.9rem;font-weight:650}
.total strong{font-size:1.4rem;font-weight:800;font-stretch:118%;color:var(--accent-text)}

/* ---------- más ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:1.2rem;padding:.9rem;margin-bottom:.7rem}
.card-row{display:flex;align-items:center;gap:.85rem}
.menu{background:var(--surface);border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;margin-bottom:.4rem}
.menu-item{display:flex;align-items:center;gap:.85rem;width:100%;padding:1rem;border-bottom:1px solid var(--line);font-weight:650;transition:background .2s}
.menu-item:last-child{border-bottom:0}
.menu-item:active{background:var(--surface2)}
.menu-item span{flex:1;text-align:left}
.menu-item svg{width:1.25rem;height:1.25rem}
.menu-item svg:last-child{color:var(--muted);width:1.1rem}
.version{text-align:center;font-size:.75rem;color:var(--muted);margin-top:1.4rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.tag{display:inline-flex;align-items:center;gap:.2rem;height:2.2rem;padding:0 .35rem 0 .9rem;border-radius:999px;background:var(--surface2);font-size:.88rem;font-weight:650;animation:pop .35s var(--spring)}
.tag button{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.tag svg{width:.95rem;height:.95rem}
@keyframes pop{from{opacity:0;transform:scale(.8)}}
.inline-add{display:flex;gap:.5rem}
.inline-add .input{flex:1}
.inline-add .btn{width:3.1rem;padding:0}

/* ---------- vacío y carga ---------- */
.empty{text-align:center;padding:3.2rem 1rem;color:var(--muted)}
.empty svg{width:2.8rem;height:2.8rem;margin:0 auto .8rem;opacity:.45}
.empty-t{font-weight:700;color:var(--text);margin-bottom:.2rem}
.skel{height:4.4rem;border-radius:1.15rem;background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel.sm{height:3rem}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
.splash{flex:1;display:grid;place-items:center}
.splash svg{animation:respira 1.4s var(--ease) infinite}
@keyframes respira{50%{transform:scale(.88);opacity:.7}}

/* ---------- login ---------- */
.login{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:420px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 2rem) 1.5rem calc(env(safe-area-inset-bottom) + 2rem)}
.login-brand{text-align:center;margin-bottom:2.4rem}
.login-brand svg{margin:0 auto 1.1rem;animation:flota 3.2s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-7px)}}
.login-brand h1{font-size:2.5rem;font-weight:800;font-stretch:125%;letter-spacing:-.03em}
.login-brand p{color:var(--muted);margin-top:.25rem}
.login-bg{position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(var(--line),var(--line)) 50% 0/1.5px 100% no-repeat,
             linear-gradient(90deg,var(--line),var(--line)) 0 30%/100% 1.5px no-repeat,
             linear-gradient(90deg,var(--line),var(--line)) 0 70%/100% 1.5px no-repeat}

/* ---------- hojas (sheets) ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(4,10,20,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:92dvh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:1.6rem 1.6rem 0 0;box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%);transition:transform .4s var(--sheet-ease)}
.sheet-wrap.open .sheet-bg{opacity:1}
.sheet-wrap.open .sheet{transform:none}
.sheet-wrap.closing .sheet{transition-duration:.28s}
.sheet-grab{width:2.6rem;height:.3rem;border-radius:1rem;background:var(--surface3);margin:.6rem auto .1rem;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 1.25rem .6rem;flex:none;touch-action:none}
.sheet-head h2{font-size:1.25rem;font-weight:800;font-stretch:110%;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.25rem 1.4rem}
@media (min-width:760px){
  .sheet{top:50%;bottom:auto;border-radius:1.6rem;transform:translateY(-44%) scale(.97);opacity:0;transition:transform .32s var(--sheet-ease),opacity .22s;padding-bottom:0;max-height:86dvh}
  .sheet-wrap.open .sheet{transform:translateY(-50%);opacity:1}
  .sheet-grab{visibility:hidden}
}

/* ---------- avisos ---------- */
#toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + .7rem);z-index:100;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none;padding:0 1rem}
.toast{display:flex;align-items:center;gap:.6rem;max-width:100%;padding:.72rem 1.1rem .72rem .8rem;border-radius:1.1rem;background:var(--text);color:var(--bg);font-weight:650;font-size:.92rem;box-shadow:var(--shadow);animation:toastIn .45s var(--spring) both}
.toast.error{background:var(--danger);color:#fff}
.toast.out{animation:toastOut .26s var(--ease) forwards}
.toast svg{width:1.35rem;height:1.35rem;flex:none}
.check circle{fill:var(--ok);stroke:none}
.check path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:draw .38s .16s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.94)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}
.shake{animation:shake .42s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- layout con menú lateral ---------- */
.layout{display:flex;height:100%}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.side{flex:none;width:16.5rem;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 1rem) .75rem calc(env(safe-area-inset-bottom) + .9rem);overflow-y:auto;overscroll-behavior:contain}
.side-brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem .9rem}
.side-brand b{font-weight:800;font-stretch:125%;font-size:1.25rem;letter-spacing:-.02em}
.side-club{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:1rem;background:var(--surface2);margin-bottom:.4rem;text-align:left;width:100%}
.side-club .avatar{background:var(--accent-soft);color:var(--accent-text)}
.side-g{font-size:.76rem;font-weight:700;color:var(--muted);margin:1.1rem .75rem .35rem}
.side-item{display:flex;align-items:center;gap:.75rem;width:100%;height:2.7rem;padding:0 .75rem;border-radius:.8rem;font-weight:600;font-size:.94rem;color:var(--muted);text-align:left;transition:background .2s,color .2s,transform .15s}
.side-item svg{width:1.2rem;height:1.2rem;flex:none}
.side-item:active{transform:scale(.97)}
.side-item.on{background:var(--text);color:var(--bg)}
.side-foot{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.6rem;padding-left:.5rem}
.side-foot .row-main{font-size:.8rem}
.side-bg{display:none}
.menu-btn{display:none}
.top-title{font-weight:800;font-stretch:112%;font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){
  .side{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(17.5rem,86vw);transform:translateX(-102%);transition:transform .4s var(--sheet-ease);box-shadow:var(--shadow)}
  body.drawer .side{transform:none}
  .side-bg{display:block;position:fixed;inset:0;z-index:39;background:rgba(4,10,20,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
  body.drawer .side-bg{opacity:1;pointer-events:auto}
  .menu-btn{display:grid}
}
@media (min-width:900px){
  .nav{display:none}
  .main{padding-bottom:6rem}
  .fab{bottom:1.6rem;right:2rem}
  .top{padding-top:1.2rem}
  .top-title{font-size:1.6rem}
}

/* ---------- turnos ---------- */
.datenav{display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem}
.date-btn{position:relative;flex:1;height:2.6rem;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.85rem;background:var(--surface2);font-weight:650;font-size:.92rem;overflow:hidden}
.date-btn svg{width:1.1rem;height:1.1rem;color:var(--muted)}
.date-btn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.datenav .chip{height:2.6rem;border-radius:.85rem}
.day-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-radius:1.3rem;background:var(--surface);border:1px solid var(--line);margin-bottom:.6rem}
.day-t{font-weight:800;font-stretch:118%;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.day-s{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.ring{position:relative;flex:none;width:4.2rem;height:4.2rem}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .r-bg{stroke:var(--surface2)}
.ring .r-fg{stroke:var(--ball);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2;transition:stroke-dashoffset 1s var(--ease)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-stretch:115%;font-size:.95rem}
.tools{display:flex;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}
.tools .btn{height:2.7rem;font-size:.88rem;flex:1}
.grid-wrap{overflow-x:auto;margin:0 -1.25rem;padding:.1rem 1.25rem .6rem;scrollbar-width:thin;overscroll-behavior-x:contain}
.grid{display:grid;grid-template-columns:6.4rem repeat(var(--cols),8.4rem);gap:.4rem;width:max-content}
.g-corner{position:sticky;left:0;z-index:3;background:var(--bg)}
.g-head{height:2.5rem;display:grid;place-items:center;border-radius:.7rem;background:var(--surface);border:1px solid var(--line);font-weight:750;font-stretch:112%;font-size:.9rem;font-variant-numeric:tabular-nums}
.g-head.now{background:var(--ball);color:var(--ball-ink);border-color:transparent}
.g-head.past{color:var(--muted)}
.g-cancha{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:.5rem .7rem;border-radius:.8rem;background:var(--surface2);box-shadow:.5rem 0 .6rem -.3rem var(--bg)}
.g-cancha b{font-weight:750;font-size:.88rem;line-height:1.2}
.g-cancha small{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.cell{min-height:4.7rem;border-radius:.8rem;padding:.5rem .6rem;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;border:1px solid transparent;transition:transform .18s var(--ease),filter .2s}
.cell:active{transform:scale(.94)}
.cell-n{font-weight:700;font-size:.84rem;line-height:1.2;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell-e{display:flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700}
.cell-e svg{width:.8rem;height:.8rem}
.c-libre{border:1.5px dashed var(--surface3);color:var(--muted);align-items:center;justify-content:center}
.c-libre svg{width:1.2rem;height:1.2rem;opacity:.6}
.c-nov{border-color:var(--line);color:var(--muted);opacity:.45;align-items:center;justify-content:center;font-size:.72rem;font-weight:650}
.c-pend{background:var(--warn-soft);color:var(--warn)}
.c-conf{background:var(--conf-soft);color:var(--conf)}
.c-cob{background:var(--ok-soft);color:var(--ok)}
.c-imp{background:var(--danger-soft);color:var(--danger)}
.c-fijo{background:var(--accent-soft);color:var(--accent-text);border:1.5px dashed var(--accent-text)}
.c-bloq{background:repeating-linear-gradient(135deg,var(--surface2) 0 .45rem,transparent .45rem .9rem);color:var(--muted);border-color:var(--line);align-items:center;justify-content:center}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.8rem;font-size:.76rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:.8rem;height:.8rem;border-radius:.25rem;display:inline-block}
.info{display:flex;justify-content:space-between;align-items:center;padding:.7rem .15rem;border-bottom:1px solid var(--line);font-size:.94rem}
.info:last-child{border-bottom:0}
.info b{font-weight:750;font-variant-numeric:tabular-nums}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.3rem}
.card-h h3{font-size:1rem;font-weight:750}
.card-h b{color:var(--ok);font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.55rem}
.tile{text-align:left;padding:.9rem;border-radius:1.15rem;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.35rem;min-height:7rem;transition:transform .18s var(--ease),background .2s}
.tile:active{transform:scale(.95);background:var(--surface2)}
.tile-n{font-weight:700;font-size:.92rem;line-height:1.25;flex:1}
.tile-p{font-weight:800;font-stretch:115%;font-size:1.15rem;color:var(--accent-text)}
.tile-s{font-size:.75rem;color:var(--muted)}
.tile-s.danger{color:var(--danger)}
.c-cerr{border:1px solid var(--line);opacity:.28;pointer-events:none}
.cell-k{margin-left:auto;font-weight:750;opacity:.8}
.pl-head{display:flex;align-items:baseline;justify-content:space-between;margin:1.4rem .15rem .6rem}
.pl-head h3{font-size:.9rem;font-weight:700;color:var(--muted)}
.pl-head span{font-size:.8rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sub-block{margin:-.3rem 0 .9rem;padding:.9rem .9rem .1rem;border-radius:.95rem;border:1px solid var(--line);animation:inUp .3s var(--ease)}
@media (max-width:599px){
  .grid{grid-template-columns:5.4rem repeat(var(--cols),7.4rem)}
  .g-cancha{padding:.45rem .55rem}
  .day-t{font-size:1.15rem}
}

/* ---------- v4: agenda por canchas ---------- */
.agenda-wrap{overflow:auto;margin:0 -1.25rem;padding:0 1.25rem .6rem;max-height:calc(100dvh - 15rem);overscroll-behavior:contain;border-radius:1rem}
.agenda{display:grid;grid-template-columns:4.1rem repeat(var(--cols),minmax(8.6rem,1fr));gap:.4rem;min-width:max-content}
@media (min-width:900px){.agenda{min-width:0}.agenda-wrap{max-height:none}}
.a-corner{position:sticky;top:0;left:0;z-index:4;background:var(--bg)}
.a-cancha{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:.55rem .75rem;border-radius:.8rem;background:var(--surface2);box-shadow:0 .5rem .6rem -.4rem var(--bg)}
.a-cancha b{font-weight:750;font-size:.9rem}
.a-cancha small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hora{position:sticky;left:0;z-index:2;display:grid;place-items:center;border-radius:.75rem;background:var(--surface);border:1px solid var(--line);font-weight:750;font-stretch:112%;font-size:.88rem;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s}
.g-hora.now{background:var(--ball);color:var(--ball-ink);border-color:transparent}
.g-hora.past{color:var(--muted)}
.g-hora:active{transform:scale(.95)}
.cell{min-height:5.6rem;position:relative}
.cell-top{display:flex;align-items:flex-start;gap:.3rem}
.cell-top .cell-n{flex:1}
.cell-m{font-size:.76rem;font-weight:750;color:var(--text);opacity:.85;font-variant-numeric:tabular-nums}
.cell-k{display:inline-flex;align-items:center;gap:.2rem;margin-left:auto}
.cell-k svg{width:.78rem;height:.78rem}
.dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--danger);margin-top:.3rem;box-shadow:0 0 0 3px var(--danger-soft)}
.c-libre{background:var(--free);border:1.5px dashed var(--free-b);color:var(--ok);flex-direction:column;gap:.1rem}
.c-libre small{font-size:.7rem;font-weight:650;opacity:.8}
.c-libre:hover{background:var(--ok-soft)}
.c-pend{background:var(--warn-soft);color:var(--warn)}
.c-conf{background:var(--conf-soft);color:var(--conf)}
.c-parc{background:var(--orange-soft);color:var(--orange);box-shadow:inset 0 -3px 0 var(--orange)}
.c-pag{background:rgba(70,211,154,.22);color:var(--ok)}
.c-comp{background:rgba(47,179,122,.1);color:var(--green-2);opacity:.85}
.c-fijo{background:var(--violet-soft);color:var(--violet);border:1.5px dashed var(--violet)}
.c-imp{background:var(--danger-soft);color:var(--danger)}
.c-aus{background:repeating-linear-gradient(135deg,var(--danger-soft) 0 .45rem,transparent .45rem .9rem);color:var(--danger);border-color:var(--danger-soft)}
.c-bloq{background:repeating-linear-gradient(135deg,rgba(255,107,107,.1) 0 .45rem,var(--surface) .45rem .9rem);color:var(--danger);border-color:rgba(255,107,107,.2)}
.is-fijo:not(.c-fijo){box-shadow:inset 3px 0 0 var(--violet)}
.c-parc.is-fijo{box-shadow:inset 3px 0 0 var(--violet),inset 0 -3px 0 var(--orange)}
@media (hover:hover){.cell:not(.c-cerr):hover{filter:brightness(1.12)}}
.legend span{gap:.3rem}
.legend svg{width:.85rem;height:.85rem}
.lg-libre{color:var(--ok)}.lg-pend{color:var(--warn)}.lg-conf{color:var(--conf)}.lg-parc{color:var(--orange)}.lg-pag{color:var(--ok)}.lg-comp{color:var(--green-2)}.lg-fijo{color:var(--violet)}.lg-bloq,.lg-imp,.lg-aus{color:var(--danger)}
.day-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;height:1.8rem;padding:0 .65rem;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--surface2)}
.pill svg{width:.9rem;height:.9rem}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
.bar{height:.4rem;border-radius:1rem;background:var(--surface2);overflow:hidden;margin:.8rem auto 0;max-width:14rem}
.bar i{display:block;height:100%;background:var(--ok);border-radius:1rem;transition:width .8s var(--ease)}
/* badges y avatares por estado */
.badge svg{width:.85rem;height:.85rem;margin-right:.3rem}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.orange,.st-parc.badge{background:var(--orange-soft);color:var(--orange)}
.badge.violet{background:var(--violet-soft);color:var(--violet)}
.badge.danger{color:var(--danger)}
.badge.st-pend{background:var(--warn-soft);color:var(--warn)}.badge.st-conf{background:var(--conf-soft);color:var(--conf)}
.badge.st-pag,.badge.st-comp,.badge.st-libre{background:var(--ok-soft);color:var(--ok)}.badge.st-fijo{background:var(--violet-soft);color:var(--violet)}
.badge.st-imp,.badge.st-aus,.badge.st-bloq{background:var(--danger-soft);color:var(--danger)}
.avatar.st-ok,.avatar.st-pag,.avatar.st-comp,.avatar.st-libre{background:var(--ok-soft);color:var(--ok)}
.avatar.st-warn,.avatar.st-pend{background:var(--warn-soft);color:var(--warn)}
.avatar.st-orange,.avatar.st-parc{background:var(--orange-soft);color:var(--orange)}
.avatar.st-danger,.avatar.st-imp,.avatar.st-aus,.avatar.st-bloq{background:var(--danger-soft);color:var(--danger)}
.avatar.st-violet,.avatar.st-fijo{background:var(--violet-soft);color:var(--violet)}
.avatar.st-conf{background:var(--conf-soft);color:var(--conf)}
.orange{color:var(--orange)}.violet{color:var(--violet)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .6rem}
.grid3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0 .6rem}
@media (max-width:420px){.grid3{grid-template-columns:1fr 1fr}.grid3>:first-child{grid-column:1/-1}}
.chips.wrap{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:.95rem;box-shadow:var(--shadow);overflow:hidden;animation:inUp .2s var(--ease)}
.ac-list button{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.ac-list button:last-child{border-bottom:0}
.ac-list button:hover,.ac-list button:active{background:var(--surface2)}
.ac-list b{font-weight:650;display:inline-flex;align-items:center;gap:.4rem}
.ac-list svg{width:1rem;height:1rem}
.ac-list small{color:var(--muted);font-size:.8rem}
.resumen{margin-top:.2rem}
.row.dim{opacity:.55}
a.row{color:inherit}
/* caja */
.caja-card{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:1.2rem;background:var(--surface);border:1px solid var(--line);margin-bottom:.7rem}
.caja-card .btn{height:2.7rem;font-size:.88rem;flex:none}
.caja-dot{flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px var(--surface2)}
.caja-card.open .caja-dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft);animation:late 2s ease-in-out infinite}
@keyframes late{50%{box-shadow:0 0 0 7px transparent}}
/* buffet */
.tile{position:relative}
.tile.off{opacity:.55}
.tile-ic{width:2.4rem;height:2.4rem;border-radius:.8rem;display:grid;place-items:center;background:var(--surface2);font-weight:800;font-size:.8rem;color:var(--muted)}
.tile-q{position:absolute;top:.6rem;right:.6rem;min-width:1.7rem;height:1.7rem;padding:0 .4rem;border-radius:999px;background:var(--ball);color:var(--ball-ink);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.tile-q.pop{animation:pop .35s var(--spring)}
.tile-s.ok{color:var(--ok)}.tile-s.warn{color:var(--warn)}.tile-s.orange{color:var(--orange)}
.cart-bar{position:fixed;z-index:16;left:1rem;right:1rem;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + .8rem);max-width:520px;margin:0 auto;display:flex;align-items:center;gap:.7rem;height:3.4rem;padding:0 1.2rem;border-radius:1.1rem;background:var(--ball);color:var(--ball-ink);font-weight:700;box-shadow:0 12px 30px rgba(221,242,71,.25),var(--shadow);transform:translateY(160%);transition:transform .45s var(--spring)}
.cart-bar.show{transform:none}
.cart-bar svg{width:1.3rem;height:1.3rem}
.cart-bar span{flex:1;text-align:left}
.cart-bar b{font-weight:800;font-stretch:115%;font-size:1.1rem}
@media (min-width:900px){.cart-bar{bottom:1.5rem;left:calc(16.5rem + 2rem)}}
.cart-it{display:flex;align-items:center;gap:.7rem;padding:.7rem .1rem;border-bottom:1px solid var(--line)}
.cart-t{min-width:5.2rem;text-align:right;font-variant-numeric:tabular-nums}
.stepper.sm{gap:.35rem}
.stepper.sm .icon-btn{width:2.2rem;height:2.2rem;border-radius:.7rem}
.stepper.sm b{min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums}

.seg{flex-wrap:wrap}
.seg button{flex:1 1 auto;padding:0 .75rem;white-space:nowrap}
.cart-bar:not(.show){visibility:hidden;transition:transform .45s var(--spring),visibility 0s .45s}
@media (max-width:599px){.agenda{grid-template-columns:3.6rem repeat(var(--cols),7.6rem)}.cell{min-height:5.2rem;padding:.45rem .5rem}.g-hora{font-size:.8rem}}

/* ---------- v5: dashboard y reportes ---------- */
.kpis{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.alerta{display:flex;align-items:center;gap:.7rem;width:100%;padding:.85rem 1rem;border-radius:1rem;background:var(--orange-soft);color:var(--orange);font-weight:700;margin-bottom:.7rem;text-align:left}
.alerta svg{width:1.2rem;height:1.2rem;flex:none}.alerta span{flex:1}
.chart-card{padding:1rem 1rem .6rem}
.chart-wrap{overflow-x:auto;margin:0 -.3rem;padding:0 .3rem}
.chart-in{position:relative;padding:.2rem 0 1.4rem 2.2rem}
.chart{width:100%;height:9.5rem;display:block;overflow:visible}
.ch-y{position:absolute;left:0;top:.2rem;bottom:1.4rem;width:2rem}
.ch-y span,.ch-x span{position:absolute;font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-y span{transform:translateY(-50%)}
.ch-x{position:absolute;left:2.2rem;right:0;bottom:0;height:1.2rem}
.ch-x span{transform:translateX(-50%);bottom:0}
.ch-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ch-ax{fill:var(--muted);font-size:9px;font-family:var(--font)}
.ch-1{fill:var(--ball)}.ch-2{fill:var(--danger);opacity:.75}
.ch-b rect{transform-box:fill-box;transform-origin:bottom;animation:crece .7s var(--ease) both;animation-delay:calc(var(--i) * 18ms)}
@keyframes crece{from{transform:scaleY(0)}}
.ch-b:hover rect{filter:brightness(1.15)}
.ch-leg{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted)}
.ch-leg i{width:.6rem;height:.6rem;border-radius:.2rem;display:inline-block;margin-left:.4rem}
.ch-leg .c1{background:var(--ball)}.ch-leg .c2{background:var(--danger)}
.donut{display:flex;align-items:center;gap:1.2rem;padding:.3rem 0 .5rem}
.donut svg{width:7.5rem;height:7.5rem;flex:none}
.ch-arc{animation:arco .9s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes arco{from{opacity:0}}
.donut-l{flex:1;display:flex;flex-direction:column;gap:.45rem;font-size:.86rem}
.donut-l div{display:flex;align-items:center;gap:.5rem}
.donut-l i{width:.7rem;height:.7rem;border-radius:.2rem;flex:none}
.donut-l span{flex:1}
.hbars{display:flex;flex-direction:column;gap:.7rem;padding:.3rem 0}
.hb-t{display:flex;justify-content:space-between;gap:.5rem;font-size:.88rem;margin-bottom:.3rem}
.hb-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t b{font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-t small{color:var(--muted);font-weight:600;margin-left:.3rem}
.hb-bar{height:.5rem;border-radius:1rem;background:var(--surface2);overflow:hidden}
.hb-bar i{display:block;height:100%;width:var(--w);border-radius:1rem;background:var(--ball);animation:ancho .8s var(--ease) both}
@keyframes ancho{from{width:0}}
.dash-2{display:grid;gap:0 .7rem}
@media (min-width:900px){.dash-2{grid-template-columns:1fr 1fr}.dash-2>.card{margin-bottom:.7rem}}
.tabla-wrap{overflow:auto;border:1px solid var(--line);border-radius:1rem;background:var(--surface);max-height:65dvh}
.tabla{width:100%;border-collapse:collapse;font-size:.84rem;-webkit-user-select:text;user-select:text}
.tabla th,.tabla td{padding:.6rem .75rem;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.tabla th{position:sticky;top:0;background:var(--surface2);font-weight:700;color:var(--muted);font-size:.78rem;z-index:1}
.tabla .n{text-align:right;font-variant-numeric:tabular-nums}
.tabla tbody tr:hover{background:var(--surface2)}
.tabla tfoot td{position:sticky;bottom:0;background:var(--surface2);font-weight:800;border-bottom:0}

/* ---------- v6: notificaciones, compras, permisos ---------- */
.top{position:relative}
.bell{position:relative;flex:none}
.bell.tiene svg{animation:campana 1.2s var(--ease) 1}
@keyframes campana{15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%{transform:none}}
.bell-n{position:absolute;top:-.25rem;right:-.25rem;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg);animation:pop .35s var(--spring)}
.notif{position:relative}
.notif.nueva{border-color:var(--conf);background:linear-gradient(90deg,var(--conf-soft),var(--surface) 60%)}
.notif.nueva::after{content:"";position:absolute;top:.8rem;right:.8rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--conf)}
.notif-t{flex:none;font-size:.72rem;color:var(--muted);align-self:flex-start;margin-top:.15rem;margin-right:.6rem}
.compra-h,.compra-it{display:grid;grid-template-columns:1fr 4rem 6rem 2.1rem;gap:.4rem;align-items:center}
.compra-h{font-size:.74rem;font-weight:700;color:var(--muted);padding:0 .2rem .3rem}
.compra-it{margin-bottom:.4rem}
.compra-it .input{height:2.8rem;padding:0 .6rem;font-size:.92rem}
.compra-it select.input{padding-right:1.8rem;background-position:right .4rem center}
.sheet-body p.muted{white-space:pre-line}

/* ---------- v7: torneos, ranking, buscador ---------- */
.top-acc{display:flex;gap:.45rem;flex:none}
.field.dim{opacity:.4;pointer-events:none}
.partido{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;width:100%;padding:.8rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:1.1rem;transition:transform .18s var(--ease)}
.partido:active{transform:scale(.98)}
.pt-l{font-weight:650;font-size:.9rem;color:var(--muted)}
.pt-l:last-child{text-align:right}
.pt-l.win{color:var(--text)}
.pt-l.win::after{content:" ●";color:var(--ball);font-size:.7rem}
.pt-l:last-child.win::after{content:""}.pt-l:last-child.win::before{content:"● ";color:var(--ball);font-size:.7rem}
.pt-r{font-weight:800;font-stretch:112%;font-size:.84rem;padding:.3rem .6rem;border-radius:.6rem;background:var(--surface2);white-space:nowrap;font-variant-numeric:tabular-nums}
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:.5rem;margin:.4rem 0 1rem}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .5rem .8rem;border-radius:1.2rem;background:var(--surface);border:1px solid var(--line);text-align:center}
.pod b{font-weight:750;font-size:.92rem}
.pod span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pod i{position:absolute;top:-.7rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;background:var(--surface3)}
.pod.p1{padding-top:1.5rem;border-color:var(--ball);box-shadow:0 10px 30px rgba(221,242,71,.12)}
.pod.p1 i{background:var(--ball);color:var(--ball-ink)}
.pod.p1 .avatar{background:var(--accent-soft);color:var(--accent-text);width:3.2rem;height:3.2rem}
.row>svg{width:1.1rem;height:1.1rem;color:var(--muted);flex:none}

/* ---------- v8: motor de torneos ---------- */
.c-tor{background:linear-gradient(135deg,var(--violet-soft),var(--conf-soft));color:var(--violet);border-color:rgba(167,139,250,.35)}
.lg-tor{color:var(--violet)}
.tor-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.tor-top .row-title{font-size:1.1rem;font-weight:800}
.flujo{display:flex;gap:.35rem;overflow-x:auto;margin:0 -1.25rem .9rem;padding:0 1.25rem;scrollbar-width:none}
.flujo::-webkit-scrollbar{display:none}
.fl{flex:none;display:flex;align-items:center;gap:.4rem;height:2.2rem;padding:0 .8rem 0 .35rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.78rem;font-weight:650;color:var(--muted)}
.fl i{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--surface2);font-style:normal;font-size:.72rem;font-weight:800}
.fl i svg{width:.85rem;height:.85rem}
.fl.hecho{color:var(--ok)}.fl.hecho i{background:var(--ok-soft);color:var(--ok)}
.fl.act{color:var(--text);border-color:var(--ball)}.fl.act i{background:var(--ball);color:var(--ball-ink)}
.cat-card{display:block;width:100%;text-align:left}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.7rem}
.mini-stats span{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);background:var(--surface2);border-radius:.7rem;padding:.45rem .55rem}
.mini-stats b{font-size:1.05rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.mini-stats .warn b{color:var(--warn)}.mini-stats .ok b{color:var(--ok)}
.tabla tr.clasif td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.partido.hecho{opacity:.85}
.pt-l.ref{font-style:italic;opacity:.7}
.llave{display:flex;gap:.8rem;overflow-x:auto;margin:0 -1.25rem;padding:0 1.25rem .6rem;align-items:center}
.llave-col{flex:none;width:17rem;display:flex;flex-direction:column;gap:.5rem;justify-content:space-around}
.llave-t{font-size:.8rem;font-weight:700;color:var(--muted);text-align:center}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;padding:1rem;border-radius:1.1rem;background:var(--surface2);margin-bottom:.4rem;text-align:center;font-weight:750}
.vs span{color:var(--muted);font-size:.8rem}
.vs .win{color:var(--ball)}
.set-row{display:grid;grid-template-columns:3.5rem 1fr auto 1fr;align-items:center;gap:.5rem;margin-bottom:.5rem}
.set-row span{font-size:.82rem;color:var(--muted);font-weight:650}
.set-row .input{text-align:center;font-weight:800;font-size:1.2rem}
.msg-it{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:1.1rem;transition:opacity .3s}
.msg-it.enviado{opacity:.4}
.msg-txt{font-size:.82rem;color:var(--muted);white-space:pre-line;margin-top:.2rem;max-height:6.5rem;overflow:hidden}
.msg-acc{display:flex;flex-direction:column;gap:.4rem;align-items:center;flex:none}
.msg-acc .btn{height:2.4rem;font-size:.82rem;padding:0 .8rem}
a.tel{color:var(--accent-text);font-weight:600;margin-left:.3rem}

/* ---------- v9: whatsapp, links, galería ---------- */
.conv-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.chat{display:flex;flex-direction:column;gap:.45rem;max-height:52dvh;overflow-y:auto;padding:.6rem .2rem;margin:.4rem 0}
.burb{max-width:82%;padding:.55rem .75rem;border-radius:1rem;font-size:.9rem;line-height:1.35;white-space:pre-line;-webkit-user-select:text;user-select:text}
.burb small{display:block;font-size:.66rem;opacity:.65;margin-top:.25rem;text-align:right}
.burb.in{align-self:flex-start;background:var(--surface2);border-bottom-left-radius:.3rem}
.burb.out{align-self:flex-end;background:var(--ok-soft);color:var(--text);border-bottom-right-radius:.3rem}
.burb-media{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:.7rem;background:var(--surface3);font-weight:650;font-size:.82rem;margin-bottom:.3rem}
.burb-media svg{width:1rem;height:1rem}
.chat-in{display:flex;gap:.5rem;align-items:flex-end;position:sticky;bottom:0;background:var(--surface);padding-top:.4rem}
.chat-in .input{flex:1;height:auto;min-height:3rem;max-height:9rem;padding:.8rem 1rem;resize:none}
.chat-in .btn{width:3.1rem;padding:0;flex:none}
.chat-par{display:block;width:100%;text-align:left;margin-bottom:.4rem}
.links-card .btn{flex:1 1 auto;height:2.6rem;font-size:.84rem}
.qr-box{background:#fff;border-radius:1rem;padding:1rem;max-width:18rem;margin:0 auto .5rem}
.qr-box svg{width:100%;height:auto;display:block}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.4rem}
.gal-it{position:relative;aspect-ratio:1;border-radius:.9rem;overflow:hidden;background:var(--surface2)}
.gal-it img,.gal-it video{width:100%;height:100%;object-fit:cover;display:block}
.gal-play{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.gal-t{position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;font-size:.72rem;font-weight:650;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));text-align:left}
.gal-ver img,.gal-ver video{width:100%;border-radius:1rem;display:block;max-height:70dvh;object-fit:contain;background:#000}

/* ---------- barras de desplazamiento en la compu ---------- */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--surface3) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box;border:2px solid transparent}
  ::-webkit-scrollbar-corner{background:transparent}
  .main{scrollbar-gutter:stable}
}

/* =========================================================
   TEMA NUEVO: negro, gris y verde
   ========================================================= */
:root{--ball:#22C55E;--ball-ink:#04140A;--court:#161618;--court-2:#101012}
html[data-theme="dark"]{
  --bg:#0B0B0C;--surface:#141416;--surface2:#1C1C1F;--surface3:#2A2A2F;
  --line:rgba(255,255,255,.08);--text:#F4F4F5;--muted:#8D8D96;
  --accent-text:#4ADE80;--accent-soft:rgba(34,197,94,.13);
  --danger:#F87171;--danger-soft:rgba(248,113,113,.12);
  --ok:#22C55E;--ok-soft:rgba(34,197,94,.12);--warn:#F5B83D;--warn-soft:rgba(245,184,61,.12);
  --conf:#60A5FA;--conf-soft:rgba(59,130,246,.15);
  --violet:#C084FC;--violet-soft:rgba(168,85,247,.16);
  --orange:#FB923C;--orange-soft:rgba(251,146,60,.13);--green-2:#86EFAC;
  --free:rgba(34,197,94,.06);--free-b:rgba(34,197,94,.3);
  --seg-on:#2E2E33;--shadow:0 14px 40px rgba(0,0,0,.6);
}
html[data-theme="light"]{
  --bg:#F2F2F3;--surface:#FFFFFF;--surface2:#EBEBED;--surface3:#DADADE;
  --line:rgba(0,0,0,.08);--text:#111113;--muted:#66666F;
  --accent-text:#15803D;--accent-soft:rgba(22,163,74,.1);
  --ok:#16A34A;--ok-soft:rgba(22,163,74,.1);
  --conf:#2563EB;--conf-soft:rgba(37,99,235,.1);
  --violet:#9333EA;--violet-soft:rgba(147,51,234,.1);
}

/* títulos en mayúsculas, angostos */
.h1,.top-title,.sheet-head h2,.day-t,.card-h h3,.sec,.pl-head h3,.side-brand b,.a-cancha b,.llave-t,.tor-top .row-title,.pub-head h1,.login-brand h1{
  text-transform:uppercase;font-stretch:78%;letter-spacing:.05em;font-weight:800
}
.sec,.pl-head h3{font-size:.8rem;letter-spacing:.1em}
.top-title{font-size:1.35rem}
.card-h h3{font-size:.95rem}
.day-t{font-size:1.4rem}
.stat-lbl,.court-label,.court-sub,.side-g{letter-spacing:.02em}
.side-g{text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}

/* botones */
.btn-primary{background:linear-gradient(180deg,#2BD366,#16A34A);color:#04140A;box-shadow:0 6px 18px rgba(34,197,94,.22)}
.fab{background:linear-gradient(180deg,#2BD366,#16A34A);color:#04140A;box-shadow:0 10px 26px rgba(34,197,94,.3),var(--shadow)}
.cart-bar{background:linear-gradient(180deg,#2BD366,#16A34A);color:#04140A;box-shadow:0 12px 30px rgba(34,197,94,.3),var(--shadow)}
.btn,.icon-btn,.chip,.input,.seg{border:1px solid var(--line)}
.btn-primary{border-color:transparent}
.chip.on{background:var(--text);color:var(--bg);border-color:transparent}

/* tarjetas */
.row,.stat,.card,.day-card,.menu,.caja-card,.tile,.partido,.msg-it{background:var(--surface);border:1px solid var(--line)}
.stat-num{font-stretch:90%}

/* bloque destacado: tarjeta oscura con líneas de cancha verdes */
.court{background:radial-gradient(120% 140% at 100% 0%,rgba(34,197,94,.16),transparent 55%),var(--surface);color:var(--text);border:1px solid rgba(34,197,94,.22);box-shadow:none}
.court::before{border-color:rgba(34,197,94,.22)}
.court::after{border-left-color:rgba(34,197,94,.3)}
.court-lines::before,.court-lines::after{border-color:rgba(34,197,94,.14)}
.court-label{color:var(--muted);opacity:1;text-transform:uppercase;font-size:.74rem;letter-spacing:.1em;font-weight:700}
.court-num{color:#4ADE80}
.court-sub{color:var(--muted);opacity:1}
.court-ball{background:#22C55E}
html[data-theme="light"] .court-num{color:#15803D}

/* agenda */
.g-hora{background:var(--surface);border:1px solid rgba(168,85,247,.28);color:var(--text)}
.g-hora.now{background:rgba(168,85,247,.22);color:#fff;border-color:rgba(192,132,252,.7);box-shadow:0 0 0 1px rgba(192,132,252,.35) inset}
.a-cancha{background:var(--surface);border:1px solid var(--line)}
.a-cancha b{font-size:.82rem}
.cell{border:1px solid transparent}
.cell-n{text-transform:uppercase;font-size:.8rem;letter-spacing:.01em}
.cell-e{text-transform:uppercase;letter-spacing:.06em;font-size:.64rem}
.c-libre{background:var(--free);border:1px solid var(--free-b)}
.c-conf{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.35)}
.c-conf .cell-n{color:#7DB4FF}
.c-pend{background:rgba(245,184,61,.1);border-color:rgba(245,184,61,.35)}
.c-parc{background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.35)}
.c-pag{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.4)}
.c-comp{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.2);opacity:1;color:var(--muted)}
.c-comp .cell-n{color:#7DB4FF}
.c-fijo{background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.5)}
.c-fijo .cell-n{color:#D8B4FE}
.c-imp{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.35)}
.c-tor{background:rgba(168,85,247,.2);border-color:rgba(192,132,252,.55)}
.c-nov{border:1px dashed var(--line);opacity:.5;text-transform:uppercase;font-size:.62rem;letter-spacing:.08em}
html[data-theme="light"] .c-conf .cell-n,html[data-theme="light"] .c-comp .cell-n{color:#1D4ED8}
html[data-theme="light"] .c-fijo .cell-n{color:#7E22CE}

/* badges con borde, más de "etiqueta" */
.badge{border:1px solid transparent;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.badge.ok,.badge.st-pag,.badge.st-comp,.badge.st-libre{border-color:rgba(34,197,94,.35)}
.badge.warn,.badge.st-pend{border-color:rgba(245,184,61,.35)}
.badge.danger,.badge.st-imp,.badge.st-aus,.badge.st-bloq{border-color:rgba(248,113,113,.35)}
.badge.violet,.badge.st-fijo{border-color:rgba(192,132,252,.4)}
.badge.st-conf{border-color:rgba(96,165,250,.4)}

/* navegación */
.nav{background:rgba(11,11,12,.88)}
html[data-theme="light"] .nav{background:rgba(242,242,243,.9)}
.nav-ind{background:rgba(34,197,94,.14)}
.nav-btn.on svg{color:#4ADE80}
.side{background:#0F0F11}
html[data-theme="light"] .side{background:#FFFFFF}
.side-club .avatar{background:rgba(34,197,94,.14);color:#4ADE80}

/* página pública */
.pub-head{background:radial-gradient(120% 140% at 100% 0%,rgba(34,197,94,.18),transparent 55%),#141416;border:1px solid rgba(34,197,94,.25)}
.pub-head::before{border-color:rgba(34,197,94,.22)}
.pub-head::after{border-left-color:rgba(34,197,94,.3)}
.pub-head .badge{background:rgba(34,197,94,.15);color:#4ADE80;border-color:rgba(34,197,94,.35)}
.pub-check{background:#22C55E}

/* =========================================================
   ESTILO MOSTRADOR (negro, Bebas, emojis)
   ========================================================= */
:root{--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;--disp:"Bebas Neue","Archivo",Impact,sans-serif}
html[data-theme="dark"]{--bg:#0A0A0A;--surface:#151515;--surface2:#1D1D1D;--surface3:#2B2B2B;--line:#262626}
body{font-family:var(--font)}
.h1,.top-title,.sheet-head h2,.day-t,.card-h h3,.sec,.pl-head h3,.a-cancha b,.llave-t,.tor-top .row-title,.pub-head h1,.login-brand h1,.pag-t h1,.dia-t,.cobr-h,.side-brand b,.top-marca b,.hr-h,.tur-nom,.hr-nom,.a-corner{font-family:var(--disp);font-weight:400;font-stretch:100%;letter-spacing:.06em;text-transform:uppercase}

/* sin barra de abajo ni botón flotante */
.nav,.fab{display:none!important}
.main{padding-bottom:calc(env(safe-area-inset-bottom) + 3rem)}
.cart-bar{bottom:calc(env(safe-area-inset-bottom) + 1rem)}

/* encabezado: marca + hamburguesa */
.top{border-bottom:1px solid var(--line);padding-top:calc(env(safe-area-inset-top) + .7rem);padding-bottom:.7rem;max-width:none;background:var(--bg)}
.top-marca{display:flex;align-items:center;gap:.55rem}
.top-marca b{font-size:1.45rem;line-height:1}
.hamb{position:relative;display:none;flex-direction:column;justify-content:center;gap:5px;width:2.6rem;height:2.6rem;padding:0 .45rem}
.hamb i{display:block;height:2.5px;border-radius:2px;background:var(--text)}
.hamb-n{position:absolute;top:.2rem;right:.1rem;min-width:1.1rem;height:1.1rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;font-style:normal;padding:0 .25rem}
@media (max-width:899px){.hamb{display:flex}}
@media (min-width:900px){.top{display:none}}

/* menú lateral con emojis */
.side{background:#0E0E0E;border-right:1px solid var(--line)}
.side-brand{padding:.4rem .6rem 1rem}
.side-brand b{font-size:1.5rem;line-height:1;display:block}
.side-brand small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.side-club{border:1px solid var(--line);background:var(--surface)}
.side-g{margin:1.1rem .75rem .35rem;font-size:.66rem;letter-spacing:.14em}
.side-item{height:2.5rem;font-size:.9rem;color:#C9C9CF;gap:.65rem}
.side-item .side-e{font-style:normal;font-size:1rem;width:1.3rem;text-align:center;flex:none}
.side-item.on{background:#F4F4F5;color:#0A0A0A}
.side-item kbd{margin-left:auto;font-size:.62rem;color:var(--muted);border:1px solid var(--line);border-radius:.35rem;padding:.05rem .3rem;font-family:var(--font)}
.side-n{margin-left:auto;min-width:1.3rem;height:1.3rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;font-style:normal;padding:0 .3rem}
html[data-theme="light"] .side-item{color:#333}
html[data-theme="light"] .side-item.on{background:#111;color:#fff}

/* título de cada pantalla */
.pag-t{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:.6rem 0 1rem}
.pag-t h1{font-size:1.9rem;line-height:1.05}
.pag-t p{font-size:.86rem;color:var(--muted);margin-top:.25rem;max-width:34rem}
.btn-nuevo{flex:none;height:2.5rem;padding:0 1rem;border-radius:.8rem;background:#F4F4F5;color:#0A0A0A;font-weight:700;font-size:.86rem;white-space:nowrap;transition:transform .15s}
.btn-nuevo:active{transform:scale(.95)}
html[data-theme="light"] .btn-nuevo{background:#111;color:#fff}
@media (max-width:520px){.pag-t{flex-direction:column;gap:.7rem}.btn-nuevo{align-self:stretch}}

/* navegación de fecha */
.dn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);margin-bottom:.9rem}
.dn-b{width:2.3rem;height:2.3rem;border-radius:.65rem;border:1px solid var(--line);font-size:1rem}
.dn-f{position:relative;display:flex;align-items:center;gap:.4rem;height:2.3rem;padding:0 .9rem;border-radius:.65rem;border:1px solid var(--line);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.dn-f input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dn-hoy{height:2.3rem;padding:0 .9rem;border-radius:.65rem;background:#2563EB;color:#fff;font-weight:700;font-size:.86rem}

/* caja abierta */
.caja-banner{display:flex;gap:.6rem;align-items:flex-start;width:100%;text-align:left;padding:.9rem 1rem;border-radius:1rem;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35);color:#4ADE80;font-size:.9rem;line-height:1.4;margin-bottom:.9rem}
.caja-banner b{color:#86EFAC}
.caja-banner.off{background:rgba(245,184,61,.07);border-color:rgba(245,184,61,.3);color:var(--warn)}

/* tarjeta del día */
.dia-card{padding:1.1rem 1.2rem;border-radius:1.1rem;background:var(--surface);border:1px solid var(--line);margin-bottom:.9rem}
.dia-t{font-size:1.7rem;line-height:1.05}
.dia-s{font-size:.86rem;color:var(--muted);margin:.3rem 0 .9rem}
.dia-acc{display:flex;align-items:stretch;gap:.6rem}
.cuad{width:3rem;height:3rem;border-radius:.75rem;background:linear-gradient(180deg,#2BD366,#16A34A);font-size:1.25rem;box-shadow:0 6px 16px rgba(34,197,94,.25);transition:transform .15s}
.cuad:active{transform:scale(.92)}
.ocup{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1rem;border-radius:.75rem;border:1px solid var(--line);background:var(--bg)}
.ocup b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.ocup span{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* turnos cobrados */
.cobr-card{padding:1rem 1.1rem}
.cobr-h{font-size:1.25rem;margin-bottom:.2rem}
.cobr-tot{font-size:.86rem;color:var(--muted);margin-bottom:.4rem}
.cobr-tot b{font-weight:800}
.cobr-it{display:flex;align-items:center;gap:.6rem;padding:.65rem 0;border-top:1px solid var(--line);font-size:.86rem}
.cobr-hora{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;flex:none}
.cobr-m{flex:none;font-variant-numeric:tabular-nums}
.cobr-mas{display:block;width:100%;padding:.6rem;margin-top:.2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;font-weight:600}

/* grilla de turnos */
.agenda{grid-template-columns:4.3rem repeat(var(--cols),minmax(7.2rem,1fr));gap:.35rem}
.a-corner{position:sticky;top:0;left:0;z-index:4;display:grid;place-items:center;border-radius:.6rem;background:#050505;border:1px solid var(--line);font-size:.95rem}
.a-cancha{display:grid;place-items:center;padding:.5rem;border-radius:.6rem;background:#050505;border:1px solid var(--line);box-shadow:none}
.a-cancha b{font-size:1rem}
.a-cancha small{display:none}
.g-hora{flex-direction:column;gap:.15rem;font-size:.95rem;font-weight:800;border-radius:.6rem;background:var(--surface);border:1px solid rgba(168,85,247,.35);display:flex;align-items:center;justify-content:center}
.g-hora small{font-size:.58rem;font-weight:700;color:#C084FC;text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.2}
.g-hora.now{background:rgba(168,85,247,.22);border-color:#A855F7}
.cell{min-height:5.4rem;border-radius:.6rem;align-items:center;justify-content:center;text-align:center;gap:.2rem;padding:.45rem .35rem;position:relative}
.cell .dot{position:absolute;top:.35rem;right:.35rem;width:.5rem;height:.5rem;margin:0;background:#F59E0B;box-shadow:none}
.cell-n{font-weight:800;font-size:.86rem;line-height:1.15;text-transform:uppercase;-webkit-line-clamp:2}
.cell-e{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8D8D96;justify-content:center}
.cell-f{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#C084FC}
.cell-ic{font-size:1.1rem;line-height:1}
.c-libre{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35)}
.c-libre .cell-ic,.c-libre .cell-e{color:#4ADE80}
.c-nov{border:1px dashed #2A2A2A;background:transparent;opacity:1}
.c-nov .cell-e{color:#4A4A50}
.c-conf,.c-pag,.c-comp,.c-parc{background:rgba(37,99,235,.12);border:1px solid rgba(59,130,246,.35)}
.c-conf .cell-n,.c-pag .cell-n,.c-comp .cell-n,.c-parc .cell-n{color:#60A5FA}
.c-pend{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.4)}
.c-pend .cell-n{color:#FBBF24}
.c-fijo{background:rgba(147,51,234,.16);border:1px solid rgba(168,85,247,.55)}
.c-fijo .cell-n{color:#C084FC}
.c-imp,.c-aus{background:#141414;border:1px solid #262626}
.c-imp .cell-n,.c-aus .cell-n{color:#6B6B72;text-decoration:line-through}
.c-bloq{background:#101010;border:1px solid #262626}
.c-bloq .cell-e{color:#6B6B72}
.c-tor{background:rgba(147,51,234,.22);border:1px solid rgba(168,85,247,.6)}
.c-tor .cell-n{color:#D8B4FE}
.is-fijo:not(.c-fijo){box-shadow:none}
.leyenda{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin:.9rem .2rem 0;font-size:.8rem;color:#A1A1AA}
.leyenda span{display:inline-flex;align-items:center;gap:.4rem}
.lg{display:inline-block;width:1rem;height:1rem;border-radius:.25rem;border:1px solid}
.lg-libre{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.6)}
.lg-pend{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.6)}
.lg-conf{background:rgba(220,38,38,.2);border-color:rgba(239,68,68,.55)}
.lg-comp{background:rgba(37,99,235,.2);border-color:rgba(59,130,246,.6)}
.lg-fijo{background:rgba(147,51,234,.25);border-color:rgba(168,85,247,.7)}
.lg-imp{background:#1A1A1A;border-color:#333}
.lg-bloq{background:#0E0E0E;border-color:#2A2A2A}
.lg-nov{background:transparent;border:1px dashed #333}
.c-conf{background:rgba(220,38,38,.1);border-color:rgba(239,68,68,.4)}
.c-conf .cell-n{color:#F87171}

/* resumen del horario */
.hr-top{display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;gap:.6rem;margin:-.6rem 0 1rem}
.hr-nav{display:flex;flex-direction:column;align-items:center;justify-content:center;height:3rem;border-radius:.8rem;border:1px solid var(--line);font-size:1.2rem;line-height:1}
.hr-nav small{font-size:.6rem;color:var(--muted)}
.hr-h{font-size:2.6rem;line-height:1;color:#C084FC}
.hr-s{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:.6rem;padding:.2rem .5rem;display:inline-block;margin-top:.3rem}
.hr-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.hc{display:inline-flex;gap:.35rem;align-items:center;padding:.45rem .7rem;border-radius:.8rem;border:1px solid var(--line);background:var(--surface);font-size:.8rem;color:#C9C9CF}
.hc b{color:var(--text);font-variant-numeric:tabular-nums}
.hc.ok{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)}
.hc.warn{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.hc.warn b{color:#FBBF24}
.hr-can{display:block;width:100%;text-align:left;padding:1rem;border-radius:1rem;background:var(--surface);border:1px solid var(--line);margin-bottom:.5rem}
.hr-can-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.hr-can-h b{font-family:var(--disp);font-size:1.3rem;letter-spacing:.06em}
.hr-nom{font-size:1.15rem;margin-bottom:.2rem}
.hr-l{font-size:.84rem;color:#A1A1AA;margin-top:.2rem}
.hr-l b{color:var(--text)}
.hr-p{display:flex;align-items:center;gap:.6rem;font-size:.82rem;margin:.4rem 0}
.hr-p .bar{flex:1;margin:0;max-width:none;height:.35rem}
.hr-p .bar i{background:#22C55E}

/* detalle del turno */
.tur-card{padding:1rem 1.1rem;border-radius:1rem;background:var(--surface2);border:1px solid var(--line);margin-bottom:.4rem}
.tur-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.tur-h b{font-family:var(--disp);font-size:1.25rem;letter-spacing:.06em}
.tur-nom{font-size:1.25rem;margin:.3rem 0 .1rem}
.slots{display:flex;flex-direction:column;gap:.5rem}
.slot{padding:.8rem .9rem;border-radius:1rem;background:#101010;border:1px solid var(--line)}
.slot.pago{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.45)}
.slot.inv{border-color:rgba(168,85,247,.4)}
.slot-h{display:flex;align-items:center;gap:.6rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);margin-bottom:.55rem}
.slot-n{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:#222;flex:none}
.slot.pago .slot-n,.slot.inv .slot-n{background:#22C55E;color:#04140A}
.slot-nom{font-weight:800;font-size:.95rem;letter-spacing:.03em;text-align:left;flex:1}
.slot-m{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.slot-m b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.tri{display:flex;gap:.3rem}
.tri button{height:1.7rem;padding:0 .55rem;border-radius:.45rem;border:1px solid #333;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6B6B72}
.tri button.on{background:#F4F4F5;color:#0A0A0A;border-color:#F4F4F5}
.slot-f{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.84rem}
.slot-d{font-size:.72rem;color:#6B6B72;margin-top:.1rem}
.slot-ok{font-size:.76rem;font-weight:800;color:#22C55E;letter-spacing:.03em}
.slot-ok.violet{color:#C084FC}
.btn-cobrar{height:2rem;padding:0 .8rem;border-radius:.6rem;background:linear-gradient(180deg,#2BD366,#16A34A);color:#04140A;font-weight:800;font-size:.8rem}
.slot-nota{width:100%;margin-top:.5rem;padding:.3rem 0;background:transparent;border:0;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;outline:none}
.btn-varios{margin-top:.6rem;border-color:#333;font-family:var(--disp);letter-spacing:.08em;font-size:1.05rem}
.qq-info{padding:.9rem 1rem;border-radius:.9rem;background:var(--surface2);border:1px solid var(--line);font-size:.86rem;color:#C9C9CF;margin-bottom:.6rem;text-align:center}
.qq{display:flex;flex-direction:column;gap:.45rem}
.qq button{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;padding:.85rem .9rem;border-radius:.9rem;background:var(--surface);border:1px solid var(--line);transition:transform .15s,background .2s}
.qq button:active{transform:scale(.98);background:var(--surface2)}
.qq i{font-style:normal;font-size:1.3rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:.6rem;background:var(--surface2);flex:none}
.qq b{display:block;font-size:.92rem}
.qq small{display:block;font-size:.76rem;color:var(--muted)}
.qq-x b{color:#F87171}
.sheet{background:#121212;border:1px solid var(--line)}
.sheet-head h2{font-size:1.5rem}

/* ---------- v10: conflictos, disponibilidad, finanzas ---------- */
.lnk{color:#4ADE80;font-weight:700;font-size:.84rem;text-align:left;padding:0}
.btn-sm{height:2rem;padding:0 .7rem;font-size:.76rem;flex:none}
.conf{padding:.9rem 1rem;border-radius:1rem;background:var(--surface);border:1px solid var(--line)}
.conf-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.conf-h b{font-size:.95rem}
.conf-d{font-size:.86rem;color:#C9C9CF}
.conf-s{font-size:.8rem;color:var(--muted);margin:.35rem 0 .6rem}
.conf .btn{height:2.4rem;font-size:.84rem}
.prop{padding:.9rem 1rem;border-radius:1rem;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.4);font-size:.9rem;margin:.6rem 0}
.prop.mal{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.45)}
.prop .btn-row{margin-top:.6rem}
.disp{display:flex;flex-direction:column;gap:.5rem}
.disp-dia{padding:.7rem .8rem;border-radius:.9rem;background:var(--surface2);border:1px solid var(--line)}
.disp-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.disp-h b{font-size:.9rem}
.disp-r{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
.rango{display:grid;grid-template-columns:1fr auto 1fr auto;gap:.4rem;align-items:center}
.rango .input{height:2.5rem;padding:0 .6rem;font-size:.9rem}
.rango span{color:var(--muted);font-size:.8rem}
.info .lnk{color:var(--muted);text-decoration:underline dotted;font-weight:500;font-size:.94rem}

/* ---------- v11: soporte, administración ---------- */
.soporte-banner{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:.9rem;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.45);color:#93C5FD;font-size:.86rem;font-weight:600;margin:.4rem 0 .8rem}
.soporte-banner button{margin-left:auto;height:2rem;padding:0 .8rem;border-radius:.6rem;background:#F4F4F5;color:#0A0A0A;font-weight:800;font-size:.8rem}
.soporte-card{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.soporte-card p{font-size:.88rem;margin-bottom:.7rem}
.slug-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:.9rem;background:var(--surface2);overflow:hidden}
.slug-in span{padding:0 .2rem 0 .9rem;color:var(--muted);font-size:.86rem;white-space:nowrap}
.slug-in .input{border:0;background:transparent;padding-left:.1rem}
.adm-top{display:flex!important;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;width:100%}
.main.solo{max-width:900px;margin:0 auto}

/* ---------- v11: en la compu se baja con la ruedita, como cualquier página ---------- */
@media (min-width:900px){
  html,body{height:auto;min-height:100%;overflow:visible}
  #app{height:auto;min-height:100vh}
  .layout{height:auto;min-height:100vh;align-items:stretch}
  .side{position:fixed;top:0;bottom:0;left:0;height:100vh;z-index:20}
  .content{margin-left:16.5rem;min-height:100vh}
  .main{overflow:visible;height:auto;flex:none}
  .agenda-wrap{overflow:visible;max-height:none;overscroll-behavior:auto}
  .sheet-wrap{position:fixed}
}

/* ---------- v11: arreglos ---------- */
.card-row>svg{width:1.2rem;height:1.2rem;flex:none;color:var(--muted)}

/* ---------- v11: portada de la web del club ---------- */
.logo-box{display:flex;gap:.9rem;align-items:center;padding:.9rem;border-radius:1rem;background:var(--surface2);border:1px solid var(--line);margin-bottom:.9rem}
.logo-prev{width:4.5rem;height:4.5rem;border-radius:.9rem;background:var(--bg);display:grid;place-items:center;font-size:1.8rem;flex:none;overflow:hidden}
.logo-prev img{width:100%;height:100%;object-fit:contain}
.serv-fila{display:grid;grid-template-columns:3.4rem 1fr 2.2rem;gap:.4rem;align-items:center;margin-bottom:.45rem}
.serv-fila .input{height:2.5rem;font-size:.86rem}
.serv-fila>div{display:grid;gap:.3rem}
.serv-fila [data-f=se]{text-align:center;font-size:1.1rem}

/* =========================================================
   TEMA "CANCHA DE NOCHE"
   ========================================================= */
:root{
  --disp:"Oxanium","Archivo",system-ui,sans-serif;
  --ball:#8B5CF6;--ball-ink:#0A0714;--court:#131A2C;--court-2:#0C111D;
}
html[data-theme="dark"]{
  --bg:#080B14;--surface:#101728;--surface2:#162034;--surface3:#22304D;
  --line:rgba(130,160,255,.16);--text:#EAF0FF;--muted:#8A9AC0;
  --accent-text:#A78BFA;--accent-soft:rgba(139,92,246,.16);
  --ok:#22D3EE;--ok-soft:rgba(34,211,238,.14);--green-2:#67E8F9;
  --warn:#FBBF24;--warn-soft:rgba(251,191,36,.14);
  --danger:#FB7185;--danger-soft:rgba(251,113,133,.14);
  --conf:#60A5FA;--conf-soft:rgba(96,165,250,.16);
  --violet:#C4B5FD;--violet-soft:rgba(139,92,246,.18);
  --orange:#FB923C;--orange-soft:rgba(251,146,60,.14);
  --free:rgba(34,211,238,.07);--free-b:rgba(34,211,238,.35);
  --seg-on:#22304D;--shadow:0 18px 46px rgba(2,6,20,.72);
}
html[data-theme="light"]{
  --bg:#EEF1F8;--surface:#FFFFFF;--surface2:#E7EBF5;--surface3:#D5DCEC;
  --line:rgba(30,45,90,.12);--text:#0E1426;--muted:#5A6684;
  --accent-text:#6D28D9;--accent-soft:rgba(109,40,217,.1);
  --ok:#0E7490;--ok-soft:rgba(14,116,144,.1);
  --violet:#7C3AED;--violet-soft:rgba(124,58,237,.12);
}
body{background:
  radial-gradient(90% 60% at 50% -10%,rgba(139,92,246,.14),transparent 60%),
  radial-gradient(70% 50% at 100% 100%,rgba(34,211,238,.08),transparent 60%),var(--bg)}

/* tipografía tipo marcador */
.h1,.top-title,.sheet-head h2,.day-t,.card-h h3,.sec,.pl-head h3,.a-cancha b,.llave-t,.tor-top .row-title,.pub-head h1,.login-brand h1,.pag-t h1,.dia-t,.cobr-h,.side-brand b,.top-marca b,.hr-h,.tur-nom,.hr-nom,.a-corner,.hero h1,.blq-t h3,.ok-box h2,.vacio-box h2,.vacio-box h3,.tor-h b,.hr-can-h b{
  font-family:var(--disp);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-stretch:100%}
.pag-t h1{font-size:1.7rem}
.dia-t{font-size:1.5rem}
.hero h1{font-size:2.5rem;letter-spacing:.03em}
.stat-num,.court-num,.ocup b,.big,.cobr-m,.hr-h{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums}

/* formas: esquinas más marcadas y bordes visibles */
.card,.row,.menu,.stat,.day-card,.caja-card,.tile,.partido,.msg-it,.conf,.slot,.tur-card,.hr-can,.cal,.tor,.serv,.mapa,.mapa-pie,.qq button,.cobr-card,.dia-card,.logo-box{border-radius:.85rem}
.btn,.icon-btn,.chip,.input,.seg,.btn-nuevo,.hero-btn,.cuad,.slot-c,.cal-d,.g-hora,.cell,.a-cancha,.a-corner{border-radius:.6rem}
.sheet{border-radius:1rem 1rem 0 0;border:1px solid var(--line);background:linear-gradient(180deg,#131B2E,#0C1220)}
.card,.row,.stat,.menu,.tile,.partido,.msg-it,.conf,.dia-card,.cobr-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--surface)}
.btn-primary{background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#0A0714;box-shadow:0 8px 22px rgba(124,58,237,.35)}
.fab,.cart-bar{background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#0A0714;box-shadow:0 10px 26px rgba(124,58,237,.4),var(--shadow)}
.cuad{background:linear-gradient(180deg,#A78BFA,#7C3AED);box-shadow:0 6px 16px rgba(124,58,237,.3)}
.chip.on,.btn-nuevo,.hero-btn,.dn-hoy{background:linear-gradient(180deg,#67E8F9,#22D3EE);color:#04121A;border-color:transparent}
.side-item.on{background:linear-gradient(90deg,rgba(139,92,246,.35),rgba(34,211,238,.18));color:#fff;box-shadow:inset 2px 0 0 #22D3EE}
.nav-btn.on svg{color:#A78BFA}

/* agenda tipo marcador */
.g-hora{background:linear-gradient(180deg,#162034,#101728);border:1px solid rgba(139,92,246,.35);color:#C4B5FD}
.g-hora small{color:#7C8BB0}
.g-hora.now{background:linear-gradient(180deg,#8B5CF6,#6D28D9);color:#fff;border-color:#A78BFA;box-shadow:0 0 18px rgba(139,92,246,.45)}
.a-cancha,.a-corner{background:#0B1120;border:1px solid var(--line)}
.c-libre{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.38)}
.c-libre .cell-ic,.c-libre .cell-e{color:#67E8F9}
.c-conf{background:rgba(139,92,246,.14);border-color:rgba(167,139,250,.5)}
.c-conf .cell-n{color:#C4B5FD}
.c-pend{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.45)}
.c-pend .cell-n{color:#FCD34D}
.c-pag,.c-comp,.c-parc{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.4)}
.c-pag .cell-n,.c-comp .cell-n,.c-parc .cell-n{color:#67E8F9}
.c-fijo{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.5)}
.c-fijo .cell-n,.cell-f{color:#93C5FD}
.c-tor{background:rgba(244,114,182,.16);border-color:rgba(244,114,182,.55)}
.c-tor .cell-n{color:#F9A8D4}
.c-imp,.c-aus,.c-bloq{background:#0C1220;border-color:var(--line)}
.c-nov{border:1px dashed rgba(130,160,255,.18)}
.lg-libre{background:rgba(34,211,238,.25);border-color:#22D3EE}
.lg-conf{background:rgba(139,92,246,.3);border-color:#A78BFA}
.lg-comp{background:rgba(34,211,238,.2);border-color:#67E8F9}
.lg-fijo{background:rgba(96,165,250,.25);border-color:#60A5FA}
.lg-pend{background:rgba(251,191,36,.25);border-color:#FBBF24}

/* bloque destacado */
.court,.pub-head,.hero{background:linear-gradient(140deg,rgba(139,92,246,.22),transparent 55%),linear-gradient(320deg,rgba(34,211,238,.14),transparent 50%),#0D1424;border:1px solid rgba(139,92,246,.3)}
.court::before,.pub-head::before{border-color:rgba(167,139,250,.3)}
.court::after,.pub-head::after{border-left-color:rgba(34,211,238,.35)}
.court-lines::before,.court-lines::after{border-color:rgba(167,139,250,.2)}
.court-num{color:#67E8F9}
.court-ball,.pub-check,.ok-ic{background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#0A0714}
.cod,.pub-cod{color:#67E8F9}

/* web del club */
.slot-c{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.3)}
.slot-c b{color:#67E8F9}
.slot-c.on{background:linear-gradient(180deg,#A78BFA,#7C3AED);border-color:#A78BFA}
.slot-c.on b,.slot-c.on span,.slot-c.on small{color:#0A0714}
.cal-d.on{background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#fff;border-color:#A78BFA}
.pso.act i{background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#fff;border-color:#A78BFA}
.pso.ok{color:#22D3EE}.pso.ok i{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.5);color:#67E8F9}
.blq-t i{background:rgba(139,92,246,.2);color:#C4B5FD}
.serv i{filter:saturate(1.1)}
.hero-sub{color:#8A9AC0;letter-spacing:.3em}
.hero-btn{box-shadow:0 10px 26px rgba(34,211,238,.25)}

/* detalles */
.badge{border-radius:.45rem}
.avatar{border-radius:.6rem}
.slot.pago{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.45)}
.slot-n{border-radius:.5rem}
.slot.pago .slot-n,.slot.inv .slot-n{background:linear-gradient(180deg,#67E8F9,#22D3EE);color:#04121A}
.slot-ok{color:#67E8F9}
.btn-cobrar{background:linear-gradient(180deg,#67E8F9,#22D3EE);color:#04121A;border-radius:.5rem}
.caja-banner{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.35);color:#67E8F9}
.caja-banner b{color:#A5F3FC}
.ocup b{color:#C4B5FD}

/* =========================================================
   ANIMACIÓN DE ENTRADA Y APARICIONES
   ========================================================= */
#intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:1.2rem;
  background:radial-gradient(80% 60% at 50% 35%,rgba(139,92,246,.22),transparent 60%),#080B14;
  animation:introFin .6s ease 9s forwards}
#intro.out{animation:introFin .5s ease forwards}
@keyframes introFin{to{opacity:0;visibility:hidden;transform:scale(1.04)}}
.intro-court{width:min(62vw,17rem);height:auto;stroke:#A78BFA;stroke-width:1.6;filter:drop-shadow(0 0 12px rgba(139,92,246,.45))}
.intro-court .dib{stroke-dasharray:560;stroke-dashoffset:560;animation:dibujar 1.25s cubic-bezier(.65,0,.35,1) forwards}
.intro-court .d2{animation-delay:.5s}.intro-court .d3{animation-delay:.72s}
.intro-court .d4{animation-delay:.92s;stroke:#22D3EE}.intro-court .d5{animation-delay:1.08s;stroke:#22D3EE}
@keyframes dibujar{to{stroke-dashoffset:0}}
.intro-ball{position:absolute;top:28%;left:50%;width:1.5rem;height:1.5rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E9FF6A,#B6E800);box-shadow:0 0 22px rgba(217,255,106,.55);
  opacity:0;animation:pica 1.7s cubic-bezier(.3,.9,.4,1) .8s forwards}
@keyframes pica{
  0%{opacity:0;transform:translate(-50%,-260%) scale(.6)}
  22%{opacity:1;transform:translate(-50%,10%) scale(1,.82)}
  42%{transform:translate(-30%,-120%) scale(.96)}
  62%{transform:translate(-14%,10%) scale(1,.9)}
  78%{transform:translate(0,-55%)}
  100%{opacity:1;transform:translate(10%,14%) scale(.9)}
}
.intro-marca{text-align:center;opacity:0;animation:subeMarca .9s cubic-bezier(.22,1,.3,1) 1.85s forwards}
.intro-marca b{display:block;font-family:var(--disp);font-size:2.6rem;font-weight:800;letter-spacing:.22em;color:#EAF0FF;text-indent:.22em}
.intro-marca span{display:block;margin-top:.2rem;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#8A9AC0}
@keyframes subeMarca{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* apariciones al hacer scroll (páginas públicas) */
.rev{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.3,1)}
.rev.visto{opacity:1;transform:none}
.slots-g .slot-c,.servicios .serv,.cal-d{animation:aparece .6s cubic-bezier(.22,1,.3,1) backwards}
.slots-g .slot-c:nth-child(n+2){animation-delay:.06s}
.slots-g .slot-c:nth-child(n+5){animation-delay:.12s}
.slots-g .slot-c:nth-child(n+9){animation-delay:.18s}
.slots-g .slot-c:nth-child(n+13){animation-delay:.24s}
.servicios .serv:nth-child(2){animation-delay:.12s}.servicios .serv:nth-child(3){animation-delay:.24s}.servicios .serv:nth-child(4){animation-delay:.36s}
@keyframes aparece{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.hero-logo,.hero-emoji{animation:subeMarca .9s cubic-bezier(.22,1,.3,1) .1s backwards}
.hero h1{animation:subeMarca .9s cubic-bezier(.22,1,.3,1) .6s backwards}
.hero-sub{animation:subeMarca .9s cubic-bezier(.22,1,.3,1) .44s backwards}
.hero-datos{animation:subeMarca .9s cubic-bezier(.22,1,.3,1) .6s backwards}
.hero-btn{animation:subeMarca .9s cubic-bezier(.22,1,.3,1) .76s backwards}
.pso.ok i{animation:marcaOk .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes marcaOk{from{transform:scale(.5) rotate(-12deg)}to{transform:none}}
.ok-ic{animation:marcaOk .6s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){
  #intro{animation:introFin .2s ease forwards}
  .intro-court .dib,.intro-ball,.intro-marca,.slots-g .slot-c,.servicios .serv,.cal-d,.hero-logo,.hero-emoji,.hero h1,.hero-sub,.hero-datos,.hero-btn{animation:none;opacity:1;stroke-dashoffset:0;transform:none}
  .rev{opacity:1;transform:none}
}

/* ---------- entrada animada del login y de la invitación ---------- */
.login-cancha{position:fixed;left:0;right:0;top:0;height:46vh;display:grid;place-items:center;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 92%);mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 92%)}
.login-cancha svg{width:min(108vw,42rem);height:auto;opacity:.22;filter:drop-shadow(0 0 22px rgba(139,92,246,.3))}
.login-cancha .lc{stroke:#8B5CF6;stroke-width:1.1;stroke-dasharray:560;stroke-dashoffset:560;animation:dibujar 1.6s cubic-bezier(.65,0,.35,1) forwards,latido 6s ease-in-out 2.2s infinite}
.login-cancha .l2{animation-delay:.3s,2.4s}
.login-cancha .l3{animation-delay:.45s,2.6s}
.login-cancha .l4{stroke:#22D3EE;animation-delay:.6s,2.8s}
.login-cancha .l5{stroke:#22D3EE;animation-delay:.75s,3s}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}
.lc-ball{position:absolute;top:12%;left:50%;width:.9rem;height:.9rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9FF6A,#B6E800);
  box-shadow:0 0 16px rgba(217,255,106,.45);opacity:0;animation:picaLogin 6.5s cubic-bezier(.4,.05,.5,1) 1.4s infinite}
@keyframes picaLogin{
  0%{opacity:0;transform:translate(-13rem,-1rem) scale(.7)}
  10%{opacity:.85;transform:translate(-10rem,3.4rem) scale(1,.86)}
  28%{transform:translate(-6rem,-1.4rem)}
  46%{transform:translate(-2rem,3.4rem) scale(1,.88)}
  64%{transform:translate(2.5rem,-.6rem)}
  82%{opacity:.8;transform:translate(7rem,3.4rem) scale(1,.9)}
  100%{opacity:0;transform:translate(12rem,1rem) scale(.8)}
}
.login,.login-brand,.login form{position:relative;z-index:1}
.login .anim-in{animation:apareceLogin .85s cubic-bezier(.22,1,.3,1) backwards;animation-delay:calc(var(--i,0) * .11s + .25s)}
@keyframes apareceLogin{from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.brand-ball{display:inline-block;animation:entraPelota 1.1s cubic-bezier(.34,1.56,.64,1) .1s backwards}
@keyframes entraPelota{
  0%{opacity:0;transform:translateY(-120px) scale(.5) rotate(-90deg)}
  60%{opacity:1;transform:translateY(8px) scale(1.06) rotate(8deg)}
  100%{opacity:1;transform:none}
}
.login-brand h1{animation:apareceLogin .9s cubic-bezier(.22,1,.3,1) .5s backwards}
.login-brand p{animation:apareceLogin .9s cubic-bezier(.22,1,.3,1) .65s backwards}
@media (prefers-reduced-motion:reduce){
  .login-cancha .lc,.lc-ball,.brand-ball,.login .anim-in,.login-brand h1,.login-brand p{animation:none;opacity:1;stroke-dashoffset:0;transform:none;filter:none}
}

/* ---------- opciones de configuración con más vida ---------- */
.opts{display:grid;gap:.5rem}
.opt{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;padding:.9rem 1rem;border-radius:.85rem;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--surface);border:1px solid var(--line);transition:transform .15s,border-color .2s,background .2s}
.opt:active{transform:scale(.985)}
.opt:hover{border-color:rgba(167,139,250,.45)}
.opt i{font-style:normal;font-size:1.35rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:.7rem;flex:none;
  background:linear-gradient(160deg,rgba(139,92,246,.22),rgba(34,211,238,.12));border:1px solid rgba(139,92,246,.28)}
.opt div{flex:1;min-width:0}
.opt b{display:block;font-size:.95rem;font-weight:700}
.opt small{display:block;font-size:.76rem;color:var(--muted);line-height:1.3;margin-top:.1rem}
.opt>span svg{width:1.1rem;height:1.1rem;color:var(--muted);flex:none}

/* ---------- campana y panel de notificaciones ---------- */
.top-der{display:flex;align-items:center;gap:.4rem}
.bell-btn{position:relative;width:2.6rem;height:2.6rem;border-radius:.7rem;border:1px solid var(--line);background:var(--surface);font-size:1.15rem;line-height:1}
.bell-btn .side-n{position:absolute;top:-.35rem;right:-.35rem;min-width:1.15rem;height:1.15rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.64rem;font-weight:800;display:grid;place-items:center;font-style:normal;padding:0 .25rem;margin:0}
.bell-fija{display:none}
@media (min-width:900px){
  .bell-fija{display:block;position:fixed;top:1rem;right:1.4rem;z-index:30;box-shadow:var(--shadow)}
  .main{padding-top:1rem}
}
.panel-notifs{position:fixed;top:4.2rem;right:.8rem;width:min(92vw,23rem);max-height:70dvh;z-index:60;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#131B2E,#0C1220);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);overflow:hidden;
  animation:bajaPanel .25s cubic-bezier(.22,1,.3,1)}
@keyframes bajaPanel{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.pn-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.pn-head b{font-family:var(--disp);letter-spacing:.06em;text-transform:uppercase;font-size:1rem}
.pn-body{padding:.8rem;overflow-y:auto}
.pn-body .chips{margin:0 0 .7rem}
@media (min-width:900px){.panel-notifs{top:4rem;right:1.4rem}}

/* ---------- productos con ícono ---------- */
.avatar.av-emo{font-size:1.3rem;background:linear-gradient(160deg,rgba(139,92,246,.2),rgba(34,211,238,.12))}
.tile-ic{font-size:1.6rem}
.prod-top{position:relative}
.prod-emo{font-size:3rem;line-height:1;margin-bottom:.4rem;animation:marcaOk .6s cubic-bezier(.34,1.56,.64,1)}
.prod-stats .stat{position:relative;padding-top:1.9rem}
.prod-stats .stat i{position:absolute;top:.6rem;left:.8rem;font-style:normal;font-size:1rem;opacity:.9}
.prod-barra{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .8rem}
.prod-barra .bar{flex:1;margin:0;max-width:none;height:.4rem}
.prod-barra span{font-size:.76rem;color:var(--muted)}
.emo-fila{display:flex;align-items:flex-end;gap:.7rem;margin-bottom:.8rem}
.emo-prev{width:3.2rem;height:3.2rem;border-radius:.8rem;display:grid;place-items:center;font-size:1.7rem;background:var(--surface2);border:1px solid var(--line);flex:none}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.35rem;max-height:9.5rem;overflow-y:auto;padding:.2rem}
.emo{height:2.6rem;border-radius:.6rem;background:var(--surface2);border:1px solid var(--line);font-size:1.25rem;transition:transform .15s}
.emo:active{transform:scale(.9)}
.emo.on{background:linear-gradient(180deg,#A78BFA,#7C3AED);border-color:#A78BFA}
.slot-btns{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.btn-deuda{height:2rem;padding:0 .7rem;border-radius:.5rem;background:var(--surface3);border:1px solid rgba(167,139,250,.45);color:#C4B5FD;font-weight:700;font-size:.78rem}

/* ---------- ficha del turno fijo con más color ---------- */
.fijo-top{text-align:center;padding:1.3rem 1rem 1.1rem;border-radius:1rem;margin-bottom:.7rem;
  background:radial-gradient(120% 130% at 50% 0%,rgba(139,92,246,.28),transparent 62%),linear-gradient(200deg,rgba(34,211,238,.12),transparent 55%),#0F1626;
  border:1px solid rgba(167,139,250,.4)}
.fijo-top .big{color:#C4B5FD;margin:.5rem 0 .2rem}
.fijo-cuando{font-size:.86rem;color:#9FB0D6}
.fijo-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;margin-bottom:.9rem}
.fijo-datos div{position:relative;padding:.7rem .8rem .7rem 2.6rem;border-radius:.8rem;background:var(--surface);border:1px solid var(--line)}
.fijo-datos i{position:absolute;left:.7rem;top:.85rem;font-style:normal;font-size:1.1rem}
.fijo-datos small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fijo-datos b{display:block;font-size:.9rem;margin-top:.1rem}
.btn-ok{border-color:rgba(34,211,238,.45);color:#67E8F9;background:rgba(34,211,238,.08)}
.btn-wa{border-color:rgba(74,222,128,.4);color:#86EFAC;background:rgba(34,197,94,.08)}
.btn-warn{border-color:rgba(251,191,36,.45);color:#FCD34D;background:rgba(251,191,36,.08)}
.btn-violeta{border-color:rgba(167,139,250,.5);color:#C4B5FD;background:rgba(139,92,246,.1)}

/* =========================================================
   BOTONES: solo la acción principal va llena, el resto con su color suave
   ========================================================= */
.btn-primary{background:linear-gradient(180deg,#8B5CF6,#6D28D9);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(109,40,217,.25)}
.btn-ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.42);color:#86EFAC;box-shadow:none}
.btn-wa{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.42);color:#6EE7A0;box-shadow:none}
.btn-danger{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.42);color:#FB7185;box-shadow:none}
.btn-warn{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.42);color:#FCD34D;box-shadow:none}
.btn-cyan{background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.42);color:#67E8F9;box-shadow:none}
.btn-violeta{background:rgba(139,92,246,.1);border:1px solid rgba(167,139,250,.45);color:#C4B5FD;box-shadow:none}
.btn-ok svg,.btn-wa svg,.btn-danger svg,.btn-warn svg,.btn-cyan svg,.btn-violeta svg{color:inherit}
.btn-cobrar{background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.45);color:#86EFAC}
.qq-x b{color:#FB7185}
.qq-ok b{color:#4ADE80}
/* los botones sin color propio quedan igual de legibles */
.btn:not(.btn-primary):not(.btn-ok):not(.btn-wa):not(.btn-danger):not(.btn-warn):not(.btn-cyan):not(.btn-violeta):not(.btn-nuevo){
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--surface);border:1px solid var(--line);color:var(--text)}
/* botones de ícono destructivos, en rojo */
.icon-btn.icon-danger{color:#FB7185;border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.09)}
.icon-btn.icon-danger svg{color:inherit}
.btn-sumar{height:2rem;padding:0 .7rem;border-radius:.5rem;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.45);color:#67E8F9;font-weight:700;font-size:.78rem}
.cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr));gap:.45rem;max-height:20rem;overflow-y:auto;padding:.2rem}
.cons-it{position:relative;padding:.6rem .4rem;border-radius:.8rem;background:var(--surface2);border:1px solid var(--line);text-align:center;transition:transform .15s}
.cons-it:active{transform:scale(.94)}
.cons-it.on{border-color:rgba(167,139,250,.6);background:rgba(139,92,246,.14)}
.cons-it i{font-style:normal;font-size:1.4rem;display:block}
.cons-it b{display:block;font-size:.74rem;line-height:1.2;margin-top:.2rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.cons-it small{display:block;font-size:.7rem;color:var(--muted)}
.cons-n{position:absolute;top:-.4rem;right:-.4rem;min-width:1.3rem;height:1.3rem;border-radius:999px;background:linear-gradient(180deg,#A78BFA,#7C3AED);color:#fff;font-style:normal;font-size:.72rem;font-weight:800;display:grid;place-items:center}
/* en el panel de notificaciones los filtros se ven todos, sin arrastrar */
.pn-body .chips{flex-wrap:wrap;overflow:visible;margin:0 0 .7rem;padding:0}
.pn-body .chip{flex:none}
/* en pantallas de mouse, cualquier fila de chips se puede arrastrar */
@media (pointer:fine){ .chips{scrollbar-width:thin} .chips::-webkit-scrollbar{height:6px} .chips::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:6px} }
.arrastrando{cursor:grabbing;user-select:none}
.slot-cons{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.slot-cons span{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:.5rem;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:#67E8F9;font-size:.76rem;font-weight:700;cursor:pointer}
.slot-cons i{font-style:normal;opacity:.7}