:root {
      --bg:       #080C1E;
      --surface:  #0F1428;
      --card:     #161B38;
      --card2:    #1C2240;
      --border:   #2A3060;
      --gold:     #F5C518;
      --silver:   #CBD5E1;
      --bronze:   #CD7F32;
      --green:    #22C55E;
      --red:      #EF4444;
      --blue:     #3B82F6;
    }
    * { box-sizing: border-box; }
    body {
      background: var(--bg);
      color: #E2E8F0;
      font-family: 'Inter', sans-serif;
      margin: 0;
    }
    .bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: .05em; }

    /* ── scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    /* Hide tab nav scrollbar on all browsers */
    #tab-nav-scroll::-webkit-scrollbar { display: none; }
    #tab-nav-scroll { scrollbar-width: none; }

    /* ── header gradient ── */
    .header-bg {
      background: linear-gradient(135deg,
        #0A0E2A 0%, #1A1040 30%, #0D1830 60%, #081A28 100%);
      border-bottom: 2px solid var(--gold);
      position: relative;
      overflow: hidden;
    }
    .header-bg::before {
      content: '';
      position: absolute; inset: 0;
      background: url('../wc2026-bg.png') center/cover no-repeat;
      opacity: .12;
    }
    .header-bg::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 60% 0%, rgba(245,197,24,.07) 0%, transparent 65%);
    }
    .header-inner { position: relative; z-index: 1; }
    /* ── Botón cambio de modo (porra ↔ público) ── */
    .mode-switch-btn {
      margin-left: auto; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .35rem .8rem; border-radius: 20px;
      font-size: .72rem; font-weight: 700; letter-spacing: .04em;
      white-space: nowrap; cursor: pointer;
      border: 1.5px solid; transition: all .2s;
      -webkit-tap-highlight-color: transparent;
    }
    .mode-switch-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
    .mode-switch-btn:active { transform: translateY(0); }
    .mode-switch-btn.to-public {
      color: #94A3B8; border-color: #374151; background: transparent;
    }
    .mode-switch-btn.to-porra {
      color: var(--gold); border-color: var(--gold);
      background: rgba(245,197,24,.1);
    }
    @media (max-width: 640px) {
      .mode-switch-btn { font-size: .65rem; padding: .28rem .6rem; }
    }
    /* Contenedor único: mismo ancho y márgenes en cabecera, nav y contenido */
    .page-shell {
      width: 100%;
      max-width: 80rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: .75rem;
      padding-right: .75rem;
    }
    @media (min-width: 640px) {
      .page-shell { padding-left: 1rem; padding-right: 1rem; }
    }
    @media (min-width: 768px) {
      .page-shell { padding-left: 2.5rem; padding-right: 2.5rem; }
    }
    .wc-logo {
      height: 72px; width: auto;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
    }
    @media (max-width:640px) { .wc-logo { height: 52px; } }
    .wc-stripe {
      height: 4px;
      background: linear-gradient(90deg, #B91C1C, #EAB308, #16A34A, #2563EB, #7C3AED, #DB2777);
    }

    /* ── cards ── */
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      transition: border-color .2s;
    }
    .card:hover { border-color: rgba(245,197,24,.3); }

    /* ── podium ── */
    .podium-wrap {
      display: flex; align-items: flex-end; justify-content: center;
      gap: .75rem; margin-bottom: 1.5rem; padding-top: 1rem;
    }
    .podium-col {
      display: flex; flex-direction: column; align-items: center;
      flex: 1; max-width: 220px; min-width: 0;
    }
    .podium-player {
      width: 100%; text-align: center; padding: 1rem .75rem .9rem;
      border-radius: 12px 12px 0 0; border: 1px solid var(--border);
      border-bottom: none; position: relative;
    }
    .podium-score {
      font-size: 1.65rem;
      line-height: 1.1;
      margin-top: .35rem;
      letter-spacing: .02em;
    }
    .podium-prize {
      font-size: .85rem;
      font-weight: 800;
      margin-top: .35rem;
    }
    .podium-block {
      width: 100%; border-radius: 0 0 6px 6px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: .06em;
      line-height: 1;
    }
    .podium-1st .podium-player { background: linear-gradient(180deg,#2A2000,#1A1508); border-color: var(--gold); margin-bottom: 0; }
    .podium-1st .podium-block  { height: 90px;  background: linear-gradient(180deg,#F5C518,#B8860B); color: #1a1000; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
    .podium-2nd .podium-player { background: linear-gradient(180deg,#1E2228,#111418); border-color: var(--silver); }
    .podium-2nd .podium-block  { height: 60px;  background: linear-gradient(180deg,#CBD5E1,#94A3B8); color: #0f172a; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
    .podium-3rd .podium-player { background: linear-gradient(180deg,#1E1510,#100C08); border-color: var(--bronze); }
    .podium-3rd .podium-block  { height: 40px;  background: linear-gradient(180deg,#CD7F32,#8B5A2B); color: #1a0d00; text-shadow: 0 1px 0 rgba(255,255,255,.2); }
    @media (max-width: 480px) {
      .podium-wrap { gap: .4rem; padding-top: .5rem; }
      .podium-score { font-size: 1.35rem; }
      .podium-1st .podium-block { height: 60px; font-size: 1.75rem; }
      .podium-2nd .podium-block { height: 40px; font-size: 1.5rem; }
      .podium-3rd .podium-block { height: 28px; font-size: 1.35rem; }
    }
    .prizes-banner {
      text-align: center; padding: .75rem 1rem; margin-bottom: 1.25rem;
      background: linear-gradient(90deg, rgba(245,197,24,.08), rgba(245,197,24,.15), rgba(245,197,24,.08));
      border: 1px solid rgba(245,197,24,.25); border-radius: 12px;
    }
    .rest-standings { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-bottom: 1.5rem; }
    @media (max-width:640px) { .rest-standings { grid-template-columns: repeat(2,1fr); } }
    @media (max-width:480px) { .rest-standings { grid-template-columns: 1fr; } }
    .rest-pts-block { white-space: nowrap; flex-shrink: 0; }

    /* ── match meta ── */
    .match-header-center { text-align: center; padding: .75rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; }
    /* Grid 1fr auto 1fr: garantiza que "vs" y la hora de abajo compartan el mismo eje central */
    .match-teams-block {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      column-gap: .6rem;
      align-items: start;
      width: 100%;
    }
    /* Columna de equipo: flex-column para que el badge FIFA quede justo bajo el nombre */
    .match-side-home { display: flex; flex-direction: column; align-items: flex-end;   gap: .2rem; }
    .match-side-away { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
    /* Fila interna: bandera + nombre */
    .match-name-row { display: flex; align-items: center; gap: .45rem; }
    /* Columna central "vs": altura = altura del flag (2.3rem) para alinearse con la fila de nombres */
    .match-vs-wrap {
      display: flex; align-items: center; justify-content: center;
      min-height: 2.3rem;
    }
    /* Badge FIFA — alineado con su equipo */
    .match-rank-inner          { display: flex; }
    .match-rank-inner.home     { justify-content: flex-end; }
    .match-rank-inner.away     { justify-content: flex-start; }
    .match-fifa-rank {
      font-size: .58rem; font-weight: 700; letter-spacing: .03em;
      color: #56657A; background: transparent;
      border: 1px solid #2A3A4D; border-radius: 20px;
      padding: .07rem .38rem; white-space: nowrap;
    }
    .match-flag { font-size: 2.3rem; line-height: 1; }
    .match-team-name { font-weight: 800; font-size: 1.3rem; color: #E2E8F0; }
    .match-vs { color: #64748B; font-size: .85rem; font-weight: 600; }
    .match-score-big { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--gold); letter-spacing: .08em; margin-top: .35rem; line-height: 1; }
    .match-played-time { font-size: .72rem; color: #64748B; font-weight: 600; letter-spacing: .03em; margin-top: .25rem; }
    .match-scorers { display: flex; align-items: flex-start; justify-content: center; gap: .6rem; margin-top: .5rem; }
    .match-scorers .ms-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
    .match-scorers .ms-col-home { align-items: flex-end; }
    .match-scorers .ms-col-away { align-items: flex-start; }
    .match-scorers .ms-sep { width: 1px; align-self: stretch; background: rgba(148,163,184,.25); }
    .match-scorers .ms-line { font-size: .72rem; color: #94A3B8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .match-scorers .ms-name { color: #CBD5E1; font-weight: 600; }
    .match-scorers .ms-name.ms-og { color: #F87171; }
    /* Nombres en árabe/persa: fuente más legible y dirección RTL */
    .match-scorers .ms-name-ar { font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif; font-size: .68rem; unicode-bidi: embed; }
    .match-scorers .ms-og-tag { display: inline-block; font-size: .62rem; font-weight: 800; color: #fff; background: #DC2626; border-radius: 3px; padding: 0 .3rem; margin-left: .2rem; vertical-align: middle; line-height: 1.35; }
    .match-scorers .ms-pen-tag { display: inline-block; font-size: .62rem; font-weight: 700; color: #fff; background: #7C3AED; border-radius: 3px; padding: 0 .3rem; margin-left: .2rem; vertical-align: middle; line-height: 1.35; letter-spacing: .02em; }
    .match-scorers .ms-min { color: var(--gold); font-weight: 700; }
    .match-scorers .ms-col-home .ms-min { margin-left: .25rem; }
    .match-scorers .ms-col-away .ms-min { margin-right: .25rem; }
    .match-scorers .ms-min .ms-extra { color: #FDE047; font-weight: 800; }
    @media (max-width: 480px) {
      .match-score-big { font-size: 2rem; }
      .match-flag { font-size: 1.85rem; }
      .match-vs-wrap { min-height: 1.85rem; }
      .match-team-name { font-size: 1.05rem; }
      .match-scorers .ms-line { font-size: .66rem; }
    }
    .match-meta-row { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
    .match-venue { font-size: .78rem; color: #94A3B8; }
    .match-time { font-size: .85rem; font-weight: 700; color: #93C5FD; }
    .tv-badge {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .68rem; font-weight: 800; padding: .2rem .55rem; border-radius: 4px;
      letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
      cursor: pointer; transition: transform .15s, filter .15s, border-color .15s;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .tv-badge:hover { transform: translateY(-1px); filter: brightness(1.12); }
    .tv-badge:active { transform: translateY(0); }
    .tv-dazn { background: #111; color: #fff; border: 1px solid #333; }
    .tv-tve  { background: #1E3A8A; color: #fff; border: 1px solid #3B82F6; }
    /* Partidos Top — badges TV más pequeños */
    .tpt-tv-row .tv-badge { font-size: .58rem; padding: .12rem .38rem; }

    /* ── score badges ── */
    .badge-exact   { background: rgba(34,197,94,.2);  color: #4ADE80; border: 1px solid rgba(34,197,94,.3); }
    .badge-sign    { background: rgba(59,130,246,.2); color: #93C5FD; border: 1px solid rgba(59,130,246,.3); }
    .badge-miss    { background: rgba(239,68,68,.15); color: #FCA5A5; border: 1px solid rgba(239,68,68,.25); }
    .badge-pending { background: rgba(100,116,139,.15); color: #94A3B8; border: 1px solid rgba(100,116,139,.25); }

    /* ── tab nav ── */
    .tab-btn {
      padding: .7rem 1.5rem;
      border-radius: 10px;
      font-weight: 700;
      font-size: .95rem;
      cursor: pointer;
      transition: all .2s;
      color: #94A3B8;
      border: 1px solid transparent;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tab-btn.active {
      background: var(--card2);
      border-color: var(--gold);
      color: var(--gold);
    }
    .tab-btn:hover:not(.active) { color: #CBD5E1; background: var(--card2); }

    /* ── dropdown "Más" (solo escritorio) ── */
    .tab-more-wrap { position: relative; flex-shrink: 0; }
    .tab-more-btn.has-active {
      border-color: var(--gold);
      color: var(--gold);
      background: var(--card2);
    }
    .tab-more-dropdown {
      position: absolute;
      top: calc(100% + .4rem);
      right: 0;
      min-width: 230px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
      padding: .4rem;
      display: flex;
      flex-direction: column;
      gap: .25rem;
      z-index: 60;
    }
    .tab-more-dropdown.hidden { display: none; }
    .tab-more-dropdown .tab-btn {
      display: block;
      width: 100%;
      text-align: left;
      white-space: nowrap;
    }

    /* ── alternancia escritorio / móvil ── */
    .desktop-nav { display: block; }
    .mobile-nav  { display: none; }
    .desktop-nav .page-shell { flex-wrap: nowrap; }
    @media (min-width: 768px) and (max-width: 1180px) {
      .desktop-nav .tab-btn { padding: .6rem .85rem; font-size: .82rem; }
    }
    @media (min-width: 768px) and (max-width: 1050px) {
      body.mode-guest .desktop-nav .tab-btn { padding: .55rem .6rem; font-size: .78rem; }
    }
    @media (min-width: 768px) and (max-width: 920px) {
      .desktop-nav .tab-btn { padding: .55rem .65rem; font-size: .78rem; }
      body.mode-guest .desktop-nav .tab-btn { padding: .5rem .45rem; font-size: .74rem; }
    }
    @media (max-width: 767px) {
      .desktop-nav { display: none; }
      .mobile-nav  { display: block; }
      /* el buscador inline se sustituye por el panel del icono 🔍 de la barra */
      .matches-row > .team-search-wrap { display: none; }
    }

    @media (max-width: 640px) {
      .tab-btn { padding: .5rem .9rem; font-size: .8rem; border-radius: 8px; }
    }
    @media (max-width: 400px) {
      .tab-btn { padding: .45rem .7rem; font-size: .75rem; }
    }

    /* ── nav: botón hamburguesa + menú lateral ── */
    .nav-burger {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px; height: 40px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--card2);
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color .2s;
    }
    .nav-burger:hover { border-color: var(--gold); }
    .nav-burger span {
      display: block;
      height: 2.5px;
      width: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: transform .25s, opacity .25s;
    }
    body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
    body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    .nav-current {
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--gold);
      letter-spacing: .02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* botón de búsqueda en la barra superior (móvil, sólo pestaña Partidos) */
    .nav-search-btn {
      position: relative;
      margin-left: auto;
      flex-shrink: 0;
      height: 40px;
      padding: 0 .7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card2);
      font-size: 1.05rem;
      line-height: 1;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .nav-search-label {
      font-size: .82rem;
      font-weight: 600;
      color: #94A3B8;
      white-space: nowrap;
    }
    .nav-search-btn[hidden] { display: none; }
    .nav-search-btn:hover,
    .nav-search-btn:focus-visible { border-color: var(--gold); }
    .nav-search-btn:active { background: var(--surface); }
    .nav-search-dot {
      position: absolute;
      top: -3px; right: -3px;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--gold);
      border: 2px solid var(--surface);
    }
    .nav-search-dot[hidden] { display: none; }

    /* panel deslizante de búsqueda (móvil) */
    .ts-sheet { position: fixed; inset: 0; z-index: 120; display: none; }
    .ts-sheet.open { display: block; }
    .ts-sheet-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity .2s;
    }
    .ts-sheet.open .ts-sheet-backdrop { opacity: 1; }
    .ts-sheet-panel {
      position: absolute;
      top: 0; left: 0; right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 12px 32px rgba(0,0,0,.5);
      padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
      transform: translateY(-100%);
      transition: transform .22s ease;
    }
    .ts-sheet.open .ts-sheet-panel { transform: translateY(0); }
    .ts-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .75rem;
    }
    .ts-sheet-title { font-weight: 800; font-size: 1rem; color: #E2E8F0; }
    .ts-sheet-close {
      width: 2rem; height: 2rem;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: 8px;
      background: rgba(255,255,255,.06);
      color: #94A3B8; font-size: .85rem; cursor: pointer;
    }
    .ts-sheet-close:hover { background: rgba(252,165,165,.15); color: #FCA5A5; }
    .ts-sheet-body .team-search-wrap { width: 100%; }
    .nav-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(2px);
      opacity: 0; pointer-events: none;
      transition: opacity .25s;
      z-index: 50;
    }
    body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
    .nav-drawer {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 280px; max-width: 82vw;
      background: var(--surface);
      border-right: 1px solid var(--border);
      box-shadow: 4px 0 24px rgba(0,0,0,.45);
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
      z-index: 60;
      padding: 1rem .9rem 1.4rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: .4rem;
    }
    body.nav-open .nav-drawer { transform: translateX(0); }
    .nav-drawer-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: .5rem; padding-bottom: .6rem;
      border-bottom: 1px solid var(--border);
    }
    .nav-drawer-title {
      font-weight: 800; font-size: .8rem;
      text-transform: uppercase; letter-spacing: .08em;
      color: #94A3B8;
    }
    .nav-drawer-close {
      width: 34px; height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--card2);
      color: #CBD5E1;
      cursor: pointer; font-size: 1rem;
      transition: all .2s;
    }
    .nav-drawer-close:hover { border-color: var(--gold); color: var(--gold); }
    .nav-drawer .tab-btn {
      display: block;
      width: 100%;
      text-align: left;
      white-space: normal;
      font-size: .95rem;
    }

    /* ── porra mode (invitado / participante) ── */
    .porra-toggle {
      margin-left: auto;
      flex-shrink: 0;
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .5rem .85rem;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      color: #CBD5E1;
      background: rgba(15, 20, 40, .6);
      border: 1px solid rgba(148, 163, 184, .4);
      transition: all .2s;
      white-space: nowrap;
    }
    .porra-toggle:hover { border-color: var(--gold); color: var(--gold); }
    body.porra-unlocked .porra-toggle {
      border-color: var(--gold);
      color: var(--gold);
      background: rgba(245, 197, 24, .08);
    }
    @media (max-width: 640px) {
      .porra-toggle { padding: .4rem .7rem; font-size: .72rem; }
      .porra-toggle .porra-toggle-text { display: none; }
    }    /* En modo invitado, ocultar las pestañas con datos nominales */
    body:not(.porra-unlocked) .tab-btn[data-tab="standings"],
    body:not(.porra-unlocked) .tab-btn[data-tab="progression"],
    body:not(.porra-unlocked) .tab-btn[data-tab="stats"],
    body:not(.porra-unlocked) .tab-btn[data-tab="honor"] {
      display: none;
    }
    .porra-lock-note {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      text-align: center;
      padding: .9rem 1rem;
      border-radius: 10px;
      background: var(--card2);
      border: 1px dashed rgba(148, 163, 184, .35);
      color: #94A3B8;
      font-size: .78rem;
      font-weight: 600;
      line-height: 1.3;
    }

    /* ── phase filter ── */
    .phase-btn {
      padding: .35rem .9rem;
      border-radius: 20px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      color: #94A3B8;
      transition: all .2s;
    }
    .phase-btn.active { background: var(--gold); color: #000; border-color: var(--gold); }
    .phase-btn:hover:not(.active) { border-color: var(--gold); color: var(--gold); }

    /* ── match card ── */
    .match-row {
      position: relative;
      border-left: 3px solid var(--border);
      transition: border-color .2s, background .2s;
      overflow: hidden;
    }
    .match-row:hover { border-left-color: var(--gold); background: rgba(245,197,24,.03); }
    .match-row.played { border-left-color: rgba(34,197,94,.5); }

    /* ── next upcoming match highlight ── */
    .match-row.next-match {
      border: 2px solid var(--gold);
      border-left: 4px solid var(--gold);
      background: rgba(245,197,24,.07);
      box-shadow: 0 0 0 1px rgba(245,197,24,.25), 0 0 18px rgba(245,197,24,.18);
    }
    .match-row.next-match:hover { background: rgba(245,197,24,.1); }
    /* ── partido en curso ── */
    .match-row.live-match {
      border: 2px solid #3B82F6;
      border-left: 4px solid #3B82F6;
      background: rgba(59,130,246,.06);
      animation: livePulse 2.4s ease-in-out infinite;
    }
    .match-row.live-match:hover { background: rgba(59,130,246,.12); }
    @keyframes livePulse {
      0%,100% {
        border-color: rgba(59,130,246,.5);
        background: rgba(59,130,246,.05);
        box-shadow: 0 0 0 1px rgba(59,130,246,.28), 0 0 14px rgba(59,130,246,.14);
      }
      50% {
        border-color: rgba(59,130,246,1);
        background: rgba(59,130,246,.12);
        box-shadow: 0 0 0 4px rgba(59,130,246,.55), 0 0 34px rgba(59,130,246,.42);
      }
    }
    .live-tag {
      color: #fff;
      background: #2563EB;
      padding: .1rem .55rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .05em;
      animation: liveDot .9s ease-in-out infinite;
    }
    @keyframes liveDot {
      0%,100% { opacity: 1; }
      50%      { opacity: .45; }
    }
    .live-ball {
      display: inline-block;
      margin-right: .3em;
      animation: liveBounce .55s cubic-bezier(.36,.07,.19,.97) infinite alternate;
    }
    @keyframes liveBounce {
      from { transform: translateY(0); }
      to   { transform: translateY(-6px); }
    }
    .next-match-tag {
      color: #1a1a1a;
      background: var(--gold);
      padding: .1rem .5rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .finished-tag {
      color: #04220f;
      background: var(--green);
      padding: .1rem .5rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    /* ── marcador EN DIRECTO ── */
    .match-score-big.match-score-live { color: #60A5FA; }
    .live-dot {
      display: inline-block;
      width: .55rem; height: .55rem;
      border-radius: 50%;
      background: #EF4444;
      margin-right: .35rem;
      box-shadow: 0 0 0 0 rgba(239,68,68,.6);
      animation: liveDotPulse 1.1s ease-out infinite;
      vertical-align: middle;
    }
    @keyframes liveDotPulse {
      0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
      70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
      100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    }
    .live-minute-pill {
      display: inline-flex;
      align-items: center;
      margin-top: .35rem;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .06em;
      color: #FCA5A5;
      background: rgba(239,68,68,.12);
      border: 1px solid rgba(239,68,68,.4);
      padding: .15rem .6rem;
      border-radius: 999px;
      text-transform: uppercase;
    }
    /* puntos provisionales por jugador */
    .brk-prov { opacity: .92; }
    .prov-tag {
      font-size: .6rem;
      font-weight: 700;
      color: #FCA5A5;
      margin-left: .2rem;
      letter-spacing: .03em;
      text-transform: uppercase;
      vertical-align: super;
    }
    .live-prov-score .prov-tag { color: inherit; opacity: .7; }

    /* ── clasificación provisional ── */
    .live-standings-banner {
      background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.05));
      border: 1px solid rgba(239,68,68,.4);
      border-radius: 14px;
      padding: .85rem 1rem;
      margin-bottom: 1rem;
    }
    .live-standings-banner.hidden { display: none; }
    .lsb-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
    .lsb-badge {
      font-weight: 800;
      font-size: .72rem;
      letter-spacing: .06em;
      color: #fff;
      background: #DC2626;
      padding: .2rem .6rem;
      border-radius: 999px;
      animation: liveDot .9s ease-in-out infinite;
      white-space: nowrap;
    }
    .lsb-text { font-size: .82rem; color: #FCA5A5; flex: 1 1 240px; min-width: 0; }
    .lsb-text strong { color: #FECACA; }
    .lsb-matches { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
    .lsb-match {
      display: inline-flex;
      align-items: center;
      font-size: .78rem;
      font-weight: 700;
      color: #FECACA;
      background: rgba(239,68,68,.12);
      border: 1px solid rgba(239,68,68,.3);
      padding: .2rem .55rem;
      border-radius: 8px;
    }
    .lsb-match-btn {
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .lsb-match-btn:hover {
      background: rgba(239,68,68,.25);
      border-color: rgba(239,68,68,.6);
    }
    .podium-prov { font-size: .68rem; font-weight: 700; color: #FCA5A5; margin-top: .15rem; }
    .rest-prov { font-size: .68rem; font-weight: 700; color: #FCA5A5; margin-left: .5rem; }
    .st-prov-row td { background: rgba(239,68,68,.04); }

    /* Flechas de cambio de posición */
    .st-pos-up {
      font-size: .95rem;
      font-weight: 700;
      color: #22C55E;
      margin-left: .3rem;
    }
    .st-pos-down {
      font-size: .95rem;
      font-weight: 700;
      color: #EF4444;
      margin-left: .3rem;
    }
    .st-pos-eq {
      font-size: 1.05rem;
      font-weight: 700;
      color: #9CA3AF;
      margin-left: .3rem;
    }

    .standings-prov-badge {
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .07em;
      color: #fff;
      background: #DC2626;
      padding: .15rem .45rem;
      border-radius: 999px;
      margin-right: .35rem;
      animation: liveDot .9s ease-in-out infinite;
      vertical-align: middle;
    }
    /* Banner "PROVISIONAL" de las clasificaciones deportivas del Mundial */
    .world-prov-banner {
      grid-column: 1 / -1;
      width: 100%;
      align-self: start;
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
      font-size: .78rem;
      font-weight: 600;
      color: #FCA5A5;
      background: rgba(239,68,68,.08);
      border: 1px solid rgba(239,68,68,.3);
      border-radius: 12px;
      padding: .55rem .8rem;
      margin-bottom: .85rem;
    }
    .world-prov-banner strong { color: #fff; }
    .world-prov-badge {
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .07em;
      color: #fff;
      background: #DC2626;
      padding: .15rem .5rem;
      border-radius: 999px;
      animation: liveDot .9s ease-in-out infinite;
      white-space: nowrap;
    }
    /* Píldora "EN JUEGO" en la cabecera de cada grupo */
    .tms-grp-live {
      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .06em;
      color: #fff;
      background: #DC2626;
      padding: .1rem .4rem;
      border-radius: 999px;
      vertical-align: middle;
      animation: liveDot .9s ease-in-out infinite;
    }
    /* Marcador en vivo en la tabla de partidos del modal de grupo */
    .tm-mt-live {
      color: #FCA5A5;
      font-weight: 800;
    }
    /* Récord provisional y marcador en vivo en el modal de equipo */
    .tm-prov-note {
      display: flex;
      align-items: center;
      gap: .4rem;
      flex-wrap: wrap;
      font-size: .72rem;
      font-weight: 600;
      color: #FCA5A5;
      margin-top: .5rem;
    }
    .tm-score.tm-live { color: #FCA5A5; font-weight: 800; }
    /* Etiqueta flotante en la esquina superior izquierda de la tarjeta:
       no ocupa línea propia ni deja hueco encima del partido. */
    .card-corner-tags {
      display: flex;
      align-items: center;
      margin-bottom: .55rem;
    }
    .card-corner-tag {
      flex: 1;
    }
    .card-corner-center {
      flex: 0 1 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-corner-tag-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
    .phase-corner-tag {
      color: #94A3B8;
      background: var(--card2);
      padding: .1rem .5rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .phase-corner-tag--group {
      color: #38BDF8;
      background: rgba(56,189,248,.12);
    }
    .match-live-row { text-align: center; margin-bottom: .75rem; }
    /* En móvil la tarjeta es estrecha y los tags se solaparían: los ponemos
       en una fila flex para que queden en la misma línea izq/dcha. */
    @media (max-width: 767px) {
      .card-corner-tags { justify-content: space-between; }
    }

    /* ── pulse when arriving at a match selected from the calendar ── */
    .match-row.match-pulse {
      animation: matchPulse 1s ease-out 2;
    }
    @keyframes matchPulse {
      0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.7);  border-color: var(--gold); background: rgba(245,197,24,.12); }
      35%  { box-shadow: 0 0 0 12px rgba(245,197,24,.32); border-color: var(--gold); background: rgba(245,197,24,.06); }
      100% { box-shadow: 0 0 0 0 rgba(245,197,24,0);   background: transparent; }
    }

    /* ── sparkline-like bar ── */
    .score-bar-wrap { background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; height: 6px; }
    .prog-deltas { display: flex; flex-direction: column; gap: .1rem; line-height: 1.35; }
    .standings-updated { font-size: .72rem; font-weight: 500; color: #64748B; }
    .score-bar { height: 6px; border-radius: 4px; transition: width .5s; }

    /* ── progression window selector pills ── */
    .prog-win-btn {
      padding: .25rem .75rem;
      border-radius: 20px;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--card2);
      color: #94A3B8;
      transition: all .15s;
      white-space: nowrap;
    }
    .prog-win-btn:hover:not(.prog-win-active) {
      border-color: #475569;
      color: #CBD5E1;
    }
    .prog-win-btn.prog-win-active {
      background: var(--gold);
      border-color: var(--gold);
      color: #0F172A;
    }
    @media (max-width: 480px) {
      .prog-win-btn { padding: .2rem .6rem; font-size: .74rem; }
    }

    /* ── loading ── */
    #loading {
      position: fixed; inset: 0; background: var(--bg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      z-index: 999; transition: opacity .4s;
    }
    .spinner {
      width: 48px; height: 48px;
      border: 4px solid var(--border);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── responsive table ── */
    .pred-table th, .pred-table td {
      padding: .5rem .75rem;
      text-align: center;
      white-space: nowrap;
    }
    .pred-table th { background: var(--card2); font-size: .75rem; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
    .pred-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
    @media (max-width: 640px) {
      .pred-table th, .pred-table td { padding: .4rem .5rem; font-size: .75rem; }
    }

    /* ── sortable headers (clasificación) ── */
    .pred-table th.st-sortable { cursor: pointer; user-select: none; transition: color .15s, background .15s; }
    .pred-table th.st-sortable:hover { color: #CBD5E1; background: rgba(255,255,255,.05); }
    .pred-table th.st-sortable.st-active { color: #fff; }
    .pred-table th .st-arrow { font-size: .6rem; margin-left: .25rem; opacity: .45; }
    .pred-table th.st-active .st-arrow { opacity: 1; color: var(--gold); }

    /* ── tooltip ── */
    .tooltip-wrap { position: relative; display: inline-block; }
    .tooltip-wrap .tt { 
      position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
      background: #1E2240; border: 1px solid var(--border);
      padding: .4rem .7rem; border-radius: 6px; white-space: nowrap;
      font-size: .75rem; opacity: 0; pointer-events: none;
      transition: opacity .15s; z-index: 10;
    }
    .tooltip-wrap:hover .tt { opacity: 1; }

    /* ── point breakdown chips ── */
    .brk-chip {
      display: inline-block;
      font-size: .62rem;
      padding: .1rem .4rem;
      border-radius: 4px;
      margin: .1rem;
      background: rgba(255,255,255,.06);
      color: #94A3B8;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: break-word;
      line-height: 1.3;
    }
    .brk-chip.ok  { background: rgba(34,197,94,.15); color: #4ADE80; }
    .brk-chip.miss { background: rgba(239,68,68,.1); color: #FCA5A5; }
    .brk-chip.pending { background: rgba(245,158,11,.1); color: #FCD34D; border: 1px solid rgba(245,158,11,.25); }

    /* ── day header ── */
    .day-header {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .6rem 0;
      margin-top: 1.25rem;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
      position: relative;
    }
    .day-header:first-child { margin-top: 0; }
    .day-header .day-name {
      font-weight: 700;
      font-size: .95rem;
      color: var(--gold);
      text-transform: capitalize;
    }
    .day-header .day-count {
      font-size: .75rem;
      color: #64748B;
      flex: 1;
    }
    .day-header .day-chevron {
      font-size: .7rem;
      color: #475569;
      transition: transform .2s;
      flex-shrink: 0;
      line-height: 1;
    }
    .day-header.collapsed .day-chevron { transform: rotate(-90deg); }
    .day-header.today-header .day-name { color: var(--green); }
    .day-header.today-header::before {
      content: "HOY";
      font-size: .58rem; font-weight: 900; letter-spacing: .08em;
      background: rgba(34,197,94,.18); color: var(--green);
      border: 1px solid rgba(34,197,94,.35);
      border-radius: 4px; padding: .1rem .35rem;
      flex-shrink: 0;
    }
    .day-matches {
      display: flex; flex-direction: column; gap: .75rem;
      padding-top: .75rem;
      overflow: hidden;
    }
    .day-matches.collapsed { display: none; }

    .matches-load-more {
      display: block;
      width: 100%;
      margin: .5rem 0 1rem;
      padding: .65rem 1rem;
      border-radius: 10px;
      border: 1px dashed var(--border);
      background: var(--card2);
      color: #94A3B8;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
      text-align: center;
    }
    .matches-load-more:hover {
      border-color: var(--gold);
      color: var(--gold);
      background: rgba(212,175,55,.06);
    }
    .matches-load-earlier { margin: 0 0 .75rem; }

    /* ── team search + filters (matches tab) ── */
    .matches-topbar {
      display: flex;
      flex-direction: column;
      gap: .65rem;
      margin-bottom: 1rem;
    }
    .matches-row {
      display: flex;
      align-items: flex-end;
      gap: 1rem;
    }
    .matches-row .matches-filter-group { flex: 1; min-width: 0; }
    .matches-filter-group { }
    .team-search-wrap {
      position: relative;
      flex-shrink: 0;
      width: 220px;
    }
    .team-search-input-wrap {
      display: flex;
      align-items: center;
      gap: .4rem;
      padding: .45rem .65rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--card2);
      transition: border-color .2s, box-shadow .2s;
    }
    .team-search-input-wrap:focus-within {
      border-color: var(--gold);
      box-shadow: 0 0 0 2px rgba(212,175,55,.12);
    }
    .team-search-icon { font-size: .85rem; opacity: .55; flex-shrink: 0; }
    #team-search-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      color: #E2E8F0;
      font-size: .82rem;
      font-family: inherit;
      outline: none;
    }
    #team-search-input::placeholder { color: #64748B; }
    #team-search-input::-webkit-search-cancel-button { display: none; }
    .team-search-clear {
      flex-shrink: 0;
      width: 1.35rem;
      height: 1.35rem;
      border: none;
      border-radius: 6px;
      background: rgba(255,255,255,.06);
      color: #94A3B8;
      font-size: .7rem;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .team-search-clear:hover { background: rgba(252,165,165,.15); color: #FCA5A5; }
    .team-search-suggest {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 50;
      margin: 0;
      padding: .35rem 0;
      list-style: none;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: 0 12px 32px rgba(0,0,0,.45);
      max-height: 260px;
      overflow-y: auto;
    }
    .team-suggest-item {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .55rem .75rem;
      cursor: pointer;
      transition: background .15s;
    }
    .team-suggest-item:hover,
    .team-suggest-item.active { background: rgba(212,175,55,.1); }
    .team-suggest-item .ts-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
    .team-suggest-item .ts-name { flex: 1; font-size: .82rem; font-weight: 600; color: #E2E8F0; min-width: 0; }
    .team-suggest-item .ts-count { font-size: .68rem; color: #64748B; flex-shrink: 0; }
    .team-filter-banner {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
      padding: .55rem .85rem;
      margin-bottom: .75rem;
      border-radius: 10px;
      border: 1px solid rgba(212,175,55,.25);
      background: rgba(212,175,55,.07);
      font-size: .8rem;
      color: #CBD5E1;
      position: sticky;
      top: 8px;
      z-index: 30;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 14px rgba(0,0,0,.28);
    }
    .team-filter-banner .tfb-text { flex: 1 1 auto; min-width: 0; }
    .team-filter-banner strong { color: var(--gold); font-weight: 700; }
    .team-filter-banner .tfb-clear {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .3rem .7rem;
      border-radius: 999px;
      border: 1px solid rgba(239,68,68,.45);
      background: rgba(239,68,68,.12);
      color: #FCA5A5;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .team-filter-banner .tfb-clear:hover {
      background: rgba(239,68,68,.9);
      border-color: rgba(239,68,68,.9);
      color: #fff;
    }

    /* ── week filter ── */
    .week-btn {
      padding: .35rem .85rem;
      border-radius: 20px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      color: #94A3B8;
      transition: all .2s;
    }
    .week-btn.active { background: #1E3A5F; color: #93C5FD; border-color: #3B82F6; }
    .week-btn:hover:not(.active) { border-color: #3B82F6; color: #93C5FD; }

    /* ── player strengths ── */
    .strength-card { border-left: 3px solid var(--border); }
    .strength-badge {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .72rem; font-weight: 800; padding: .25rem .6rem;
      border-radius: 20px; background: rgba(245,197,24,.12);
      border: 1px solid rgba(245,197,24,.35); color: var(--gold);
      text-transform: uppercase; letter-spacing: .04em;
    }
    .skill-rank-row {
      display: flex; align-items: center; gap: .5rem;
      padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
      font-size: .82rem;
    }
    .skill-rank-row:last-child { border-bottom: none; }
    .skill-rank-num {
      width: 1.5rem; height: 1.5rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 800; flex-shrink: 0;
    }
    .skill-rank-1 { background: rgba(245,197,24,.25); color: var(--gold); }
    .skill-rank-2 { background: rgba(203,213,225,.15); color: var(--silver); }
    .skill-rank-3 { background: rgba(205,127,50,.2); color: var(--bronze); }
    .skill-rank-n { background: rgba(100,116,139,.15); color: #64748B; }
    .skill-bar-wrap { background: rgba(255,255,255,.05); border-radius: 3px; height: 5px; flex: 1; min-width: 40px; }
    .skill-bar { height: 5px; border-radius: 3px; }
    .ranking-mini-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 520px) {
      .ranking-mini-grid { grid-template-columns: 1fr; }
    }
    .ranking-mini-card {
      padding: 0;
      overflow: hidden;
      transition: border-color .2s, transform .15s;
    }
    .ranking-mini-card:hover {
      border-color: rgba(245,197,24,.35);
      transform: translateY(-2px);
    }
    .ranking-mini-head {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .9rem 1.1rem;
      background: linear-gradient(135deg, rgba(245,197,24,.08) 0%, var(--card2) 60%);
      border-bottom: 1px solid var(--border);
    }
    .ranking-mini-head .rm-icon { font-size: 1.35rem; line-height: 1; }
    .ranking-mini-head h4 {
      margin: 0;
      font-size: .82rem;
      font-weight: 800;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.2;
    }
    .ranking-mini-body { padding: .85rem 1.1rem 1rem; }
    .ranking-mini-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .75rem;
      font-size: .88rem;
      padding: .5rem 0;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .ranking-mini-row:last-child { border-bottom: none; padding-bottom: 0; }
    .ranking-mini-row .rm-player {
      display: flex;
      align-items: center;
      min-width: 0;
      font-weight: 600;
      color: #E2E8F0;
    }
    .rank-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.65rem;
      height: 1.65rem;
      border-radius: 6px;
      font-size: .72rem;
      font-weight: 800;
      margin-right: .45rem;
      flex-shrink: 0;
    }
    .rank-pill-1 { background: rgba(245,197,24,.22); color: var(--gold); }
    .rank-pill-2 { background: rgba(203,213,225,.18); color: var(--silver); }
    .rank-pill-3 { background: rgba(205,127,50,.22); color: var(--bronze); }
    .rank-pill-4 { background: rgba(100,116,139,.18); color: #94A3B8; }
    .ranking-mini-row .rm-val {
      font-size: .8rem;
      color: #94A3B8;
      white-space: nowrap;
      font-weight: 500;
    }

    /* ── trend forecast ── */
    .forecast-card {
      background: linear-gradient(135deg, rgba(245,197,24,.06), rgba(245,197,24,.02));
      border: 1px solid rgba(245,197,24,.25);
    }
    .forecast-pick {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      padding: 1rem; border-radius: 10px; background: var(--card2);
    }

    /* ── match player grid (no horizontal scroll) ── */
    .match-players-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .4rem;
      overflow: hidden;
    }
    @media (min-width: 540px)  { .match-players-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .match-players-grid { grid-template-columns: repeat(6, 1fr); } }

    .player-pred-card {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .6rem .4rem;
      text-align: center;
      overflow: hidden;
      min-width: 0;
    }
    .player-pred-card .pname {
      font-size: .65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: .35rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* desktop: layout vertical centrado */
    .player-pred-card .ppc-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .35rem;
    }
    .player-pred-card .ppc-top .pname { margin-bottom: 0; }
    .player-pred-card .ppc-score {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .15rem;
    }
    .player-pred-card .ppc-chips { margin-top: .25rem; text-align: center; }

    /* ─── Player info popover (Partidos) ─── */
    .pp-trigger { cursor: default; }

    /* ── info tooltip ── */
    .info-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(59,130,246,.2); color: #93C5FD;
      font-size: .7rem; font-weight: 700; cursor: help;
      border: 1px solid rgba(59,130,246,.3); flex-shrink: 0;
    }
    .info-wrap { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
    .info-wrap .info-tip {
      display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
      background: #1E2240; border: 1px solid var(--border);
      padding: .75rem 1rem; border-radius: 8px; width: 280px;
      font-size: .75rem; color: #CBD5E1; line-height: 1.5;
      z-index: 50; font-weight: 400; text-align: left;
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .info-wrap:hover .info-tip,
    .info-wrap.open .info-tip { display: block; }
    /* Variante anclada a la derecha (para iconos en esquina derecha) */
    .info-wrap.tip-right .info-tip { left: auto; right: 0; }
    .info-wrap.tip-center .info-tip { left: 50%; transform: translateX(-50%); }
    /* Apertura hacia abajo cuando no hay espacio arriba (cerca del nav fijo) */
    .info-wrap.tip-below .info-tip { bottom: auto; top: calc(100% + 8px); }
    @media (max-width: 560px) {
      .info-wrap .info-tip {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: 20px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 320px !important;
        z-index: 9999 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
      }
    }
    /* Icono de info anclado en la esquina superior derecha de una tarjeta. */
    .stat-info-corner { position: absolute; top: .55rem; right: .55rem; z-index: 2; }

    /* ── ficha de jugador en Estadísticas ── */
    .pstat-card { position: relative; }
    .pstat-head {
      display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem;
    }
    .pstat-bar { width: .55rem; height: 2.4rem; border-radius: 999px; flex-shrink: 0; }
    .pstat-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
      margin-bottom: .85rem;
    }
    .pstat-box {
      border-radius: 10px; padding: .55rem .35rem; text-align: center;
      background: rgba(255,255,255,.04);
    }
    .pstat-box .pstat-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; }
    .pstat-box .pstat-lbl { font-size: .62rem; color: #94A3B8; margin-top: .25rem; line-height: 1.2; }
    .pstat-last-head {
      display: flex; align-items: center; justify-content: space-between;
      font-size: .68rem; color: #64748B; margin-bottom: .35rem;
    }
    .pstat-legend { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
    .pstat-legend span { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; color: #94A3B8; }
    .pstat-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .pstat-dir-row {
      display: flex; align-items: flex-start; gap: .4rem; margin-top: .3rem;
    }
    .pstat-squares { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
    .pstat-dir-lbl {
      font-size: .55rem; color: #475569; white-space: nowrap; flex-shrink: 0;
      letter-spacing: .01em; line-height: 20px;
    }
    .pstat-dir-end { margin-left: 2px; }

    /* ── Tabla ranking partidos más acertados ── */
    .tmr-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tmr-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
    .tmr-th { padding: .45rem .75rem; text-align: left; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748B; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .tmr-th-rank { width: 2.4rem; text-align: center; }
    .tmr-th-pts  { width: 8rem; }
    .tmr-th-players { min-width: 14rem; }
    .tmr-row { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
    .tmr-row:hover { background: rgba(255,255,255,.03); }
    .tmr-row.tmr-top td { background: rgba(245,197,24,.04); }
    .tmr-row.tmr-top:first-child td { background: rgba(245,197,24,.09); }
    .tmr-cell-rank { padding: .55rem .5rem; text-align: center; vertical-align: middle; }
    .tmr-cell-match { padding: .55rem .75rem; vertical-align: middle; }
    .tmr-cell-pts   { padding: .55rem .75rem; vertical-align: middle; }
    .tmr-cell-players { padding: .55rem .75rem; vertical-align: middle; }
    .tmr-medal { font-size: 1.2rem; }
    .tmr-rank  { font-size: .8rem; font-weight: 700; color: #475569; }
    .tmr-teams { font-size: .83rem; color: #E2E8F0; line-height: 1.3; }
    .tmr-meta  { font-size: .7rem; color: #64748B; margin-top: .15rem; display: flex; align-items: center; gap: .4rem; }
    .tmr-score { font-weight: 800; color: var(--gold); }
    .tmr-date  { color: #64748B; }
    .tmr-total-pts { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--gold); line-height: 1; }
    .tmr-max { font-size: .75rem; color: #475569; font-family: inherit; }
    .tmr-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin-top: .3rem; }
    .tmr-bar { height: 4px; border-radius: 2px; background: var(--gold); transition: width .4s; }
    .tmr-cell-players .tmr-player { display: inline-flex; align-items: baseline; gap: .25rem; margin: .1rem .25rem .1rem 0; white-space: nowrap; }
    .tmr-pname { font-size: .7rem; font-weight: 600; }
    .tmr-ppts  { font-size: .78rem; font-weight: 800; min-width: 1rem; text-align: right; }
    .tmr-note  { font-size: .68rem; color: #475569; margin-top: .6rem; text-align: right; }
    @media (max-width: 600px) {
      .tmr-table { font-size: .75rem; }
      .tmr-cell-players { display: none; }
      .tmr-th-players   { display: none; }
    }

    /* ── changelog modal ── */
    .cl-backdrop {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
      overflow: hidden;
      animation: cl-fade .18s ease;
    }
    @keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
    .cl-backdrop.hidden { display: none; }
    .cl-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%; max-width: 560px;
      max-height: min(80vh, calc(100dvh - 2rem));
      min-height: 0;
      overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 60px rgba(0,0,0,.6);
      animation: cl-up .2s ease;
    }
    @keyframes cl-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
    .cl-head {
      padding: 1.25rem 1.4rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
      flex-shrink: 0;
    }
    .cl-head-title { font-size: 1.05rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
    .cl-head-sub { font-size: .75rem; color: #64748B; margin-top: .2rem; }
    .cl-close {
      background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
      color: #94A3B8; cursor: pointer; padding: .3rem .55rem; font-size: .85rem;
      transition: all .15s; flex-shrink: 0; line-height: 1;
    }
    .cl-close:hover { color: var(--gold); border-color: var(--gold); }
    .cl-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1.25rem 1.4rem;
      scrollbar-width: thin; scrollbar-color: var(--border) transparent;
      -webkit-overflow-scrolling: touch;
    }
    .cl-version {
      margin-bottom: 1.5rem;
    }
    .cl-version:last-child { margin-bottom: 0; }
    .cl-ver-head {
      display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem;
    }
    .cl-ver-badge {
      font-size: .7rem; font-weight: 800; padding: .25rem .55rem;
      border-radius: 20px; letter-spacing: .04em;
      background: rgba(245,197,24,.12); color: var(--gold);
      border: 1px solid rgba(245,197,24,.3); white-space: nowrap;
    }
    .cl-ver-badge.new {
      background: rgba(34,197,94,.15); color: #4ADE80;
      border-color: rgba(34,197,94,.35);
    }
    .cl-ver-date { font-size: .72rem; color: #475569; }
    .cl-ver-title { font-size: .82rem; font-weight: 700; color: #CBD5E1; flex: 1; }
    .cl-items { list-style: none; padding: 0; margin: 0; }
    .cl-items li {
      display: flex; align-items: baseline; gap: .55rem;
      padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.03);
      font-size: .8rem; color: #94A3B8; line-height: 1.45;
    }
    .cl-items li > span:not(.cl-tag) {
      flex: 1;
      min-width: 0;
    }
    .cl-items li:last-child { border-bottom: none; }

    /* ── welcome / ¿eres de la porra? modal ── */
    .welcome-modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%; max-width: 420px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.6);
      animation: cl-up .2s ease;
      text-align: center;
      padding: 1.9rem 1.5rem 1.6rem;
    }
    .welcome-emoji { font-size: 2.6rem; line-height: 1; }
    .welcome-title {
      font-size: 1.2rem; font-weight: 800; color: #fff;
      margin-top: .7rem; letter-spacing: .01em;
    }
    .welcome-sub {
      font-size: .82rem; color: #94A3B8; margin-top: .5rem;
      line-height: 1.45; max-width: 320px; margin-left: auto; margin-right: auto;
    }
    .welcome-actions {
      display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem;
    }
    .welcome-btn {
      width: 100%; padding: .8rem 1rem; border-radius: 12px;
      font-size: .9rem; font-weight: 700; cursor: pointer;
      transition: transform .15s, background .15s, border-color .15s;
      border: 1px solid transparent;
    }
    .welcome-btn:hover { transform: translateY(-1px); }
    .welcome-btn.primary {
      background: var(--gold); color: #0a0e1f; border-color: var(--gold);
    }
    .welcome-btn.primary:hover { background: #ffd740; }
    .welcome-btn.ghost {
      background: var(--card2); color: #CBD5E1;
      border-color: rgba(148, 163, 184, .35);
    }
    .welcome-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
    .welcome-foot {
      font-size: .68rem; color: #475569; margin-top: 1rem; line-height: 1.4;
    }
    .cl-tag {
      display: inline-block; font-size: .6rem; font-weight: 800; padding: .1rem .35rem;
      border-radius: 3px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em;
    }
    .cl-tag.feat    { background: rgba(59,130,246,.2); color: #93C5FD; }
    .cl-tag.fix     { background: rgba(34,197,94,.15); color: #4ADE80; }
    .cl-tag.ux      { background: rgba(168,85,247,.2); color: #C084FC; }
    .cl-tag.data    { background: rgba(245,197,24,.12); color: var(--gold); }
    .cl-foot {
      padding: .75rem 1.4rem;
      border-top: 1px solid var(--border);
      text-align: center;
      font-size: .7rem; color: #334155;
      flex-shrink: 0;
    }

    /* ── Footer links (changelog + sugerencias) ── */
    .footer-actions {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: .35rem .6rem; margin-top: .75rem;
    }
    .footer-link-btn {
      font-family: inherit; font-size: .72rem; color: #64748B;
      background: transparent; border: none; cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
      transition: color .15s; padding: 0;
    }
    .footer-link-btn:hover { color: var(--gold); }
    .footer-dot { color: #334155; font-size: .72rem; }

    /* ── Feedback (sugerencias) modal ── */
    .fb-form { display: flex; flex-direction: column; gap: 1.1rem; }
    .fb-field { display: flex; flex-direction: column; gap: .45rem; }
    .fb-label {
      font-size: .72rem; font-weight: 700; color: #94A3B8;
      text-transform: uppercase; letter-spacing: .05em;
    }
    .fb-input, .fb-textarea {
      width: 100%; box-sizing: border-box;
      background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
      color: #E2E8F0; font-family: inherit; font-size: .9rem;
      padding: .6rem .75rem; transition: border-color .15s, box-shadow .15s;
    }
    .fb-input::placeholder, .fb-textarea::placeholder { color: #475569; }
    .fb-input:focus, .fb-textarea:focus {
      outline: none; border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(245,197,24,.12);
    }
    .fb-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
    .fb-type { display: flex; flex-wrap: wrap; gap: .5rem; }
    .fb-type-opt { cursor: pointer; }
    .fb-type-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
    .fb-type-pill {
      display: inline-block; padding: .5rem .85rem; border-radius: 10px;
      background: var(--card2); border: 1px solid var(--border);
      color: #94A3B8; font-size: .82rem; font-weight: 600;
      transition: all .15s; user-select: none;
    }
    .fb-type-opt input:checked + .fb-type-pill {
      border-color: var(--gold); color: var(--gold);
      background: rgba(245,197,24,.1);
    }
    .fb-type-opt input:focus-visible + .fb-type-pill {
      box-shadow: 0 0 0 3px rgba(245,197,24,.18);
    }
    .fb-note { font-size: .7rem; color: #475569; line-height: 1.45; margin: 0; }
    .fb-actions { display: flex; justify-content: flex-end; gap: .6rem; }
    .fb-btn-cancel, .fb-btn-send {
      font-family: inherit; font-size: .85rem; font-weight: 700;
      padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
      transition: all .15s; border: 1px solid var(--border);
    }
    .fb-btn-cancel { background: transparent; color: #94A3B8; }
    .fb-btn-cancel:hover { color: #E2E8F0; border-color: #475569; }
    .fb-btn-send { background: var(--gold); color: #1a1205; border-color: var(--gold); }
    .fb-btn-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .fb-btn-send:active { transform: translateY(0); }
    .fb-btn-send:disabled { opacity: .6; cursor: default; transform: none; filter: none; }
    .fb-input.fb-err, .fb-textarea.fb-err { border-color: #EF4444; }
    .fb-error {
      font-size: .78rem; color: #FCA5A5; margin: 0 0 .2rem;
      background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
      border-radius: 8px; padding: .5rem .65rem; line-height: 1.4;
    }

    /* pantalla de éxito tras enviar */
    .fb-success {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: .7rem; padding: 1.4rem .5rem .6rem;
    }
    .fb-success-check {
      width: 60px; height: 60px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; font-weight: 800; color: #052e16;
      background: #34D399; border: 3px solid #6EE7B7;
      box-shadow: 0 0 0 6px rgba(52,211,153,.15);
      animation: fbPop .3s ease;
    }
    @keyframes fbPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    .fb-success-title { font-size: 1.05rem; font-weight: 700; color: #E2E8F0; }
    .fb-success-sub { font-size: .82rem; color: #94A3B8; line-height: 1.5; max-width: 320px; }
    .fb-success .fb-btn-send { margin-top: .4rem; padding: .55rem 1.6rem; }

    @media (max-width: 480px) {
      .fb-actions { flex-direction: column-reverse; }
      .fb-btn-cancel, .fb-btn-send { width: 100%; }
      .fb-type-pill { width: 100%; text-align: center; }
    }

    @media (max-width: 480px) {
      .cl-backdrop {
        padding: .65rem;
        padding-top: max(.65rem, env(safe-area-inset-top));
        padding-bottom: max(.65rem, env(safe-area-inset-bottom));
        align-items: flex-end;
      }
      .cl-modal {
        max-height: calc(100dvh - 1.3rem);
        max-height: calc(100svh - 1.3rem);
        border-radius: 14px 14px 12px 12px;
      }
      .cl-head {
        padding: .9rem 1rem .75rem;
      }
      .cl-head-title { font-size: .95rem; }
      .cl-head-sub { font-size: .68rem; line-height: 1.35; }
      .cl-body {
        padding: .9rem 1rem 1rem;
      }
      .cl-foot {
        padding: .6rem 1rem;
        font-size: .65rem;
      }
      .cl-items li { font-size: .76rem; }
    }

    /* ═══════════════════════════════════════════════════════════════
       NEXT-MATCH COUNTDOWN BANNER
    ═══════════════════════════════════════════════════════════════ */
    .next-match-banner {
      display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
      background: var(--card2); border: 1px solid var(--border);
      border-radius: 10px; padding: .55rem .9rem;
      margin-bottom: .85rem; font-size: .8rem;
    }
    .nmc-label {
      font-size: .65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: #64748B;
    }
    .nmc-match { color: #CBD5E1; font-size: .82rem; }
    .nmc-sep   { color: #334155; }
    .nmc-countdown {
      font-family: 'Courier New', monospace;
      font-size: .9rem; font-weight: 800;
      color: var(--gold); letter-spacing: .04em;
    }
    .nmc-countdown.soon { color: #4ADE80; }
    @media (max-width: 480px) {
      .next-match-banner { font-size: .75rem; gap: .4rem; padding: .45rem .7rem; }
      .nmc-countdown { font-size: .82rem; }
    }

    /* ═══════════════════════════════════════════════════════════════
       CALENDAR TAB
    ═══════════════════════════════════════════════════════════════ */
    .cal-filter-bar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem;
    }
    .cal-view-btn {
      padding: .35rem .85rem;
      border-radius: 20px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      color: #94A3B8;
      transition: all .2s;
    }
    .cal-view-btn.active { background: #1E3A5F; color: #93C5FD; border-color: #3B82F6; }
    .cal-view-btn:hover:not(.active) { border-color: #3B82F6; color: #93C5FD; }

    /* ── list view (día / semana) ── */
    .cal-list {
      display: flex; flex-direction: column; gap: 1rem; width: 100%;
    }
    .cal-list-day {
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      padding: .85rem 1rem 1rem;
    }
    .cal-list-day.is-today { border-color: var(--gold); }
    .cal-list-day-head {
      font-size: .92rem; font-weight: 700; color: var(--gold);
      margin-bottom: .55rem; letter-spacing: .02em; text-transform: capitalize;
    }
    .cal-list-empty {
      text-align: center; color: #64748B; padding: 2.25rem 1rem;
      font-size: .92rem; width: 100%;
    }
    .cal-row {
      display: grid;
      grid-template-columns: 50px 1fr auto 1fr 136px;
      align-items: center; gap: .5rem;
      padding: .55rem .45rem; border-radius: 8px;
      cursor: pointer; transition: background .15s;
    }
    .cal-row:hover { background: rgba(234,179,8,.08); }
    .cal-row + .cal-row { border-top: 1px solid var(--border); }
    .cal-row-time {
      font-size: .82rem; font-weight: 700; color: #93C5FD;
    }
    .cal-row-home {
      min-width: 0; text-align: right; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      font-size: .88rem; color: #E2E8F0;
    }
    .cal-row-away {
      min-width: 0; text-align: left; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      font-size: .88rem; color: #E2E8F0;
    }
    .cal-row-score { font-weight: 800; color: var(--gold); white-space: nowrap; }
    .cal-row-vs { font-size: .72rem; color: #64748B; white-space: nowrap; }
    .cal-row-actions {
      display: flex; gap: .25rem; align-items: center;
      justify-content: flex-end;
    }
    .cal-row-tv { display: contents; }
    /* Botón calendario dentro de una fila de calendario: más compacto */
    .cal-row .cal-add-wrap { flex-shrink: 0; }
    .cal-row .cal-add-btn {
      border-radius: 8px 0 0 8px; padding: .25rem .45rem; font-size: .75rem;
      min-width: 32px; min-height: 32px; justify-content: center;
    }
    .cal-row .cal-gcal-btn {
      border-radius: 0 8px 8px 0; padding: .25rem .4rem; font-size: .7rem;
      min-width: 28px; min-height: 32px; justify-content: center;
    }

    .cal-container {
      display: flex; flex-wrap: wrap; gap: 1.25rem;
      justify-content: center;
    }

    /* ── barra de navegación (flechas ‹ ›) ── */
    .cal-nav {
      display: flex; align-items: center; justify-content: center; gap: .6rem;
      width: 100%; max-width: 420px; margin: 0 auto .9rem;
    }
    .cal-nav-btn {
      flex-shrink: 0;
      width: 38px; height: 38px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.45rem; line-height: 1; font-weight: 700;
      background: var(--card); color: #93C5FD; border: 1px solid var(--border);
      cursor: pointer; transition: background .15s, border-color .15s, color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .cal-nav-btn:hover { background: #1E3A5F; border-color: #3B82F6; color: #BFDBFE; }
    .cal-nav-btn:active { transform: translateY(1px); }
    .cal-nav-btn.is-hidden { visibility: hidden; pointer-events: none; }
    .cal-nav-title {
      flex: 1; text-align: center; font-size: 1.05rem; font-weight: 700;
      color: var(--gold); letter-spacing: .03em; text-transform: capitalize;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .cal-month {
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      padding: 1rem 1.25rem 1.4rem; width: 100%; flex: 1 1 100%; max-width: 100%;
    }
    .cal-month-title {
      text-align: center; font-size: 1rem; font-weight: 700;
      color: var(--gold); margin-bottom: .75rem; letter-spacing: .04em;
    }
    .cal-weekdays {
      display: grid; grid-template-columns: repeat(7, 1fr);
      margin-bottom: .35rem;
    }
    .cal-weekday {
      text-align: center; font-size: .65rem; font-weight: 600;
      color: #475569; padding: .15rem 0;
    }
    .cal-weekday.weekend { color: #94A3B8; }
    .cal-days {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
    }
    .cal-day {
      border-radius: 8px; padding: .5rem .3rem .55rem;
      min-height: 96px; display: flex; flex-direction: column;
      align-items: center; gap: 3px; position: relative;
      overflow: hidden;
    }
    .cal-day.empty { background: transparent; }
    .cal-day.no-match .cal-day-num { color: #334155; }
    .cal-day.has-match {
      background: var(--card2); border: 1px solid var(--border);
      cursor: pointer; transition: background .15s, border-color .15s;
    }
    .cal-day.has-match:hover {
      background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.35);
    }
    .cal-day.is-today { border: 1.5px solid var(--gold) !important; }
    .cal-day.is-today .cal-day-num { color: var(--gold); font-weight: 800; }
    .cal-day-num {
      font-size: .9rem; font-weight: 700; color: #64748B;
      line-height: 1; margin-bottom: 2px;
    }
    .cal-chip {
      font-size: .74rem; line-height: 1.4;
      color: #CBD5E1; text-align: center; white-space: nowrap;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis;
      display: block;
    }
    .cal-chip-match {
      display: flex; align-items: center; justify-content: center; gap: .2rem;
      font-size: .78rem; padding: .1rem 0;
    }
    .cal-chip-code {
      font-size: .72rem; font-weight: 600; color: #E2E8F0; letter-spacing: .01em;
    }
    .cal-chip-sep {
      font-size: .7rem; color: #64748B; margin: 0 .05rem;
    }
    .cal-month-title { font-size: 1.15rem; }
    .cal-weekday { font-size: .72rem; }
    @media (max-width: 480px) {
      .cal-month { padding: .75rem .6rem 1rem; }
      .cal-day { min-height: 46px; padding: .25rem .1rem .3rem; gap: 2px; }
      .cal-day-num { font-size: .72rem; }
      .cal-chip { font-size: .52rem; }
      .cal-chip-match { font-size: .52rem; gap: .05rem; max-width: 100%; overflow: hidden; }
      .cal-chip-code { font-size: .5rem; }
      .cal-row { grid-template-columns: 42px 1fr auto 1fr 80px; gap: .35rem; padding: .5rem .25rem; }
      .cal-row-time { font-size: .76rem; }
      .cal-row-home, .cal-row-away { font-size: .76rem; }
      .cal-row .tv-badge { font-size: .55rem; padding: .15rem .35rem; min-height: unset; border-radius: 3px; }
      .cal-row .cal-add-btn { min-width: 28px; min-height: 28px; font-size: .75rem; padding: .15rem .35rem; }
      .cal-nav { gap: .4rem; margin-bottom: .75rem; }
      .cal-nav-btn { width: 34px; height: 34px; font-size: 1.25rem; }
      .cal-nav-title { font-size: .92rem; }
    }

    /* ════════════════════════════════════════════════════════════════
       ADMIN PANEL MODAL
    ════════════════════════════════════════════════════════════════ */
    .adm-backdrop {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(4,6,20,.85); backdrop-filter: blur(4px);
      display: flex; align-items: flex-start; justify-content: center;
      padding: 1.5rem;
      overflow-y: auto;
    }
    /* Pantalla de login: modal centrado y compacto */
    .adm-backdrop.adm-gate-mode {
      align-items: center;
    }
    .adm-backdrop.adm-gate-mode .adm-modal {
      height: auto;
      max-height: calc(100vh - 3rem);
    }
    .adm-modal {
      background: var(--surface); border: 1px solid #3B4270;
      border-radius: 16px; width: 100%; max-width: 960px;
      height: calc(100dvh - 3rem); height: calc(100vh - 3rem);
      box-shadow: 0 24px 64px rgba(0,0,0,.7);
      display: flex; flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .adm-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 1.25rem 1.5rem 1rem;
      border-bottom: 1px solid #2A3060;
      flex-shrink: 0;
    }
    .adm-head-title { font-size: 1.1rem; font-weight: 800; color: #F472B6; letter-spacing: .02em; }
    .adm-head-sub   { font-size: .72rem; color: #64748B; margin-top: .2rem; }
    .adm-close {
      width: 2rem; height: 2rem; border-radius: 50%;
      background: rgba(255,255,255,.06); border: none;
      color: #94A3B8; font-size: 1rem; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    .adm-close:hover { background: rgba(255,255,255,.12); color: #fff; }
    .adm-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto; }

    /* ── Sub-pestañas del panel de admin ── */
    .adm-subnav {
      display: flex; align-items: center; gap: 0;
      overflow-x: auto; overflow-y: hidden;
      border-bottom: 1px solid #2A3060;
      background: #0D1028;
      flex-shrink: 0;
      padding: 0 .75rem;
      scrollbar-width: none;
    }
    .adm-subnav::-webkit-scrollbar { display: none; }
    .adm-subnav-btn {
      flex-shrink: 0;
      background: none; border: none; border-bottom: 2px solid transparent;
      color: #64748B; font-size: .84rem; font-weight: 700;
      padding: .7rem 1rem; cursor: pointer; white-space: nowrap;
      letter-spacing: .02em; transition: color .15s, border-color .15s;
    }
    .adm-subnav-btn:hover { color: #94A3B8; }
    .adm-subnav-btn.active { color: #F472B6; border-bottom-color: #F472B6; }

    /* Contenido de la pestaña activa (es el scrollable) */
    .adm-tab-content {
      padding: 1.1rem 1.5rem 1.5rem;
      display: flex; flex-direction: column; gap: 1.1rem;
      overflow-y: auto; overflow-x: hidden;
      flex: 1 1 auto; -webkit-overflow-scrolling: touch;
    }
    .adm-section { }
    .adm-section-title {
      font-size: .78rem; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #94A3B8;
      margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem;
    }
    .adm-badge {
      background: rgba(234,179,8,.15); color: var(--gold);
      border: 1px solid rgba(234,179,8,.3); border-radius: 999px;
      font-size: .65rem; padding: .15rem .5rem; font-weight: 700; letter-spacing: .04em;
      text-transform: none;
    }
    .adm-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .6rem;
    }
    .adm-cell {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: .65rem .85rem;
    }
    .adm-label { font-size: .65rem; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
    .adm-real-badge {
      font-size: .5rem; font-weight: 700; text-transform: none; letter-spacing: .02em;
      background: rgba(74,222,128,.15); color: #4ADE80; border: 1px solid rgba(74,222,128,.3);
      border-radius: 999px; padding: .05rem .35rem; vertical-align: middle; margin-left: .3rem;
    }
    .adm-value { font-size: .82rem; color: #E2E8F0; font-weight: 600; line-height: 1.35; }
    .adm-value.adm-big { font-size: 1.25rem; color: var(--gold); font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; }
    .adm-rel { font-size: .7rem; color: #4ADE80; font-weight: 500; }
    .adm-matches {
      display: flex; flex-direction: column; gap: 3px;
      max-height: 60vh; overflow-y: auto;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem;
    }
    .adm-match-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: .3rem 0; border-bottom: 1px solid rgba(42,48,96,.5); font-size: .78rem;
    }
    .adm-match-row:last-child { border-bottom: none; }
    .adm-match-name { color: #CBD5E1; }
    .adm-match-name strong { color: var(--gold); margin: 0 .2rem; }
    .adm-match-updated { font-size: .65rem; font-weight: 700; border-radius: 4px; padding: .1rem .4rem; }
    .adm-match-updated.yes { background: rgba(74,222,128,.15); color: #4ADE80; }
    .adm-match-updated.no  { background: rgba(71,85,105,.2);   color: #64748B; }
    .adm-match-phase { font-size: .65rem; color: #475569; white-space: nowrap; margin-left: .5rem; }
    .adm-links { display: flex; flex-wrap: wrap; gap: .5rem; }
    .adm-link {
      display: inline-flex; align-items: center; gap: .35rem;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 8px; padding: .45rem .85rem;
      font-size: .78rem; color: #94A3B8; text-decoration: none;
      transition: border-color .15s, color .15s;
    }
    .adm-link:hover { border-color: #4A90D9; color: #93C5FD; }
    .adm-empty { color: #475569; font-size: .8rem; padding: .5rem 0; text-align: center; }

    /* Sugerencias / fallos en el panel de admin (tabla) */
    .adm-fb-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .adm-fb-table {
      width: 100%; border-collapse: collapse; font-size: .8rem;
      background: var(--card2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    }
    .adm-fb-table thead th {
      text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
      color: #94A3B8; font-weight: 700; padding: .5rem .6rem;
      background: var(--card); border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .adm-fb-table tbody td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
    .adm-fb-table tbody tr:last-child td { border-bottom: none; }
    .adm-fb-table tbody tr { border-left: 3px solid #475569; }
    .adm-fb-table tbody tr.bug { border-left-color: #EF4444; }
    .adm-fb-table tbody tr.mejora { border-left-color: var(--gold); }
    .adm-fb-td-when { color: #64748B; font-size: .72rem; white-space: nowrap; }
    .adm-fb-td-type { white-space: nowrap; font-weight: 700; }
    .adm-fb-table tr.bug .adm-fb-td-type { color: #FCA5A5; }
    .adm-fb-table tr.mejora .adm-fb-td-type { color: var(--gold); }
    .adm-fb-td-name { font-weight: 700; color: #E2E8F0; white-space: nowrap; }
    .adm-fb-td-text { color: #CBD5E1; line-height: 1.5; white-space: pre-wrap; word-break: break-word; min-width: 180px; }

    /* API call log */
    .adm-api-summary {
      display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem;
    }
    .adm-api-stat {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 8px; padding: .3rem .7rem; font-size: .72rem; color: #94A3B8;
    }
    .adm-api-stat strong { color: #E2E8F0; font-size: .9rem; margin-right: .25rem; }
    .adm-api-stat.up strong   { color: #4ADE80; }
    .adm-api-stat.noup strong { color: #94A3B8; }
    .adm-api-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
    .adm-api-filter {
      background: var(--card); border: 1px solid var(--border);
      color: #94A3B8; border-radius: 999px; padding: .3rem .8rem;
      font-size: .72rem; font-weight: 600; cursor: pointer; transition: all .15s;
    }
    .adm-api-filter:hover { color: #E2E8F0; border-color: #4A90D9; }
    .adm-api-filter.active { background: rgba(244,114,182,.15); border-color: #F472B6; color: #F472B6; }
    .adm-api-list {
      display: flex; flex-direction: column; gap: 3px;
      max-height: 260px; overflow-y: auto;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem;
    }
    .adm-api-row {
      display: flex; align-items: center; gap: .6rem;
      padding: .4rem 0; border-bottom: 1px solid rgba(42,48,96,.5); font-size: .76rem;
    }
    .adm-api-row:last-child { border-bottom: none; }
    .adm-api-when { display: flex; flex-direction: column; min-width: 64px; line-height: 1.2; }
    .adm-api-when strong { color: #E2E8F0; font-size: .82rem; font-variant-numeric: tabular-nums; }
    .adm-api-date { color: #475569; font-size: .62rem; }
    .adm-api-mid { flex: 1; min-width: 0; }
    .adm-api-changes { color: var(--gold); font-weight: 600; }
    .adm-api-change-block { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .2rem; }
    .adm-api-change-block:last-child { margin-bottom: 0; }
    .adm-api-detail {
      font-size: .67rem; color: #94A3B8; display: flex; flex-wrap: wrap;
      align-items: center; gap: .2rem; padding-left: .1rem;
    }
    .adm-api-field-name { color: #64748B; font-weight: 600; }
    .adm-api-old-val { color: #94A3B8; text-decoration: line-through; }
    .adm-api-arr { color: #475569; }
    .adm-api-new-val { color: #4ADE80; font-weight: 700; }
    .adm-api-link-match {
      cursor: pointer; text-decoration: none; border-bottom: 1px dashed rgba(234,179,8,.5);
      transition: color .15s, border-color .15s;
    }
    .adm-api-link-match:hover { color: #FCD34D; border-bottom-color: #FCD34D; }
    .adm-api-go { font-size: .7rem; opacity: .8; }
    .adm-api-nochange { color: #64748B; font-style: italic; }
    .adm-api-tags { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
    .adm-api-trigger { font-size: .62rem; color: #475569; white-space: nowrap; }
    .adm-api-badge { font-size: .64rem; font-weight: 700; border-radius: 4px; padding: .12rem .42rem; white-space: nowrap; }
    .adm-api-badge.yes { background: rgba(74,222,128,.15); color: #4ADE80; }
    .adm-api-badge.no  { background: rgba(71,85,105,.2);   color: #64748B; }
    /* Visitas por hora */
    .adm-vis-head { margin: .85rem 0 .5rem; }
    .adm-vis-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
    .adm-vis-filter {
      background: var(--card); border: 1px solid var(--border);
      color: #94A3B8; border-radius: 999px; padding: .28rem .7rem;
      font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s;
      text-transform: capitalize;
    }
    .adm-vis-filter:hover { color: #E2E8F0; border-color: #4A90D9; }
    .adm-vis-filter.active { background: rgba(74,222,128,.15); border-color: #4ADE80; color: #4ADE80; }
    .adm-vis-list {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: .55rem .75rem;
      max-height: 280px; overflow-y: auto;
    }
    .adm-vis-daytotal { font-size: .72rem; color: #94A3B8; margin-bottom: .5rem; font-weight: 600; }
    .adm-vis-daytotal::first-letter { text-transform: none; }
    .adm-vis-row {
      display: flex; align-items: center; gap: .55rem;
      padding: .18rem 0; font-size: .74rem;
    }
    .adm-vis-hour { min-width: 42px; color: #CBD5E1; font-variant-numeric: tabular-nums; font-weight: 600; }
    .adm-vis-bar-wrap {
      flex: 1; height: 14px; background: rgba(71,85,105,.18);
      border-radius: 4px; overflow: hidden;
    }
    .adm-vis-bar {
      display: block; height: 100%;
      background: linear-gradient(90deg, #4ADE80, #22C55E);
      border-radius: 4px; min-width: 2px; transition: width .3s ease;
    }
    .adm-vis-num { min-width: 24px; text-align: right; color: #E2E8F0; font-weight: 700; font-variant-numeric: tabular-nums; }
    /* Estado del sistema (semáforo) */
    .adm-status {
      display: flex; align-items: center; gap: .6rem;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: .65rem .85rem; font-size: .82rem; font-weight: 600;
    }
    .adm-status-dot { font-size: .85rem; line-height: 1; }
    .adm-status-green { border-color: rgba(74,222,128,.4); }
    .adm-status-green .adm-status-dot { color: #4ADE80; }
    .adm-status-green .adm-status-text { color: #86EFAC; }
    .adm-status-amber { border-color: rgba(234,179,8,.4); }
    .adm-status-amber .adm-status-dot { color: var(--gold); }
    .adm-status-amber .adm-status-text { color: #FCD34D; }
    .adm-status-red { border-color: rgba(248,113,113,.45); }
    .adm-status-red .adm-status-dot { color: #F87171; }
    .adm-status-red .adm-status-text { color: #FCA5A5; }
    .adm-status-gray .adm-status-dot { color: #64748B; }
    .adm-status-gray .adm-status-text { color: #94A3B8; }
    /* Alertas de datos */
    .adm-badge.adm-badge-warn { background: rgba(248,113,113,.18); color: #FCA5A5; border-color: rgba(248,113,113,.35); }
    .adm-alerts { display: flex; flex-direction: column; gap: 4px; }
    .adm-alert {
      display: flex; align-items: center; gap: .5rem;
      background: var(--card); border: 1px solid var(--border);
      border-left-width: 3px; border-radius: 8px; padding: .45rem .7rem; font-size: .76rem; color: #CBD5E1;
    }
    .adm-alert-ic { flex-shrink: 0; font-size: .8rem; }
    .adm-alert.warn { border-left-color: var(--gold); }
    .adm-alert.err  { border-left-color: #F87171; }
    .adm-alert.info { border-left-color: #4A90D9; }
    .adm-alert-link { cursor: pointer; transition: border-color .15s; }
    .adm-alert-link:hover { border-color: #4A90D9; }
    /* Historial de cambios de resultados */
    .adm-hist-list {
      display: flex; flex-direction: column; gap: 2px;
      max-height: 240px; overflow-y: auto;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem;
    }
    .adm-hist-row {
      display: flex; align-items: baseline; gap: .6rem;
      padding: .32rem 0; border-bottom: 1px solid rgba(42,48,96,.5); font-size: .76rem;
    }
    .adm-hist-row:last-child { border-bottom: none; }
    .adm-hist-when { color: #475569; font-size: .64rem; min-width: 86px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .adm-hist-label { color: var(--gold); font-weight: 600; }
    .adm-hist-label.adm-api-link-match { display: inline; }
    /* tendencia visitas */
    .adm-trend { font-size: .58rem; font-weight: 800; border-radius: 4px; padding: .05rem .3rem; margin-left: .3rem; }
    .adm-trend-up   { background: rgba(74,222,128,.15); color: #4ADE80; }
    .adm-trend-down { background: rgba(248,113,113,.15); color: #F87171; }
    .adm-trend-flat { background: rgba(71,85,105,.2); color: #94A3B8; }
    /* botón copiar resumen */
    .adm-copy-btn {
      cursor: pointer; font-family: inherit;
      background: var(--card); border: 1px solid #F472B6; color: #F9A8D4;
    }
    .adm-copy-btn:hover { border-color: #F472B6; color: #FBCFE8; }
    .adm-copy-btn.adm-copy-ok { border-color: #4ADE80; color: #4ADE80; }
    /* hint bubble */
    .admin-hint {
      position: absolute; bottom: calc(100% + .4rem); right: 0;
      background: #1E293B; border: 1px solid #F472B6;
      color: #F472B6; font-size: .72rem; font-weight: 700;
      padding: .3rem .65rem; border-radius: 8px; white-space: nowrap;
      pointer-events: none; animation: adm-hint-in .15s ease;
      z-index: 100;
    }
    @keyframes adm-hint-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 600px) {
      .adm-backdrop { padding: 0; align-items: flex-start; }
      .adm-modal { border-radius: 0 0 16px 16px; width: 100%; max-width: 100vw; box-sizing: border-box; height: 92dvh; height: 92vh; }
      .adm-head { padding: .8rem .9rem .65rem; }
      .adm-head-title { font-size: .95rem; }
      .adm-head-sub { font-size: .62rem; }
      .adm-close { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
      .adm-subnav { padding: 0 .4rem; }
      .adm-subnav-btn { font-size: .66rem; padding: .55rem .55rem; }
      .adm-tab-content { padding: .8rem .85rem 1.2rem; gap: .85rem; }
      .adm-section-title { font-size: .68rem; margin-bottom: .45rem; letter-spacing: .05em; }
      .adm-badge { font-size: .58rem; padding: .1rem .4rem; }
      .adm-grid { grid-template-columns: 1fr 1fr; gap: .4rem; }
      .adm-cell { padding: .45rem .55rem; border-radius: 8px; }
      .adm-label { font-size: .56rem; margin-bottom: .15rem; }
      .adm-value { font-size: .74rem; line-height: 1.25; }
      .adm-value.adm-big { font-size: 1rem; }
      .adm-rel { font-size: .6rem; }
      .adm-matches, .adm-api-list { padding: .4rem .55rem; max-height: 200px; }
      .adm-match-row { padding: .22rem 0; font-size: .68rem; }
      .adm-match-updated, .adm-match-phase { font-size: .56rem; }
      .adm-links { gap: .35rem; flex-wrap: wrap; }
      .adm-link { padding: .35rem .6rem; font-size: .68rem; }
      .adm-empty { font-size: .7rem; }
      /* API log compact */
      .adm-api-summary { gap: .35rem; margin-bottom: .45rem; flex-wrap: wrap; }
      .adm-api-stat { padding: .22rem .5rem; font-size: .62rem; }
      .adm-api-stat strong { font-size: .76rem; }
      .adm-api-filters { gap: .3rem; margin-bottom: .45rem; flex-wrap: wrap; }
      .adm-api-filter { padding: .25rem .6rem; font-size: .62rem; }
      .adm-api-row { flex-wrap: wrap; row-gap: .15rem; padding: .28rem 0; font-size: .68rem; gap: .4rem; }
      .adm-api-when { flex-direction: row; align-items: baseline; gap: .35rem; min-width: 0; }
      .adm-api-when strong { font-size: .72rem; }
      .adm-api-date { font-size: .58rem; }
      .adm-api-tags { margin-left: auto; gap: .3rem; flex-wrap: wrap; }
      .adm-api-trigger { font-size: .56rem; }
      .adm-api-badge { font-size: .56rem; padding: .1rem .35rem; }
      .adm-api-mid { flex-basis: 100%; order: 5; font-size: .66rem; }
      /* visitas compactas */
      .adm-vis-filters { gap: .3rem; margin-bottom: .45rem; }
      .adm-vis-filter { padding: .22rem .55rem; font-size: .62rem; }
      .adm-vis-list { padding: .45rem .55rem; max-height: 220px; }
      .adm-vis-row { font-size: .66rem; gap: .4rem; }
      .adm-vis-hour { min-width: 36px; }
      .adm-vis-bar-wrap { height: 11px; }
      /* estado, alertas e historial compactos */
      .adm-status { padding: .5rem .6rem; font-size: .72rem; gap: .45rem; }
      .adm-alert { padding: .38rem .55rem; font-size: .66rem; gap: .4rem; }
      .adm-hist-list { padding: .4rem .55rem; max-height: 200px; }
      .adm-hist-row { padding: .26rem 0; font-size: .67rem; gap: .45rem; }
      .adm-hist-when { min-width: 74px; font-size: .58rem; }
      .adm-trend { font-size: .52rem; }
    }
    /* password gate */
    .adm-gate {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; padding: 1.5rem 1rem 1rem; gap: .9rem;
    }
    .adm-gate-icon { font-size: 2.4rem; opacity: .85; }
    .adm-gate-text { color: #CBD5E1; font-size: .9rem; font-weight: 600; }
    #adm-pass-form { display: flex; gap: .5rem; width: 100%; max-width: 320px; }
    .adm-pass-input {
      flex: 1; min-width: 0;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: .6rem .85rem;
      color: #E2E8F0; font-size: 1.1rem; letter-spacing: .25em; text-align: center;
      outline: none; transition: border-color .15s;
    }
    .adm-pass-input:focus { border-color: #F472B6; }
    .adm-pass-btn {
      background: #F472B6; color: #1A0A14; border: none;
      border-radius: 10px; padding: .6rem 1.1rem;
      font-weight: 800; font-size: .85rem; cursor: pointer; flex-shrink: 0;
      transition: filter .15s;
    }
    .adm-pass-btn:hover { filter: brightness(1.1); }
    .adm-gate-error { color: #F87171; font-size: .8rem; font-weight: 600; }

    /* ── music player ── */
    .music-wrap {
      position: fixed;
      left: .85rem;
      bottom: .85rem;
      z-index: 45;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .music-btn {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(13, 17, 36, .94);
      border: 1px solid rgba(148, 163, 184, .4);
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0,0,0,.4);
      transition: transform .2s, border-color .2s;
      color: #CBD5E1;
      align-self: flex-start;
    }
    .music-btn:hover { transform: scale(1.1); border-color: var(--gold); }
    .music-btn.playing {
      border-color: var(--gold);
      color: var(--gold);
      animation: pulse 2s ease-in-out infinite;
    }
    .music-panel {
      margin-bottom: .55rem;
      width: 210px;
      max-width: calc(100vw - 1.1rem);
      box-sizing: border-box;
      overflow: hidden;
      background: rgba(13, 17, 36, .96);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .75rem .85rem;
      backdrop-filter: blur(14px);
      box-shadow: 0 8px 30px rgba(0,0,0,.45);
      transform-origin: bottom left;
      animation: music-in .18s ease;
    }
    @keyframes music-in {
      from { opacity: 0; transform: scale(.92) translateY(6px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .music-panel.hidden { display: none; }
    .music-panel-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: .5rem; margin-bottom: .55rem; min-width: 0;
    }
    .music-panel-head > div { min-width: 0; flex: 1; }
    .music-panel-title {
      font-size: .72rem; font-weight: 800; color: var(--gold);
      text-transform: uppercase; letter-spacing: .05em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .music-panel-sub {
      font-size: .65rem; color: #64748B; margin-top: .1rem;
    }
    .music-x {
      background: none; border: none; cursor: pointer;
      color: #475569; font-size: .85rem; line-height: 1;
      padding: .15rem .35rem; border-radius: 4px;
      transition: color .15s;
    }
    .music-x:hover { color: var(--gold); }
    .music-controls {
      display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem;
      min-width: 0;
    }
    .music-play {
      width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--gold); color: #0a0e1f; border: none;
      cursor: pointer; font-size: .75rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: transform .15s, background .15s;
      font-weight: 900;
    }
    .music-play:hover { transform: scale(1.1); background: #ffd740; }
    .music-vol {
      display: flex; align-items: center; gap: .35rem;
      flex: 1; min-width: 0; overflow: hidden;
    }
    .music-vol-icon { font-size: .7rem; color: #64748B; flex-shrink: 0; }
    .music-vol-range {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      margin: 0;
      -webkit-appearance: none; appearance: none;
      height: 3px; border-radius: 2px; background: var(--border); cursor: pointer;
    }
    .music-vol-range::-webkit-slider-thumb {
      -webkit-appearance: none; width: 11px; height: 11px;
      border-radius: 50%; background: var(--gold); cursor: pointer;
    }
    .music-vol-range::-moz-range-thumb {
      width: 11px; height: 11px; border-radius: 50%;
      background: var(--gold); cursor: pointer; border: none;
    }
    .music-seek {
      display: flex; align-items: center; gap: .4rem;
      min-width: 0; width: 100%;
    }
    .music-time {
      font-size: .62rem; color: #64748B;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0; min-width: 2rem;
    }
    .music-time:last-child { text-align: right; }
    .music-seek-range {
      flex: 1; min-width: 0; max-width: 100%;
      margin: 0;
      -webkit-appearance: none; appearance: none;
      height: 4px; border-radius: 2px;
      background: rgba(255,255,255,.1);
      cursor: pointer;
    }
    .music-seek-range::-webkit-slider-thumb {
      -webkit-appearance: none; width: 12px; height: 12px;
      border-radius: 50%; background: var(--gold); cursor: pointer;
      box-shadow: 0 0 0 2px rgba(13,17,36,.8);
    }
    .music-seek-range::-moz-range-thumb {
      width: 12px; height: 12px; border-radius: 50%;
      background: var(--gold); cursor: pointer; border: none;
      box-shadow: 0 0 0 2px rgba(13,17,36,.8);
    }
    @media (max-width: 480px) {
      .music-wrap { left: .55rem; bottom: .55rem; max-width: calc(100vw - 1.1rem); }
      .music-panel {
        width: min(220px, calc(100vw - 1.1rem));
        padding: .65rem .7rem;
      }
      .music-btn { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
      .music-controls {
        flex-wrap: wrap;
        gap: .4rem;
      }
      .music-play { order: 0; }
      .music-vol {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
      }
      .music-vol-range {
        flex: 1;
        width: 100%;
        min-width: 0;
      }
    }

    /* ── scoring tab ── */
    .score-rule-row {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
      gap: 1rem;
    }
    .score-rule-row:last-child { border-bottom: none; }
    .score-pts-badge {
      background: rgba(245,197,24,.15); color: var(--gold);
      font-weight: 800; font-size: .85rem;
      padding: .15rem .55rem; border-radius: 6px; white-space: nowrap;
      border: 1px solid rgba(245,197,24,.25);
    }

    /* ── footer ── */
    .site-footer {
      border-top: 1px solid var(--border);
      background: var(--surface);
      padding: 1.5rem 1rem;
      text-align: center;
    }
    .site-footer a { color: #93C5FD; text-decoration: none; }
    .site-footer a:hover { color: var(--gold); }
    .footer-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: .75rem; }
    .social-link {
      display: inline-flex; align-items: center; justify-content: center;
      width: 2.25rem; height: 2.25rem; border-radius: 50%;
      background: var(--card2); border: 1px solid var(--border);
      color: #CBD5E1; transition: all .2s;
    }
    .social-link:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

    /* ── visit counter (fixed) ── */
    .visitor-counter {
      position: fixed;
      right: .85rem;
      bottom: .85rem;
      z-index: 40;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .45rem .7rem;
      border-radius: 999px;
      background: rgba(15, 20, 40, .92);
      border: 1px solid rgba(148, 163, 184, .4);
      backdrop-filter: blur(8px);
      font-size: .72rem;
      color: #CBD5E1;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }
    .visitor-counter strong {
      color: var(--gold);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 480px) {
      .visitor-counter {
        right: .55rem;
        bottom: .55rem;
        font-size: .68rem;
        padding: .4rem .6rem;
      }
    }
    .social-link svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

    /* ── más info ── */
    .info-hero {
      background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
      border: 1px solid var(--border); border-radius: 1rem;
      padding: 1.5rem; margin-bottom: 1.5rem;
    }
    @media (max-width: 480px) { .info-hero { padding: 1rem; border-radius: .75rem; } }
    .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
    .info-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: .75rem; padding: 1.25rem;
    }
    .info-card h3 { color: var(--gold); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
    .info-card p { color: #94A3B8; font-size: .9rem; line-height: 1.6; margin: 0; }
    .info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
    .info-list li { color: #94A3B8; font-size: .88rem; line-height: 1.5; padding-left: 1rem; position: relative; }
    .info-list li::before { content: "›"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
    .info-list code { font-size: .8rem; background: rgba(255,255,255,.07); padding: .05rem .35rem; border-radius: 4px; color: #E2E8F0; font-family: monospace; }
    .info-tag {
      display: inline-block; font-size: .7rem; font-weight: 700;
      padding: .2rem .55rem; border-radius: 4px; margin: .15rem;
      background: rgba(245,197,24,.12); color: var(--gold); border: 1px solid rgba(245,197,24,.25);
    }

    /* ── guía porra / puntuación ── */
    .scoring-deadline {
      background: rgba(245,197,24,.08);
      border: 1px solid rgba(245,197,24,.35);
      border-radius: .75rem;
      padding: 1rem 1.15rem;
    }
    .scoring-deadline li { margin: .35rem 0; }
    .scoring-phase {
      border-left: 3px solid var(--gold);
      padding-left: 1rem;
      margin: .75rem 0;
    }
    .scoring-callout {
      background: rgba(59,130,246,.08);
      border: 1px solid rgba(59,130,246,.25);
      border-radius: .65rem;
      padding: .85rem 1rem;
      font-size: .85rem;
      color: #94A3B8;
      line-height: 1.55;
    }

    /* ── honor grid ── */
    .honor-card { background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%); }
    .honor-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
    .honor-player-chip { text-align: center; padding: .75rem .5rem; border-radius: 10px; background: var(--card2); border: 1px solid var(--border); }
    .honor-section-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 1.5rem 0 .75rem; }
    .honor-item-card { border-left: 3px solid var(--border); }
    .honor-item-card.resolved { border-left-color: var(--green); }
    .honor-pred-row { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center;
      padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .82rem; }
    .honor-pred-row:last-child { border-bottom: none; }
    .honor-consensus { font-size: .78rem; color: #94A3B8; padding: .5rem .75rem; border-radius: 8px; background: rgba(255,255,255,.03); }

    /* ── pulse animation for live ── */
    .pulse-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--green); display: inline-block;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: .4; transform: scale(.7); }
    }

    /* ── update banner ── */
    .update-banner {
      background: linear-gradient(90deg, #0F1428 0%, #161B38 50%, #0F1428 100%);
      border-bottom: 1px solid var(--border);
      padding-top: .4rem;
      padding-bottom: .4rem;
      font-size: .75rem;
      color: #94A3B8;
      letter-spacing: .02em;
      line-height: 1.5;
    }
    .update-banner .page-shell { text-align: center; }
    .update-banner strong { color: var(--gold); font-weight: 600; }
    .update-banner .upd-block {
      display: inline;
    }
    .update-banner .upd-line {
      display: inline;
    }
    .update-banner .upd-sep {
      color: #475569;
      margin: 0 .45rem;
    }
    /* ── banner en modo "partido en juego" ── */
    .update-banner.has-live,
    .update-banner .upd-line-live { color: #FCA5A5; }
    .update-banner .upd-line-live strong,
    .update-banner .upd-line-live .upd-live-lead { color: #FECACA; font-weight: 800; }
    .upd-live-dot {
      display: inline-block;
      width: .5rem; height: .5rem;
      border-radius: 50%;
      background: #EF4444;
      margin-right: .4rem;
      box-shadow: 0 0 0 0 rgba(239,68,68,.6);
      animation: liveDotPulse 1.1s ease-out infinite;
      vertical-align: middle;
    }
    .upd-live-prov { color: #F87171; opacity: .85; font-style: italic; }
    .upd-live-match-btn {
      display: inline; background: none; border: none; padding: 0;
      color: inherit; font: inherit; font-weight: 700;
      cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.4);
      text-underline-offset: 3px;
      transition: color .15s, text-decoration-color .15s;
    }
    .upd-live-match-btn:hover { color: #fff; text-decoration-color: rgba(255,255,255,.9); }
    .upd-live-sep { opacity: .6; }
    .upd-live-poll-badge {
      font-size: .68rem; font-weight: 700; color: #EF4444;
      letter-spacing: .03em; margin-left: .6rem;
      animation: liveDotPulse 1.4s ease-out infinite;
    }
    /* ── Botón de refresco manual ── */
    .upd-refresh-btn {
      margin-left: .75rem;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      color: #94A3B8;
      font-size: .65rem; font-weight: 700; letter-spacing: .04em;
      padding: .15rem .6rem;
      cursor: pointer; transition: background .15s, color .15s;
      vertical-align: middle;
    }
    .upd-refresh-btn:hover { background: rgba(255,255,255,.12); color: #E2E8F0; }
    .upd-refresh-btn:disabled { opacity: .5; cursor: default; }
    /* ── Toast de actualización automática ── */
    .upd-toast {
      position: fixed; top: 3rem; left: 50%;
      transform: translateX(-50%) translateY(-10px);
      background: #1E293B; border: 1px solid rgba(34,197,94,.5);
      color: #86EFAC; font-size: .82rem; font-weight: 700;
      padding: .6rem 1.5rem; border-radius: 999px;
      z-index: 9998; pointer-events: none;
      opacity: 0; transition: opacity .3s, transform .3s;
      white-space: nowrap;
      box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(34,197,94,.15);
    }
    .upd-toast.upd-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .upd-toast.upd-toast-hide { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    .upd-match-link {
      background: none; border: none; padding: 0;
      color: #38BDF8; font-weight: 700; cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
      font-size: inherit; font-family: inherit;
      transition: color .15s;
    }
    .upd-match-link:hover { color: #7DD3FC; }
    @media (max-width: 640px) {
      .update-banner { font-size: .7rem; line-height: 1.45; }
      .update-banner .upd-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .2rem;
      }
      .update-banner .upd-line {
        display: block;
      }
      .update-banner .upd-sep {
        display: none;
      }
      .upd-toast { top: 5rem; font-size: .76rem; padding: .5rem 1.2rem; max-width: 88vw; white-space: normal; text-align: center; }
    }

    /* ─── MATCH DETAIL PANEL ─── */
    .match-detail-drawer {
      position: fixed;
      top: 0; right: -480px;
      width: min(460px, 100vw);
      height: 100%; height: 100dvh;
      z-index: 300;
      background: var(--surface);
      border-left: 1px solid var(--border);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      transition: right 0.28s cubic-bezier(.4,0,.2,1);
      display: flex;
      flex-direction: column;
    }
    .match-detail-drawer.open { right: 0; }

    /* On small screens: slide up from bottom instead */
    @media (max-width: 500px) {
      .match-detail-drawer {
        top: auto; bottom: -100%; right: 0;
        width: 100vw;
        height: 92%; height: 92dvh;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        transition: bottom 0.28s cubic-bezier(.4,0,.2,1);
      }
      .match-detail-drawer.open { bottom: 0; right: 0; }
    }

    .panel-overlay {
      position: fixed; inset: 0;
      z-index: 299;
      background: rgba(0,0,0,0.6);
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .panel-overlay.open { opacity: 1; pointer-events: auto; }

    .panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: .85rem 1rem .75rem;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0;
      background: var(--surface);
      z-index: 2;
      flex-shrink: 0;
    }
    .panel-close-btn {
      width: 34px; height: 34px; border-radius: 50%;
      border: none;
      background: var(--card2); color: #94A3B8;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 1rem;
      transition: background .15s;
      flex-shrink: 0;
      touch-action: manipulation;
    }
    .panel-close-btn:hover, .panel-close-btn:active { background: var(--border); color: white; }

    /* Panel inner sections */
    .panel-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
    .panel-section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .85rem 1rem;
    }
    .panel-section-title {
      font-size: .65rem; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #64748B; margin-bottom: .6rem;
    }

    /* Map — explicit dimensions are critical for Leaflet */
    #panel-map {
      width: 100%;
      height: 200px;
      min-height: 200px;
      border-radius: 8px;
      overflow: hidden;
      background: #0f172a;
      display: block;
      position: relative;
      z-index: 1;
    }
    .leaflet-container { background: #0f172a !important; font-family: inherit; }
    .map-stadium-marker {
      font-size: 1.6rem; line-height: 1;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.9));
      display: block;
    }
    .leaflet-popup-content-wrapper {
      background: #1C2240 !important; color: #E2E8F0 !important;
      border: 1px solid var(--border) !important; border-radius: 8px !important;
      box-shadow: 0 4px 20px rgba(0,0,0,.6) !important;
    }
    .leaflet-popup-content { margin: .5rem .75rem !important; }
    .leaflet-popup-tip { background: #1C2240 !important; }
    .leaflet-popup-close-button { color: #64748B !important; top: 4px !important; right: 6px !important; }
    .leaflet-control-zoom a {
      background: #1C2240 !important; color: #94A3B8 !important;
      border-color: var(--border) !important;
    }
    .leaflet-control-zoom a:hover { color: white !important; }

    /* Venue info grid */
    .venue-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem;
    }
    .venue-stat {
      background: var(--card2); border-radius: 8px; padding: .5rem .7rem;
    }
    .venue-stat-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #64748B; }
    .venue-stat-value { font-size: .85rem; font-weight: 600; color: #E2E8F0; margin-top: .15rem; }
    .venue-fact-text {
      font-size: .75rem; color: #94A3B8; line-height: 1.5;
      font-style: italic; margin-top: .6rem;
      padding: .5rem .75rem; background: var(--card2); border-radius: 8px;
      border-left: 3px solid var(--gold);
    }

    /* Scorers */
    .scorer-team-row { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .4rem; }
    .scorer-flag { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }
    .scorer-list { font-size: .8rem; color: #CBD5E1; line-height: 1.5; flex: 1; min-width: 0; }
    .scorer-name { font-weight: 600; color: #E2E8F0; }
    .scorer-time { color: #64748B; font-size: .72rem; margin-left: .2rem; }
    .no-scorers { font-size: .78rem; color: #475569; }

    /* Key players — single column on narrow panel */
    .kp-teams { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    @media (max-width: 380px) {
      .kp-teams { grid-template-columns: 1fr; }
    }
    .kp-team-name {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .05em; color: #94A3B8; margin-bottom: .5rem;
    }
    .kp-player {
      display: flex; flex-direction: column;
      background: var(--card2); border-radius: 8px;
      padding: .45rem .6rem; margin-bottom: .4rem;
    }
    .kp-player-name { font-size: .8rem; font-weight: 700; color: white; }
    .kp-player-meta { font-size: .67rem; color: #64748B; display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
    .kp-player-note { font-size: .7rem; color: #94A3B8; margin-top: .2rem; line-height: 1.4; }
    .kp-pos-badge {
      font-size: .6rem; font-weight: 700; padding: .15rem .35rem;
      border-radius: 4px; background: #1E3A5F; color: #60A5FA;
    }
    .kp-no-data { font-size: .75rem; color: #475569; }

    /* Stadium photo */
    .stadium-photo-wrap {
      position: relative; margin-bottom: .75rem;
      border-radius: 10px; overflow: hidden;
      background: var(--card2); min-height: 120px;
      cursor: zoom-in;
    }
    .stadium-photo {
      width: 100%; height: 260px; object-fit: cover;
      display: block; border-radius: 10px;
      transition: opacity .3s, transform .25s;
    }
    .stadium-photo-wrap:hover .stadium-photo { transform: scale(1.015); }
    @media (max-width: 500px) {
      .stadium-photo { height: 200px; }
    }
    .stadium-photo-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,.75));
      padding: .5rem .75rem .4rem;
      font-size: .72rem; font-weight: 600; color: #E2E8F0;
    }

    /* Lightbox imagen estadio */
    #stadium-lightbox {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.92);
      display: flex; align-items: center; justify-content: center;
      cursor: zoom-out;
    }
    #stadium-lightbox img {
      max-width: 96vw; max-height: 90vh;
      border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.8);
      object-fit: contain;
    }
    #stadium-lightbox-caption {
      position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,.6); color: #E2E8F0;
      font-size: .82rem; font-weight: 600;
      padding: .35rem .9rem; border-radius: 20px; white-space: nowrap;
    }

    /* Open-detail button on match card */
    .match-detail-btn {
      display: inline; font: inherit;
      font-size: .78rem; font-weight: 600;
      color: #94A3B8; background: none; border: none; padding: 0;
      cursor: pointer; transition: color .15s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      text-decoration: underline; text-decoration-color: rgba(148,163,184,.35);
      text-underline-offset: 2px;
    }
    .match-detail-btn:hover, .match-detail-btn:active { color: var(--gold); }

    /* ── Añadir al calendario ── */
    .cal-add-btn {
      display: inline-flex; align-items: center; gap: .25rem;
      font-size: .72rem; font-weight: 600;
      color: #93C5FD; background: rgba(59,130,246,.12);
      border: 1px solid rgba(59,130,246,.3); border-radius: 12px;
      padding: .18rem .55rem; cursor: pointer; transition: background .15s;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }
    .cal-add-btn:hover, .cal-add-btn:active { background: rgba(59,130,246,.28); }
    .cal-add-compact { padding: .22rem .45rem; font-size: .78rem; }
    /* Versión centrada dentro de la tarjeta de partido (junto a la hora) */
    .cal-add-inline { margin: 0 auto; }
    .cal-export-all-btn {
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: .75rem; font-weight: 600;
      color: #93C5FD; background: rgba(59,130,246,.12);
      border: 1px solid rgba(59,130,246,.3); border-radius: 20px;
      padding: .3rem .85rem; cursor: pointer; transition: background .15s;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }
    .cal-export-all-btn:hover, .cal-export-all-btn:active { background: rgba(59,130,246,.28); }

    /* ── Popover selector de calendario ── */
    .cal-picker {
      position: fixed; z-index: 10000;
      background: #1A2240; border: 1px solid var(--border);
      border-radius: 14px; padding: .35rem;
      min-width: 210px;
      box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
      display: flex; flex-direction: column; gap: .15rem;
    }
    .cal-picker-title {
      font-size: .65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: #475569;
      padding: .3rem .7rem .1rem;
    }
    .cal-picker-opt {
      display: flex; align-items: center; gap: .65rem;
      padding: .55rem .75rem; border-radius: 10px;
      border: none; background: none;
      color: #E2E8F0; font-size: .85rem; font-weight: 600;
      cursor: pointer; text-align: left; width: 100%;
      transition: background .12s;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .cal-picker-opt:hover, .cal-picker-opt:active { background: rgba(255,255,255,.07); }
    .cal-picker-icon { font-size: 1.1rem; flex-shrink: 0; }

    /* ── load-more: texto largo en desktop, corto en móvil ── */
    .mlm-short { display: none; }

    /* ══════════════════════════════════════════════════════════
       MÓVIL — prioridad en todo lo nuevo y fijo en pantalla
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      main.page-shell {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
      }
      .site-footer {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
      }
    }

    @media (max-width: 480px) {
      /* Fijos abajo: safe area (iPhone con barra home) */
      .music-wrap {
        left: max(.55rem, env(safe-area-inset-left, 0px));
        bottom: max(.55rem, env(safe-area-inset-bottom, 0px));
      }
      .visitor-counter {
        right: max(.55rem, env(safe-area-inset-right, 0px));
        bottom: max(.55rem, env(safe-area-inset-bottom, 0px));
        max-width: calc(50vw - 1rem);
      }
      .visitor-counter span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Partidos: el buscador inline se oculta en móvil; se usa el panel
         que abre el icono 🔍 de la barra superior. */
      .matches-row { flex-direction: column; align-items: stretch; gap: .6rem; }
      .team-search-wrap { width: 100%; }
      .team-search-input-wrap {
        min-height: 44px;
        padding: .5rem .7rem;
      }
      #team-search-input { font-size: 16px; }
      .team-search-clear {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .75rem;
      }
      .team-suggest-item {
        min-height: 44px;
        padding: .65rem .75rem;
      }
      .team-suggest-item .ts-name { font-size: .85rem; }
      .team-filter-banner {
        font-size: .75rem;
        padding: .5rem .7rem;
        line-height: 1.4;
        top: 60px;
      }
      .team-filter-banner .tfb-clear {
        min-height: 34px;
        padding: .35rem .8rem;
        font-size: .74rem;
      }

      /* Días y ver más */
      .day-header {
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .5rem;
        padding: .7rem 0;
        min-height: 44px;
      }
      .day-header .day-name {
        font-size: .88rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .day-header .day-count {
        flex: 1 1 100%;
        font-size: .68rem;
        line-height: 1.3;
      }
      .matches-load-more {
        padding: .75rem .65rem;
        font-size: .78rem;
        line-height: 1.35;
        min-height: 44px;
      }
      .mlm-long { display: none; }
      .mlm-short { display: inline; }

      /* Tarjetas de partido */
      .card.match-row { padding: .85rem .75rem !important; }
      .match-teams-row { gap: .3rem .35rem; }
      .match-team-name {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.02rem;
      }
      .match-meta-row { gap: .35rem; }
      .match-detail-btn {
        font-size: .72rem;
        line-height: 1.35;
      }
      .cal-add-btn, .cal-add-compact { font-size: .68rem; padding: .2rem .5rem; }
      .cal-export-all-btn { font-size: .7rem; padding: .28rem .7rem; width: 100%; justify-content: center; }
      .cal-picker { min-width: 200px; }
      .cal-picker-opt { min-height: 44px; font-size: .9rem; }
      .player-pred-card { padding: .4rem .35rem; }
      .player-pred-card .pname { font-size: .6rem; }
      .brk-chip { font-size: .58rem; padding: .08rem .3rem; }

      /* Filtros fase/semana */
      .tv-badge {
        min-height: 32px;
        padding: .35rem .65rem;
        font-size: .65rem;
      }
      .phase-btn {
        padding: .4rem .7rem;
        font-size: .72rem;
        min-height: 36px;
      }
      .week-btn {
        padding: .4rem .75rem;
        font-size: .72rem;
        min-height: 36px;
      }

      /* Changelog cabecera de versión */
      .cl-ver-head { flex-wrap: wrap; gap: .4rem .5rem; }
      .cl-ver-title { flex: 1 1 100%; }
    }

    @media (max-width: 380px) {
      .match-team-name { max-width: 32vw; font-size: .92rem; }
      .team-suggest-item .ts-count { display: none; }
      .tab-btn { padding: .4rem .55rem; font-size: .7rem; }
    }

    /* ════════════════════════════════════════════════════════════════
       GROUP MODAL
    ════════════════════════════════════════════════════════════════ */
    .grp-badge-btn { cursor: pointer; transition: filter .15s, transform .1s; }
    .grp-badge-btn:hover { filter: brightness(1.25); transform: scale(1.06); }

    .grp-backdrop {
      position: fixed; inset: 0; z-index: 8500;
      background: rgba(4,6,20,.88); backdrop-filter: blur(4px);
      display: flex; align-items: flex-start; justify-content: center;
      padding: 2rem 1rem;
      overflow-y: auto;
    }
    .grp-modal {
      background: var(--surface); border: 1px solid #3B4270;
      border-radius: 16px; width: 100%; max-width: 860px;
      box-shadow: 0 24px 64px rgba(0,0,0,.7);
      display: flex; flex-direction: column;
      overflow: hidden; flex-shrink: 0;
    }
    .grp-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem 1.6rem .9rem;
      border-bottom: 1px solid #2A3060; flex-shrink: 0;
    }
    .grp-modal-title {
      font-size: 1.2rem; font-weight: 800; color: #38BDF8; letter-spacing: .03em;
    }
    .grp-modal-body {
      padding: 1.4rem 1.8rem 2rem;
      overflow-y: auto; max-height: calc(100dvh - 10rem); max-height: calc(100vh - 10rem);
      display: flex; flex-direction: column; gap: 1.4rem;
    }

    /* ── Modal de jugador ─────────────────────────────────────────── */
    .plr-modal { max-width: 520px; }
    .plr-hero { display: flex; gap: 1.2rem; align-items: flex-start; }
    .plr-photo { width: 110px; height: 110px; border-radius: 12px; object-fit: cover;
      background: #1E2140; flex-shrink: 0; border: 2px solid #2A3060; }
    .plr-photo-placeholder { width: 110px; height: 110px; border-radius: 12px;
      background: #1E2140; border: 2px solid #2A3060; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.8rem; color: #475569; }
    .plr-info { flex: 1; min-width: 0; }
    .plr-name { font-size: 1.25rem; font-weight: 800; color: #F1F5F9; line-height: 1.2; margin-bottom: .25rem; }
    .plr-nat  { font-size: .82rem; color: #94A3B8; margin-bottom: .55rem; }
    .plr-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
    .plr-stat { background: #1A1F3C; border: 1px solid #2A3060; border-radius: 8px;
      padding: .3rem .6rem; display: flex; flex-direction: column; align-items: center; min-width: 54px; }
    .plr-stat-val { font-size: .92rem; font-weight: 700; color: var(--gold); }
    .plr-stat-lbl { font-size: .6rem; color: #64748B; text-transform: uppercase; letter-spacing: .05em; }
    .plr-details { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
    .plr-detail { background: #1A1F3C; border-radius: 8px; padding: .5rem .75rem; }
    .plr-detail-lbl { font-size: .63rem; color: #64748B; text-transform: uppercase; letter-spacing: .05em; }
    .plr-detail-val { font-size: .88rem; color: #CBD5E1; font-weight: 600; margin-top: .1rem; }
    .plr-bio { font-size: .78rem; color: #94A3B8; line-height: 1.55;
      background: #1A1F3C; border-radius: 8px; padding: .75rem 1rem; }
    .plr-loading { text-align: center; padding: 2.5rem 1rem; color: #64748B; font-size: .85rem; }
    .plr-loading .plr-spin { display: inline-block; animation: spin .7s linear infinite; font-size: 1.4rem; }
    .plr-wc-goals { background: linear-gradient(135deg,rgba(245,197,24,.08) 0%,rgba(34,197,94,.06) 100%);
      border: 1px solid rgba(245,197,24,.2); border-radius: 10px;
      padding: .75rem 1rem; display: flex; align-items: center; gap: .85rem; }
    .plr-wc-icon { font-size: 1.6rem; line-height: 1; }
    .plr-wc-text { flex: 1; }
    .plr-wc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #94A3B8; }
    .plr-wc-val { font-size: 1.3rem; font-weight: 800; color: var(--gold); line-height: 1.1; }
    .plr-wc-sub { font-size: .72rem; color: #64748B; }
    .player-link-btn { cursor: pointer; color: inherit; background: none; border: none;
      padding: 0; font: inherit; text-decoration: underline dotted rgba(148,163,184,.4); }
    .player-link-btn:hover { color: #38BDF8; text-decoration-color: #38BDF8; }
    @media (max-width: 600px) {
      .plr-hero { flex-direction: column; align-items: center; text-align: center; }
      .plr-stats { justify-content: center; }
      .plr-details { grid-template-columns: 1fr 1fr; }
    }

    /* Tabla de clasificación del grupo */
    .grp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    .grp-table th {
      text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: #64748B; padding: .4rem .5rem;
      border-bottom: 1px solid #2A3060;
    }
    .grp-table th:first-child { text-align: left; padding-left: .75rem; }
    .grp-table td {
      text-align: center; padding: .55rem .5rem;
      border-bottom: 1px solid rgba(255,255,255,.04);
      color: #CBD5E1;
    }
    .grp-table td:first-child { text-align: left; padding-left: .75rem; font-weight: 600; }
    .grp-table td.grp-pts { font-weight: 800; color: var(--gold); }
    .grp-table tr:hover td { background: rgba(255,255,255,.03); }
    .grp-table tr.grp-qual td { border-left: 3px solid var(--green); }
    .grp-table tr.grp-qual td:first-child { padding-left: calc(.75rem - 3px); }
    .grp-table tr.grp-third td { border-left: 3px solid #EAB308; }
    .grp-table tr.grp-third td:first-child { padding-left: calc(.75rem - 3px); }
    /* 3.º que NO clasificaría — borde gris */
    .grp-table tr.grp-third-out td { border-left-color: #475569 !important; }
    /* Badge de sorteo (empate irresoluble) */
    .grp-tie-badge { display: inline-block; font-size: .65rem; background: rgba(250,204,21,.15); color: #FCD34D; border: 1px solid rgba(250,204,21,.3); border-radius: 4px; padding: 0 .3rem; margin-left: .35rem; vertical-align: middle; cursor: help; }
    /* Leyenda dinámica del 3.º */
    .grp-legend-item { font-size: .72rem; color: #9CA3AF; line-height: 1.5; }
    .grp-legend-qual { color: #6EE7B7; }
    .grp-legend-third-yes { color: #FCD34D; }
    .grp-legend-third-no { color: #6B7280; }
    .grp-tiebreaker-note { display: block; font-size: .65rem; color: #475569; margin-top: .05rem; margin-left: 1.2rem; font-style: italic; }

    /* Tarjeta mini de partido dentro del modal */
    .grp-match-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: .55rem .75rem; border-radius: 10px;
      background: var(--card); border: 1px solid var(--border);
      gap: .5rem;
    }
    .grp-match-row.grp-match-played { border-color: rgba(34,197,94,.2); }
    .grp-match-link { cursor: pointer; transition: background .15s, border-color .15s; }
    .grp-match-link:hover { background: var(--card2); border-color: #38BDF855; }
    .grp-match-link:hover .grp-match-score { color: #93C5FD; }

    /* Team name clickable */
    .team-name-btn { cursor: pointer; transition: color .15s; }
    .team-name-btn:hover { color: #38BDF8; text-decoration: underline; text-underline-offset: 3px; }

    /* Team modal stats bar */
    /* ── Subpestañas del modal de equipo ── */
    .tm-subtabs {
      display: flex; border-bottom: 1px solid var(--border);
      padding: 0 1rem; gap: .25rem; background: var(--surface);
    }
    .tm-subtab {
      padding: .55rem .9rem; font-size: .78rem; font-weight: 700;
      color: #64748B; border-bottom: 2px solid transparent;
      cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
      background: transparent;
    }
    .tm-subtab:hover { color: #CBD5E1; }
    .tm-subtab.active { color: var(--gold); border-bottom-color: var(--gold); }

    /* ── Plantilla (squad) ── */
    .sq-container { padding: .5rem 0 .25rem; }
    .sq-pos-section { margin-bottom: 1rem; }
    .sq-pos-hd {
      font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
      padding: .3rem 0 .3rem .6rem; margin-bottom: .35rem;
      border-left: 3px solid; border-bottom: 1px solid var(--border);
    }
    .sq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sq-table {
      width: 100%; border-collapse: collapse; font-size: .78rem;
    }
    .sq-table thead th {
      color: #64748B; font-size: .65rem; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; padding: .3rem .5rem; border-bottom: 1px solid var(--border);
      text-align: left; white-space: nowrap; background: var(--surface);
    }
    .sq-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
    .sq-table tbody tr:hover { background: rgba(255,255,255,.03); }
    .sq-table tbody td { padding: .35rem .5rem; vertical-align: middle; }
    .sq-num { color: #374151; font-size: .65rem; width: 1.4rem; text-align: right; padding-right: .4rem !important; }
    .sq-name { color: #E2E8F0; font-weight: 600; white-space: nowrap; }
    .sq-club { color: #64748B; font-size: .7rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sq-caps { color: #94A3B8; text-align: center; width: 2.8rem; font-weight: 700; }
    .sq-goals { text-align: center; width: 2.8rem; }
    .sq-goals-val { color: var(--gold); font-weight: 700; }
    /* Cabeceras ordenables */
    .sq-th-sort { cursor: pointer; user-select: none; }
    .sq-th-sort:hover { color: #94A3B8; }
    .sq-th-active { color: #E2E8F0 !important; }
    .sq-caps-th, .sq-goals-th { text-align: center; }
    .tm-squad-note { font-size: .62rem; color: #374151; text-align: center; padding: .4rem 0 .1rem; }

    /* columnas responsivas: ocultar club en móvil muy pequeño */
    @media (max-width: 380px) {
      .sq-club { display: none; }
    }

    /* ── Técnico ── */
    .tm-coach-card {
      display: flex; gap: 1rem; align-items: flex-start;
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      padding: 1.25rem; margin-top: .75rem;
    }
    .tm-coach-avatar {
      font-size: 2.8rem; line-height: 1; flex-shrink: 0;
      background: rgba(255,255,255,.05); border-radius: 50%;
      width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    }
    .tm-coach-info { display: flex; flex-direction: column; gap: .3rem; }
    .tm-coach-name { font-size: 1.1rem; font-weight: 800; color: #E2E8F0; }
    .tm-coach-nat  { font-size: .78rem; color: #94A3B8; }
    .tm-coach-since { font-size: .7rem; color: #64748B; }
    .tm-coach-note { font-size: .75rem; color: #94A3B8; line-height: 1.5; margin-top: .2rem; border-top: 1px solid var(--border); padding-top: .4rem; }
    .tm-empty-panel { color: #475569; font-size: .85rem; text-align: center; padding: 2rem 1rem; }

    @media (max-width: 480px) {
      .tm-subtab { padding: .45rem .6rem; font-size: .72rem; }
      .tm-coach-card { flex-direction: column; align-items: center; text-align: center; }
      .tm-coach-info { align-items: center; }
    }

    .tm-stats { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .25rem; }
    .tm-stat { display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .7rem; min-width: 2.8rem; }
    .tm-stat-val { font-family: "Bebas Neue", sans-serif; font-size: 1.25rem; line-height: 1; }
    .tm-stat-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: #64748B; text-transform: uppercase; margin-top: .1rem; }
    .tm-win  { color: var(--green); }
    .tm-draw { color: var(--gold); }
    .tm-loss { color: #F87171; }
    .tm-pending { color: #475569; font-size: .85rem; font-family: inherit; font-weight: 700; }
    .tm-score { min-width: 4rem; font-size: 1rem; font-family: "Bebas Neue", sans-serif; }
    .tm-meta { font-size: .68rem; color: #64748B; text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
    .tm-date-full { font-size: .75rem; font-weight: 700; color: #CBD5E1; }
    .tm-phase { font-size: .6rem; color: #475569; }
    /* Fila del equipo resaltado en la tabla de grupo */
    .tm-grp-highlight td { background: rgba(56,189,248,.07); }
    .tm-grp-highlight td:first-child { font-weight: 700; color: #E2E8F0; }

    /* Cruce 16avos en modal de equipo */
    .tm-r16-block {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: .6rem .8rem; margin: .1rem 0;
    }
    .tm-r16-hd { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748B; margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
    .tm-r16-prov { font-size: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0; background: #78350F; color: #FDE68A; border-radius: 4px; padding: .1rem .4rem; }
    .tm-r16-confirmed { font-size: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0; background: rgba(34,197,94,.15); color: #4ADE80; border-radius: 4px; padding: .1rem .4rem; }
    .tm-r16-body { display: flex; flex-direction: column; gap: .2rem; }
    .tm-r16-pos { font-size: .8rem; font-weight: 600; color: #CBD5E1; line-height: 1.4; }
    .tm-r16-vs { color: #475569; font-size: .72rem; margin: 0 .2rem; }
    .tm-r16-date { font-size: .68rem; color: #64748B; }
    .grp-match-team { display: flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; flex: 1; }
    .grp-match-team.right { justify-content: flex-end; }
    .grp-match-score {
      font-family: "Bebas Neue", sans-serif; font-size: 1.3rem;
      color: var(--gold); min-width: 3.5rem; text-align: center; flex-shrink: 0;
    }
    .grp-match-score.pending { color: #475569; font-size: .9rem; font-family: inherit; font-weight: 700; }
    .grp-match-date { font-size: .68rem; color: #64748B; text-align: center; }

    /* Subtabla de partidos en modal de grupo */
    .tm-match-table { width: 100%; border-collapse: collapse; margin-top: 0; }
    .tm-match-jornada-row td { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: .55rem .75rem .2rem; }
    .tm-match-table td { padding: .42rem .75rem; border-bottom: 1px solid var(--border); font-size: .82rem; font-weight: 600; vertical-align: middle; }
    /* Subtablas por jornada dentro del modal de grupo */
    .grp-jornadas { display: flex; flex-direction: column; gap: .75rem; }
    .grp-jornada-block { overflow: hidden; }
    .grp-jornada-hd {
      font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
      color: #64748B; padding: .5rem .75rem .35rem;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.02);
    }
    .tm-match-table tr.tm-mt-played td { border-bottom-color: rgba(34,197,94,.15); }
    .tm-match-table tr.grp-match-link { cursor: pointer; transition: background .15s; }
    .tm-match-table tr.grp-match-link:hover td { background: var(--card2); }
    .tm-match-table tr.grp-match-link:hover .tm-mt-score { color: #93C5FD; }
    .tm-mt-home { text-align: left; }
    .tm-mt-score { text-align: center; font-family: "Bebas Neue", sans-serif; font-size: 1.15rem; color: var(--gold); min-width: 2.8rem; white-space: nowrap; }
    .tm-mt-pending { color: #475569; font-size: .82rem; font-family: inherit; }
    .tm-mt-away { text-align: right; }
    .tm-mt-date { text-align: right; font-size: .68rem; color: #64748B; font-weight: 400; white-space: nowrap; padding-left: .5rem; }
    .tm-mt-venue { color: #475569; }

    @media (max-width: 600px) {
      .grp-backdrop { padding: 0; align-items: flex-start; }
      .grp-modal { border-radius: 0 0 16px 16px; max-width: 100vw; }
      .grp-modal-body { padding: .9rem .75rem 1.2rem; }
      .grp-table { font-size: .75rem; }
      .grp-match-team { font-size: .75rem; }
      .tm-mt-date { font-size: .7rem; color: #64748B; white-space: nowrap; }
      .tm-mt-score { font-size: 1.3rem !important; min-width: 3.2rem; }
      .tm-match-table td { padding: .45rem .5rem; font-size: .8rem; }
      .grp-jornada-hd { font-size: .62rem; padding: .45rem .5rem .3rem; }
    }

    /* ═══════════════════════════════════════
       BRACKET — Eliminatoria
    ═══════════════════════════════════════ */
    .bkt-root { padding: .5rem 0 2rem; }
    .bkt-title-bar { margin-bottom: 1.25rem; }
    .bkt-main-title { font-family: "Bebas Neue", sans-serif; font-size: 1.6rem; color: #E2E8F0; letter-spacing: .04em; margin: 0; }
    .bkt-sub { font-size: .72rem; color: #64748B; margin: .2rem 0 0; }

    /* Scroll wrapper */
    .bkt-scroll-wrap { overflow: visible; padding-bottom: 1.5rem; }
    .bkt-scroll-wrap-inner { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
    .bkt-scroll-wrap-inner::-webkit-scrollbar { height: 6px; }
    .bkt-scroll-wrap-inner::-webkit-scrollbar-track { background: var(--card); border-radius: 3px; }
    .bkt-scroll-wrap-inner::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

    /* Track: flex row of columns */
    .bkt-track {
      display: flex; align-items: flex-start; gap: 0; min-width: max-content;
      --bkt-unit: 108px;  /* altura de cada slot r16; aumentado para acomodar badges trofeo/pk */
      --bkt-col-w: 240px;
      --bkt-gap: 56px;    /* espacio entre columnas (donde viven los conectores) */
    }

    /* Column */
    .bkt-col { display: flex; flex-direction: column; width: var(--bkt-col-w, 200px); flex-shrink: 0; }
    .bkt-col + .bkt-col { margin-left: var(--bkt-gap, 44px); }
    /* En modo embebido (sub-tab Fase Final) columnas más anchas */
    .bkt-root-embedded { width: 100%; }
    .bkt-root-embedded .bkt-scroll-wrap { width: 100%; }
    .bkt-root-embedded .bkt-scroll-wrap-inner { width: 100%; }
    .bkt-root-embedded .bkt-col { width: 260px; }
    .bkt-root-embedded .bkt-col + .bkt-col { margin-left: 64px; }
    .bkt-root-embedded .bkt-pair:not(.bkt-pair-last)::before { right: calc(-64px + 4px); }
    .bkt-root-embedded .bkt-pair:not(.bkt-pair-last)::after  { right: calc(-64px + 4px); width: calc(64px - 4px); }
    .bkt-root-embedded .bkt-col:not(.bkt-col-r16) .bkt-slot::before { left: calc(-64px + 4px); width: calc(64px - 4px); }
    .bkt-root-embedded .bkt-tn { font-size: .8rem; }
    .bkt-root-embedded .bkt-score { font-size: 1.2rem; }

    /* Winner badges in knockout stages */
    .bkt-ko-winner .bkt-tn { color: var(--gold); font-weight: 700; }
    .bkt-trophy { color: var(--gold); font-size: .92em; }
    .bkt-badge-pk {
      display: inline-block; margin-left: .25rem; background: #7C3AED; color: white;
      font-size: .72rem; font-weight: 800; padding: .12rem .35rem; border-radius: 3px;
      text-transform: uppercase; letter-spacing: .04em;
    }

    .bkt-col-hd {
      font-size: .68rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .07em; color: #64748B;
      padding: .3rem .5rem .6rem; white-space: nowrap;
    }
    .bkt-col-hd span { display: block; font-size: .6rem; color: #475569; text-transform: none; font-weight: 500; letter-spacing: 0; margin-top: .1rem; }
    .bkt-col-body { display: flex; flex-direction: column; overflow: visible; }

    /* Pair: wraps 2 slots + draws right bracket arm */
    .bkt-pair {
      display: flex; flex-direction: column;
      position: relative; overflow: visible;
    }
    /* Vertical line (from center of slot 1 to center of slot 2) on the right */
    .bkt-pair:not(.bkt-pair-last)::before {
      content: '';
      position: absolute;
      right: calc(-1 * var(--bkt-gap, 44px) + 4px);
      top: calc(var(--bkt-unit, 74px) * var(--sf, 1) / 2);
      height: calc(var(--bkt-unit, 74px) * var(--sf, 1));
      width: 2px;
      background: #334155;
    }
    /* Horizontal exit at midpoint of pair → goes to next round slot's center */
    .bkt-pair:not(.bkt-pair-last)::after {
      content: '';
      position: absolute;
      right: calc(-1 * var(--bkt-gap, 44px) + 4px);
      top: calc(var(--bkt-unit, 74px) * var(--sf, 1) - 1px);
      height: 2px;
      width: calc(var(--bkt-gap, 44px) - 4px);
      background: #334155;
    }

    /* Slot: holds one match card, centered vertically */
    .bkt-slot {
      height: calc(var(--bkt-unit, 74px) * var(--sf, 1));
      display: flex; align-items: center;
      padding: 6px 0;   /* padding vertical garantiza separación mínima entre tarjetas */
      position: relative; overflow: visible;
      box-sizing: border-box;
    }
    /* Horizontal connector coming INTO this slot from the left (all rounds except r16) */
    .bkt-col:not(.bkt-col-r16) .bkt-slot::before {
      content: '';
      position: absolute;
      left: calc(-1 * var(--bkt-gap, 44px) + 4px);
      top: 50%;
      width: calc(var(--bkt-gap, 44px) - 4px);
      height: 2px;
      background: #334155;
      margin-top: -1px;
    }

    /* Match card */
    .bkt-card {
      width: 100%;
      box-sizing: border-box;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .4rem .42rem;
      display: flex; flex-direction: column; gap: .16rem;
      transition: border-color .15s, background .15s;
    }
    .bkt-card.bkt-played { border-color: rgba(34,197,94,.2); }
    .bkt-card.bkt-click { cursor: pointer; }
    .bkt-card.bkt-click:hover { background: var(--card2); border-color: #38BDF855; }
    .bkt-card.bkt-tbd { opacity: .5; }
    .bkt-card-final { border-color: rgba(245,197,24,.35) !important; }
    .bkt-card-final:hover { border-color: var(--gold) !important; }
    .bkt-card-3rd { border-color: rgba(148,163,184,.25) !important; }

    /* Highlight Pulse Animation */
    @keyframes bktPulseHighlight {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.8); border-color: var(--gold); }
      50% { transform: scale(1.04); box-shadow: 0 0 15px 5px rgba(234, 179, 8, 0.8); border-color: var(--gold); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
    }
    .bkt-highlight-pulse {
      animation: bktPulseHighlight 1.5s ease-out;
      border-color: var(--gold) !important;
      position: relative;
      z-index: 10;
    }

    /* Teams */
    .bkt-team { display: flex; align-items: center; gap: .35rem; min-width: 0; }
    .bkt-win .bkt-tn { color: #E2E8F0; font-weight: 700; }
    .bkt-fl { font-size: .9rem; flex-shrink: 0; }
    .bkt-tn { font-size: .72rem; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bkt-win .bkt-tn { color: #E2E8F0; }
    .bkt-ph { font-size: .65rem; color: #475569; font-style: italic; font-weight: 400; }
    /* Equipo resuelto provisionalmente desde clasificación de grupos */
    .bkt-prov { color: #64748B; font-style: italic; }
    .bkt-prov-slot { font-size: .58rem; color: #475569; margin-left: .25rem; font-style: normal; background: rgba(255,255,255,.06); border-radius: 3px; padding: .05rem .25rem; }

    /* Score / time */
    .bkt-mid { text-align: center; font-size: .7rem; color: #475569; }
    .bkt-score { font-family: "Bebas Neue", sans-serif; font-size: 1.1rem; color: var(--gold); letter-spacing: .04em; }
    .bkt-draw { color: #CBD5E1; }
    .bkt-no-date { font-size: .68rem; }
    .bkt-time { display: flex; align-items: center; gap: .3rem; font-size: .65rem; color: #475569; font-weight: 600; justify-content: center; }
    .bkt-dt { color: #334155; font-weight: 400; }

    /* Final column */
    .bkt-col-final-body { justify-content: center; }
    .bkt-final-inner { display: flex; flex-direction: column; gap: 1rem; padding: .5rem 0; }
    .bkt-final-lbl { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748B; text-align: center; }
    .bkt-3rd-lbl { color: #475569; margin-top: .5rem; }

    /* ── MÓVIL ── */
    /* ── MÓVIL — tabs de ronda ── */
    .bkt-mobile { display: flex; flex-direction: column; gap: 0; }

    .bkt-mob-tabs {
      display: flex; gap: .4rem; overflow-x: auto; padding: .25rem 0 .6rem;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
      position: sticky; top: 0; z-index: 20;
      background: var(--surface); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
    }
    .bkt-mob-tabs::-webkit-scrollbar { display: none; }

    .bkt-mob-tab {
      flex-shrink: 0;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 20px; padding: .38rem .85rem;
      font-size: .75rem; font-weight: 700; color: #64748B;
      cursor: pointer; display: flex; align-items: center; gap: .35rem;
      transition: background .15s, border-color .15s, color .15s;
      white-space: nowrap;
    }
    .bkt-mob-tab:hover { color: #CBD5E1; border-color: #475569; }
    .bkt-mob-tab.active {
      background: rgba(245,197,24,.12); border-color: var(--gold);
      color: var(--gold);
    }
    .bkt-mob-tab-prog { font-size: .62rem; font-weight: 500; opacity: .7; }

    .bkt-mob-body { display: flex; flex-direction: column; gap: .4rem; padding-top: .25rem; }
    .bkt-mob-card { width: 100%; }
    .bkt-mob-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748B; padding: .5rem 0 .1rem; }
    
    /* Mobile Bracket Pairing */
    .bkt-mob-pair {
      display: flex; align-items: center; margin-bottom: 0.8rem; position: relative;
    }
    .bkt-mob-pair-matches {
      flex: 1; display: flex; flex-direction: column; gap: 0.3rem;
      padding-right: 1.8rem; /* space for bracket line & button */
      position: relative;
    }
    .bkt-mob-pair-matches::after {
      content: ""; position: absolute; top: 25%; bottom: 25%; right: 0.9rem; width: 0.9rem;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border); border-radius: 0 4px 4px 0; pointer-events: none;
    }
    .bkt-mob-pair-nav {
      position: absolute; right: -0.2rem; top: 50%; transform: translateY(-50%);
      width: 1.9rem; height: 1.9rem; background: var(--card); border: 1px solid var(--border);
      border-radius: 6px; display: flex; align-items: center; justify-content: center;
      color: #F8FAFC; cursor: pointer; z-index: 2; transition: all 0.15s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    .bkt-mob-pair-nav svg {
      width: 22px; height: 22px; stroke-width: 2.5px;
    }
    .bkt-mob-pair-nav:hover { background: #334155; color: var(--gold); border-color: var(--gold); }
    
    .bkt-mob-pair.single-match .bkt-mob-pair-matches::after { display: none; }
    .bkt-mob-pair.single-match .bkt-mob-pair-matches { padding-right: 0; }
    .bkt-mob-pair.single-match .bkt-mob-pair-nav { display: none; }

    /* Nav prev/next */
    .bkt-mob-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: .75rem; padding: .5rem 0;
      border-top: 1px solid var(--border);
    }
    .bkt-mob-nav-label { font-size: .72rem; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: .05em; }
    .bkt-mob-nav-btn {
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      color: #94A3B8; font-size: .72rem; font-weight: 600; font-family: inherit;
      padding: .4rem .8rem; cursor: pointer; transition: all .15s; min-width: 90px;
    }
    .bkt-mob-nav-btn:not([disabled]):hover { border-color: var(--gold); color: var(--gold); }
    .bkt-mob-nav-btn[disabled] { opacity: 0; pointer-events: none; }
    .bkt-mob-nav-prev { text-align: left; }
    .bkt-mob-nav-next { text-align: right; }

    /* Phase header nav (top of phase content) */
    .bkt-phase-nav-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: .5rem 0 .6rem; margin-bottom: .2rem;
    }
    .bkt-phase-nav-top-btn {
      background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
      color: #CBD5E1; font-size: .72rem; font-weight: 700; font-family: inherit;
      padding: .38rem .75rem; cursor: pointer; transition: all .15s; min-width: 80px;
      display: flex; align-items: center; gap: .3rem;
    }
    .bkt-phase-nav-top-btn:hover { border-color: var(--gold); color: var(--gold); }
    .bkt-phase-nav-top-btn.nav-prev { justify-content: flex-start; }
    .bkt-phase-nav-top-btn.nav-next { justify-content: flex-end; }
    .bkt-phase-nav-top-btn.nav-hidden { opacity: 0; pointer-events: none; }
    .bkt-phase-nav-top-label { font-size: .78rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }

    /* Desktop phase nav tabs */
    .bkt-desktop-phase-nav {
      display: flex; gap: .5rem; padding: .5rem 0 .75rem; flex-wrap: wrap;
    }
    .bkt-desktop-phase-btn {
      background: var(--card); border: 1px solid var(--border); border-radius: 20px;
      color: #64748B; font-size: .75rem; font-weight: 700; font-family: inherit;
      padding: .35rem .9rem; cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .bkt-desktop-phase-btn:hover { border-color: #475569; color: #CBD5E1; }
    .bkt-desktop-phase-btn.active { background: rgba(245,197,24,.12); border-color: var(--gold); color: var(--gold); }

    .bkt-root-embedded .bkt-root { padding-top: 0; }

    @media (max-width: 767px) {
      .bkt-track {
        --bkt-col-w: 180px;
        --bkt-gap: 40px;
      }
      .bkt-main-title { font-size: 1.3rem; }
    }

/* ════════════════════════════════════════════════════════════
   TEAMS TAB — Clasificación global + Máximos goleadores
════════════════════════════════════════════════════════════ */
.tms-root { max-width: none; margin: 0 auto; padding: 1rem 0 2rem; }
.tms-root.tms-mode-bracket { max-width: none; }
.tms-mode-bracket #tms-sub-body { width: 100%; }
.tms-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #fff; letter-spacing: .04em; margin-bottom: .75rem; }

/* ── Sub-tabs ── */
.tms-sub-tabs {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tms-sub-tabs::-webkit-scrollbar { display: none; }
.tms-sub-tab {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  color: #94A3B8; padding: .45rem 1rem; font-size: .82rem; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.tms-sub-tab:hover { border-color: #475569; color: #CBD5E1; }
.tms-sub-tab.active { background: rgba(245,197,24,.12); border-color: var(--gold); color: var(--gold); }

/* ── Grid de grupos ── */
.tms-grp-block { margin-bottom: 1.2rem; }
.tms-grp-hd {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .06em;
  color: #CBD5E1; margin-bottom: .4rem; padding-left: .1rem;
}
.tms-grp-table { width: 100%; }
.grp-td-team button { background: none; border: none; color: #CBD5E1; cursor: pointer;
  font-size: .82rem; font-family: inherit; padding: 0; transition: color .15s; text-align: left; }
.grp-td-team button:hover { color: var(--gold); }
.tms-pts-cell { color: var(--gold); font-weight: 800; font-size: 1rem;
  background: rgba(245,197,24,.06); border-left: 1px solid rgba(245,197,24,.15); }
.tms-pos-num { color: #22C55E; font-weight: 700; }
.tms-neg { color: #EF4444; font-weight: 700; }

/* Grupos en grid 2 columnas en desktop */
#tms-sub-body:has(.tms-grp-block) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 1rem;
}

/* ════════════════════════════════════════════
   CARA A CARA (H2H)
════════════════════════════════════════════ */
.h2h-pickers {
  display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem;
  margin-bottom: 1rem;
}
.h2h-select {
  flex: 1; min-width: 0; appearance: none;
  background: var(--card2); color: var(--h2h-c, #fff);
  border: 1px solid var(--border); border-left: 3px solid var(--h2h-c, var(--border));
  border-radius: 10px; padding: .6rem .8rem;
  font-family: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  text-align: center; text-align-last: center;
}
.h2h-select:focus { outline: none; border-color: var(--gold); }
.h2h-vs-pill {
  flex: 0 0 auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em;
  font-size: 1.1rem; color: #94A3B8; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem;
}

/* Cabecera de duelo */
.h2h-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .75rem; margin-bottom: 1rem;
}
.h2h-head-side {
  background: var(--card); border: 1px solid var(--border);
  border-top: 3px solid var(--h2h-c, var(--gold));
  border-radius: 14px; padding: .85rem 1rem; text-align: center; min-width: 0;
}
.h2h-head-name {
  font-weight: 900; text-transform: uppercase; font-size: 1.05rem;
  color: var(--h2h-c, #fff); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h2h-head-sub { font-size: .78rem; color: #94A3B8; margin-top: .15rem; }
.h2h-head-mid { font-size: 1.6rem; }

/* Duelo directo */
.h2h-duel { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.h2h-duel-title {
  font-weight: 700; color: #E2E8F0; font-size: .95rem; margin-bottom: .7rem;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.h2h-duel-note { font-size: .72rem; font-weight: 400; color: #64748B; }
.h2h-duel-bar {
  display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
}
.h2h-duel-seg {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #0B1120; min-width: 0;
  transition: width .35s ease;
}
.h2h-seg-d { background: #475569; color: #CBD5E1; }
.h2h-duel-legend {
  margin-top: .6rem; font-size: .8rem; color: #94A3B8;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.h2h-duel-legend strong { color: #fff; }
.h2h-draw-dot { color: #475569; }
.h2h-duel-of { color: #64748B; margin-left: .25rem; }

/* Tabla comparativa */
.h2h-table-wrap { padding: .5rem .6rem; margin-bottom: 1rem; overflow: hidden; }
.h2h-table { width: 100%; border-collapse: collapse; }
.h2h-table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; padding: .5rem .4rem; text-align: center; width: 38%;
}
.h2h-table thead th.h2h-cell-lbl { width: 24%; }
.h2h-table td { padding: .55rem .4rem; border-top: 1px solid rgba(255,255,255,.05); }
.h2h-cell {
  text-align: center; width: 38%; font-weight: 800; font-size: 1rem;
  color: #94A3B8; position: relative;
}
.h2h-cell.h2h-win { color: #fff; }
.h2h-cell.h2h-win::after {
  content: "▲"; font-size: .55rem; color: var(--green);
  position: absolute; margin-left: .25rem; top: 50%; transform: translateY(-50%);
}
.h2h-cell-a.h2h-win { background: linear-gradient(90deg, rgba(34,197,94,.12), transparent); }
.h2h-cell-b.h2h-win { background: linear-gradient(270deg, rgba(34,197,94,.12), transparent); }
.h2h-cell-lbl {
  text-align: center; font-size: .78rem; color: #94A3B8; font-weight: 600;
  white-space: nowrap;
}

/* Partidos donde uno clavó y el otro falló */
.h2h-diff-block { margin-top: .5rem; }
.h2h-diff-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap;
}
.h2h-diff-list { display: flex; flex-direction: column; gap: .5rem; }
.h2h-diff-row {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: .65rem .85rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.h2h-diff-match { min-width: 0; }
.h2h-diff-teams {
  font-size: .85rem; color: #E2E8F0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h2h-diff-res {
  font-weight: 800; color: var(--gold); margin: 0 .25rem;
  background: rgba(245,197,24,.08); border-radius: 6px; padding: 0 .35rem;
}
.h2h-diff-phase { font-size: .7rem; color: #64748B; margin-top: .15rem; }
.h2h-diff-preds { display: flex; gap: .4rem; flex: 0 0 auto; }
.h2h-diff-pred {
  font-size: .8rem; font-weight: 800; border-radius: 8px; padding: .25rem .5rem;
  white-space: nowrap; border: 1px solid var(--border);
}
.h2h-diff-pred small { font-weight: 600; opacity: .8; font-size: .7rem; }
.h2h-pred-hit { color: var(--h2h-c, #fff); border-color: var(--h2h-c, var(--green)); background: rgba(34,197,94,.06); }
.h2h-pred-miss { color: #64748B; background: var(--surface); }
.h2h-diff-empty { margin-top: .5rem; }

@media (max-width: 600px) {
  .h2h-pickers { flex-direction: column; gap: .5rem; }
  .h2h-select { width: 100%; }
  .h2h-head-name { font-size: .92rem; }
  .h2h-head-mid { font-size: 1.3rem; }
  .h2h-diff-row { flex-direction: column; align-items: stretch; gap: .5rem; }
  .h2h-diff-preds { justify-content: space-between; }
  .h2h-diff-pred { flex: 1; text-align: center; }
}

/* ════════════════════════════════════════════
   VER MÁS (tablas paginadas de estadísticas)
════════════════════════════════════════════ */
.ver-mas-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--card2); color: #94A3B8;
  border: 1px solid var(--border); border-radius: 8px;
  padding: .45rem 1.1rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ver-mas-btn:hover {
  background: rgba(245,197,24,.12); color: var(--gold);
  border-color: rgba(245,197,24,.35);
}

/* ════════════════════════════════════════════
   EL GEMELO (afinidad de predicciones)
════════════════════════════════════════════ */
.twin-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}
.twin-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1.2rem;
}
.twin-card-best { border-top: 3px solid var(--gold); }
.twin-card-worst { border-top: 3px solid #38BDF8; }
.twin-card-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.twin-icon { font-size: 1.7rem; line-height: 1; }
.twin-title { font-weight: 800; color: #fff; font-size: 1.05rem; }
.twin-sub { font-size: .75rem; color: #94A3B8; }
.twin-names {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .8rem;
}
.twin-name {
  font-weight: 900; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em;
}
.twin-amp { color: #64748B; font-weight: 700; font-size: .9rem; }
.twin-bar {
  height: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.twin-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.twin-bar-fill.is-best { background: linear-gradient(90deg, #EAB308, var(--gold)); }
.twin-bar-fill.is-worst { background: linear-gradient(90deg, #0EA5E9, #38BDF8); }
.twin-pct {
  text-align: center; font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em;
  font-size: 1.5rem; color: #E2E8F0; margin-top: .5rem;
}
.twin-detail {
  text-align: center; font-size: .78rem; color: #94A3B8; margin-top: .35rem;
}
.twin-detail-of { color: #64748B; display: block; margin-top: .15rem; }
.twin-rank-pct {
  font-weight: 800; color: var(--gold);
  background: rgba(245,197,24,.08); border-radius: 6px; padding: .1rem .45rem;
}

/* ── Liga table ── */
.tm-league-table {
  width: 100%; border-collapse: collapse; font-size: .82rem; color: #CBD5E1;
}
.tm-league-table thead tr {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}
.tm-league-table th {
  padding: .45rem .6rem; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: #64748B;
  text-align: center; white-space: nowrap;
}
.tm-league-table th.tlg-team { padding-left: .85rem; }
.tm-league-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.tm-league-table tbody tr:hover { background: rgba(255,255,255,.05); }
.tm-league-table td { padding: .45rem .6rem; text-align: center; white-space: nowrap; }

.tlg-pos { width: 2rem; color: #475569; font-size: .72rem; }
.tlg-team { text-align: left !important; padding-left: .85rem !important; }
.tlg-flag { font-size: 1.1rem; margin-right: .35rem; }

/* ── Columnas FIFA + Rendimiento (clasificación general) ── */
.tlg-td-fifa  { text-align: center; white-space: nowrap; }
.tlg-td-perf  { text-align: center; white-space: nowrap; padding-left: .3rem !important; }
.tlg-fifa-rank-num { font-size: .68rem; color: #475569; font-weight: 600; }
.tlg-fifa-na       { font-size: .68rem; color: #2D3748; }
.tlg-perf          { font-size: .82rem; font-weight: 800; display: inline-flex; align-items: center; gap: .1rem; cursor: default; }
.tlg-perf-val      { font-size: .68rem; font-weight: 700; }
.tlg-perf-legend {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .4rem 1.1rem; border-bottom: 1px solid var(--border);
  font-size: .64rem; color: #475569;
}
.tlg-leg-sep  { color: #2D3748; }
.tlg-leg-item { display: inline-flex; align-items: center; gap: .25rem; }

.tlg-team button { background: none; border: none; color: #CBD5E1; cursor: pointer; font-size: .82rem;
  font-family: inherit; padding: 0; transition: color .15s; }
.tlg-team button:hover { color: var(--gold); }
.tlg-g { color: #22C55E; }
.tlg-l { color: #EF4444; }
.tlg-pts { font-weight: 700; background: rgba(245,197,24,.06); border-left: 1px solid rgba(245,197,24,.15); }
.tlg-pts-val { color: var(--gold); font-size: 1.1rem; font-weight: 800; background: rgba(245,197,24,.06); border-left: 1px solid rgba(245,197,24,.15); }
.tlg-pos-num { color: #22C55E; font-weight: 700; }
.tlg-neg { color: #EF4444; font-weight: 700; }
.grp-thirds-link {
  background: none; border: none; cursor: pointer;
  color: #94A3B8; font-size: .7rem; text-decoration: underline;
  padding: 0; margin-left: .3rem; font-family: inherit;
  transition: color .15s;
}
.grp-thirds-link:hover { color: var(--gold); }
.trd-tie-badge {
  font-size: .62rem; font-weight: 700; color: #F59E0B;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  border-radius: 4px; padding: .05rem .3rem; margin-left: .2rem; white-space: nowrap;
}
.trd-tie-grp { color: #94A3B8; background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.25); }
.grp-third-tie-cutoff td { background: rgba(245,158,11,.06) !important; }
.trd-or-sep { font-size: .7rem; color: #64748B; margin: 0 .25rem; }
.trd-grp-tag { font-size: .7rem; color: #64748B; margin-left: .35rem; }
.trd-badges { display: inline; }
.trd-badges .trd-tie-badge:first-child { margin-left: .35rem; }

/* ── Scorers table ── */
.tm-scorers-table {
  width: 100%; border-collapse: collapse; font-size: .82rem; color: #CBD5E1;
}
.tm-scorers-table thead tr {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}
.tm-scorers-table th {
  padding: .45rem .6rem; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: #64748B;
  text-align: center; white-space: nowrap;
}
.tm-scorers-table th.tsc-name, .tm-scorers-table th.tsc-team { text-align: left; }
.tm-scorers-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.tm-scorers-table tbody tr:hover { background: rgba(255,255,255,.05); }
.tm-scorers-table td { padding: .45rem .6rem; text-align: center; white-space: nowrap; }

.tsc-pos { width: 2rem; color: #475569; font-size: .72rem; }
.tsc-name { text-align: left !important; }
.tsc-team { text-align: left !important; }
.tsc-flag { font-size: 1.1rem; margin-right: .3rem; }
.tsc-player { background: none; border: none; color: #E2E8F0; cursor: default; font-size: .82rem; font-family: inherit; padding: 0; font-weight: 500; }
.tsc-team button { background: none; border: none; color: #CBD5E1; cursor: pointer; font-size: .82rem;
  font-family: inherit; padding: 0; transition: color .15s; }
.tsc-team button:hover { color: var(--gold); }
.tsc-g-val { color: #fff; font-weight: 700; font-size: .9rem; }
.tsc-pen-tag { background: rgba(124,58,237,.25); color: #A78BFA; font-size: .65rem;
  font-weight: 700; padding: .1rem .35rem; border-radius: 4px; letter-spacing: .03em; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .tms-title { font-size: 1.4rem; }
  .tm-league-table, .tm-scorers-table { font-size: .75rem; }
  /* Ocultar columnas menos relevantes en móvil */
  .tm-league-table th:nth-child(5),
  .tm-league-table td:nth-child(5) { display: none; } /* E (empates) */
  .tm-scorers-table th.tsc-pj,
  .tm-scorers-table td.tsc-pj { display: none; } /* PJ */
  /* La celda de equipo puede ocupar varias líneas para no empujar las
     columnas de estadísticas fuera de pantalla. */
  .tm-league-table td.tlg-team { white-space: normal; padding-top: .5rem; padding-bottom: .5rem; }
  .tm-league-table td, .tm-league-table th { padding-left: .4rem; padding-right: .4rem; }
  /* Las badges de empate van en su propia línea bajo el equipo */
  .trd-badges { display: block; margin-top: .25rem; }
  .trd-badges .trd-tie-badge:first-child { margin-left: 0; }
}
@media (max-width: 480px) {
  .tms-root { padding: .6rem 0 1.5rem; }
  /* Ocultar GF y GC en pantallas muy pequeñas para que PTS sea siempre visible */
  .tm-league-table th:nth-child(7),
  .tm-league-table td:nth-child(7),
  .tm-league-table th:nth-child(8),
  .tm-league-table td:nth-child(8) { display: none; } /* GF, GC */
  /* Ocultar columna FIFA (rango numérico) — el indicador Rend. se mantiene */
  .tlg-general .tlg-td-fifa { display: none; }
  .tlg-perf-legend { font-size: .6rem; gap: .4rem; }
  .tlg-leg-sep { display: none; }
}

/* ════════════════════════════════════════════════════════════
   BETS TAB — Apuestas internas
════════════════════════════════════════════════════════════ */
.bts-root { max-width: 680px; margin: 0 auto; padding: 1rem 0 2rem; }

/* ── Login card ── */
.bts-login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 2rem 2rem 1.8rem; max-width: 380px; margin: 2rem auto; text-align: center;
}
.bts-lock-icon { font-size: 2.5rem; margin-bottom: .4rem; line-height: 1; }
.bts-login-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: #fff;
  letter-spacing: .04em; margin-bottom: .2rem;
}
.bts-login-sub { font-size: .8rem; color: #94A3B8; margin-bottom: 1.4rem; line-height: 1.5; }
.bts-setup-warn {
  background: rgba(245,158,11,.1); color: #FCD34D;
  border: 1px solid rgba(245,158,11,.3); border-radius: 8px;
  padding: .6rem .9rem; font-size: .78rem; margin-bottom: 1rem; text-align: left;
}
.bts-login-form { display: flex; flex-direction: column; gap: .55rem; text-align: left; }
.bts-label {
  font-size: .72rem; font-weight: 600; color: #64748B;
  text-transform: uppercase; letter-spacing: .06em;
}
.bts-select, .bts-input {
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  color: #E2E8F0; padding: .65rem .85rem; font-size: .88rem; font-family: inherit;
  width: 100%; outline: none; transition: border-color .15s; appearance: none;
  -webkit-appearance: none;
}
.bts-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }
.bts-select:focus, .bts-input:focus { border-color: var(--gold); }
.bts-login-err {
  background: rgba(239,68,68,.1); color: #FCA5A5;
  border: 1px solid rgba(239,68,68,.2); border-radius: 8px;
  padding: .5rem .75rem; font-size: .79rem; line-height: 1.45;
}
.bts-login-btn {
  background: var(--gold); color: #000; border: none; border-radius: 10px;
  padding: .8rem 1.5rem; font-size: .95rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity .15s; margin-top: .3rem;
}
.bts-login-btn:hover:not(:disabled) { opacity: .85; }
.bts-login-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Logged-in header ── */
.bts-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.bts-main-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #fff;
  letter-spacing: .04em; line-height: 1;
}
.bts-main-sub { font-size: .82rem; color: #94A3B8; margin-top: .25rem; }
.bts-logout-btn {
  background: rgba(255,255,255,.07); border: 1px solid var(--border);
  border-radius: 8px; color: #94A3B8; padding: .45rem .85rem;
  font-size: .78rem; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.bts-logout-btn:hover { background: rgba(255,255,255,.12); color: #E2E8F0; }

/* ── Bet form card ── */
.bts-submitted-banner {
  background: rgba(34,197,94,.1); color: #4ADE80;
  border: 1px solid rgba(34,197,94,.25); border-radius: 10px;
  padding: .65rem 1rem; font-size: .85rem; font-weight: 600; margin-bottom: 1rem;
}
.bts-form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.4rem; margin-bottom: 1rem;
}
.bts-form-intro { font-size: .83rem; color: #94A3B8; margin-bottom: 1.2rem; line-height: 1.55; }
.bts-q { margin-bottom: 1rem; }
.bts-q-label { display: block; font-size: .87rem; font-weight: 600; color: #E2E8F0; margin-bottom: .35rem; }
.bts-submit-btn {
  background: linear-gradient(135deg, #F5C518 0%, #d4a800 100%); color: #000;
  border: none; border-radius: 10px; padding: .85rem 1.5rem;
  font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: opacity .15s, transform .1s; margin-top: .4rem; width: 100%;
}
.bts-submit-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.bts-submit-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── My predictions display ── */
.bts-my-preds {
  background: var(--card) !important; border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.bts-preds-title { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.bts-pred-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.bts-pred-row:last-child { border-bottom: none; }
.bts-pred-q { font-size: .8rem; color: #94A3B8; flex: 1; min-width: 0; }
.bts-pred-v { font-size: .88rem; font-weight: 700; color: var(--gold); white-space: nowrap; }

/* ── Others detail box ── */
.bts-view-others { display: flex; flex-direction: column; gap: .4rem; }
.bts-other-preds {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem;
}
.bts-other-title { font-size: .82rem; font-weight: 700; color: #CBD5E1; margin-bottom: .6rem; }

/* ── Overview table ── */
.bts-overview-table {
  width: 100%; border-collapse: collapse; font-size: .8rem; color: #CBD5E1;
}
.bts-overview-table thead tr {
  background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border);
}
.bts-overview-table th {
  padding: .5rem .65rem; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: #64748B;
  text-align: center; white-space: nowrap;
}
.bts-overview-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); transition: background .12s; }
.bts-overview-table tbody tr:hover { background: rgba(255,255,255,.04); }
.bts-overview-table td { padding: .45rem .65rem; text-align: center; white-space: nowrap; }
.bts-tbl-name { text-align: left !important; font-weight: 600; color: #E2E8F0; }
.bts-tbl-me { background: rgba(245,197,24,.05); }
.bts-tbl-you { font-size: .65rem; color: #64748B; font-weight: 400; }
.bts-tbl-pending { opacity: .5; }
.bts-tbl-empty { color: #334155; font-style: italic; }
.bts-tbl-val { font-size: .78rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .bts-main-title { font-size: 1.4rem; }
  .bts-login-card { margin: 1rem auto; padding: 1.5rem; }
  .bts-header { flex-direction: column; gap: .5rem; }
  .bts-logout-btn { align-self: flex-end; }
  /* Ocultar columnas ⚔️ y 🌍 en móvil muy pequeño para que quepa */
  @media (max-width: 400px) {
    .bts-overview-table th:nth-child(4),
    .bts-overview-table td:nth-child(4),
    .bts-overview-table th:nth-child(5),
    .bts-overview-table td:nth-child(5) { display: none; }
  }
}
@media (max-width: 480px) {
  .bts-root { padding: .6rem 0 1.5rem; }
  .bts-form-card { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TERMÓMETRO DE FORMA (tab Progresión)
═══════════════════════════════════════════════════════════════ */
.forma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
}
.forma-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fcolor, var(--border));
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: box-shadow .2s;
}
.forma-card:hover { box-shadow: 0 0 0 1px var(--fcolor, var(--border)); }
.forma-card-head { display: flex; flex-direction: column; gap: .15rem; }
.forma-name-row { display: flex; align-items: center; gap: .45rem; }
.forma-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.forma-name { font-weight: 800; color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.forma-meta { font-size: .63rem; color: #64748B; font-weight: 600; }
/* heat bar */
.forma-heat-wrap {
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.forma-heat-bar { height: 3px; border-radius: 2px; transition: width .6s; min-width: 2px; }
/* sparkline */
.forma-spark { border-radius: 6px; overflow: hidden; }
.forma-spark-svg { width: 100%; height: 42px; display: block; }
/* dots row */
.forma-dots-row {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
}
.forma-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  flex: 1;
  cursor: default;
}
.forma-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  transition: transform .15s;
  flex-shrink: 0;
}
.forma-dot-wrap:hover .forma-dot { transform: scale(1.15); }
.forma-dot-prov {
  border-style: dashed;
  animation: liveDotPulse 1.5s ease-in-out infinite;
}
.forma-dot-lbl {
  font-size: .52rem;
  color: #475569;
  font-weight: 600;
  text-align: center;
  max-width: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.01em;
}
/* footer */
.forma-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.forma-badge { font-size: .73rem; font-weight: 700; }
.forma-sum { font-size: .65rem; color: #64748B; font-weight: 600; }
/* legend in description */
.forma-legend-item { font-size: .72rem; font-weight: 700; margin-left: .5rem; }

@media (max-width: 1024px) {
  .forma-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .forma-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .forma-dots-row { gap: .18rem; }
  .forma-dot  { width: 22px; height: 22px; font-size: .6rem; }
  .forma-dot-lbl { font-size: .48rem; max-width: 24px; }
  .forma-name { font-size: .8rem; }
  .forma-spark-svg { height: 36px; }
}
@media (max-width: 480px) {
  .forma-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .forma-card { padding: .65rem .6rem; gap: .4rem; }
  .forma-dots-row { gap: .12rem; }
  .forma-dot  { width: 20px; height: 20px; font-size: .57rem; }
  .forma-dot-lbl { font-size: .44rem; max-width: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   TAB: ESCENARIOS
═══════════════════════════════════════════════════════════════ */
/* row selection */
.sce-tr-selected { background: rgba(255,255,255,.04) !important; }
.sce-tr-selected .sce-td { box-shadow: inset 3px 0 0 var(--gold); }
.sce-yo-badge {
  font-size: .6rem; font-weight: 800; padding: .1rem .35rem;
  border-radius: 3px; background: var(--gold); color: #0F172A;
  text-transform: uppercase; letter-spacing: .04em;
}

/* player selector pills */
.sce-pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sce-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1.5px solid; background: transparent;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  line-height: 1;
}
.sce-pill:hover { transform: translateY(-1px); filter: brightness(1.15); }
.sce-pill-active { font-weight: 800; }
.sce-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sce-pill-yo {
  font-size: .55rem; font-weight: 900; padding: .05rem .3rem;
  border-radius: 3px; background: #0F172A; color: inherit;
  text-transform: uppercase; letter-spacing: .04em; margin-left: .1rem;
}
.sce-close-btn {
  font-size: .7rem; font-weight: 700; color: #64748B;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .25rem .6rem; cursor: pointer; transition: color .15s, border-color .15s;
}
.sce-close-btn:hover { color: #fff; border-color: #475569; }

/* personal section */
.sce-pers-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem;
}
.sce-pers-vs { display: flex; align-items: center; gap: .4rem; }
.sce-pers-sit { font-size: .82rem; margin-bottom: .75rem; line-height: 1.45; }
.sce-pers-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; text-align: center;
}
.sce-pers-stat-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1; }
.sce-pers-stat-lbl { font-size: .6rem; color: #64748B; font-weight: 700; text-transform: uppercase; margin-top: .1rem; }

/* battle grid */
.sce-battle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: .5rem; }
.sce-battle-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .9rem 1rem;
}
.sce-battle-hd { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .45rem; }
.sce-battle-match { font-weight: 700; font-size: .83rem; color: #fff; }
.sce-battle-time  { font-size: .65rem; color: #64748B; }
.sce-battle-outcome { font-size: .7rem; font-weight: 700; margin-bottom: .55rem; }
.sce-battle-preds { display: flex; align-items: center; gap: .5rem; }
.sce-battle-pred {
  flex: 1; border: 1px solid; border-radius: 8px; padding: .5rem .6rem; text-align: center;
}
.sce-battle-pred-who { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.sce-battle-pred-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; color: #fff; margin-bottom: .15rem; }
.sce-battle-pred-sign { font-size: .63rem; font-weight: 700; }
.sce-battle-sep { font-size: .65rem; font-weight: 800; color: #475569; flex-shrink: 0; }

/* ── battle filter pills ── */
.sce-bfilt-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.sce-bfilt-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card2);
  color: #94A3B8;
  transition: all .15s;
  white-space: nowrap;
}
.sce-bfilt-btn:hover:not(.sce-bfilt-active) {
  border-color: #475569;
  color: #CBD5E1;
}
.sce-bfilt-active {
  background: var(--card2);
  color: #F1F5F9;
  border-color: #64748B;
}
.sce-bfilt-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  background: rgba(255,255,255,.1);
  color: inherit;
}
.sce-bfilt-empty {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  color: #64748B;
  font-size: .85rem;
}
@media (max-width: 480px) {
  .sce-bfilt-btn { padding: .25rem .65rem; font-size: .74rem; }
}

@media (max-width: 767px) {
  .sce-pers-stats   { grid-template-columns: repeat(2, 1fr); }
  .sce-battle-grid  { grid-template-columns: 1fr; }
  .sce-pers-stat-val { font-size: 1.3rem; }
  .sce-battle-pred-score { font-size: 1.25rem; }
}

.sce-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  text-align: center;
}
.sce-hero-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1;
}
.sce-hero-stat-lbl {
  font-size: .65rem;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: .2rem;
}
.sce-table { border-collapse: collapse; }
.sce-th {
  padding: .55rem .75rem;
  text-align: left;
  font-size: .65rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748B;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sce-td {
  padding: .65rem .75rem;
  vertical-align: middle;
  border-bottom: 1px solid transparent;
}
.sce-tr:not(:last-child) .sce-td { border-bottom-color: var(--border); }
.sce-tr:hover { background: rgba(255,255,255,.025); }
.sce-td-num { text-align: right; }
.sce-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--card2);
  font-size: .75rem;
  font-weight: 700;
  color: #94A3B8;
}
.sce-player-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sce-max-wrap { display: flex; flex-direction: column; gap: .25rem; min-width: 80px; }
.sce-max-bar-bg { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.sce-max-bar-fill { height: 4px; border-radius: 2px; transition: width .5s; }
.sce-diff-badge { font-size: .75rem; font-weight: 700; white-space: nowrap; }

/* Próximas predicciones */
.sce-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.sce-match-hd {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.sce-match-name { font-weight: 700; font-size: .85rem; color: #fff; }
.sce-match-time { font-size: .68rem; color: #64748B; }
.sce-preds { display: flex; flex-direction: column; gap: .3rem; }
.sce-pred-row { display: flex; align-items: center; gap: .5rem; }
.sce-pred-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sce-pred-name { font-size: .75rem; color: #94A3B8; flex: 1; }
.sce-pred-score { font-family: 'Bebas Neue', sans-serif; font-size: .9rem; color: #fff; }

@media (max-width: 767px) {
  .sce-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .sce-hide-sm { display: none !important; }
  .sce-upcoming-grid { grid-template-columns: 1fr; }
  .sce-diff-badge { font-size: .68rem; }
  .sce-td { padding: .55rem .5rem; }
}
@media (max-width: 480px) {
  .sce-hero-stat-val { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MODO INVITADO — oculta contenido exclusivo de la porra
═══════════════════════════════════════════════════════════════ */
body.mode-guest .porra-only { display: none !important; }
/* Accesos directos de la nav: solo visibles en modo público */
body.mode-porra .guest-only { display: none !important; }
/* En público, forzar siempre una sola fila en la nav de escritorio */
body.mode-guest .desktop-nav .page-shell { flex-wrap: nowrap; }
/* En público las sub-tabs internas son redundantes (ya están en la nav) */
body.mode-guest .tms-sub-tabs { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   TOP TABLE — Partidos más top por ranking FIFA
═══════════════════════════════════════════════════════════════ */
.tpt-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tpt-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  display: grid;
  grid-template-columns: 2.8rem 1fr auto;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* rank column wrapper — position:relative so the fin-badge can anchor to it */
.tpt-rank-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
}
.tpt-fin-badge {
  position: absolute;
  top: -.55rem;
  right: -.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #22C55E;
  color: #fff;
  font-size: .58rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--card);
  pointer-events: none;
}
/* filter pills */
.tpt-filt-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.tpt-filt-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .75rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card2);
  color: #94A3B8;
  transition: all .15s;
  white-space: nowrap;
}
.tpt-filt-btn:hover:not(.tpt-filt-active) { border-color: #475569; color: #CBD5E1; }
.tpt-filt-active { background: var(--gold); border-color: var(--gold); color: #0F172A; }
.tpt-filt-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  background: rgba(255,255,255,.12);
  color: inherit;
}
.tpt-row:hover { border-color: #475569; background: var(--card2); }
.tpt-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tpt-played { opacity: .72; }
.tpt-live-row { border-color: #22C55E88 !important; background: rgba(34,197,94,.05); }
.tpt-live-row:hover { border-color: #22C55E !important; }

/* rank badge */
.tpt-rank {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  min-width: 2.8rem;
  padding: .15rem .3rem;
  border-radius: 6px;
}
.tpt-rank-gold  { color: var(--gold);    background: rgba(245,197,24,.12); }
.tpt-rank-green { color: #22C55E;        background: rgba(34,197,94,.12);  }
.tpt-rank-amber { color: #F59E0B;        background: rgba(245,158,11,.12); }
.tpt-rank-muted { color: #64748B;        background: rgba(100,116,139,.1); }

/* teams */
.tpt-teams {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.tpt-team {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
  min-width: 0;
}
.tpt-team-home { justify-content: flex-end; text-align: right; }
.tpt-team-away { justify-content: flex-start; text-align: left; }
.tpt-flag {
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
/* name + FIFA rank stacked vertically */
.tpt-name-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.tpt-team-home .tpt-name-block { align-items: flex-end; }
.tpt-team-away .tpt-name-block { align-items: flex-start; }
.tpt-name {
  font-weight: 700;
  font-size: .88rem;
  color: #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tpt-fifa-rank {
  font-size: .65rem;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
  line-height: 1.2;
}

/* centre VS / result */
.tpt-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 4.5rem;
  text-align: center;
}
.tpt-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--gold);
  white-space: nowrap;
  font-weight: 700;
}
.tpt-date {
  font-size: .73rem;
  color: #94A3B8;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
  text-align: center;
}
/* HOY highlight */
.tpt-date-hoy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: #E2E8F0;
}
.tpt-hoy-label {
  display: inline-block;
  background: #F97316;
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .07em;
  padding: .12rem .4rem;
  border-radius: 4px;
  line-height: 1.2;
  animation: liveDotPulse 2s ease-in-out infinite;
}
/* Card HOY — fondo tintado + borde izquierdo naranja */
.tpt-row-hoy {
  border-left: 3px solid #F97316;
  background: linear-gradient(90deg, rgba(249,115,22,.10) 0%, var(--card) 35%);
}
.tpt-row-hoy:hover {
  background: linear-gradient(90deg, rgba(249,115,22,.16) 0%, color-mix(in srgb, var(--card) 85%, #fff) 35%);
}
/* MAÑANA highlight */
.tpt-date-manana {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: #E2E8F0;
}
.tpt-manana-label {
  display: inline-block;
  background: #3B82F6;
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .05em;
  padding: .12rem .4rem;
  border-radius: 4px;
  line-height: 1.2;
}
/* Card MAÑANA — borde izquierdo azul sutil */
.tpt-row-manana {
  border-left: 3px solid #3B82F6;
  background: linear-gradient(90deg, rgba(59,130,246,.07) 0%, var(--card) 35%);
}
.tpt-live {
  font-size: .72rem;
  font-weight: 800;
  color: #22C55E;
  animation: liveDotPulse 1.4s ease-in-out infinite;
}

/* ── Highlights video modal ─────────────────────────────────────────── */
#hl-video-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 10000;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  animation: cl-fade .18s ease;
}
.hl-modal-box {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 860px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
}
.hl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hl-modal-title {
  font-size: .85rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hl-modal-close {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.hl-modal-close:hover { color: #f1f5f9; background: rgba(255,255,255,.08); }
@media (max-width: 767px) {
  #hl-video-modal { padding: 0; align-items: flex-end; }
  .hl-modal-box { border-radius: 14px 14px 0 0; max-width: 100%; width: 100%; }
}

/* ── Cambios de liderato: mobile cards ── */
.ldr-mob-row {
  background: transparent !important;
}
.ldr-mob-cell {
  padding: .5rem 0 !important;
  border-top: none !important;
}
.ldr-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.ldr-card-num {
  font-size: .75rem;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.9;
}
.ldr-card-match {
  font-size: .8rem;
  font-weight: 700;
  color: #E2E8F0;
  line-height: 1.3;
}
.ldr-card-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: .4rem;
  margin-top: .2rem;
  flex-wrap: wrap;
}
.ldr-card-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1;
  min-width: 70px;
}
.ldr-card-lbl {
  font-size: .6rem;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}
.ldr-card-val {
  font-size: .8rem;
  font-weight: 800;
}
.ldr-card-crown {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.ldr-card-inicio {
  color: #64748B;
  font-style: italic;
  font-weight: 500;
}
.ldr-card-sep {
  color: #475569;
  font-weight: 800;
  font-size: .85rem;
  align-self: center;
}
.ldr-card-pts {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 700;
  margin-left: auto;
  align-self: center;
  line-height: 1;
}
.ldr-card-pts span {
  font-size: .7rem;
  font-family: sans-serif;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  margin-left: .1rem;
}

/* ── Highlights button on match card ─────────────────────────────────── */
.match-hl-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border-radius: 20px;
  border: 1px solid rgba(239,68,68,.45);
  background: rgba(239,68,68,.12);
  color: #f87171;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  text-decoration: none;
}
.match-row:hover .match-hl-btn {
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.7);
}

/* ── Highlights DAZN player ───────────────────────────────────────────── */
.hl-section {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.04);
  margin-bottom: .75rem;
}
.hl-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem .5rem;
}
.hl-title {
  font-weight: 700;
  font-size: .9rem;
  color: #F1F5F9;
  flex: 1;
}
.hl-dazn-badge {
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .06em;
  background: #111;
  color: #fff;
  border: 1px solid #333;
  padding: .1rem .4rem;
  border-radius: 4px;
}
.hl-yt-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  color: #94A3B8;
  text-decoration: none;
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.hl-yt-link:hover { color: #FF0000; background: rgba(255,0,0,.08); }
.hl-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.hl-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* right meta */
.tpt-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  min-width: 7rem;
  flex-shrink: 0;
}
.tpt-phase {
  font-size: .65rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tpt-tv-row {
  display: flex;
  gap: .3rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.tpt-combined {
  font-size: .65rem;
  font-weight: 700;
  color: #475569;
}
.tpt-go {
  font-size: .75rem;
  color: #475569;
}
.tpt-row:hover .tpt-go { color: var(--gold); }

/* legend */
.tpt-legend {
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 12px;
}

/* mobile */
@media (max-width: 767px) {
  .tpt-row {
    grid-template-columns: 2.4rem 1fr;
    grid-template-rows: auto auto;
    gap: .3rem .5rem;
    padding: .65rem .75rem;
  }
  /* rank-wrap (+ badge) spans both rows, vertically centred */
  .tpt-rank-wrap {
    grid-row: 1 / 3;
    align-self: center;
    width: 2.4rem;
  }
  .tpt-rank {
    font-size: 1.05rem;
  }
  /* teams row: keep horizontal (home | vs | away), tighter */
  .tpt-teams {
    grid-column: 2;
    gap: .25rem;
  }
  .tpt-team { min-width: 0; align-items: center; }
  .tpt-team-home { justify-content: flex-end; text-align: right; }
  .tpt-team-away { justify-content: flex-start; text-align: left; }
  .tpt-flag { font-size: 1rem; align-self: center; line-height: 1; }
  .tpt-name {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
  }
  .tpt-fifa-rank { font-size: .6rem; }
  .tpt-vs { min-width: 3.8rem; }
  /* meta strip below, full width */
  .tpt-meta {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .45rem;
    border-top: 1px solid var(--border);
    padding-top: .3rem;
    margin-top: 0;
    min-width: 0;
  }
  .tpt-tv-row { justify-content: center; }
  /* HOY / MAÑANA en una sola línea en mobile */
  .tpt-date-hoy,
  .tpt-date-manana {
    flex-direction: row;
    align-items: center;
    gap: .22rem;
  }
  .tpt-hoy-label,
  .tpt-manana-label {
    font-size: .52rem;
    padding: .09rem .28rem;
    animation: none;  /* sin pulso en mobile para que no moleste */
  }
  .tpt-date-hoy .tpt-hoy-label { animation: liveDotPulse 2s ease-in-out infinite; }
  /* TV badges más pequeños en mobile */
  .tpt-tv-row .tv-badge { font-size: .5rem !important; padding: .08rem .28rem !important; }
  .tpt-go { display: none; }
  .tpt-combined { font-size: .62rem; }
}
/* filter pills compact on mobile */
@media (max-width: 767px) {
  .tpt-filt-btn { padding: .22rem .55rem; font-size: .74rem; }
}
@media (max-width: 480px) {
  .tpt-name { max-width: 68px; font-size: .74rem; }
  .tpt-vs { min-width: 3.4rem; }
  /* pills aún más compactos en móvil muy pequeño */
  .tpt-filt-btn { padding: .18rem .38rem; font-size: .68rem; }
  .tpt-filt-count { min-width: .95rem; height: .95rem; font-size: .58rem; }
}



/* Highlight animation for mobile bracket navigation */
@keyframes highlightTargetPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.7); border-color: rgba(245, 197, 24, 0.8); }
  50%  { box-shadow: 0 0 15px 5px rgba(245, 197, 24, 0); border-color: rgba(245, 197, 24, 1); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); border-color: var(--color-border); }
}
.highlight-target {
  animation: highlightTargetPulse 2s ease-out;
  border: 1px solid var(--color-border);
}