/* ─── Porra Mundial — App CSS v4 ──────────────────────────────────────────── */
:root {
  --pm-bg: #000000;
  --pm-surface: #000000;
  --pm-card: #000000;
  --pm-border: #252940;
  --pm-accent: #ffffff;
  --pm-accent2: #ffffff;
  --pm-green: #22c55e;
  --pm-red: #ef4444;
  --pm-text: #e2e8f0;
  --pm-muted: #64748b;
  --pm-radius:   12px;
  --pm-shadow:   0 4px 24px rgba(0,0,0,.4);
}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.pm-auth-container { min-height:100vh; background:var(--pm-bg); display:flex; align-items:center; justify-content:center; padding:20px; }
.pm-auth-card { background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:var(--pm-radius); padding:40px; width:100%; max-width:420px; box-shadow:var(--pm-shadow); }
.pm-logo { text-align:center; margin-bottom:28px; }
.pm-logo-icon { font-size:48px; display:block; margin-bottom:8px; }
.pm-logo h1 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.2rem; letter-spacing:2px; color:var(--pm-accent); text-transform:uppercase; }
.pm-tabs { display:flex; margin-bottom:24px; background:var(--pm-bg); border-radius:8px; padding:4px; gap:0; }
.pm-tab  { flex:1; padding:10px; border:none; background:transparent; color:var(--pm-muted); cursor:pointer; border-radius:6px; font-family:inherit; font-weight:600; font-size:.95rem; transition:all .2s; }
.pm-tab.active { background:var(--pm-card); color:var(--pm-text); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.pm-form { display:none; flex-direction:column; gap:16px; }
.pm-form.pm-form-active { display:flex; }
.pm-field { display:flex; flex-direction:column; gap:6px; }
.pm-field label { font-size:.8rem; font-weight:600; color:var(--pm-muted); text-transform:uppercase; letter-spacing:.5px; }
.pm-field input, .pm-field select { background:var(--pm-bg); border:1px solid var(--pm-border); border-radius:8px; padding:12px 14px; color:var(--pm-text); font-size:1rem; font-family:inherit; transition:border-color .2s; }
.pm-field input:focus, .pm-field select:focus { outline:none; border-color:var(--pm-accent2); }
.pm-error { color:var(--pm-red); font-size:.85rem; min-height:18px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.pm-btn { padding:10px 18px; border:none; border-radius:8px; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.5px; text-transform:uppercase; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.pm-btn-primary { background:var(--pm-accent); color:#000; }
.pm-btn-primary:hover { background:#d97706; transform:translateY(-1px); }
.pm-btn-outline { background:transparent; border:2px solid var(--pm-border); color:var(--pm-text); }
.pm-btn-outline:hover { border-color:var(--pm-accent); color:var(--pm-accent); }
.pm-btn-ghost { background:transparent; color:var(--pm-muted); }
.pm-btn-link { color:var(--pm-muted); text-decoration:none; font-size:.85rem; }
.pm-btn-link:hover { color:var(--pm-accent); }
.pm-back-btn { background:none; border:none; color:var(--pm-accent2); cursor:pointer; font-size:.9rem; font-family:inherit; padding:0; }
.pm-back-btn:hover { text-decoration:underline; }

/* ── App ──────────────────────────────────────────────────────────────────── */
.pm-app { display:flex; flex-direction:column; min-height:100vh; background:var(--pm-bg); color:var(--pm-text); font-family:'Barlow',sans-serif; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.pm-nav { background:var(--pm-surface); display:flex; align-items:center; gap:24px; padding:0 24px; height:215px; position:sticky; top:0; z-index:100; }
.pm-nav-brand { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.4rem; color:var(--pm-accent); letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.pm-nav-links { display:flex; gap:4px; flex:1; }
.pm-nav-btn { background:transparent; border:none; color:var(--pm-muted); padding:8px 16px; cursor:pointer; border-radius:6px; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.3px; transition:all .15s; text-transform:uppercase; }
.pm-nav-btn:hover { color:var(--pm-text); background:var(--pm-card); }
.pm-nav-btn.active { color:var(--pm-accent); background:rgba(245,158,11,.1); }
.pm-nav-user { display:flex; align-items:center; gap:12px; margin-left:auto; font-size:.9rem; }
.pm-nav-logo{width: 15%;position: relative;top: -45px;}

/* ── Main ─────────────────────────────────────────────────────────────────── */
.pm-main { flex:1; padding:20px 24px; max-width: 93%;margin: 75px 75px; width:100%; }
.pm-view { display:none; }
.pm-view.pm-view-active { display:block; }
.pm-view-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.pm-view-header h2 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.8rem; letter-spacing:1px; text-transform:uppercase; }
.pm-actions { display:flex; gap:10px; }
.pm-loading { color:var(--pm-muted); text-align:center; padding:48px; }

/* ── Tabs de fases ────────────────────────────────────────────────────────── */
.pm-fase-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius); padding: 6px; margin-bottom: 20px;
}
.pm-tab-btn {
  padding: 8px 14px; border: none; background: transparent; color: var(--pm-muted);
  cursor: pointer; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: .95rem; letter-spacing: .3px; text-transform: uppercase;
  transition: all .15s; white-space: nowrap;
}
.pm-tab-btn:hover { background: var(--pm-card); color: var(--pm-text); }
.pm-tab-btn.active { background: var(--pm-accent); color: #000; }
.pm-tab-empty { opacity: .4; font-size: .6rem; vertical-align: super; }

/* ── Grid 2 columnas de grupos ────────────────────────────────────────────── */
.pm-grupos-grid2 { display: flex; flex-direction: column; gap: 16px; }
.pm-grupos-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Bloque de grupo ──────────────────────────────────────────────────────── */
.pm-grupo-bloque { background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius); overflow:hidden; }

.pm-grupo-header {
  background: var(--pm-surface); padding: 10px 16px;
  border-bottom: 1px solid var(--pm-border);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; transition: background .15s;
}
.pm-grupo-header:hover { background: rgba(255,255,255,.04); }
.pm-grupo-header h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.2rem; text-transform:uppercase; letter-spacing:2px; color:var(--pm-accent); }
.pm-colapso-icon { color: var(--pm-muted); font-size: .8rem; transition: transform .2s; }

/* Colapso */
/* Colapso gestionado por GSAP — overflow:hidden permite animar height */
.pm-grupo-bloque.pm-colapsado .pm-grupo-body { height: 0; overflow: hidden; opacity: 0; }
/* El icono lo rota GSAP, pero como fallback: */
.pm-grupo-bloque.pm-colapsado .pm-colapso-icon { transform: rotate(-90deg); }

/* Perspectiva 3D para animación de eliminatoria */
#pm-grupos-clasif-container { perspective: 1000px; }

/* Prevent flash of unanimated content */
.pm-grupo-bloque,
.pm-partido-row,
.pm-elim-card,
.pm-tab-btn { will-change: transform, opacity; }

/* ── Tabla clasificación ──────────────────────────────────────────────────── */
.pm-tabla-clasif { overflow-x:auto; }
.pm-tabla-clasif table { width:100%; border-collapse:collapse; font-size:.82rem; }
.pm-tabla-clasif th { background:rgba(0,0,0,.3); padding:6px 8px; text-align:center; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--pm-muted); font-weight:700; }
.pm-tabla-clasif td { padding:8px 8px; border-top:1px solid rgba(255,255,255,.04); text-align:center; }
.pm-col-equipo { text-align:left !important; }
.pm-tabla-clasif tr.pm-clasif-pasa td { background:rgba(59,130,246,.06); }
.pm-tabla-clasif tr.pm-clasif-pasa .pm-posicion { background:var(--pm-green); }
.pm-posicion { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--pm-border); font-size:.7rem; font-weight:700; margin-right:5px; }

/* ── Partido row (grupos) ─────────────────────────────────────────────────── */
.pm-grupo-partidos { border-top:2px solid var(--pm-border); }
.pm-partido-row { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
.pm-partido-row:last-child { border-bottom:none; }
.pm-partido-row:hover { background:rgba(255,255,255,.02); }
.pm-partido-row.pm-fin { background:rgba(34,197,94,.03); }
.pm-partido-row.pm-locked { opacity:.7; }

.pm-pr-meta { display:flex; flex-direction:column; align-items:center; gap:2px; }
.pm-pr-hora { font-size:.65rem; color:var(--pm-muted); text-align:center; line-height:1.2; }
.pm-tag-fin  { font-size:.6rem; font-weight:700; padding:2px 5px; border-radius:3px; background:rgba(34,197,94,.15); color:var(--pm-green); }
.pm-tag-lock { font-size:.75rem; }
.pm-tag-open { font-size:.75rem; }

.pm-pr-equipos { display:flex; align-items:center; gap:6px; }
.pm-pr-team { font-weight:600; font-size:.82rem; line-height:1.2; }
.pm-pr-local { flex:1; text-align:right; }
.pm-pr-visit { flex:1; text-align:left; }
.pm-pr-result { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.3rem; padding:0 6px; white-space:nowrap; }

.pm-pred-inputs { display:flex; align-items:center; gap:3px; }
.pm-pred-score { width:34px; height:30px; background:var(--pm-bg); border:1px solid var(--pm-border); border-radius:4px; color:var(--pm-text); font-size:.9rem; font-weight:700; text-align:center; font-family:'Barlow Condensed',sans-serif; }
.pm-pred-score:focus { outline:none; border-color:var(--pm-accent); }
.pm-pred-score:disabled { opacity:.4; }
.pm-pred-dash { color:var(--pm-muted); font-weight:700; }
.pm-save-pred { background:transparent; border:1px solid var(--pm-border); border-radius:4px; padding:3px 6px; color:var(--pm-muted); cursor:pointer; font-size:.75rem; }
.pm-save-pred:hover { border-color:var(--pm-accent); color:var(--pm-accent); }

.pm-pr-pts { font-size:.75rem; font-weight:700; white-space:nowrap; min-width:50px; text-align:right; }
.pm-pts-ok   { color:var(--pm-green); }
.pm-pts-miss { color:var(--pm-muted); }
.pm-pts-saved { color:var(--pm-accent2); font-size:.7rem; }

/* ── Fase por determinar ──────────────────────────────────────────────────── */
.pm-fase-por-determinar {
  text-align:center; padding:60px 20px;
  background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius);
}
.pm-fase-icon { font-size:48px; margin-bottom:16px; }
.pm-fase-msg  { font-size:1.1rem; font-weight:600; margin-bottom:8px; }
.pm-fase-sub  { color:var(--pm-muted); font-size:.9rem; }

/* ── Eliminatoria cards ───────────────────────────────────────────────────── */
.pm-eliminatoria { display:flex; flex-direction:column; gap:12px; max-width:700px; margin:0 auto; }

.pm-elim-card {
  background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius);
  overflow:hidden; transition:border-color .2s;
}
.pm-elim-card.pm-fin { border-left:3px solid var(--pm-green); }
.pm-elim-card.pm-locked { opacity:.75; }

.pm-elim-meta {
  display:flex; gap:12px; align-items:center;
  padding:8px 16px; background:var(--pm-surface); border-bottom:1px solid var(--pm-border);
  font-size:.78rem; color:var(--pm-muted);
}
.pm-elim-fase   { color:var(--pm-accent2); font-weight:700; text-transform:uppercase; font-size:.72rem; }
.pm-elim-estadio { margin-left:auto; }

.pm-elim-match {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:16px;  gap:12px;
}
.pm-elim-team { display:flex; align-items:center; }
.pm-elim-local { justify-content:flex-end; }
.pm-elim-visit { justify-content:flex-start; }
.pm-elim-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.2rem; }

.pm-elim-center { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pm-elim-result { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.2rem; letter-spacing:4px; color:var(--pm-text); }
.pm-elim-dash { font-size:1.2rem; }
.pm-elim-lock { font-size:.75rem; color:var(--pm-red); }
.pm-elim-pts { font-size:.85rem; font-weight:700; }

/* ── Puntos header ────────────────────────────────────────────────────────── */
.pm-pts-header-card { display:flex; align-items:center; gap:10px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); border-radius:10px; padding:6px 14px; }
.pm-pts-header-label { color:var(--pm-muted); font-size:.75rem; text-transform:uppercase; font-weight:600; }
.pm-pts-header-total { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.8rem; color:var(--pm-accent); }
.pm-pts-header-sub { font-size:.72rem; color:var(--pm-muted); }

/* ── Mis grupos grid ──────────────────────────────────────────────────────── */
.pm-grupos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pm-grupo-card { background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius); padding:20px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; }
.pm-grupo-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--pm-accent); }
.pm-grupo-card:hover { border-color:var(--pm-accent); transform:translateY(-2px); box-shadow:var(--pm-shadow); }
.pm-grupo-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:6px; }
.pm-comp-label { color:var(--pm-accent2); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.pm-codigo { font-family:monospace; font-size:.85rem; color:var(--pm-muted); background:var(--pm-bg); padding:4px 10px; border-radius:4px; display:inline-block; }

/* ── Competiciones grid ───────────────────────────────────────────────────── */
.pm-comps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.pm-comp-card { background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius); padding:24px; cursor:pointer; transition:all .2s; }
.pm-comp-card:hover { border-color:var(--pm-accent2); transform:translateY(-2px); }
.pm-comp-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.5rem; margin-bottom:8px; }
.pm-badge { display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 10px; border-radius:20px; }
.pm-badge-activa  { background:rgba(34,197,94,.15); color:var(--pm-green); }
.pm-badge-cerrada { background:rgba(100,116,139,.15); color:var(--pm-muted); }

/* ── Predicciones especiales ─────────────────────────────────────────────── */
.pm-especiales-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.pm-especial-card { background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius); padding:20px; transition:all .2s; }
.pm-especial-card.pm-esp-ok   { border-color:var(--pm-green); background:rgba(34,197,94,.06); }
.pm-especial-card.pm-esp-miss { border-color:var(--pm-red);   background:rgba(239,68,68,.04); }
.pm-esp-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:4px; }
.pm-esp-pts-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px; background:rgba(245,158,11,.15); color:var(--pm-accent); margin-bottom:14px; }
.pm-esp-input-wrap { display:flex; flex-direction:column; gap:8px; }
.pm-esp-select { width:100%; background:var(--pm-bg); border:1px solid var(--pm-border); border-radius:8px; padding:10px 12px; color:var(--pm-text); font-size:.95rem; font-family:inherit; cursor:pointer; }
.pm-esp-select:focus { outline:none; border-color:var(--pm-accent); }
.pm-esp-select:disabled { opacity:.6; cursor:not-allowed; }
.pm-jugador-select-wrap { display:flex; flex-direction:column; align-items:center; }
.pm-jugador-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--pm-accent); margin-bottom:8px; }
.pm-esp-resultado-real { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); border-radius:6px; padding:6px 12px; font-size:.85rem; color:var(--pm-green); margin-bottom:10px; }
.pm-esp-puntos { font-size:.9rem; font-weight:700; }
.pm-esp-valor-saved { font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:6px; }

/* ── Leaderboard ──────────────────────────────────────────────────────────── */
.pm-leaderboard { background:var(--pm-card); border:1px solid var(--pm-border); border-radius:var(--pm-radius); overflow:hidden; }
.pm-leaderboard table { width:100%; border-collapse:collapse; }
.pm-leaderboard th { background:var(--pm-bg); padding:12px 16px; text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--pm-muted); font-weight:700; }
.pm-leaderboard td { padding:14px 16px; border-top:1px solid var(--pm-border); font-size:.95rem; }
.pm-leaderboard tr:hover td { background:rgba(255,255,255,.02); }
.pm-rank { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.1rem; width:40px; }
.pm-rank-1 { color:#fbbf24; } .pm-rank-2 { color:#94a3b8; } .pm-rank-3 { color:#d97706; }
.pm-pts-big { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.3rem; color:var(--pm-accent); }
.pm-highlight td { background:rgba(245,158,11,.06); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.pm-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; display:none; }
.pm-modal-overlay.active { display:block; }
.pm-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:300; display:none; width:90%; max-width:460px; }
.pm-modal.pm-modal-open { display:block; }
.pm-modal-content { background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:var(--pm-radius); padding:32px; box-shadow:var(--pm-shadow); }
.pm-modal-content h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.5rem; margin-bottom:20px; text-transform:uppercase; }
.pm-modal-actions { display:flex; gap:10px; margin-top:20px; }
.pm-codigo-result { text-align:center; margin-top:20px; }
.pm-codigo-badge { font-family:monospace; font-size:2rem; font-weight:700; letter-spacing:8px; background:var(--pm-bg); padding:16px; border-radius:8px; margin-top:12px; color:var(--pm-accent); border:2px dashed var(--pm-border); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .pm-grupos-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .pm-nav { padding:0 12px; gap:12px; }
  .pm-main { padding:12px; }
  .pm-fase-tabs { gap:3px; }
  .pm-tab-btn { padding:6px 10px; font-size:.82rem; }
  .pm-elim-match { grid-template-columns:1fr; gap:8px; }
  .pm-elim-local, .pm-elim-visit { justify-content:center; }
  .pm-elim-result { font-size:1.6rem; }
}

/* ── Tabs de fases ─────────────────────────────────────────────────────────── */
.pm-fase-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--pm-surface);border:1px solid var(--pm-border);border-radius:var(--pm-radius);padding:6px;margin-bottom:20px}
.pm-tab-btn{padding:8px 14px;border:none;background:transparent;color:var(--pm-muted);cursor:pointer;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.3px;text-transform:uppercase;transition:all .15s;white-space:nowrap}
.pm-tab-btn:hover{background:var(--pm-card);color:var(--pm-text)}.pm-tab-btn.active{background:var(--pm-accent);color:#000}

/* ── Grid 2 columnas de grupos ─────────────────────────────────────────────── */
.pm-grupos-grid2{display:flex;flex-direction:column;gap:16px}
.pm-grupos-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Grupo bloque colapsable ───────────────────────────────────────────────── */
.pm-grupo-bloque{background:var(--pm-card);border:1px solid var(--pm-border);border-radius:var(--pm-radius);overflow:hidden}
.pm-grupo-header{background:var(--pm-surface);padding:10px 16px;border-bottom:1px solid var(--pm-border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:background .15s}
.pm-grupo-header:hover{background:rgba(255,255,255,.04)}
.pm-grupo-header h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;color:var(--pm-accent)}
.pm-colapso-icon{color:var(--pm-muted);font-size:.8rem;transition:transform .2s}
.pm-grupo-bloque.pm-colapsado .pm-grupo-body{display:none}
.pm-grupo-bloque.pm-colapsado .pm-colapso-icon{transform:rotate(-90deg)}

/* ── Tabla clasificación ───────────────────────────────────────────────────── */
.pm-tabla-clasif{overflow-x:auto}
.pm-tabla-clasif table{width:100%;border-collapse:collapse;font-size:.82rem}
.pm-tabla-clasif th{background:rgba(0,0,0,.3);padding:6px 8px;text-align:center;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--pm-muted);font-weight:700}
.pm-tabla-clasif td{padding:8px 8px;border-top:1px solid rgba(255,255,255,.04);text-align:center}
.pm-col-equipo{text-align:left !important}
.pm-tabla-clasif tr.pm-clasif-pasa td{background:rgba(59,130,246,.06)}
.pm-tabla-clasif tr.pm-clasif-pasa .pm-posicion{background:var(--pm-green)}
.pm-posicion{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--pm-border);font-size:.7rem;font-weight:700;margin-right:5px}

/* ── Partido row (grupos) ──────────────────────────────────────────────────── */
.pm-grupo-partidos{border-top:2px solid var(--pm-border)}
.pm-partido-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.pm-partido-row:last-child{border-bottom:none}
.pm-partido-row:hover{background:rgba(255,255,255,.02)}
.pm-partido-row.pm-fin{background:rgba(34,197,94,.03)}
.pm-partido-row.pm-locked{opacity:.7}
.pm-pr-meta{display:flex;flex-direction:column;align-items:center;gap:2px}
.pm-pr-hora{font-size:.65rem;color:var(--pm-muted);text-align:center;line-height:1.2}
.pm-pr-jornada{font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(59,130,246,.15);color:var(--pm-accent2);text-transform:uppercase}
.pm-tag-fin{font-size:.6rem;font-weight:700;padding:2px 5px;border-radius:3px;background:rgba(34,197,94,.15);color:var(--pm-green)}
.pm-tag-lock,.pm-tag-open{font-size:.75rem}
.pm-pr-equipos{display:flex;align-items:center;gap:6px}
.pm-pr-team{font-weight:600;font-size:.82rem;line-height:1.2}
.pm-pr-local{flex:1;text-align:right}.pm-pr-visit{flex:1;text-align:left}
.pm-pr-result{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.3rem;padding:0 6px;white-space:nowrap}
.pm-pred-inputs{display:flex;align-items:center;gap:3px}
.pm-pred-score{width:34px;height:30px;background:var(--pm-bg);border:1px solid var(--pm-border);border-radius:4px;color:var(--pm-text);font-size:.9rem;font-weight:700;text-align:center;font-family:'Barlow Condensed',sans-serif}
.pm-pred-score:focus{outline:none;border-color:var(--pm-accent)}.pm-pred-score:disabled{opacity:.4}
.pm-pred-dash{color:var(--pm-muted);font-weight:700}
.pm-save-pred{background:transparent;border:1px solid var(--pm-border);border-radius:4px;padding:3px 6px;color:var(--pm-muted);cursor:pointer;font-size:.75rem}
.pm-save-pred:hover{border-color:var(--pm-accent);color:var(--pm-accent)}
.pm-pr-pts{font-size:.75rem;font-weight:700;white-space:nowrap;min-width:50px;text-align:right}
.pm-pts-ok{color:var(--pm-green)}.pm-pts-miss{color:var(--pm-muted)}.pm-pts-saved{color:var(--pm-accent2);font-size:.7rem}

/* ── Fase por determinar ───────────────────────────────────────────────────── */
.pm-fase-por-determinar{text-align:center;padding:60px 20px;background:var(--pm-card);border:1px solid var(--pm-border);border-radius:var(--pm-radius)}
.pm-fase-icon{font-size:48px;margin-bottom:16px}.pm-fase-msg{font-size:1.1rem;font-weight:600;margin-bottom:8px}.pm-fase-sub{color:var(--pm-muted);font-size:.9rem}

/* ── Eliminatoria cards ────────────────────────────────────────────────────── */
.pm-eliminatoria{display:flex;flex-direction:column;gap:12px;max-width:700px;margin:0 auto}
.pm-elim-card{background:var(--pm-card);border:1px solid var(--pm-border);border-radius:var(--pm-radius);overflow:hidden;transition:border-color .2s}
.pm-elim-card.pm-fin{border-left:3px solid var(--pm-green)}.pm-elim-card.pm-locked{opacity:.75}
.pm-elim-meta{display:flex;gap:12px;align-items:center;padding:8px 16px;background:var(--pm-surface);border-bottom:1px solid var(--pm-border);font-size:.78rem;color:var(--pm-muted)}
.pm-elim-fase{color:var(--pm-accent2);font-weight:700;text-transform:uppercase;font-size:.72rem}.pm-elim-estadio{margin-left:auto}
.pm-elim-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px;gap:12px}
.pm-elim-team{display:flex;align-items:center}.pm-elim-local{justify-content:flex-end}.pm-elim-visit{justify-content:flex-start}
.pm-elim-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem}
.pm-elim-center{display:flex;flex-direction:column;align-items:center;gap:6px}
.pm-elim-result{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:2.2rem;letter-spacing:4px}
.pm-elim-lock{font-size:.75rem;color:var(--pm-red)}.pm-elim-pts{font-size:.85rem;font-weight:700}

/* ── Puntos header ─────────────────────────────────────────────────────────── */
.pm-pts-header-card{display:flex;align-items:center;gap:10px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:6px 14px}
.pm-pts-header-label{color:var(--pm-muted);font-size:.75rem;text-transform:uppercase;font-weight:600}
.pm-pts-header-total{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.8rem;color:var(--pm-accent)}
.pm-pts-header-sub{font-size:.72rem;color:var(--pm-muted)}

/* ── Especiales ────────────────────────────────────────────────────────────── */
.pm-especiales-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pm-especial-card{background:var(--pm-card);border:1px solid var(--pm-border);border-radius:var(--pm-radius);padding:20px;transition:all .2s}
.pm-especial-card.pm-esp-ok{border-color:var(--pm-green);background:rgba(34,197,94,.06)}
.pm-especial-card.pm-esp-miss{border-color:var(--pm-red);background:rgba(239,68,68,.04)}
.pm-esp-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:4px}
.pm-esp-pts-badge{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(245,158,11,.15);color:var(--pm-accent);margin-bottom:14px}
.pm-esp-input-wrap{display:flex;flex-direction:column;gap:8px}
.pm-esp-select{width:100%;background:var(--pm-bg);border:1px solid var(--pm-border);border-radius:8px;padding:10px 12px;color:var(--pm-text);font-size:.95rem;font-family:inherit;cursor:pointer}
.pm-esp-select:focus{outline:none;border-color:var(--pm-accent)}.pm-esp-select:disabled{opacity:.6;cursor:not-allowed}
.pm-jugador-select-wrap{display:flex;flex-direction:column;align-items:center}
.pm-jugador-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--pm-accent);margin-bottom:8px}
.pm-esp-resultado-real{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:6px;padding:6px 12px;font-size:.85rem;color:var(--pm-green);margin-bottom:10px}
.pm-esp-puntos{font-size:.9rem;font-weight:700}

/* ── Leaderboard ───────────────────────────────────────────────────────────── */
.pm-leaderboard{background:var(--pm-card);border:1px solid var(--pm-border);border-radius:var(--pm-radius);overflow:hidden}
.pm-leaderboard table{width:100%;border-collapse:collapse}
.pm-leaderboard th{background:var(--pm-bg);padding:12px 16px;text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--pm-muted);font-weight:700}
.pm-leaderboard td{padding:14px 16px;border-top:1px solid var(--pm-border);font-size:.95rem}
.pm-leaderboard tr:hover td{background:rgba(255,255,255,.02)}
.pm-rank{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;width:40px}
.pm-rank-1{color:#fbbf24}.pm-rank-2{color:#94a3b8}.pm-rank-3{color:#d97706}
.pm-pts-big{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.3rem;color:var(--pm-accent)}
.pm-highlight td{background:rgba(245,158,11,.06)}

/* ── Modals ────────────────────────────────────────────────────────────────── */
.pm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:none}
.pm-modal-overlay.active{display:block}
.pm-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;display:none;width:90%;max-width:460px}
.pm-modal.pm-modal-open{display:block}
.pm-modal-content{background:var(--pm-surface);border:1px solid var(--pm-border);border-radius:var(--pm-radius);padding:32px;box-shadow:var(--pm-shadow)}
.pm-modal-content h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem;margin-bottom:20px;text-transform:uppercase}
.pm-modal-actions{display:flex;gap:10px;margin-top:20px}
.pm-codigo-result{text-align:center;margin-top:20px}
.pm-codigo-badge{font-family:monospace;font-size:2rem;font-weight:700;letter-spacing:8px;background:var(--pm-bg);padding:16px;border-radius:8px;margin-top:12px;color:var(--pm-accent);border:2px dashed var(--pm-border)}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:900px){.pm-grupos-row{grid-template-columns:1fr}}
@media(max-width:640px){
  .pm-nav{padding:0 12px;gap:12px}.pm-main{padding:12px}
  .pm-fase-tabs{gap:3px}.pm-tab-btn{padding:6px 10px;font-size:.82rem}
  .pm-elim-match{grid-template-columns:1fr;gap:8px}
  .pm-elim-local,.pm-elim-visit{justify-content:center}
  .pm-elim-result{font-size:1.6rem}
  .pm-especiales-grid{grid-template-columns:1fr}
}

/* ── Banderas ──────────────────────────────────────────────────────────────── */
/* Alineación en tabla de clasificación */
.pm-col-equipo img { vertical-align: middle; border-radius: 1px; }

/* Partido row: bandera a la derecha del equipo local, izquierda del visitante */
.pm-pr-local { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pm-pr-visit { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
/* La bandera del local va después del texto, la del visitante antes */
.pm-pr-local img { order: 2; margin-right: 0; margin-left: 4px; }
.pm-pr-visit img { order: -1; margin-right: 4px; margin-left: 0; }

/* Eliminatoria cards: banderas junto al nombre */
.pm-elim-name { display: flex; align-items: center; gap: 6px; }
.pm-elim-local  .pm-elim-name { flex-direction: row-reverse; }
.pm-elim-local  .pm-elim-name img { margin-left: 6px; margin-right: 0; }
.pm-elim-visit  .pm-elim-name { flex-direction: row; }

/* Clasificación: contenido de celda equipo alineado */
.pm-tabla-clasif .pm-col-equipo { white-space: nowrap; }
.pm-tabla-clasif .pm-col-equipo img { vertical-align: middle; margin-bottom: 1px; }

/* ── Predicción del usuario en partidos finalizados ───────────────────────── */
.pm-result-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* Resultado real — igual que antes */
.pm-result-block .pm-pr-result { line-height: 1; }

/* Predicción del usuario debajo del resultado real */
.pm-pred-display {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 1px;
  line-height: 1.4;
}
/* Resultado exacto: verde con fondo */
.pm-pred-exact {
  background: rgba(34, 197, 94, .15);
  color: var(--pm-green);
}
/* Ganador correcto pero no exacto: azul */
.pm-pred-ok {
  background: rgba(59, 130, 246, .12);
  color: var(--pm-accent2);
}
/* Fallo: gris apagado */
.pm-pred-miss {
  background: rgba(100, 116, 139, .12);
  color: var(--pm-muted);
  text-decoration: line-through;
}

/* ── Input de predicción — sin flechas spinner ────────────────────────────── */
.pm-pred-score::-webkit-outer-spin-button,
.pm-pred-score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pm-pred-score[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}
/* Aspecto mejorado: más ancho, centrado, cursor de texto */
.pm-pred-score {
  width: 42px;
  height: 36px;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  cursor: text;
  border-radius: 6px;
  border: 1.5px solid var(--pm-border);
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: 'Barlow Condensed', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.pm-pred-score:focus {
  outline: none;
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.pm-pred-score:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ── Botón icono info ──────────────────────────────────────────────────────── */
.pm-btn-icon {
  padding: 8px 10px;
  font-size: 1rem;
  background: transparent;
  border: 1.5px solid var(--pm-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  line-height: 1;
}
.pm-btn-icon:hover { border-color: var(--pm-accent2); background: rgba(59,130,246,.08); }

/* ── Modal ancho ───────────────────────────────────────────────────────────── */
.pm-modal-wide { max-width: 560px; }

/* ── Info puntuación ───────────────────────────────────────────────────────── */
.pm-info-puntos { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }

.pm-info-section {
  background: var(--pm-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  overflow: hidden;
}
.pm-info-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--pm-muted);
  padding: 10px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--pm-border);
}
.pm-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: 12px;
}
.pm-info-row:last-child { border-bottom: none; }
.pm-info-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--pm-text);
  display: block;
}
.pm-info-desc {
  font-size: .75rem;
  color: var(--pm-muted);
  display: block;
  margin-top: 1px;
}
.pm-info-pts {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--pm-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-info-empty { color: var(--pm-muted); font-size: .85rem; padding: 10px 16px; margin: 0; }

.pm-info-fases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
}
.pm-info-fase-badge {
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(59,130,246,.12);
  color: var(--pm-accent2);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.pm-info-note {
  font-size: .78rem;
  color: var(--pm-muted);
  line-height: 1.5;
  padding: 0 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════════════════════════════════════ */
.pm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--pm-card);
  border: 1px solid var(--pm-border);
  border-radius: 40px;
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pm-text);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 9999;
  opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  white-space: nowrap;
  pointer-events: none;
}
.pm-toast.pm-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pm-toast-ok   { border-color: var(--pm-green); }
.pm-toast-err  { border-color: var(--pm-red); }
.pm-toast-info { border-color: var(--pm-accent2); }
.pm-toast-icon { font-size: 1rem; }
.pm-toast-ok   .pm-toast-icon { color: var(--pm-green); }
.pm-toast-err  .pm-toast-icon { color: var(--pm-red); }
.pm-toast-info .pm-toast-icon { color: var(--pm-accent2); }

/* ══════════════════════════════════════════════════════════════════════════════
   BARRA DE PROGRESO DE PREDICCIONES
   ══════════════════════════════════════════════════════════════════════════════ */
.pm-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.pm-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.pm-progress-fraction {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  color: var(--pm-text);
  white-space: nowrap;
}
.pm-progress-pct {
  font-size: .72rem;
  font-weight: 600;
  color: var(--pm-muted);
  white-space: nowrap;
}
.pm-progress-done { color: var(--pm-green) !important; }

.pm-progress-bar-bg {
  height: 5px;
  background: var(--pm-border);
  border-radius: 99px;
  overflow: hidden;
}
.pm-progress-bar-fill {
  height: 100%;
  background: var(--pm-accent2);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.pm-progress-fill-done { background: var(--pm-green); }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — COMPLETO
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Base móvil (< 640px) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Navbar */
  .pm-nav {
    padding: 0 10px;
    gap: 8px;
    height: 52px;
  }
  .pm-nav-brand { font-size: 1rem; letter-spacing: 0; }
  .pm-nav-btn   { padding: 6px 10px; font-size: .82rem; }
  .pm-nav-user  { gap: 8px; font-size: .8rem; }

  /* Main */
  .pm-main { padding: 10px; }

  /* View header */
  .pm-view-header { margin-bottom: 12px; gap: 8px; }
  .pm-view-header h2 { font-size: 1.4rem; }

  /* Buttons */
  .pm-btn { padding: 8px 12px; font-size: .85rem; }
  .pm-btn-icon { padding: 7px 9px; }

  /* ── Grupos grid: 1 columna en móvil ──────────────────────────────────── */
  .pm-grupos-grid  { grid-template-columns: 1fr; }
  .pm-comps-grid   { grid-template-columns: 1fr; }
  .pm-grupos-row   { grid-template-columns: 1fr; }

  /* ── Tabs de fases ────────────────────────────────────────────────────── */
  .pm-fase-tabs    { gap: 3px; padding: 4px; margin-bottom: 12px; overflow-x: auto; flex-wrap: nowrap; }
  .pm-tab-btn      { padding: 6px 10px; font-size: .78rem; flex-shrink: 0; }

  /* ── Tabla clasificación: compacta ────────────────────────────────────── */
  .pm-tabla-clasif table  { font-size: .72rem; }
  .pm-tabla-clasif th,
  .pm-tabla-clasif td     { padding: 5px 4px; }
  .pm-col-equipo          { min-width: 90px; }
  .pm-posicion            { width: 16px; height: 16px; font-size: .65rem; margin-right: 3px; }

  /* ── Partido row: layout vertical en móvil ────────────────────────────── */
  .pm-partido-row {
    grid-template-columns: 44px 1fr 40px;
    gap: 4px;
    padding: 6px 8px;
  }
  .pm-pr-hora   { font-size: .6rem; }
  .pm-pr-team   { font-size: .78rem; }
  .pm-pr-result { font-size: 1.1rem; padding: 0 4px; }
  .pm-pred-score { width: 30px; height: 28px; font-size: .85rem; }
  .pm-pr-pts    { font-size: .7rem; min-width: 36px; }

  /* ── Eliminatoria cards ───────────────────────────────────────────────── */
  .pm-elim-match {
    grid-template-columns: 1fr auto 1fr;
    padding: 10px;
    gap: 6px;
  }
  .pm-elim-name  { font-size: .95rem; }
  .pm-elim-result { font-size: 1.6rem; letter-spacing: 2px; }

  /* ── Especiales ───────────────────────────────────────────────────────── */
  .pm-especiales-grid { grid-template-columns: 1fr; }

  /* ── Leaderboard ──────────────────────────────────────────────────────── */
  .pm-leaderboard th,
  .pm-leaderboard td  { padding: 10px 8px; font-size: .82rem; }

  /* ── Modals ───────────────────────────────────────────────────────────── */
  .pm-modal         { width: 95%; }
  .pm-modal-content { padding: 20px; }
  .pm-modal-wide    { max-width: 95%; }

  /* ── Toast ────────────────────────────────────────────────────────────── */
  .pm-toast { bottom: 16px; font-size: .82rem; padding: 8px 16px; max-width: 90vw; white-space: normal; }

  /* ── Header grupos-comp: apilado vertical ─────────────────────────────── */
  #pm-view-grupos-comp .pm-view-header { flex-direction: column; align-items: flex-start; }
  #pm-view-grupos-comp .pm-view-header > div:last-child { margin-left: 0 !important; width: 100%; justify-content: flex-start; }

  /* ── Puntos header compacto ───────────────────────────────────────────── */
  .pm-pts-header-card   { padding: 4px 10px; gap: 8px; }
  .pm-pts-header-total  { font-size: 1.4rem; }
  .pm-pts-header-sub    { font-size: .68rem; }

  /* ── Progress bar compacto ───────────────────────────────────────────── */
  .pm-progress-wrap  { min-width: 90px; }
  .pm-progress-fraction { font-size: .82rem; }
  .pm-progress-pct   { font-size: .68rem; }
  .pm-progress-bar-bg { height: 4px; }

  /* ── Grupos card ──────────────────────────────────────────────────────── */
  .pm-grupo-card { padding: 14px; }
  .pm-grupo-card h3 { font-size: 1rem; }
}

/* ── Tablet (641–900px) ───────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .pm-main           { padding: 14px; }
  .pm-grupos-row     { grid-template-columns: 1fr 1fr; }
  .pm-comps-grid     { grid-template-columns: 1fr 1fr; }
  .pm-fase-tabs      { overflow-x: auto; flex-wrap: nowrap; }
  .pm-tab-btn        { flex-shrink: 0; }
  .pm-modal          { width: 80%; }
}

/* ── Alturas mínimas: evitar overflow vertical en móvil ──────────────────── */
@media (max-height: 700px) {
  .pm-modal-content  { max-height: 80vh; overflow-y: auto; }
  .pm-log-container  { max-height: 200px; }
}

/* ── Safe area para iPhone con notch ─────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pm-nav   { padding-top: env(safe-area-inset-top, 0); }
  .pm-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BALÓN DE FÚTBOL (GSAP)
   ══════════════════════════════════════════════════════════════════════════════ */
#pm-ball {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;          /* por encima del contenido, por debajo de modals (200) */
  pointer-events: none; /* no interfiere con clicks */
  line-height: 1;
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOGGLE DE COLAPSO: visible solo en pantalla de 1 columna (< 900px)
   ══════════════════════════════════════════════════════════════════════════════ */

/* En pantalla ancha: ocultar el icono y deshabilitar cursor pointer */
@media (min-width: 900px) {
  .pm-colapso-icon      { display: none; }
  .pm-grupo-header      { cursor: default; }
  .pm-grupo-header:hover { background: var(--pm-surface); } /* sin hover effect */
}

/* En pantalla estrecha: mostrar icono y mantener pointer */
@media (max-width: 899px) {
  .pm-colapso-icon { display: inline-block; }
  .pm-grupo-header { cursor: pointer; }
}

/* ── Banner: especiales bloqueados por inicio de competición ──────────────── */
.pm-esp-locked-banner {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--pm-radius);
  padding: 12px 18px;
  font-size: .9rem;
  color: var(--pm-accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pm-esp-locked-banner span { color: var(--pm-muted); font-size: .8rem; }