/* ============================================================
   Padel Republic · App del Jugador · app.css
   Sistema de diseño móvil. Hereda tokens.css. Solo Chart.js + Lucide.
   ============================================================ */

/* ---------- Frame de móvil (desktop) ---------- */
html, body { height: 100%; }
body {
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  color: var(--ps-ink); margin: 0;
}
@media (min-width: 501px) {
  body { background: var(--ps-green-950); display: grid; place-items: center; min-height: 100vh; padding: 24px 0; }
  .phone {
    width: 390px; height: 844px; max-height: calc(100vh - 48px);
    border-radius: 48px; overflow: hidden; position: relative;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,.6), 0 0 0 11px #1b1b1e, 0 0 0 13px #2b2b30;
    background: var(--ps-bg);
  }
  .phone::before { /* notch */
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 150px; height: 30px; background: #000; border-radius: 0 0 20px 20px; z-index: 60;
  }
  .phone-logo { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; opacity: .72; }
  .phone-logo img { height: 22px; width: auto; display: block; }
}
@media (max-width: 500px) {
  body { background: var(--ps-bg); }
  .phone { width: 100%; height: 100vh; height: 100dvh; position: relative; overflow: hidden; }
  .phone::before { display: none; }
  .phone-logo { display: none; }
}
.phone { display: flex; flex-direction: column; }

/* ---------- Status bar ---------- */
.statusbar { flex-shrink: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; z-index: 40; }
.statusbar__icons { display: flex; align-items: center; gap: 6px; }
.statusbar__icons svg { width: 16px; height: 16px; }
.statusbar--dark { background: var(--ps-green-950); color: #fff; }
.statusbar--light { background: var(--ps-bg); color: var(--ps-ink); }
.statusbar--white { background: #fff; color: var(--ps-ink); }

/* ---------- Screen (contenido scroll) ---------- */
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; animation: screenIn .22s ease; }
.screen::-webkit-scrollbar { display: none; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen__pad { padding: 20px; }
.screen__pad--flush { padding: 0; }
.screen--hasaction { padding-bottom: 96px; }
.screen--hastabbar { padding-bottom: 8px; }

/* ---------- Headers ---------- */
.imhead { background: var(--ps-green-950); color: #fff; padding: 8px 20px 30px; border-radius: 0 0 30px 30px; position: relative; }
.imhead__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.imhead__hi { font-family: var(--font-display, 'Bricolage Grotesque'); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.imhead__sub { color: rgba(255,255,255,.6); font-size: 14px; margin-top: 2px; }
.imhead h1 { color: #fff; }
.imhead .muted, .imhead small { color: rgba(255,255,255,.62); }
.imicon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; position: relative; border: 0; cursor: pointer; }
.imicon svg { width: 20px; height: 20px; }
.imicon__badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ps-lime-400); color: var(--ps-green-950); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--ps-green-950); }

.pghead { padding: 14px 20px 6px; display: flex; align-items: center; gap: 12px; }
.pghead h1 { font-family: var(--font-display, 'Bricolage Grotesque'); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pgback { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--ps-line); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: var(--ps-ink); }
.pgback svg { width: 19px; height: 19px; }
.pghead--dark { background: var(--ps-green-950); }
.pghead--dark h1 { color: #fff; }
.pghead--dark .pgback { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }

/* ---------- Cards ---------- */
.mcard { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px; }
.mcard--pad0 { padding: 0; overflow: hidden; }
.mcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mcard__head h2, .mcard__head h3 { font-family: var(--font-display, 'Bricolage Grotesque'); font-size: 17px; font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.section-title { font-family: var(--font-display, 'Bricolage Grotesque'); font-size: 18px; font-weight: 700; margin: 4px 2px 10px; letter-spacing: -.01em; }
.link-more { font-size: 14px; color: var(--ps-green-700); font-weight: 600; }

/* ---------- Cifra héroe / score ---------- */
.hero-num { font-family: var(--font-display, 'Bricolage Grotesque'); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.delta { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.delta--up { color: #199a5b; }
.delta--down { color: var(--ps-danger); }
.score-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono, monospace); font-weight: 600; font-size: 14px; background: var(--ps-green-950); color: var(--ps-lime-300); padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); }
.score-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ps-lime-400); box-shadow: inset -1px -1px 0 rgba(0,0,0,.2); }
.score-chip--lg { font-size: 16px; padding: 5px 12px 5px 9px; }

/* ---------- Badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(16,32,28,.06); color: var(--ps-ink-soft); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip--ok { background: rgba(35,162,109,.14); color: var(--ps-ok); }
.chip--warn { background: rgba(233,161,59,.16); color: #b9781f; }
.chip--danger { background: rgba(225,77,69,.12); color: var(--ps-danger); }
.chip--lime { background: var(--ps-lime-400); color: var(--ps-green-950); }
.chip--dark { background: var(--ps-green-950); color: #fff; }
.badge-lvl { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); }
.badge-lvl--inic { background: rgba(142,205,187,.22); color: #3f7d6c; }
.badge-lvl--inter { background: rgba(79,176,140,.18); color: #2f7d5f; }
.badge-lvl--avanz { background: rgba(46,125,95,.16); color: #245e46; }
.badge-lvl--comp { background: var(--ps-green-950); color: var(--ps-lime-300); }

/* ---------- Anillo de progreso ---------- */
.ring { --p: 0; --size: 52px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ps-lime-400) calc(var(--p)*1%), var(--ps-line) 0); flex-shrink: 0; }
.ring__in { width: calc(var(--size) - 9px); height: calc(var(--size) - 9px); border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; font-family: var(--font-display,'Bricolage Grotesque'); }
.ring--onDark .ring__in { background: var(--ps-green-950); color: #fff; }
.bar { height: 8px; border-radius: 4px; background: var(--ps-line); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 4px; background: var(--ps-green-700); }
.bar--lime .bar__fill { background: var(--ps-lime-400); }
.bar--onDark { background: rgba(255,255,255,.18); }

/* ---------- Streak flame ---------- */
.streak { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 15px; color: var(--ps-ink); }
.streak svg { width: 17px; height: 17px; color: var(--ps-lime-400); fill: var(--ps-lime-400); }
.streak--onDark { color: #fff; }

/* ---------- Avatares ---------- */
.av { border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex-shrink: 0; font-size: 15px; }
.av-stack { display: flex; }
.av-stack .av { margin-left: -9px; border: 2px solid #fff; }
.av-stack .av:first-child { margin-left: 0; }

/* ---------- Botones ---------- */
.btn-m { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 12px 18px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .14s; line-height: 1; }
.btn-m svg { width: 18px; height: 18px; }
.btn-m:active { transform: scale(.97); }
.btn-m--primary { background: var(--ps-lime-400); color: var(--ps-green-950); }
.btn-m--dark { background: var(--ps-green-950); color: #fff; }
.btn-m--ghost { background: rgba(16,32,28,.05); color: var(--ps-ink); }
.btn-m--outline { background: #fff; border-color: var(--ps-line); color: var(--ps-ink); }
.btn-m--glass { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-m--block { width: 100%; height: 52px; font-size: 16px; }
.btn-m--sm { padding: 8px 14px; font-size: 14.5px; }

/* Barra de acción anclada abajo */
.action-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--ps-bg) 34%); z-index: 30; }
.action-bar--tab { bottom: 84px; }

/* ---------- Carrusel ---------- */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 20px 6px; margin: 0 -20px; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex-shrink: 0; }

/* ---------- Listas / filas ---------- */
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ps-line); }
.row:last-child { border-bottom: 0; }
.row__grow { flex: 1; min-width: 0; }
.row b { font-weight: 600; font-size: 15.5px; }
.row small { color: var(--ps-ink-soft); font-size: 13.5px; display: block; }
.day-badge { width: 46px; height: 52px; border-radius: 12px; background: var(--ps-bg); display: grid; place-items: center; text-align: center; flex-shrink: 0; }
.day-badge b { font-family: var(--font-display,'Bricolage Grotesque'); font-size: 19px; line-height: 1; }
.day-badge small { font-size: 11.5px; text-transform: uppercase; color: var(--ps-ink-soft); }

/* ---------- Tab bar ---------- */
.tabbar { flex-shrink: 0; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--ps-line); display: flex; align-items: flex-start; justify-content: space-around; position: relative; z-index: 50; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 0 0; color: var(--ps-ink-soft); font-size: 11.5px; font-weight: 600; background: none; border: 0; cursor: pointer; text-decoration: none; }
.tab svg { width: 23px; height: 23px; }
.tab.is-active { color: var(--ps-green-950); }
.tab.is-active .tab__dot { opacity: 1; }
.tab__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ps-lime-400); opacity: 0; margin-top: 1px; }
.tab--fab { flex: 0 0 auto; position: relative; }
.fab { width: 58px; height: 58px; border-radius: 50%; background: var(--ps-lime-400); color: var(--ps-green-950); display: grid; place-items: center; margin-top: -20px; box-shadow: 0 8px 22px -4px rgba(221,242,71,.9); border: 4px solid #fff; cursor: pointer; }
.fab svg { width: 26px; height: 26px; }

/* ---------- Bottom sheet ---------- */
.scrim { position: absolute; inset: 0; background: rgba(6,20,16,.5); opacity: 0; visibility: hidden; transition: opacity .26s, visibility 0s linear .26s; z-index: 70; }
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity .26s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; z-index: 75; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.25,1); max-height: 92%; display: flex; flex-direction: column; box-shadow: 0 -12px 40px rgba(0,0,0,.18); }
.sheet.is-open { transform: none; }
.sheet--mid { max-height: 62%; }
.sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ps-line); margin: 10px auto 4px; flex-shrink: 0; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 12px; flex-shrink: 0; }
.sheet__head h3 { font-family: var(--font-display,'Bricolage Grotesque'); font-size: 19px; font-weight: 700; }
.sheet__body { padding: 0 20px 20px; overflow-y: auto; }
.sheet__foot { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ps-line); flex-shrink: 0; }
.sheet-x { width: 32px; height: 32px; border-radius: 50%; background: rgba(16,32,28,.06); border: 0; display: grid; place-items: center; cursor: pointer; }
.sheet-x svg { width: 17px; height: 17px; }

/* ---------- Push banner ---------- */
.push { position: absolute; top: 8px; left: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 65; transform: translateY(-140%); transition: transform .4s cubic-bezier(.2,.9,.25,1); cursor: pointer; }
.push.is-in { transform: none; }
.push__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--ps-green-950); color: var(--ps-lime-300); display: grid; place-items: center; flex-shrink: 0; }
.push__ic svg { width: 19px; height: 19px; }
.push b { font-size: 14.5px; display: block; }
.push small { font-size: 13px; color: var(--ps-ink-soft); }

/* ---------- Toast ---------- */
.toast-host { position: absolute; left: 16px; right: 16px; bottom: 96px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-m { background: var(--ps-green-950); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-pop); max-width: 100%; text-align: center; display: flex; align-items: center; gap: 8px; animation: toastUp .3s ease; }
.toast-m svg { width: 17px; height: 17px; color: var(--ps-lime-400); flex-shrink: 0; }
.toast-m.is-out { animation: toastDown .25s forwards; }
@keyframes toastUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastDown { to { opacity: 0; transform: translateY(14px); } }

/* ---------- Skeleton / pull-to-refresh ---------- */
.sk { background: linear-gradient(90deg,#e9ede9 25%,#f2f5f2 37%,#e9ede9 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite; border-radius: 14px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.ptr { display: grid; place-items: center; height: 0; overflow: hidden; transition: height .2s; }
.ptr.is-on { height: 44px; }
.ptr .spin { width: 20px; height: 20px; border: 2px solid var(--ps-line); border-top-color: var(--ps-green-700); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Radar / tarjeta bancaria ---------- */
.radar-wrap { position: relative; width: 240px; max-width: 100%; margin: 0 auto; }
.bankcard { background: linear-gradient(135deg, var(--ps-green-900), var(--ps-green-950)); color: #fff; border-radius: 20px; padding: 20px; position: relative; overflow: hidden; }
.bankcard::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(221,242,71,.18), transparent 60%); top: -40px; right: -30px; }

/* ---------- Confeti ---------- */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 80; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 12px; opacity: .9; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(900px) rotate(540deg); opacity: 0; } }

/* Utilidades */
.flex { display: flex; } .between { justify-content: space-between; } .center-x { justify-content: center; }
.items-center { align-items: center; } .col { flex-direction: column; }
.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}
.grow { flex: 1; min-width: 0; } .muted { color: var(--ps-ink-soft); } .mono { font-family: var(--font-mono, monospace); }
.tcenter { text-align: center; } .tright { text-align: right; } .nowrap { white-space: nowrap; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.hidden { display: none !important; }
.pill-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.pill-scroll::-webkit-scrollbar { display: none; }
.divider { height: 1px; background: var(--ps-line); margin: 14px 0; border: 0; }
.tabs-m { display: flex; gap: 4px; background: var(--ps-bg); border-radius: var(--radius-pill); padding: 4px; }
.tabs-m button { flex: 1; border: 0; background: none; padding: 9px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 600; color: var(--ps-ink-soft); cursor: pointer; }
.tabs-m button.is-active { background: #fff; color: var(--ps-green-950); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tab-panel-m { display: none; } .tab-panel-m.is-active { display: block; animation: screenIn .2s; }