/* Estilos de Peloteo, tomados del prototipo aprobado (referencia/peloteo.html). */
:root{
  --bg:#EDF2EC; --surface:#FFFFFF; --ink:#14251D; --muted:#5A6B61; --line:#C9D5CB;
  --court:#1E6B4F; --court-ink:#FFFFFF; --ball:#D7E845; --ball-ink:#1B2905; --clay:#A8492A;
  --soft:#DDE9E0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1814; --surface:#16241E; --ink:#E8F0EA; --muted:#94A79C; --line:#2A3D33;
    --court:#2C8A66; --court-ink:#FFFFFF; --ball:#D7E845; --ball-ink:#1B2905; --clay:#E48E6C;
    --soft:#1D3027;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1814; --surface:#16241E; --ink:#E8F0EA; --muted:#94A79C; --line:#2A3D33;
  --court:#2C8A66; --court-ink:#FFFFFF; --ball:#D7E845; --ball-ink:#1B2905; --clay:#E48E6C;
  --soft:#1D3027;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;line-height:1.45;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--court)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ball);outline-offset:2px}
a{color:var(--court)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) a{color:#7FD3B0}}
:root[data-theme="dark"] a{color:#7FD3B0}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--court);color:var(--court-ink);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1rem}
.bar button{background:none;border:0;color:inherit;padding:.4rem .5rem;border-radius:8px;font-size:.9rem}
.brand{font-stretch:125%;font-weight:800;font-size:1.15rem !important;letter-spacing:-.01em;padding-left:0 !important}
.bar nav{display:flex;gap:.1rem}
.bar nav button[aria-current="true"]{background:rgba(255,255,255,.18)}
.bar nav b{background:var(--ball);color:var(--ball-ink);border-radius:99px;padding:0 .4rem;font-size:.75rem;margin-left:.2rem}

main{max-width:36rem;margin:0 auto;padding:1rem 1rem 2rem}
.hero{position:relative;background:var(--court);color:var(--court-ink);border-radius:14px;padding:2rem 1.4rem 1.6rem;overflow:hidden;margin-bottom:1.5rem}
.hero::before{content:"";position:absolute;inset:.6rem;border:2px solid rgba(255,255,255,.3);border-radius:3px;pointer-events:none}
.hero::after{content:"";position:absolute;top:.6rem;bottom:.6rem;right:28%;border-left:2px solid rgba(255,255,255,.3);pointer-events:none}
.hero h1{position:relative;z-index:1;margin:0 0 .5rem;font-stretch:125%;font-weight:800;font-size:clamp(2.6rem,13vw,4rem);line-height:.95;letter-spacing:-.03em}
.hero p{position:relative;z-index:1;margin:0;max-width:22rem;font-size:1rem}

h1.h{font-stretch:125%;font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin:.3rem 0 .8rem;line-height:1.1}
h2{font-size:1.05rem;font-weight:700;margin:1.4rem 0 .6rem}
h3{font-size:.95rem;font-weight:700;margin:1.2rem 0 .5rem}
p{margin:.4rem 0}
.muted{color:var(--muted)} .small{font-size:.875rem}
.id{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

.crumbs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0 0 .8rem;font-size:.9rem}
.crumbs button{background:var(--soft);border:0;border-radius:99px;padding:.3rem .7rem}
.crumbs span{color:var(--muted)}

.list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.row .name{display:block;font-weight:700;font-size:1.05rem}
.row .meta{display:block;color:var(--muted);font-size:.875rem}
.row .go{font-weight:700;color:var(--court);white-space:nowrap}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .row .go{color:#7FD3B0}}
:root[data-theme="dark"] .row .go{color:#7FD3B0}
.tile .name{font-stretch:125%;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.6rem 0}
.card h2,.card h3{margin-top:0}

.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:99px;padding:.75rem 1.3rem;
  background:var(--ball);color:var(--ball-ink);font-weight:700;text-decoration:none}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.danger{background:transparent;color:var(--clay);border:1.5px solid var(--clay)}
.btn.sm{padding:.45rem .9rem;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* calendario */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 .6rem}
.cal-head strong{font-stretch:125%;font-weight:800;font-size:1.25rem;text-transform:capitalize}
.cal-head button{background:var(--surface);border:1px solid var(--line);border-radius:10px;width:2.6rem;height:2.6rem;font-size:1.1rem}
.cal-head button:disabled{opacity:.35}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.cal .dow{text-align:center;font-size:.75rem;color:var(--muted);padding:.2rem 0}
.cal button{position:relative;aspect-ratio:1;border:1px solid var(--line);background:var(--surface);border-radius:10px;
  font-weight:700;font-variant-numeric:tabular-nums;padding:0}
.cal button:disabled{background:transparent;border-color:transparent;color:var(--muted);opacity:.45;font-weight:400}
.cal button.today{border-color:var(--court);border-width:2px}
.cal button.sel{background:var(--court);color:var(--court-ink);border-color:var(--court)}
.cal button.has::after{content:"";position:absolute;left:50%;bottom:14%;width:.42rem;height:.42rem;margin-left:-.21rem;border-radius:50%;background:var(--ball);box-shadow:0 0 0 1px var(--ball-ink)}
.legend{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.legend i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ball);box-shadow:0 0 0 1px var(--ball-ink);display:inline-block}

.slots{list-style:none;margin:0;padding:0}
.slot{display:grid;grid-template-columns:3.6rem 1fr;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line);align-items:start}
.slot time{font-stretch:112%;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;padding-top:.55rem}
.opts{display:grid;gap:.4rem}
.opt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:left;
  border-radius:10px;padding:.6rem .8rem;border:1px solid var(--line);background:var(--surface);font-size:.92rem}
.opt b{white-space:nowrap;font-size:.85rem}
.opt.join{background:var(--ball);color:var(--ball-ink);border-color:transparent}
.opt.full{background:transparent;color:var(--muted);border-style:dashed}
.opt.mine{background:var(--soft);border-color:transparent}

/* formularios */
label.f{display:block;margin:.9rem 0 0;font-weight:700;font-size:.9rem}
label.f small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=time],input[type=url],select{
  display:block;width:100%;max-width:100%;margin-top:.3rem;padding:.7rem .8rem;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);min-height:2.9rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.levels{display:grid;gap:.4rem;margin-top:.4rem}
.lvl{display:grid;grid-template-columns:2.6rem 1fr;align-items:center;gap:.6rem;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:.55rem .8rem;position:relative}
.lvl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.lvl .n{font-stretch:125%;font-weight:800;font-size:1.7rem;line-height:1;text-align:center}
.lvl:has(input:checked){background:var(--court);color:var(--court-ink);border-color:var(--court)}
.lvl:has(input:focus-visible){outline:3px solid var(--ball);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:.45rem .9rem;font-weight:700}
.chip[aria-pressed="true"]{background:var(--court);color:var(--court-ink);border-color:var(--court)}
.days{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.days label{position:relative;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:.5rem .7rem;font-weight:700;font-size:.9rem}
.days input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.days label:has(input:checked){background:var(--court);color:var(--court-ink);border-color:var(--court)}
.err{color:var(--clay);font-weight:700;margin-top:.8rem}

.bubble{background:#DCF3C9;color:#0F2414;border-radius:4px 14px 14px 14px;padding:.7rem .9rem;font-size:.92rem;max-width:22rem;margin:.5rem 0}
.tag{display:inline-block;border-radius:99px;padding:.15rem .6rem;font-size:.78rem;font-weight:700;background:var(--soft)}
.tag.ok{background:var(--ball);color:var(--ball-ink)}
.tag.off{background:transparent;border:1px solid var(--clay);color:var(--clay)}
.tabs{display:flex;gap:.35rem;overflow-x:auto;margin:0 0 1rem;padding-bottom:.2rem}
.tabs button{white-space:nowrap;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:.45rem .9rem;font-weight:700;font-size:.9rem}
.tabs button[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:.5rem 0}
dl.kv dt{color:var(--muted);font-size:.875rem} dl.kv dd{margin:0;font-weight:600}
footer{max-width:36rem;margin:0 auto;padding:0 1rem 2rem;color:var(--muted);font-size:.8rem}
footer button{background:none;border:0;padding:0;text-decoration:underline;color:inherit;font-size:inherit}
#toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:.7rem 1.1rem;border-radius:99px;font-size:.9rem;max-width:90vw;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
@media (prefers-reduced-motion: reduce){#toast{transition:none}}

/* Agregados para la configuración */
textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);min-height:5rem;font:inherit;color:inherit}
.checks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.checks label{position:relative;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:.55rem .8rem;font-weight:700;font-size:.9rem}
.checks input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.checks label:has(input:checked){background:var(--court);color:var(--court-ink);border-color:var(--court)}
.checks label:has(input:focus-visible){outline:3px solid var(--ball);outline-offset:2px}
.warn{border-color:var(--clay)}
.warn ul{margin:.4rem 0 0;padding-left:1.1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* El título del inicio no cabía en teléfonos de 320 a 400 px de ancho. */
.hero h1{font-size:clamp(2.2rem,10.5vw,4rem)}
.opt small{font-weight:400;opacity:.85}