:root{
  --gold:#F5B301; --gold-d:#d99e00; --gold-soft:#fff4d6;
  --ink:#141414; --ink-2:#2a2a2a; --bg:#f3f3f1; --card:#ffffff;
  --muted:#7b7f87; --line:#e7e7e3; --green:#16a34a; --green-bg:#e9f7ef;
  --red:#e0392b; --red-bg:#fdeceb; --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.45}
h1,h2,h3,h4,.display{font-family:'Montserrat',sans-serif}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%}
.hidden{display:none!important}

/* ---------- layout ---------- */
.wrap{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}
.pad{padding:20px}

/* ---------- top demo badge ---------- */
#modeBadge{position:fixed;top:0;left:0;right:0;z-index:120;background:#141414;color:#fff;text-align:center;
  font-size:12.5px;padding:7px 12px;letter-spacing:.2px}
#modeBadge b{color:var(--gold)}
.has-badge{padding-top:34px}
body.has-badge .overlay,body.has-badge #adminApp{top:44px}

/* ---------- home / hero ---------- */
.home-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 4px}
.logo-row{display:flex;align-items:center;gap:10px}
.brand-txt{line-height:1}
.brand-txt .b1{font-family:'Montserrat';font-weight:900;font-size:20px;letter-spacing:2px}
.brand-txt .b2{font-size:9.5px;letter-spacing:4px;color:var(--muted);font-weight:700}
.icon-btn{background:#fff;border:1px solid var(--line);width:40px;height:40px;border-radius:12px;display:grid;place-items:center}

.hero{margin:14px 16px 0;border-radius:26px;overflow:hidden;position:relative;color:#fff;min-height:360px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.92) 100%),
  radial-gradient(120% 90% at 30% 10%,#3a3a3a 0%,#1a1a1a 60%,#000 100%);}
.hero .grain{position:absolute;inset:0;opacity:.22;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px);}
.hero-inner{position:relative;padding:26px 24px 26px}
.hero h1{font-weight:900;font-size:34px;line-height:1.02;margin:0 0 4px;letter-spacing:-.5px;text-transform:uppercase}
.hero h1 .y{color:var(--gold)}
.hero p{margin:8px 0 0;color:#d9d9d9;font-size:13.5px;max-width:88%}

.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;
  background:var(--gold);color:#141414;border:none;border-radius:16px;padding:17px;font-weight:800;font-size:16px;
  box-shadow:0 12px 26px rgba(245,179,1,.4);transition:transform .08s ease}
.cta:active{transform:scale(.98)}
.cta .arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#141414;color:var(--gold)}

.socials{display:flex;justify-content:center;gap:16px;margin:20px 0 10px}
.socials a{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:#141414}
.phone{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;margin:2px 0 4px}
.phone .p-ic{color:var(--gold)}

.info-row{display:flex;gap:10px;padding:6px 16px 26px}
.info-card{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center}
.info-card .ic{color:var(--gold);margin-bottom:6px}
.info-card .t{font-size:12px;font-weight:700}
.info-card .s{font-size:10.5px;color:var(--muted);margin-top:2px}

.admin-link{display:block;text-align:center;color:var(--muted);font-size:12px;padding:6px 0 26px;text-decoration:none}
.admin-link b{color:var(--ink)}

/* ---------- overlays / screens ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:var(--bg);overflow-y:auto;max-width:480px;margin:0 auto}
.sheet-head{position:sticky;top:0;z-index:5;background:rgba(243,243,241,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.back{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.sheet-head .h-title{font-weight:800;font-size:17px}
.sheet-head .h-sub{font-size:12px;color:var(--muted);margin-top:1px}

/* activity cards */
.act-card{position:relative;border-radius:20px;overflow:hidden;color:#fff;min-height:150px;margin-bottom:16px;
  display:flex;align-items:flex-end;border:none;width:100%;text-align:left;padding:0}
.act-card .bg{position:absolute;inset:0}
.act-card.spin .bg{background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.25)),radial-gradient(120% 120% at 80% 20%,#4a4a4a,#111)}
.act-card.box .bg{background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.3)),radial-gradient(120% 120% at 80% 20%,#3a3a3a,#0a0a0a)}
.act-card .c{position:relative;padding:20px}
.act-card h3{margin:0;font-size:26px;font-weight:900;letter-spacing:.5px}
.act-card p{margin:4px 0 0;font-size:12px;color:#e2e2e2;max-width:75%}
.act-card .go{position:absolute;right:18px;bottom:18px;width:40px;height:40px;border-radius:50%;background:var(--gold);
  color:#141414;display:grid;place-items:center}

/* day chips */
.daybar{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.daybar::-webkit-scrollbar{display:none}
.daychip{flex:0 0 auto;min-width:58px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 6px;text-align:center}
.daychip .d{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.daychip .n{font-size:18px;font-weight:800;margin-top:1px}
.daychip.on{background:var(--gold);border-color:var(--gold)}
.daychip.on .d{color:#5a4300}
.daychip.off{opacity:.4}

/* slot list */
.slot{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:15px 16px;margin-bottom:11px}
.slot .time{font-size:19px;font-weight:800}
.slot .meta{font-size:12px;margin-top:2px}
.slot .meta.ok{color:var(--green)}
.slot .meta.full{color:var(--red)}
.slot .meta.closed{color:var(--muted)}
.slot .pick{background:var(--gold);border:none;color:#141414;font-weight:800;border-radius:11px;padding:10px 16px;font-size:13px}
.slot.disabled{opacity:.55}
.slot.disabled .pick{background:#eee;color:#aaa}
.badge-price{display:inline-block;background:var(--gold-soft);color:#7a5b00;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px}

/* bike map */
.map-legend{display:flex;gap:14px;justify-content:center;margin:6px 0 16px;font-size:12px;color:var(--muted)}
.map-legend span{display:flex;align-items:center;gap:6px}
.dot{width:14px;height:14px;border-radius:5px;display:inline-block}
.dot.free{background:#e6e6e2;border:1px solid #d3d3cf}
.dot.taken{background:var(--red)}
.dot.mine{background:var(--gold)}
.screen-bar{background:linear-gradient(180deg,#d9d9d5,#c7c7c2);color:#555;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:3px;border-radius:10px;padding:8px;margin:0 24px 20px}
.bikes{display:grid;gap:12px;justify-content:center;margin:0 auto 8px}
.bike{width:100%;aspect-ratio:1;border-radius:14px;border:1px solid #dcdcd8;background:#eeeeea;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8a8a86;position:relative}
.bike .num{font-size:13px;font-weight:800}
.bike.free{background:#f5f5f1;color:#3a3a3a;cursor:pointer}
.bike.free:active{transform:scale(.95)}
.bike.taken{background:var(--red-bg);border-color:#f3c9c5;color:var(--red)}
.bike.mine{background:var(--gold);border-color:var(--gold-d);color:#3a2c00;box-shadow:0 6px 16px rgba(245,179,1,.5)}
.entrada{text-align:center;font-size:11px;font-weight:800;letter-spacing:3px;color:#a7a7a2;margin:14px 0 4px}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  font-size:15px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.summary{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.summary .row .k{color:var(--muted)}
.summary .row .v{font-weight:700}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:14px;
  padding:16px;font-weight:800;font-size:15.5px;background:var(--gold);color:#141414;box-shadow:0 10px 22px rgba(245,179,1,.35)}
.btn:disabled{opacity:.5;box-shadow:none}
.btn.dark{background:#141414;color:#fff;box-shadow:none}
.btn.ghost{background:#fff;color:#141414;border:1px solid var(--line);box-shadow:none}
.btn.wa{background:#25D366;color:#fff;box-shadow:0 10px 22px rgba(37,211,102,.35)}
.btn.sm{padding:11px 14px;font-size:13px;border-radius:11px;width:auto}
.sticky-cta{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 26%);padding:16px 0 20px}

/* success */
.success{text-align:center;padding:40px 10px 10px}
.success .check{width:88px;height:88px;border-radius:50%;background:var(--green-bg);color:var(--green);display:grid;
  place-items:center;margin:0 auto 18px}
.success h2{margin:0 0 6px;font-size:24px;font-weight:900}
.success p{color:var(--muted);margin:0 0 20px}

/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:300;background:#141414;color:#fff;
  padding:13px 18px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
#toast.err{background:#7a1610}

/* full message (cupo lleno) */
.msg-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center;margin:20px 0}
.msg-card .em{font-size:40px}
.msg-card h3{margin:12px 0 4px;font-size:20px}
.msg-card p{color:var(--muted);margin:0 0 4px;font-size:14px}

/* ============ ADMIN ============ */
#adminLogin{max-width:420px}
.login-box{padding:34px 24px}
.login-logo{text-align:center;margin:26px 0 22px}
#adminApp{position:fixed;inset:0;z-index:110;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;max-width:100%;margin:0}
.admin-top{background:#141414;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.admin-top .who{font-size:12px;color:#bdbdbd}
.admin-top .who b{color:var(--gold)}
.admin-tabs{display:flex;gap:4px;overflow-x:auto;background:#1c1c1c;padding:0 8px;scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs button{background:none;border:none;color:#b9b9b9;padding:13px 14px;font-size:13.5px;font-weight:700;
  border-bottom:3px solid transparent;white-space:nowrap}
.admin-tabs button.on{color:#fff;border-color:var(--gold)}
.admin-body{flex:1;overflow-y:auto;padding:18px;max-width:1100px;width:100%;margin:0 auto}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:600}
.kpi .v{font-size:26px;font-weight:900;margin-top:4px}
.kpi.gold{background:#141414;color:#fff}
.kpi.gold .v{color:var(--gold)}
.kpi.good .v{color:var(--green)}
.kpi.bad .v{color:var(--red)}

.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.panel h3{margin:0 0 12px;font-size:15px}
.panel h4{margin:16px 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:14px}
.toolbar .field{margin:0}
.toolbar .field label{font-size:11px}
.toolbar input,.toolbar select{padding:10px 12px;font-size:14px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.tag.reservado{background:#eef2ff;color:#3b53c4}
.tag.asistio{background:var(--green-bg);color:var(--green)}
.tag.no_asistio{background:var(--red-bg);color:var(--red)}
.tag.cancelado{background:#f1f1ef;color:#8a8a86}
.tag.spin{background:#e8f0fe;color:#1e5bb8}
.tag.box{background:#fdefe4;color:#c05a17}
.tbl-wrap{overflow-x:auto}
.mini{padding:6px 9px;font-size:12px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:700}
.mini.g{background:var(--green);color:#fff;border-color:var(--green)}
.mini.r{background:#fff;color:var(--red);border-color:#f0c4c0}
.mini.k{background:var(--gold);border-color:var(--gold);color:#141414}
.chip-day{display:flex;gap:8px;flex-wrap:wrap}
.timechip{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);border:1px solid #ecd9a0;color:#6b5100;
  border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700}
.timechip button{border:none;background:none;color:#b06a00;font-size:15px;line-height:1;padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-box{position:relative;height:240px}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14px}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px}
@media(min-width:520px){ .info-row .info-card .s{font-size:11px} }

/* ---------- logo desde imagen (logo.png) con respaldo SVG ---------- */
.logo-pill{background:#fff;padding:6px 10px;border-radius:12px;display:inline-flex;align-items:center}
.logo-fb{align-items:center;gap:8px}
.logo-img{width:auto;display:block}