/* ═══════════════════════════════════════════
   RKM Edubba Padel — Shared Stylesheet
   ═══════════════════════════════════════════ */
:root {
  --blue:#16B8A6; --blue-d:#0E9485; --blue-dp:#0B6F60;
  --pink:#FF6B5B; --pink-l:#FF8F82;
  --navy:#0F2A3F; --navy-l:#163a55;
  --white:#F8F9FC; --off:#EEF4F8; --mid:#5b7283;
  --text:#0F2A3F; --bg:#F4F8FA; --card:#FFFFFF; --border:#e3edf2;
  --sb-text:#9FC9D6; --sb-text-active:#F8F9FC; --sb-accent:var(--blue);
  --sw:240px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }
input, select, textarea, button { font-family: inherit; }

/* ── SIDEBAR ── */
.sidebar { width:var(--sw); height:100vh; max-height:100vh; background:var(--navy); display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; transition:transform .3s; overflow-y:auto; }
.sb-logo { padding:1.2rem 1rem .85rem; border-bottom:1px solid rgba(255,255,255,.07); }
.sb-logo-inner { display:flex; align-items:center; gap:9px; }
.sb-brand h1 { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; color:var(--white); line-height:1; }
.sb-brand p { font-size:9px; letter-spacing:2px; color:var(--sb-accent,var(--blue)); text-transform:uppercase; margin-top:1px; }
.sb-nav { flex:1; padding:.5rem 0; }
.sb-cat { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.22); padding:.55rem 1rem .18rem; margin-top:.35rem; }
.sb-item { display:flex; align-items:center; gap:9px; padding:.6rem 1rem; font-size:12.5px; color:var(--sb-text,rgba(255,255,255,.5)); cursor:pointer; border-left:2px solid transparent; transition:.15s; text-decoration:none; }
.sb-item:hover { color:var(--sb-text-active,var(--white)); background:rgba(255,255,255,.04); }
.sb-item.active { color:var(--sb-text-active,var(--white)); background:rgba(255,255,255,.07); border-left-color:var(--sb-accent,var(--blue)); }
.sb-item i { font-size:16px; flex-shrink:0; }
.sb-footer { padding:.85rem 1rem; border-top:1px solid rgba(255,255,255,.07); font-size:10px; color:rgba(255,255,255,.22); line-height:1.6; }

/* ── MAIN ── */
.main { margin-left:var(--sw); flex:1; display:flex; flex-direction:column; }
.topbar { background:var(--card); border-bottom:1px solid var(--border); padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar h2 { font-size:14.5px; font-weight:500; color:var(--navy); }
.topbar-right { display:flex; align-items:center; gap:9px; flex-shrink:0; overflow:visible; }
#topbar-logout { flex-shrink:0 !important; display:flex !important; }
.badge { background:rgba(22,184,166,.12); color:var(--blue-dp); font-size:10px; padding:3px 9px; border-radius:20px; letter-spacing:.5px; }
.hamburger { display:none; background:none; border:none; cursor:pointer; font-size:21px; color:var(--navy); }

/* ── PAGE ── */
.page { padding:1.6rem; animation:fu .2s ease; }
@keyframes fu { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.ph { margin-bottom:1.4rem; }
.ph h2 { font-family:'Bebas Neue',sans-serif; font-size:27px; letter-spacing:3px; color:var(--navy); }
.ph p { font-size:11px; color:var(--mid); letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.ph .abar { width:34px; height:3px; background:var(--pink); border-radius:2px; margin-top:6px; }

/* ── CARDS ── */
.card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:1rem 1.35rem; margin-bottom:.85rem; }
.ct { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--mid); margin-bottom:10px; }

/* ── GRIDS ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem; }
.g4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.7rem; }

/* ── METRICS ── */
.metric { background:var(--off); border-radius:10px; padding:.8rem 1rem; text-align:center; }
.metric .num { font-family:'Bebas Neue',sans-serif; font-size:25px; color:var(--navy); line-height:1; letter-spacing:1px; }
.metric .lbl { font-size:10px; color:var(--mid); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; line-height:1.3; }
.metric.pos .num { color:#1a8a5a; } .metric.neg .num { color:#c0392b; }
.metric.warn .num { color:#b07000; } .metric.blue .num { color:var(--blue-dp); } .metric.pink .num { color:var(--pink); }

/* ── INPUTS ── */
label.fl { display:block; font-size:11px; color:var(--mid); margin-bottom:3px; margin-top:8px; letter-spacing:.3px; }
label.fl:first-child { margin-top:0; }
input[type=number], input[type=text], input[type=date], select, textarea {
  width:100%; padding:7px 9px; font-size:12.5px; background:var(--off);
  border:1px solid var(--border); border-radius:7px; color:var(--text); transition:.15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); background:#fff; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--pink); color:#fff; padding:8px 18px; border-radius:7px; font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:14px; cursor:pointer; border:none; transition:.2s; }
.btn-primary:hover { background:var(--pink-l); }
.btn-sec { display:inline-flex; align-items:center; gap:5px; background:var(--off); color:var(--navy-l); padding:7px 13px; border-radius:7px; font-size:12.5px; cursor:pointer; border:1px solid var(--border); transition:.2s; }
.btn-sec:hover { background:var(--border); }
.btn-navy { display:inline-flex; align-items:center; gap:5px; background:var(--navy); color:var(--white); padding:7px 13px; border-radius:7px; font-size:12.5px; cursor:pointer; border:none; transition:.2s; }
.btn-navy:hover { background:var(--navy-l); }
.btn-danger { background:none; border:none; cursor:pointer; color:var(--mid); font-size:15px; padding:3px 5px; border-radius:5px; transition:.15s; }
.btn-danger:hover { color:#c0392b; background:rgba(192,57,43,.08); }
.btn-ghost { background:none; border:none; cursor:pointer; color:var(--mid); font-size:13px; padding:4px 6px; border-radius:5px; transition:.15s; }
.btn-ghost:hover { color:var(--navy); background:var(--off); }

/* ── FIXED ROW ── */
.fixed-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:.5px solid var(--border); font-size:12.5px; }
.fixed-row:last-child { border:none; }
.fixed-row .name { color:var(--navy); font-weight:500; }
.fixed-row .role { font-size:10.5px; color:var(--mid); }
.fixed-row .amount { font-weight:600; color:#c0392b; }

/* ── TABS ── */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.1rem; overflow-x:auto; }
.tab { padding:9px 15px; font-size:12px; color:var(--mid); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; transition:.15s; }
.tab:hover { color:var(--navy); }
.tab.active { color:var(--blue-dp); border-bottom-color:var(--blue); }
.sec { display:none; animation:fu .2s ease; }
.sec.active { display:block; }

/* ── HBOX ── */
.hbox { border-radius:10px; padding:.85rem 1.1rem; margin-bottom:.85rem; font-size:13px; line-height:1.7; border:1px solid; }
.hbox.blue { background:rgba(22,184,166,.06); border-color:rgba(22,184,166,.2); color:var(--navy-l); }
.hbox.blue strong { color:var(--blue-dp); }
.hbox.pink { background:rgba(255,107,91,.05); border-color:rgba(255,107,91,.18); color:var(--navy-l); }
.hbox.pink strong { color:var(--pink); }
.hbox.green { background:rgba(26,138,90,.05); border-color:rgba(26,138,90,.18); color:var(--navy-l); }
.hbox.green strong { color:#1a8a5a; }
.hbox.warn { background:#FFF8E1; border-color:#FFD54F; color:#7B5E00; }
.hbox.navy { background:rgba(30,46,74,.05); border-color:rgba(30,46,74,.15); color:var(--navy-l); }

/* ── ALERTS ── */
.alert { border-radius:9px; padding:.8rem 1rem; font-size:12.5px; margin-top:.85rem; line-height:1.7; border:1px solid; }
.alert.warn { background:#FFF8E1; color:#7B5E00; border-color:#FFD54F; }
.alert.ok { background:#E8F5E9; color:#1B5E20; border-color:#81C784; }
.alert.danger { background:#FFEBEE; color:#B71C1C; border-color:#EF9A9A; }

/* ── BULLET LIST ── */
.blist { list-style:none; }
.blist li { font-size:13px; color:#4A6070; padding:5px 0; border-bottom:.5px solid var(--off); display:flex; align-items:flex-start; gap:8px; line-height:1.55; }
.blist li:last-child { border:none; }
.blist li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--pink); flex-shrink:0; margin-top:5px; }

/* ── TAGS ── */
.tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.tag { background:rgba(22,184,166,.1); border:1px solid rgba(22,184,166,.28); border-radius:4px; padding:2px 7px; font-size:10.5px; color:var(--blue-dp); }
.tag.pink { background:rgba(255,107,91,.08); border-color:rgba(255,107,91,.28); color:var(--pink); }

/* ── LEVEL CARDS ── */
.level-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:.95rem 1.1rem; margin-bottom:.7rem; display:flex; gap:.85rem; align-items:flex-start; }
.lbadge { width:46px; height:46px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:19px; flex-shrink:0; }
.lb1 { background:rgba(22,184,166,.1); color:var(--blue-dp); border:1.5px solid rgba(22,184,166,.3); }
.lb2 { background:rgba(22,184,166,.18); color:var(--blue-dp); border:1.5px solid rgba(22,184,166,.5); }
.lb3 { background:rgba(58,154,184,.2); color:var(--blue-dp); border:1.5px solid var(--blue); }
.lb4 { background:rgba(255,107,91,.1); color:var(--pink); border:1.5px solid rgba(255,107,91,.4); }
.linfo h3 { font-weight:500; font-size:14px; color:var(--navy); margin-bottom:2px; }
.linfo p { font-size:12.5px; color:#6080A0; line-height:1.6; }

/* ── PROGRESS ── */
.prog-row { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.prog-label { font-size:11.5px; color:var(--mid); min-width:185px; }
.prog-bar { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.prog-fill { height:100%; border-radius:3px; transition:width .4s; }
.prog-fill.blue-f { background:var(--blue); } .prog-fill.pink-f { background:var(--pink); }
.prog-fill.green-f { background:#1a8a5a; } .prog-fill.gray-f { background:var(--mid); }
.prog-val { font-size:11px; color:var(--mid); min-width:36px; text-align:right; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--card); border-radius:14px; padding:1.5rem; width:min(520px,calc(100vw - 2rem)); max-height:90vh; overflow-y:auto; border:1px solid var(--border); }
.modal h3 { font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:2px; color:var(--navy); margin-bottom:.9rem; }
.modal-footer { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--border); }

/* ── HERO BANNER ── */
.hero-banner { background:var(--navy); border-radius:14px; padding:1.9rem 1.6rem; display:flex; align-items:center; gap:1.6rem; margin-bottom:1.1rem; position:relative; overflow:hidden; }
.hero-banner::before { content:''; position:absolute; top:-50px; right:-50px; width:180px; height:180px; border-radius:50%; background:rgba(22,184,166,.06); }
.hero-shield { width:72px; flex-shrink:0; position:relative; z-index:1; }
.hero-text { position:relative; z-index:1; }
.hero-text h1 { font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:4px; color:var(--white); line-height:1; }
.hero-text .sub { font-size:10px; letter-spacing:3px; color:var(--blue); text-transform:uppercase; margin-top:2px; }
.hero-text .tagline { font-family:'DM Serif Display',serif; font-style:italic; font-size:12.5px; color:rgba(255,255,255,.42); margin-top:.65rem; line-height:1.6; max-width:360px; }

/* ── IDEAR ── */
.idear-steps { display:flex; flex-direction:column; gap:.45rem; margin-top:.7rem; }
.idear-step { display:flex; align-items:flex-start; gap:.85rem; padding:.7rem .95rem; background:var(--off); border-radius:9px; border:.5px solid var(--border); }
.idear-letter { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:18px; flex-shrink:0; }
.il-i { background:rgba(22,184,166,.12); color:var(--blue-dp); border:1.5px solid rgba(22,184,166,.3); }
.il-d { background:rgba(255,107,91,.1); color:var(--pink); border:1.5px solid rgba(255,107,91,.28); }
.il-e { background:rgba(26,138,90,.1); color:#1a8a5a; border:1.5px solid rgba(26,138,90,.25); }
.il-a { background:rgba(176,112,0,.1); color:#b07000; border:1.5px solid rgba(176,112,0,.25); }
.il-r { background:rgba(30,46,74,.1); color:var(--navy); border:1.5px solid rgba(30,46,74,.2); }
.idear-step h4 { font-weight:500; font-size:12.5px; color:var(--navy); margin-bottom:2px; }
.idear-step p { font-size:11.5px; color:#6080A0; line-height:1.5; }

/* ── STAFF PROFILES ── */
.staff-tab { padding:8px 18px; font-size:12.5px; font-weight:500; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--mid); cursor:pointer; white-space:nowrap; transition:.15s; }
.staff-tab:hover { color:var(--navy); border-color:var(--blue-d); }
.staff-tab.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
.meta-card { background:var(--off); border-radius:10px; border:1px solid var(--border); padding:.85rem 1rem; margin-bottom:.6rem; }
.meta-title-input { font-size:13px; font-weight:500; color:var(--navy); background:transparent; border:none; border-bottom:1px dashed var(--border); border-radius:0; padding:2px 4px; width:100%; }
.meta-title-input:focus { outline:none; border-bottom-color:var(--blue); }
.meta-prog-row { display:flex; align-items:center; gap:.65rem; margin-top:6px; }
.meta-prog-bar { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.meta-prog-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--blue-d)); transition:width .3s; }
.meta-prog-fill.done { background:linear-gradient(90deg,#1a8a5a,#2aab72); }
.meta-pct { font-size:12px; font-weight:700; color:var(--navy); min-width:34px; text-align:right; }
.event-card { background:var(--card); border-radius:9px; border:1px solid var(--border); padding:.8rem 1rem; margin-bottom:.55rem; display:flex; align-items:flex-start; gap:.85rem; }
.event-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.event-dot.torneo { background:var(--pink); } .event-dot.evaluacion { background:var(--blue); }
.event-dot.reunion { background:#1a8a5a; } .event-dot.otro { background:var(--mid); }
.ev-badge { font-size:10px; padding:2px 7px; border-radius:4px; font-weight:600; }
.ev-torneo { background:rgba(255,107,91,.08); color:var(--pink); border:1px solid rgba(255,107,91,.25); }
.ev-evaluacion { background:rgba(22,184,166,.1); color:var(--blue-dp); border:1px solid rgba(22,184,166,.28); }
.ev-reunion { background:rgba(26,138,90,.08); color:#1a8a5a; border:1px solid rgba(26,138,90,.25); }
.ev-otro { background:var(--off); color:var(--mid); border:1px solid var(--border); }
.event-title-inp { font-size:13px; font-weight:500; color:var(--navy); background:transparent; border:none; border-bottom:1px dashed var(--border); border-radius:0; padding:2px 4px; width:100%; }
.event-title-inp:focus { outline:none; border-bottom-color:var(--blue); }

/* ── JUGADORES ── */
.jug-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:1rem 1.1rem; cursor:pointer; transition:.2s; }
.jug-card:hover { border-color:var(--blue); box-shadow:0 2px 14px rgba(22,184,166,.12); }
.jug-card-top { display:flex; align-items:center; gap:.85rem; margin-bottom:.65rem; }
.jug-av { width:44px; height:44px; border-radius:50%; background:rgba(22,184,166,.12); border:1.5px solid var(--blue); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:17px; color:var(--blue-dp); flex-shrink:0; }
.jug-av.inactive { background:rgba(0,0,0,.05); border-color:var(--border); color:var(--mid); }
.jug-nombre { font-weight:500; font-size:14px; color:var(--navy); }
.jug-meta-txt { font-size:11px; color:var(--mid); }
.jug-level-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; }
.jug-n1 { background:rgba(22,184,166,.1); color:var(--blue-dp); border:1px solid rgba(22,184,166,.3); }
.jug-n2 { background:rgba(22,184,166,.18); color:var(--blue-dp); border:1px solid rgba(22,184,166,.45); }
.jug-n3 { background:rgba(58,154,184,.18); color:var(--blue-dp); border:1px solid var(--blue); }
.jug-n4 { background:rgba(255,107,91,.1); color:var(--pink); border:1px solid rgba(255,107,91,.35); }
.jug-stat-row { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:6px; }
.jug-stat { font-size:10.5px; background:var(--off); border-radius:4px; padding:2px 7px; color:var(--mid); }
.dtabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
.dtab { padding:8px 14px; font-size:12px; color:var(--mid); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; transition:.15s; }
.dtab:hover { color:var(--navy); } .dtab.active { color:var(--blue-dp); border-bottom-color:var(--blue); }
.dsec { display:none; } .dsec.active { display:block; }

/* ── ENTRENAMIENTO / TORNEO / FÍSICO / OBS ── */
.ent-card { background:var(--card); border-radius:10px; border:1px solid var(--border); padding:.85rem 1rem; margin-bottom:.6rem; }
.ent-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; flex-wrap:wrap; gap:.4rem; }
.ent-fecha { font-size:11px; font-weight:600; color:var(--blue-dp); letter-spacing:.5px; }
.ent-tipo-badge { font-size:10.5px; background:rgba(22,184,166,.1); color:var(--blue-dp); border:1px solid rgba(22,184,166,.28); padding:2px 7px; border-radius:4px; font-weight:500; }
.ent-body { font-size:12.5px; color:#4A6070; line-height:1.6; }
.star-row { display:flex; gap:2px; margin-top:4px; }
.star { font-size:15px; color:var(--border); cursor:pointer; transition:.1s; user-select:none; }
.star.on { color:#FFB800; }
.torn-card { background:var(--card); border-radius:10px; border:1px solid var(--border); padding:.85rem 1rem; margin-bottom:.6rem; display:flex; gap:.85rem; align-items:flex-start; }
.torn-result { width:50px; height:50px; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:13px; text-align:center; flex-shrink:0; line-height:1.2; }
.tr-win { background:rgba(26,138,90,.1); color:#1a8a5a; border:1.5px solid rgba(26,138,90,.3); }
.tr-runner { background:rgba(22,184,166,.1); color:var(--blue-dp); border:1.5px solid rgba(22,184,166,.3); }
.tr-loss { background:rgba(192,57,43,.07); color:#c0392b; border:1.5px solid rgba(192,57,43,.2); }
.tr-other { background:var(--off); color:var(--mid); border:1.5px solid var(--border); }
.fisico-card { background:var(--card); border-radius:10px; border:1px solid var(--border); padding:.85rem 1rem; margin-bottom:.6rem; display:flex; gap:.85rem; align-items:flex-start; }
.zona-icon { width:48px; height:48px; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:var(--off); border:1px solid var(--border); }
.sev-badge, .est-badge { font-size:10px; padding:2px 7px; border-radius:4px; font-weight:600; }
.sev-leve { background:rgba(255,183,0,.1); color:#b07000; border:1px solid rgba(255,183,0,.3); }
.sev-moderado { background:rgba(255,107,91,.08); color:var(--pink); border:1px solid rgba(255,107,91,.25); }
.sev-grave { background:rgba(192,57,43,.09); color:#c0392b; border:1px solid rgba(192,57,43,.25); }
.est-activo { background:rgba(192,57,43,.08); color:#c0392b; border:1px solid rgba(192,57,43,.2); }
.est-recuperando { background:rgba(255,183,0,.1); color:#b07000; border:1px solid rgba(255,183,0,.3); }
.est-ok { background:rgba(26,138,90,.08); color:#1a8a5a; border:1px solid rgba(26,138,90,.2); }
.obs-card { background:var(--off); border-radius:9px; padding:.8rem 1rem; margin-bottom:.55rem; border-left:3px solid var(--blue); }
.obs-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; flex-wrap:wrap; gap:.3rem; }
.obs-coach-tag { font-size:10.5px; font-weight:600; color:var(--blue-dp); text-transform:uppercase; letter-spacing:.5px; }
.obs-fecha { font-size:10px; color:var(--mid); }
.obs-texto { font-size:12.5px; color:#4A6070; line-height:1.6; }

/* ── NÓMINA ── */
.nomina-header { background:var(--navy); border-radius:12px; padding:1.1rem 1.35rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.nomina-header h3 { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:2px; color:var(--white); }
.period-sel { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.period-sel select { background:#163A55; border-color:#3A5078; color:var(--white); font-size:12.5px; padding:6px 9px; width:auto; }
.ppc-card { background:var(--card); border-radius:12px; border:1px solid var(--border); margin-bottom:1rem; overflow:hidden; }
.ppc-header { background:var(--off); padding:.8rem 1.2rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:.5rem; }
.ppc-name { font-weight:500; font-size:14.5px; color:var(--navy); display:flex; align-items:center; gap:9px; }
.ppc-av { width:34px; height:34px; border-radius:50%; background:rgba(22,184,166,.15); border:1.5px solid var(--blue); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:13px; color:var(--blue-dp); flex-shrink:0; }
.ppc-av.wendy { background:rgba(255,107,91,.1); border-color:var(--pink); color:var(--pink); }
.ppc-role { font-size:10.5px; color:var(--mid); letter-spacing:.5px; }
.ppc-body { padding:1rem 1.2rem; }
.class-log { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:.85rem; }
.class-log th { font-size:10px; font-weight:600; color:var(--mid); padding:6px 8px; border-bottom:1px solid var(--border); text-align:left; text-transform:uppercase; letter-spacing:.5px; background:rgba(240,246,250,.6); }
.class-log td { padding:7px 8px; border-bottom:.5px solid var(--border); vertical-align:middle; }
.class-log tr:last-child td { border:none; }
.class-log input[type=number] { width:62px; padding:5px 7px; font-size:12px; text-align:center; }
.ppc-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin-bottom:.85rem; }
.sum-box { background:var(--off); border-radius:8px; padding:.7rem .9rem; text-align:center; }
.sum-box .sv { font-family:'Bebas Neue',sans-serif; font-size:21px; line-height:1; letter-spacing:1px; }
.sum-box .sl { font-size:10px; color:var(--mid); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.sum-box.pos .sv { color:#1a8a5a; } .sum-box.neg .sv { color:#c0392b; }
.sum-box.warn .sv { color:#b07000; } .sum-box.blue .sv { color:var(--blue-dp); } .sum-box.pink .sv { color:var(--pink); }
.efectivo-row { background:rgba(255,248,225,.6); border:1px solid #FFD54F; border-radius:9px; padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.efectivo-row label { font-size:12.5px; font-weight:500; color:#7B5E00; flex:1; min-width:160px; }
.ef-input { width:130px !important; font-size:14px; font-weight:500; background:#fff8e1 !important; border-color:#FFD54F !important; color:#7B5E00 !important; }
.gestion-row { background:rgba(22,184,166,.06); border:1px solid rgba(22,184,166,.25); border-radius:9px; padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.gestion-row label { font-size:12.5px; font-weight:500; color:var(--blue-dp); flex:1; min-width:160px; }
.gst-input { width:130px !important; background:rgba(22,184,166,.08) !important; border-color:rgba(22,184,166,.3) !important; color:var(--blue-dp) !important; }
.neto-row { background:rgba(30,46,74,.05); border:1.5px solid rgba(30,46,74,.18); border-radius:9px; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.neto-row .neto-label { font-size:13px; font-weight:500; color:var(--navy); }
.neto-row .neto-val { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px; }
.nomina-total-card { background:var(--navy); border-radius:12px; padding:1rem 1.35rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; }
.nomina-total-card h3 { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.55); }
.nomina-total-card .tv { font-family:'Bebas Neue',sans-serif; font-size:27px; color:var(--white); letter-spacing:1px; }

/* ── COBROS ── */
.cobro-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:1rem 1.25rem; margin-bottom:.75rem; }
.cobro-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; flex-wrap:wrap; gap:.5rem; }
.cobro-nombre { font-weight:500; font-size:14px; color:var(--navy); }
.cobro-plan { font-size:11px; color:var(--mid); }
.pago-badge { font-size:11px; padding:3px 10px; border-radius:5px; font-weight:600; }
.pago-pagado { background:rgba(26,138,90,.1); color:#1a8a5a; border:1px solid rgba(26,138,90,.25); }
.pago-pendiente { background:#FFF8E1; color:#7B5E00; border:1px solid #FFD54F; }
.pago-vencido { background:#FFEBEE; color:#B71C1C; border:1px solid #EF9A9A; }
.cobro-amounts { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }
.cobro-amount-box { background:var(--off); border-radius:7px; padding:.5rem .8rem; text-align:center; }
.cobro-amount-box .ca-num { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--navy); line-height:1; }
.cobro-amount-box .ca-lbl { font-size:10px; color:var(--mid); text-transform:uppercase; letter-spacing:.5px; margin-top:1px; }
.hist-pago { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:.5px solid var(--off); font-size:12px; }
.hist-pago:last-child { border:none; }
.recibo-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; align-items:center; justify-content:center; }
.recibo-modal.open { display:flex; }
.recibo-box { background:#fff; border-radius:12px; padding:2rem; width:min(480px,calc(100vw - 2rem)); max-height:90vh; overflow-y:auto; }

/* ── HIST ── */
.hist-card { background:var(--card); border-radius:12px; border:1px solid var(--border); margin-bottom:.85rem; overflow:hidden; transition:.2s; }
.hist-card:hover { border-color:var(--blue-d); }
.hist-header { padding:.9rem 1.2rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; flex-wrap:wrap; gap:.5rem; }
.hist-period { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:2px; color:var(--navy); }
.hist-body { display:none; border-top:1px solid var(--border); padding:.9rem 1.2rem; }
.hist-body.open { display:block; }

/* ── EJERCICIOS ── */
.ej-card { background:var(--card); border-radius:12px; border:1px solid var(--border); padding:.95rem 1.05rem; display:flex; flex-direction:column; gap:.45rem; transition:.2s; }
.ej-card:hover { border-color:var(--blue-d); box-shadow:0 2px 12px rgba(22,184,166,.1); }
.ej-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.ej-name { font-weight:500; font-size:13.5px; color:var(--navy); line-height:1.3; flex:1; }
.ej-desc { font-size:11.5px; color:#6080A0; line-height:1.55; }
.ej-footer { display:flex; align-items:center; justify-content:space-between; margin-top:3px; }
.ej-dur { font-size:11px; color:var(--mid); display:flex; align-items:center; gap:4px; }
.tipo-badge { font-size:10px; padding:2px 7px; border-radius:4px; font-weight:600; }
.tipo-tecnica { background:rgba(22,184,166,.1); color:var(--blue-dp); border:1px solid rgba(22,184,166,.28); }
.tipo-coordinacion { background:rgba(26,138,90,.08); color:#1a8a5a; border:1px solid rgba(26,138,90,.25); }
.tipo-tactica { background:rgba(255,107,91,.08); color:var(--pink); border:1px solid rgba(255,107,91,.25); }
.tipo-control { background:rgba(176,112,0,.08); color:#b07000; border:1px solid rgba(176,112,0,.22); }
.tipo-juego { background:rgba(30,46,74,.08); color:var(--navy); border:1px solid rgba(30,46,74,.18); }
.nivel-badge { font-size:10px; padding:1px 6px; border-radius:4px; background:var(--off); color:var(--mid); border:1px solid var(--border); }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--mid); }
.empty-state i { font-size:36px; margin-bottom:.5rem; display:block; color:var(--border); }

/* ── QUOTE ── */
.quote { border-left:3px solid var(--blue); padding:.75rem 1rem; background:rgba(22,184,166,.06); border-radius:0 8px 8px 0; margin-bottom:.7rem; }
.quote p { font-family:'DM Serif Display',serif; font-style:italic; font-size:13px; color:var(--navy-l); line-height:1.6; }
.quote cite { font-size:10px; color:var(--blue-dp); letter-spacing:1px; font-style:normal; display:block; margin-top:4px; }

/* ── CTA ── */
.cta-block { background:var(--navy); border-radius:12px; padding:1.5rem; text-align:center; margin-top:.85rem; }
.cta-block h3 { font-family:'Bebas Neue',sans-serif; letter-spacing:3px; font-size:18px; color:var(--blue); margin-bottom:4px; }
.cta-block p { font-size:11.5px; color:rgba(255,255,255,.32); margin-bottom:.9rem; }

/* ── MOBILE ── */
/* ── RESPONSIVE & SCROLL FIX ──────────────────────────────── */
html { scroll-behavior: smooth; }
body { overflow-y: auto; }   /* fix middle-mouse scroll */
.main { overflow-y: auto; min-height: 100vh; }
.page { overflow-x: hidden; }

@media(max-width:900px) {
  :root { --sw: 200px; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
}

@media(max-width:768px) {
  :root { --sw: 220px; }
  html, body { overflow-x:hidden; max-width:100%; }
  .sidebar { transform:translateX(-100%); box-shadow:none; }
  .sidebar.open { transform:translateX(0); box-shadow:6px 0 24px rgba(0,0,0,.18); }
  .main { margin-left:0; max-width:100vw; overflow-x:hidden; }
  img, svg, video, iframe { max-width:100%; height:auto; }
  pre, code { white-space:pre-wrap; word-break:break-word; }
  .modal { width:calc(100vw - 1.2rem); }
  .hamburger { display:block !important; }
  .g2, .g3, .g4 { grid-template-columns:1fr; }
  .hero-banner { flex-direction:column; text-align:center; gap:.9rem; padding:1.25rem 1rem; }
  .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }
  .overlay.active { display:block; }
  .ppc-summary { grid-template-columns:1fr 1fr; }
  .topbar { padding:0 .65rem; gap:.35rem; min-height:52px; }
  .topbar h2 { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
  .topbar-right { gap:.25rem; }
  .topbar-right .badge { display:none; }
  /* Always show logout even on mobile */
  #topbar-logout { display:flex !important; flex-shrink:0 !important; padding:4px 7px !important; font-size:10.5px !important; }
  #topbar-logout span { display:none; } /* hide text, show only icon */
  .page { padding:.85rem; }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab, .tab-btn { padding:7px 10px; font-size:11px; }
}

@media(max-width:480px) {
  .g2 { grid-template-columns:1fr; }
  .ppc-summary { grid-template-columns:1fr; }
  .page { padding:.65rem; }
  .card { padding:.85rem; }
}

/* ══ Móvil / iOS notch / safe-area — que se vea bien en CUALQUIER teléfono ══ */
body     { min-height:100vh; min-height:100dvh; }
.sidebar { height:100vh; height:100dvh; max-height:100dvh; }

@supports (padding:max(0px)) {
  /* La barra de estado del iPhone (la hora) deja de encimarse al menú */
  .topbar  { padding-top: calc(.75rem + env(safe-area-inset-top));
             padding-left: max(1.5rem, env(safe-area-inset-left));
             padding-right: max(1.5rem, env(safe-area-inset-right)); }
  /* El sidebar respeta notch arriba e indicador de inicio abajo */
  .sidebar { padding-top: env(safe-area-inset-top);
             padding-bottom: env(safe-area-inset-bottom); }
  .page    { padding-left: max(1.6rem, env(safe-area-inset-left));
             padding-right: max(1.6rem, env(safe-area-inset-right)); }
}

@media(max-width:768px) {
  @supports (padding:max(0px)) {
    .topbar { padding-top: calc(.4rem + env(safe-area-inset-top));
              padding-left: max(.65rem, env(safe-area-inset-left));
              padding-right: max(.65rem, env(safe-area-inset-right)); }
    .page   { padding-left: max(.65rem, env(safe-area-inset-left));
              padding-right: max(.65rem, env(safe-area-inset-right)); }
  }
}