/* ============================================================
   2Pick — Sistema de diseño "Coliseo"
   Oscuro · cálido (ink/arena) · Archivo (Anton en hero) · Material Symbols
   Marca: ember (acento/urgencia) + oro (dinero/análisis).
   Semántica sagrada: verde=vivo · rojo=fuera · ámbar=análisis.
   ============================================================ */

:root {
  color-scheme: dark;        /* lo que pinta el NAVEGADOR, no nosotros (ver el meta en index.html) */
  /* ===== NEUTROS cálidos (ink / arena) — base "Coliseo", OSCURO (único tema) =====
     Escala de ELEVACIÓN: fondo → tarjeta → sub-elemento → sheet. */
  --bg: #0c0a08;             /* nivel 0 */
  --surface: #1b1611;        /* nivel 1 · tarjetas */
  --surface-2: #262019;      /* nivel 2 · sub-elementos, inputs, badges */
  --surface-3: #332b21;      /* nivel 3 · sheets / popovers */
  --border: #322c24;
  --border-strong: #48402f;
  --card-edge: #e3dacb;      /* legado (borde base .card; en oscuro lo pisa --border-strong) */

  /* Texto */
  --text: #e8e2d4;           /* sand */
  --text-2: #a79e90;         /* secundario (ver override a #b6ad9d más abajo) */
  --text-3: #6e665a;         /* terciario */

  /* ===== MARCA (identidad) ===== ember = acento/CTA/urgencia · gold = dinero/análisis */
  --primary: #f0552d;
  --primary-hover: #f46f49;
  --primary-weak: #2a140c;
  --primary-border: #5c2a17;
  --gold: #e8b341;
  --arena: #e7ddcf;          /* selección NEUTRA del pick de quiniela (arena/sand; NO ember) */
  --arena-weak: rgba(231,221,207,.08);
  --text-4: #4d4642;         /* 4º nivel: marcador vacío, guiones del stepper de quiniela */

  /* ===== SEMÁNTICA (SAGRADA · nunca cambia) =====
     verde = vivo/ganador · rojo = fuera · ámbar = análisis/deadline */
  --success: #34d17a;
  --success-weak: #10241a;
  --success-border: #1e4d37;
  --danger: #f26d6d;
  --danger-weak: #2a1719;
  --danger-border: #5c2b2b;
  --revived-weak: #191a30;   /* índigo tenue opaco (badge "Revivió") */
  --revived-border: #34386e;

  /* Barra de probabilidad / duelo: dos rivales, sin lectura de bueno/malo */
  --duel-a: #818cf8;   /* índigo */
  --duel-b: #2dd4bf;   /* teal */

  /* Acento de "análisis" (ámbar) */
  --analysis: #f0b429;
  --analysis-weak: #362a10;
  --analysis-border: #5c4a1e;

  /* Acento "administrativo" (azul): inscripción abierta — ni vas ganando/perdiendo ni vivo/fuera */
  --admin-blue: #4A7FA5;

  /* Radios y sombras (sutiles en oscuro: la elevación la carga el tono) */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.22);
  --shadow-md: 0 6px 20px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.44);

  --ring: 0 0 0 3px rgba(240,85,45,.30);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 150ms;
  --t: 200ms;

  --tap: 44px;             /* objetivo táctil mínimo */

  /* ===== ESCALAS (rediseño): tipografía · espaciado · radios =====
     Independientes del tema. La migración de valores libres a estos
     tokens es progresiva (Ronda 1/2).
     EXCEPCIÓN INTENCIONAL (decisión Diego, B3): los NÚMEROS DE DISPLAY/énfasis
     (marcadores 19px, stats 22px, montos, scores) y los ÍCONOS (.msr) NO entran
     a la escala de texto — son datos, no cuerpo. NO "corregirlos" a --fs-*. */
  --fs-1: 11px;   /* eyebrow / etiquetas en mayúsculas */
  --fs-2: 12px;   /* meta / subtítulos */
  --fs-3: 13px;   /* secundario / botones chicos */
  --fs-4: 14px;   /* cuerpo (densidad afinada de la app; el doc sugería 15) */
  --fs-5: 17px;   /* nombre de tarjeta */
  --fs-6: 20px;   /* tu pick */
  --fs-7: 24px;   /* título de pantalla */
  --fs-8: 30px;   /* hero */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --r-1: 8px;     /* chips, badges cuadrados, insets */
  --r-2: 12px;    /* botones, campos */
  --r-3: 16px;    /* cuadro de ícono, contenedores de datos */
  --r-4: 20px;    /* tarjetas */
  /* Superficies con profundidad (3 niveles) */
  --card-up:   linear-gradient(145deg, #221d18 0%, #171310 68%);  /* elevada · activo */
  --card-hot:  linear-gradient(145deg, #3a1a12 0%, #1d110d 70%);  /* con estado · accionable */
  --card-down: #121010;                                            /* hundida · terminado/fuera */
  --edge-up:   rgba(232, 226, 212, .09);
  --glow-hot:  0 0 24px rgba(240, 85, 45, .10);

  /* Alias de compatibilidad para estilos inline heredados */
  --text-dim: var(--text-2);
  --green-2: var(--success);
  --red: var(--danger);
  --yellow: var(--text);
  --accent: var(--primary);
  --accent-2: var(--primary-hover);
  --bg-2: var(--surface);
  --bg-3: var(--surface-2);
}

/* Tema oscuro forzado: los tokens viven en :root (arriba). La clase .dark sigue
   en <html> (la pone index.html) porque ~50 reglas .dark la usan como gancho;
   por eso los overrides puntuales de abajo se mantienen como :root.dark. */
/* fondos oscuros fijos que no vienen de variables */
:root.dark .act-ico.yellow { background: #3a2e10; color: #f0b429; }
:root.dark .alert-row.yellow > .msr:first-child { color: #f0b429; }
:root.dark .lp-founder-card .btn-primary { background: #fff; color: #b8371a; }
:root.dark #boot { background: #0c0a08; }
:root.dark #boot .boot-name { color: #e8e2d4; }
:root.dark #boot .boot-track { stroke: #2c2620; }
/* las tarjetas del banner (partidos/carreras) son islas BLANCAS fijas: su texto
   debe seguir siendo oscuro también en modo oscuro (si no, se vuelve ilegible) */
:root.dark .up-score,
:root.dark .up-match.f1-race .f1-gp { color: #14161a; }
:root.dark .up-vs,
:root.dark .up-date,
:root.dark .up-match.f1-race .f1-date,
:root.dark .up-match.f1-pos .f1-p,
:root.dark .up-match.f1-pos .f1-team { color: #5b6472; }
/* control segmentado de tema (perfil) */
.theme-seg { display: flex; gap: 6px; }
.theme-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--t-fast) var(--ease); }
.theme-seg button .msr { font-size: 18px; }
.theme-seg button.active { background: var(--primary-weak); color: var(--primary); border-color: var(--primary-border); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: var(--fs-4);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
/* Solo en oscuro: brillo radial ember MUY sutil arriba (calidez de marca). Capa fija
   detrás del contenido, no interactiva. */
:root.dark body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -6%, rgba(240,85,45,.07), transparent 60%);
}

a { color: var(--primary); text-decoration: none; cursor: pointer; }
@media (hover: hover) { a:hover { color: var(--primary-hover); } }

/* Iconos (Material Symbols Rounded) */
.material-symbols-rounded, .msr {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-flex;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex-shrink: 0;
}
.msr.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.msr.sm { font-size: 18px; }
.msr.lg { font-size: 24px; }
.msr.xl { font-size: 40px; }

/* ---------- Layout ---------- */
/* Shell de altura fija con SCROLL INTERNO (.scroll-area): nada queda position:fixed,
   así iOS/PWA no "despega" la barra inferior. El body no scrollea en estas pantallas
   porque el shell mide justo la ventana; el landing (sin .app-shell) sí scrollea. */
.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.scroll-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Con el shell presente (vistas con sesión) bloqueamos el scroll del DOCUMENTO: si no, en iOS toda
   la página hace rubber-band cuando el contenido es corto y arrastra la barra inferior. Solo scrollea
   la .scroll-area interna. El landing (sin .app-shell) sí scrollea con la ventana. */
html:has(.app-shell), html:has(.app-shell) body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 20px; flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Claro: header y nav al MISMO tono del fondo (no blanco) para que las cards blancas
   sean la única "figura"; la línea de separación los distingue. Oscuro conserva --surface
   (ahí la elevación sutil sí funciona sobre el fondo casi-negro). */
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; cursor: pointer; letter-spacing: -0.02em; }
/* wordmark de marca: "Pick" en texto + "Arena" en oro (identidad) */
.brand-a { color: var(--primary); }
.topbar .brand .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.topbar .brand .logo .msr { font-size: 20px; }
.topbar .brand .logo svg { width: 19px; height: 19px; }
.auth-card .brand-mark svg { width: 26px; height: 26px; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-2); font-size: 13px; }
.or-sep[hidden] { display: none; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Pull-to-refresh (PWA instalada) */
#ptr { position: fixed; top: -6px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  color: var(--text-2); opacity: 0; pointer-events: none; }
#ptr .msr { font-size: 22px; transition: transform var(--t-fast) var(--ease); }
#ptr.ready { color: var(--primary); }
#ptr.ready .msr { transform: rotate(180deg); }
#ptr.spin .msr { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Banner "instala la app" (no intrusivo, cerrable) */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 120; max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--shadow-md); padding: 14px 14px 12px; display: flex; flex-direction: column;
  gap: 10px; animation: install-up 0.28s ease; }
.install-banner.above-nav { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
@keyframes install-up { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } }
.install-x { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--text-3);
  cursor: pointer; padding: 4px; line-height: 1; border-radius: 8px; }
@media (hover: hover) { .install-x:hover { color: var(--text); background: var(--surface-2); } }
.install-x .msr { font-size: 20px; }
.install-row { display: flex; align-items: center; gap: 12px; padding-right: 24px; }
.install-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--primary); flex: none;
  display: flex; align-items: center; justify-content: center; }
.install-ic svg { width: 26px; height: 26px; }
.install-tx { display: flex; flex-direction: column; min-width: 0; }
.install-tx b { font-size: var(--fs-4); letter-spacing: -0.01em; }
.install-tx span { font-size: var(--fs-2); color: var(--text-2); }
.install-help { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.install-help b { color: var(--text); font-weight: 700; }
.install-help .msr { font-size: 18px; vertical-align: -4px; color: var(--primary); }
.install-banner .btn { align-self: flex-start; }
/* altura FIJA + overflow contenido: el iframe del botón de Google (GSI) se
   renderiza primero más alto y luego se achica; fijarlo evita que el modal
   crezca/recentre (el 'rebote' al abrir el login) */
.gbtn { display: flex; justify-content: center; align-items: center; min-height: 44px; }
/* botón propio de "Continuar con Google" (nuestro estilo + la G de Google) */
.gsignin { gap: 10px; }
.gsignin svg { flex-shrink: 0; }
/* espacio reservado para el separador + botón (evita cualquier salto de layout) */
.gwrap { min-height: 84px; }
/* filtro de deporte: flecha desplegable junto al título "Mis Survivors" */
.ms-titlerow { display: inline-flex; align-items: center; gap: 2px; }
.ms-filter { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ms-filter .ms-caret { font-size: 26px; color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.ms-filter.active .ms-caret { color: var(--primary); }
.ms-filter select { position: absolute; inset: -6px -4px; opacity: 0; cursor: pointer; font-size: 16px;
  appearance: none; -webkit-appearance: none; border: none; }
.topbar nav { display: flex; gap: 2px; align-items: center; }
.topbar nav button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text-2); cursor: pointer;
  height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--fs-4); font-weight: 500;
  font-family: inherit; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .topbar nav button:hover { color: var(--text); background: var(--surface-2); } }
.topbar nav button.active { color: var(--primary); background: var(--primary-weak); }
.topbar nav .avatar-btn { padding: 0; width: 40px; justify-content: center; }
.topbar nav .topbar-help { padding: 0; width: 38px; justify-content: center; }
.topbar nav .topbar-help .msr { font-size: 22px; }

/* Barra de navegación inferior (móvil) */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .nav-desktop { display: none !important; }
  .bottom-nav {
    display: flex; flex: none;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Por encima de la savebar (z-45) para que ésta se OCULTE DETRÁS de la nav al bajar,
       en vez de cruzarse por encima de los tabs */
    position: relative; z-index: 46;
  }
  .bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; color: var(--text-2); font-family: inherit;
    font-size: 11px; font-weight: 500; cursor: pointer; min-height: 44px;
    transition: color var(--t-fast) var(--ease);
  }
  .bottom-nav button .msr { font-size: 24px; }
  .bottom-nav button.active { color: var(--primary); }
}

/* ===== Nav flotante (admin/beta): píldora de ancho fijo + (+) neutro separado. Sin blur:
   superficie opaca + borde + sombra (no recalcula al scrollear, no compite con el vidrio real). ===== */
@media (max-width: 720px) {
  .bottom-nav.nav-float {
    position: absolute; left: 0; right: 0; height: auto; padding: 0; background: none; border: 0;
    bottom: calc(env(safe-area-inset-bottom) + 6px);   /* pegada al borde, apenas sobre la zona segura */
    display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 46;
    pointer-events: none;   /* los huecos dejan pasar el toque al contenido */
  }
  .nav-float .nav-pill, .nav-float .nav-fab { pointer-events: auto; }
  .nav-float .nav-pill {
    position: relative; display: flex; width: 196px; padding: 5px; flex: none;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
    box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  }
  .nav-float .nav-hl {   /* fondo claro que se DESLIZA entre pestañas */
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
    border-radius: 999px; background: var(--surface-2);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  }
  .nav-float .nav-pill[data-active="act"] .nav-hl { transform: translateX(100%); }
  .nav-float .nav-tab {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: none; border: 0; cursor: pointer; font-family: inherit; padding: 7px 0;
    color: var(--text-3); font-size: 10.5px; font-weight: 600;
    transition: color var(--t-fast) var(--ease);
  }
  .nav-float .nav-tab .msr { font-size: 22px; }
  .nav-float .nav-tab.active { color: var(--text); }   /* activo = claro, NO ember */
  .nav-float .nav-dot {   /* ember SOLO cuando te toca elegir */
    position: absolute; top: 3px; left: calc(50% + 8px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 0 2px var(--surface);
  }
  .nav-float .nav-fab {   /* (+) neutro, sin protagonismo (ya no ember) */
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
    transition: transform var(--t-fast) var(--ease);
  }
  .nav-float .nav-fab .msr { font-size: 26px; }
  .nav-float .nav-fab:active { transform: scale(.94); }

  /* La última tarjeta no debe quedar tapada + degradado del fondo detrás de la barra */
  .app-shell:has(.nav-float) .scroll-area { padding-bottom: calc(env(safe-area-inset-bottom) + 88px); }
  .app-shell:has(.nav-float)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(env(safe-area-inset-bottom) + 92px);
    background: linear-gradient(to top, var(--bg) 34%, transparent);
    pointer-events: none; z-index: 45;
  }
  /* Teclado abierto → ocultar (si no, flota a media pantalla) */
  body.kb-open .bottom-nav.nav-float, body.kb-open .app-shell:has(.nav-float)::after { display: none; }
  /* En el chat (overlay fijo a pantalla completa) NO va el degradado ni el padding de la nav: el
     degradado (::after, z-45) se pintaba ENCIMA del chat como un velo que se iba al abrir teclado. */
  .app-shell:has(.chat-mode)::after { display: none; }
  .app-shell:has(.chat-mode) .scroll-area { padding-bottom: 0; }
}

.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 600; font-size: 13px; overflow: hidden; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 88px; height: 88px; font-size: 32px; box-shadow: var(--shadow-md); }
/* Avatar editable: badge de cámara encima (Ajustes y Mi Perfil) */
.av-edit { position: relative; display: inline-block; cursor: pointer; }
.av-edit:active { opacity: .85; }
.av-edit-badge { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--surface); box-shadow: var(--shadow-sm); }
.av-edit-badge .msr { font-size: 16px; }

.container { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; width: 100%; }
.container.narrow { max-width: 440px; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; box-shadow: var(--shadow-md); }
.auth-card .brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.auth-card .brand-mark .msr { font-size: 26px; }
.auth-card h1 { font-size: var(--fs-7); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em; }
.auth-card .sub { color: var(--text-2); margin-bottom: 26px; font-size: var(--fs-4); }
.auth-switch { text-align: center; margin-top: 22px; font-size: var(--fs-4); color: var(--text-2); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: var(--fs-3); color: var(--text-2); margin-bottom: 7px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 11px 13px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-2); color: var(--text); font-size: var(--fs-4); font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder { color: var(--text-3); }
/* iOS Safari alinea el texto/placeholder de los <input type=date> distinto (centrado),
   lo que los deja desalineados vs. los demás campos. Forzamos alineación a la izquierda
   y el icono del calendario a la derecha, con misma altura que el resto. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.field input:disabled, .field select:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
/* Texto de ayuda (pequeño y atenuado). Regla base para hints fuera de un .field
   (en sheets, cards, etc.); .field .hint mantiene su margen por especificidad. */
.hint { font-size: var(--fs-2); color: var(--text-2); line-height: 1.45; }
.field .hint { font-size: var(--fs-2); color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.row { display: flex; gap: 16px; }
.row .field { flex: 1; }
/* nav temporal (En vivo / Planeación / Crónica): SIEMPRE horizontal, aunque .row
   se vuelva columna en móvil. Padding/ícono chicos para que los 3 quepan. */
/* Accesos En vivo / Planeación / Crónica: icono arriba + texto abajo, sin bordes de botón,
   separados por líneas verticales, con línea horizontal arriba y abajo. */
/* Accesos como CHIPS horizontales (ícono izq · texto der), NO como segunda barra de nav.
   En vivo toma ÁMBAR (análisis) cuando hay algo en juego (live_now). */
.tri-nav { display: flex; gap: 8px; margin: 16px 0; }
/* CUATRO destinos (duelos con subconjunto) no caben de a uno por columna: se parten 2 y 2. El
   `calc(50% - 4px)` descuenta la mitad del gap de 8px a cada mitad, así las dos filas quedan
   exactamente del mismo ancho que cuando son dos botones. */
.tri-nav.tri-2x2 { flex-wrap: wrap; }
.tri-nav.tri-2x2 .tri-item { flex: 1 1 calc(50% - 4px); }
.tri-item { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); font-family: inherit; font-size: var(--fs-3); font-weight: 600; cursor: pointer; position: relative; white-space: nowrap; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform 110ms var(--ease); }
.tri-item .msr { font-size: 19px; color: var(--text-2); flex: none; }
@media (hover: hover) { .tri-item:hover { border-color: var(--border-strong); } }
/* "En vivo" con partido/carrera AHORA: chip en ámbar + punto que late */
.tri-item.tri-live { background: var(--analysis-weak); border-color: var(--analysis-border); color: var(--analysis); }
.tri-item.tri-live .msr { color: var(--analysis); }
.tri-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--analysis); animation: tri-pulse 1.4s ease-in-out infinite; flex: none; }
/* Palomita verde en "Partidos" cuando el subconjunto ya está confirmado (listo). */
.tri-item .tri-ck { color: var(--success); font-size: 16px; flex: none; }
@keyframes tri-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-4); cursor: pointer; min-height: 32px; color: var(--text); }
.check input { width: auto; min-height: 0; accent-color: var(--primary); width: 18px; height: 18px; }
/* Los checkboxes (no radios) se ven como switch on/off: ember prendido, gris apagado.
   Se excluye la aceptación de Términos (mejor un check clásico para el consentimiento). */
.check:not(.auth-accept) input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  position: relative; width: 42px; height: 25px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.check:not(.auth-accept) input[type="checkbox"]::after {
  content: ""; position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: left var(--t-fast) var(--ease);
}
.check:not(.auth-accept) input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.check:not(.auth-accept) input[type="checkbox"]:checked::after { left: 20px; }
.check:not(.auth-accept) input[type="checkbox"]:focus-visible { box-shadow: var(--ring); outline: none; }
/* Con switch: la etiqueta va a la izquierda y el switch pegado a la derecha (patrón iOS). */
.check:not(.auth-accept):has(input[type="checkbox"]) { flex-direction: row-reverse; justify-content: space-between; gap: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--r-2);
  border: 1px solid transparent; font-size: var(--fs-4); font-weight: 700; cursor: pointer;
  font-family: inherit; letter-spacing: -0.01em;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .msr { font-size: 19px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:focus-visible { box-shadow: var(--ring); outline: none; }
/* Texto OSCURO sobre el verde: blanco sobre --success da 1.99:1 (ilegible al sol, y es el botón
   que confirma pagos y reparto). Mismo criterio que .btn-gold abajo → 8.2:1. El verde NO cambia. */
.btn-success { background: var(--success); color: var(--success-weak); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--border-strong); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-sm .msr { font-size: 17px; }
.btn-gold { background: var(--gold); color: #241a06; }
/* Hover solo en dispositivos con puntero real: en touch el :hover se "pega" tras el tap. */
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
  .btn-success:hover:not(:disabled) { filter: brightness(.95); }
  .btn-danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger); }
  .btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
  .btn-gold:hover:not(:disabled) { filter: brightness(1.05); }
}

/* ---------- Wizard de creación ---------- */
.wz { max-width: 560px; margin: 0 auto; }
.wz-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.wz-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--border); transition: background var(--t-fast) var(--ease); }
.wz-seg.done { background: var(--success); }
.wz-seg.cur { background: var(--gold); }
.wz-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-3); }
.wz-count b { color: var(--text); font-weight: 700; }
.wz-back { display: inline-block; margin: 14px 0 6px; color: var(--text-2); font-size: var(--fs-4); cursor: pointer; }
@media (hover: hover) { .wz-back:hover { color: var(--text); } }
.wz-beta { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 16px; font-size: 13px; color: var(--text-2); }
.wz-beta .msr { color: var(--gold); font-size: 20px; flex: none; }
.wz-beta b { color: var(--text); }
/* Pantalla de pago (Payment Element de Stripe, tema oscuro) */
.pay-wrap { max-width: 480px; margin: 0 auto; padding: 8px 0 40px; }
.pay-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pay-cancel { align-self: flex-start; background: none; border: none; color: var(--text-2); font: inherit; font-size: var(--fs-4); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; }
.pay-cancel:active { opacity: .6; }
.pay-title { font-size: var(--fs-7); letter-spacing: -0.02em; margin: 0; }
#express-checkout-element { margin-bottom: 6px; }
.pay-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#payment-element { margin-bottom: 18px; }
#payNow { margin-top: 4px; }
.pay-error { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.pay-foot { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-3); font-size: 12px; margin-top: 14px; }
.pay-foot .msr { font-size: 14px; }
.wz-h { font-size: 26px; margin: 4px 0 6px; letter-spacing: -0.02em; }
.wz-sub { color: var(--text-2); margin: 0 0 22px; font-size: var(--fs-4); }
.wz-lbl { display: block; font-size: var(--fs-4); font-weight: 600; margin: 22px 0 10px; }
.wz-opt { color: var(--text-3); font-weight: 400; }

.sport-cards { display: flex; flex-direction: column; gap: 12px; }
.sport-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px solid var(--border); border-radius: var(--r-4); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.sport-card input { position: absolute; opacity: 0; pointer-events: none; }
.sport-card .sc-ic { font-size: 26px; color: var(--text-2); }
.sport-card .sc-name { font-size: 17px; font-weight: 600; flex: 1; }
.sport-card .sc-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.sport-card:has(input:checked) { border-color: var(--primary); background: var(--primary-weak); }
.sport-card:has(input:checked) .sc-ic, .sport-card:has(input:checked) .sc-name { color: var(--primary); }
.sport-card:has(input:checked) .sc-dot { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 45%, transparent 48%); }

.emoji-row { display: flex; gap: 10px; flex-wrap: wrap; }
.emoji-chip { width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--t-fast) var(--ease), transform 110ms var(--ease); }
.emoji-chip.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.bet-display { display: flex; align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 20px 24px; margin-bottom: 14px; }
.bet-display .bet-sign { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; }
.bet-display #betInput { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 42px; font-weight: 700; letter-spacing: -0.03em; padding: 0 2px; }
.bet-display #betInput::-webkit-outer-spin-button, .bet-display #betInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bet-display #betInput { -moz-appearance: textfield; }
.bet-display .bet-cur { font-size: 20px; color: var(--text-3); font-weight: 600; margin-left: 6px; flex: none; }

.league-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wz-league { padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: var(--fs-4); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--t-fast) var(--ease); }
/* El chip "＋" es un input: se ve igual que los demás; escribes y el emoji queda ahí */
input.emoji-chip.emoji-custom { display: inline-block; text-align: center; font-family: inherit; font-size: 24px; color: var(--text); padding: 0; -webkit-appearance: none; appearance: none; }
input.emoji-chip.emoji-custom::placeholder { color: var(--text-3); font-size: 26px; opacity: 1; }
input.emoji-chip.emoji-custom:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input.emoji-chip.emoji-custom.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.wz-personalize .adv-sec:first-of-type { margin-top: 8px; }
.adv-body .section-title { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; }
.adv-body .section-title:first-child { border-top: none; padding-top: 0; margin-top: 6px; }
.opt-hint { display: block; }
.bet-presets, .cur-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bet-chip, .cur-chip { padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: var(--fs-4); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.bet-chip.active, .cur-chip.active, .wz-league.active { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); }
.wz-bolsa { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 14px 16px; font-size: var(--fs-4); color: var(--text-2); }
.wz-bolsa .msr { color: var(--gold); font-size: 20px; flex: none; }
.wz-bolsa b { color: var(--text); }

.wz-advanced { margin: 18px 0; }
.wz-lock { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-weak); border: 1px solid var(--primary-border); border-radius: var(--r-4); padding: 16px 18px; font-size: var(--fs-4); color: var(--text-2); margin-top: 18px; }
.wz-lock .msr { color: var(--primary); font-size: 20px; flex: none; }
.wz-lock b { color: var(--text); }

/* Sala de espera · solicitudes pendientes de pago: fila apilada (no tabla ancha
   que se cortaba y pedía scroll horizontal). Quién arriba, acciones abajo. */
.wr-pend-list { display: flex; flex-direction: column; }
.wr-pend { padding: 14px 0; border-bottom: 1px solid var(--border); }
.wr-pend:first-child { padding-top: 2px; }
.wr-pend:last-child { border-bottom: 0; padding-bottom: 2px; }
.wr-pend-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.wr-pend-txt { min-width: 0; }
.wr-pend-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-pend-em { font-size: var(--fs-2); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-pend-acts { display: flex; gap: 8px; }
.wr-pend-acts > .btn:first-child { flex: 1; }   /* Confirmar/Revivir toma el ancho; Rechazar compacto */
/* Jugadores confirmados: fila flex que encoge (la tabla se salía y pedía scroll) */
.wr-conf-list { display: flex; flex-direction: column; }
.wr-conf { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.wr-conf:first-child { padding-top: 2px; }
.wr-conf:last-child { border-bottom: 0; padding-bottom: 2px; }
.wr-conf-rank { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 16px; flex: none; font-size: var(--fs-3); }
.wr-conf-nm { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-4); }
.wr-conf .badge { flex: none; }
/* Botón que puede traer texto largo (p.ej. "Se necesitan 2 jugadores…"): que
   respire en 2 líneas en vez de apretarse contra los bordes. */
.btn-wrap { white-space: normal; height: auto; min-height: var(--tap); padding-top: 11px; padding-bottom: 11px; line-height: 1.3; }
.wz-foot { margin-top: 24px; }
/* Cuando la barra fija de Personalizar está visible, deja aire abajo para poder ver el final */
.wz-pz-pad { padding-bottom: 96px; }
/* Sombra sutil en las cards del wizard/editor: da profundidad en modo claro */
.sport-card, .pz-card, .bet-display, .sum-card, .opt-card, .seg, .adv-sec { box-shadow: var(--shadow-sm); }

.sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; margin-bottom: 16px; }
.sum-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sum-adjust { background: none; border: none; color: var(--gold); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; font-family: inherit; }
.sum-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.sum-row:last-child { border-bottom: none; }
.sum-row span { color: var(--text-2); }
.sum-row b { color: var(--text); font-weight: 700; }
.sum-gold { color: var(--gold) !important; }

/* Componentes de Personalizar: tarjeta contenedora + segmentado / chips / stepper / cards */
.pz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 18px; margin-bottom: 14px; }
.pz-label { font-size: var(--fs-4); color: var(--text); font-weight: 600; margin-bottom: 12px; }
.pz-card .hint { margin-top: 10px; }
/* Sub-título inline (alineado al ras, como las demás etiquetas de la sección) */
.pz-sub { font-size: var(--fs-4); color: var(--text); font-weight: 600; margin-bottom: 10px; }

.seg { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-4); padding: 4px; gap: 4px; }
.seg-opt { flex: 1; border: none; background: none; border-radius: var(--r-3); padding: 11px 8px; font-family: inherit; font-size: var(--fs-4); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.seg-opt.active { background: var(--primary); color: #fff; }

.opt-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1.5px solid var(--border); border-radius: var(--r-4); cursor: pointer; margin-top: 12px; transition: all var(--t-fast) var(--ease); }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .oc-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.opt-card .oc-box .msr { font-size: 17px; color: #fff; opacity: 0; }
.opt-card .oc-title { font-weight: 700; }
.opt-card .oc-desc { color: var(--text-2); font-weight: 400; font-size: var(--fs-3); }
.opt-card:has(input:checked) { border-color: var(--primary); background: var(--primary-weak); }
.opt-card:has(input:checked) .oc-box { background: var(--primary); border-color: var(--primary); }
.opt-card:has(input:checked) .oc-box .msr { opacity: 1; }
.opt-card:has(input:checked) .oc-title { color: var(--primary); }
.opt-card .oc-badge { position: absolute; top: -9px; right: 14px; background: var(--gold); color: #241a06; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
/* Variante de 3 renglones + número a la derecha (capa de puntuación de quiniela, §2): MISMO
   radio-card, solo se apila el texto y se cuelga el puntaje del ejemplo. El número es dato,
   no cuerpo → se queda fuera de la escala --fs-* (excepción B3 del :root). */
.opt-card .oc-main { flex: 1; min-width: 0; }
.opt-card .oc-main > span { display: block; }
.opt-card .oc-main .oc-desc { margin-top: 3px; }
.opt-card .oc-why { font-size: var(--fs-2); line-height: 1.35; color: var(--text-3); margin-top: 3px; }
.opt-card .oc-pts { flex: none; display: flex; align-items: baseline; gap: 3px; font-size: 22px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.opt-card .oc-pts small { font-size: 11px; font-weight: 700; color: var(--text-3); }
.opt-card:has(input:checked) .oc-pts { color: var(--text); }

/* Bloqueado (torneo ya iniciado): no interactivo, pero el valor activo sigue visible */
.wz-locked { pointer-events: none; }
.wz-locked .wz-chip:not(.active), .wz-locked .seg-opt:not(.active) { opacity: .45; }
.opt-card.oc-locked { pointer-events: none; }
.opt-card.oc-locked:not(:has(input:checked)) { opacity: .45; }
/* Variante RADIO: círculo con punto, no cuadrado con palomita. La palomita promete "puedes
   marcar varias" y estas opciones son excluyentes. Reusa el idioma de `.sc-dot` (el selector
   de deporte), no inventa uno nuevo. Dos clases → gana sobre `.opt-card:has(input:checked)`
   sin depender del orden del archivo. */
.opt-card.oc-radio .oc-box { border-radius: 50%; }
.opt-card.oc-radio .oc-box .msr { display: none; }
.opt-card.oc-radio:has(input:checked) .oc-box { border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 45%, transparent 48%); }
.wz-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wz-chip { padding: 9px 16px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); font-size: var(--fs-4); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.wz-chip.active { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper-btn { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: all var(--t-fast) var(--ease); }
@media (hover: hover) { .stepper-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } }
.stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper-val { text-align: center; }
.stepper-val b { font-size: 30px; font-weight: 700; }
.stepper-val span { color: var(--text-3); font-size: var(--fs-4); margin-left: 3px; }

.wz-wall { text-align: center; max-width: 480px; }
.wz-wall .wz-back { text-align: left; display: block; }
.wall-ic { width: 68px; height: 68px; border-radius: 18px; border: 1px solid var(--gold); background: var(--surface); display: flex; align-items: center; justify-content: center; margin: 20px auto 18px; }
.wall-ic .msr { font-size: 32px; color: var(--gold); }
.wall-h { font-size: 24px; margin: 0 0 10px; }
.wall-sub { color: var(--text-2); margin: 0 auto 22px; max-width: 380px; }
.wall-saved { background: var(--success-weak); border: 1px solid var(--success-border); border-radius: var(--r-4); padding: 16px 18px; text-align: left; margin-bottom: 22px; }
.wall-saved-t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--success); font-size: var(--fs-4); }
.wall-saved-cfg { color: var(--text-2); font-size: var(--fs-4); margin-top: 6px; }
.wall-notify-t { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }

/* ---------- Sala de espera (inscripción) ---------- */
.wr-status { border-color: var(--gold); margin-bottom: 16px; }
.wr-status-top { display: flex; justify-content: space-between; align-items: center; }
.wr-status-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--gold); }
.wr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.wr-count { font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.wr-bar { height: 8px; border-radius: 4px; background: var(--border-strong); margin: 12px 0 2px; overflow: hidden; }
.wr-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.wr-status-note { font-size: 13px; color: var(--text-2); }
/* Vista del jugador (no organizador) en inscripción */
.mw-in { display: flex; gap: 12px; align-items: flex-start; border-color: var(--success); background: var(--success-weak); margin-bottom: 16px; }
.mw-in-ic { color: var(--success); font-size: 26px; flex: none; }
.mw-in-txt { font-size: var(--fs-4); color: var(--text-2); line-height: 1.5; }
.mw-in-txt b { color: var(--text); }
.mw-rules-sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
.mw-refund { border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; font-size: var(--fs-4); color: var(--text-2); line-height: 1.5; }
.mw-refund b { color: var(--gold); }
.mw-refund .mw-brand { color: var(--text); font-weight: 700; }
.wr-clabe, .wr-adjust { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 16px 18px; margin-bottom: 12px; }
.wr-clabe { border-color: var(--gold); }
.wr-clabe-ic { font-size: 26px; color: var(--gold); flex: none; }
.wr-clabe-txt, .wr-adjust-txt { flex: 1; display: flex; flex-direction: column; }
.wr-clabe-txt b { color: var(--gold); font-size: var(--fs-4); }
.wr-clabe-txt span, .wr-adjust-txt span { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.wr-adjust-ic { font-size: 24px; color: var(--text-2); flex: none; }
.wr-adjust-txt b { font-size: var(--fs-4); }
.wr-chevron { color: var(--text-3); flex: none; }
/* Prompt de subconjunto de arranque: ember (pendiente, reusa .pkc-act) o verde (listo) */
.wr-subset-ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.wr-subset-ok .wr-adjust-ic { color: var(--success); }
.card.pkc-act .wr-adjust-ic { color: var(--primary); }

/* Barra fija de "Guardar" del editor: aparece cuando hay cambios sin guardar */
.edit-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
  /* Oculta: baja su propia altura + el hueco sobre la nav (móvil), para que no se asome.
     opacity:0 evita el parpadeo al montar (un frame en posición visible antes de asentar el transform) */
  transform: translateY(calc(100% + 120px)); opacity: 0;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.edit-savebar.show { transform: translateY(0); opacity: 1; }
/* D3: mismo trato que la barra de pick (.pk-confirm) — mientras hay cambios sin
   guardar, la savebar OCULTA la nav y se sienta al fondo (no flota sobre ella).
   Sin cambios (savebar oculta) la nav vuelve, para poder navegar. */
.app-shell:has(.edit-savebar.show) .bottom-nav { display: none; }
/* el velo/degradado del fondo (::after, z-45) no debe empañar la savebar opaca */
.app-shell:has(.edit-savebar.show)::after { display: none; }
.edit-savebar .esb-count { font-size: var(--fs-4); font-weight: 600; color: var(--text-2); }
.edit-savebar .esb-actions { display: flex; align-items: center; gap: 8px; }
.edit-savebar .btn-primary { min-width: 150px; }
.edit-savebar .esb-discard { min-width: 0; padding: 0 12px; color: var(--text-2); }
.edit-savebar .esb-discard .msr { font-size: 20px; }
/* QUINIELA · card "Lo que esto implica cada jornada" (subconjunto). Componente nuevo. */
.qz-implica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 16px; margin-top: 12px; }
.qz-imp-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.qz-imp-h .msr { font-size: 18px; }
.qz-imp-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.qz-imp-ic { width: 44px; height: 44px; border-radius: var(--r-3); background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--text-2); }
.qz-imp-ic .msr { font-size: 20px; }
.qz-imp-row > div { font-size: var(--fs-4); line-height: 1.45; color: var(--text-2); }
.qz-imp-row b { color: var(--text); font-weight: 700; }
/* QUINIELA · caja de referencia del selector de capa: UN partido concreto que las 3 opciones
   puntúan distinto. Es .pz-card con el renglón del ejemplo; sin componente nuevo. */
.qz-layer-ex { font-size: var(--fs-4); font-weight: 700; color: var(--text); line-height: 1.4; }
.qz-layer-ex span { font-weight: 600; color: var(--text-2); }
@media (max-width: 720px) {
  /* D3: al fondo (la nav se oculta con :has(.edit-savebar.show)); recupera la zona segura */
  .edit-savebar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-4); padding: 22px; box-shadow: var(--shadow-sm); }
/* tarjeta "Quedaste fuera" (jugador eliminado): mismo diseño F1/fútbol, acento rojo */
.card.sel-out { display: block; border-color: var(--danger-border); }
.sel-out-top { display: flex; align-items: center; gap: 12px; }
.sel-out-ic { font-size: 26px; color: var(--danger); flex: none; }
/* CTA de retención: primario dorado "Seguir al grupo → Crónica" + gancho social */
.sel-out-follow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 13px; padding: 12px 14px; border: none; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-family: inherit; font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; text-align: left; }
.sel-out-follow .sof-r { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; opacity: .82; white-space: nowrap; }
.sel-out-follow .sof-r .msr { font-size: 18px; }
.sel-out-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 11px; font-size: 13px; font-weight: 700; color: var(--gold); cursor: pointer; }
.sel-out-link .msr { font-size: 16px; }
.sel-out-title { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.sel-out-sub { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 9px; }
/* Estado de revivir dentro del card "quedaste fuera": mismo tamaño que .sel-out-sub, en negritas */
.revive-status { display: block; font-size: var(--fs-3); color: var(--text-2); font-weight: 700; margin-top: 8px; }
.revive-status .msr { font-size: 15px; vertical-align: middle; }
/* Reglas del juego (página del grupo) */
.card.rules { padding: 6px 18px; }
.rules .rule { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.rules .rule:first-child { border-top: 0; }
.rules .rule > .msr { color: var(--primary); font-size: 22px; flex: none; }
.rules .rule b { display: block; font-size: var(--fs-4); margin-bottom: 2px; }
.rules .rule > div > span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
/* "¿Qué pasa si…?" colapsable */
.rules-sub-toggle { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 14px 0 12px; border: 0; border-top: 1px solid var(--border);
  background: none; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); cursor: pointer; }
.rules-chev { margin-left: auto; font-size: 18px; color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
.rules-more.open .rules-chev { transform: rotate(180deg); }
.rules-special { display: none; }
.rules-more.open .rules-special { display: block; }
.rules-special .rule:first-child { border-top: 0; padding-top: 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .row { flex-direction: column; gap: 0; } }

.group-card { cursor: pointer; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); display: flex; flex-direction: column; gap: 16px; }
@media (hover: hover) { .group-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } }
.group-card .gc-head { display: flex; align-items: center; gap: 12px; }
.group-card .gc-img { width: 42px; height: 42px; border-radius: 10px; background: var(--primary-weak); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.group-card .gc-img .msr { font-size: 22px; }
.group-card .gc-title { font-weight: 600; font-size: var(--fs-4); letter-spacing: -0.01em; }
.group-card .gc-sub { font-size: var(--fs-2); color: var(--text-2); margin-top: 1px; }
.gc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gc-stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; }
.gc-stat .v { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.02em; }
.gc-stat .l { font-size: 11px; color: var(--text-2); margin-top: 3px; font-weight: 500; }
.gc-stat.prov { outline: 1px dashed var(--border-strong); outline-offset: -1px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-1); font-weight: 600; line-height: 1.2; border: 1px solid transparent; }
.badge .msr { font-size: 15px; }
/* el punto se quita de los chips salvo en "En vivo" (donde late) — el color del chip ya da el estado */
.badge .dot { width: 7px; height: 7px; border-radius: 50%; display: none; }
.badge.neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.badge.primary, .badge.open { background: var(--primary-weak); color: var(--primary); border-color: var(--primary-border); }
.badge.finished { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.badge.alive, .badge.won, .badge.success { background: var(--success-weak); color: var(--success); border-color: var(--success-border); }
.badge.gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.badge.admin { background: color-mix(in srgb, var(--admin-blue) 16%, transparent); color: var(--admin-blue); border-color: color-mix(in srgb, var(--admin-blue) 40%, transparent); }
.badge.alive .dot, .badge.success .dot { background: var(--success); }
.badge.eliminated, .badge.lost, .badge.danger { background: var(--danger-weak); color: var(--danger); border-color: var(--danger-border); }
.badge.eliminated .dot { background: var(--danger); }
.badge.draw, .badge.pending { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
/* Estado del grupo "En curso": NEUTRO. Convive con "En vivo" (ámbar), "Fuera" (rojo)
   y "Sigues vivo" (verde), así que el único color sin choque es el gris de contexto;
   el ámbar de "En vivo" ya carga la señal de "algo pasa ahora". */
.badge.active { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
/* "En curso (jornada)" / "En juego" del pick = ámbar: momentos live reales, no van
   junto al badge "En vivo", así que sí usan el color de en-vivo. */
.badge.live { background: var(--analysis-weak); color: var(--analysis); border-color: var(--analysis-border); }
/* "Pendiente" (pago/aprobación por confirmar del fundador) = ÁMBAR: estado de
   atención, algo falta por resolver. NO reusa .badge.active (ese es el "En curso"
   NEUTRO del grupo) para no chocar la semántica. */
.badge.waiting { background: var(--analysis-weak); color: var(--analysis); border-color: var(--analysis-border); }
/* estado provisional (jornada en curso, sin confirmar): borde punteado */
.badge.prov { border-style: dashed; border-color: currentColor; }
.prov-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: var(--fs-2); font-weight: 600; color: var(--text-3); cursor: pointer; }
.prov-toggle .msr { font-size: 16px; }
.info-block.open .prov-toggle { color: var(--primary); }
.prov-block .info-note { margin-top: 8px; }
.badge.active .dot { background: var(--text-3); }
.badge.waiting .dot { background: var(--analysis); }
.badge.live .dot { background: var(--analysis); display: inline-block; animation: dotPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .badge.live .dot { animation: none; } }
.lives { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; }
.lives .msr { font-size: 15px; color: var(--danger); }
/* Revivió (compró vida): índigo de marca, fondo OPACO como Vivo/Fuera (no transparenta la fila) */
.badge.revived { background: var(--revived-weak); color: var(--duel-a); border-color: var(--revived-border); }
.badge.revived .dot { background: var(--duel-a); }
.lives.revived .msr { color: var(--duel-a); }

.live-badge { background: var(--analysis-weak); color: var(--analysis); border-color: var(--analysis-border); }
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--analysis); animation: livepulse 1.4s var(--ease) infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* indicador neutro cuando no hay partido en curso (la pantalla igual se auto-actualiza) */
.auto-badge { background: var(--surface-2); color: var(--text-2); }
.auto-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }

/* ---------- Page headers ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; display: flex; align-items: center; gap: 10px; }
.page-head .sub { color: var(--text-2); font-size: var(--fs-4); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Planeación: el selector (o las jornadas) van justo debajo del subtítulo → menos aire que el default de 28px. */
.page-head.cal-head { margin-bottom: 14px; }
/* Encabezado de grupo en dos filas: [nombre · estatus] arriba, [contexto · acciones] abajo,
   cada uno pegado a su extremo derecho a la altura de su renglón. */
.group-head { margin-bottom: 24px; }
.gh-row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gh-row2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.gh-row2 .gh-meta { margin-top: 0; }
.group-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.gh-status { flex: none; }
.gh-actions { flex: none; }
.gh-meta { color: var(--text-2); font-size: var(--fs-2); margin-top: 5px; line-height: 1.45; min-width: 0; }
/* 2 renglones FIJOS: nunca wrap a 3; la línea larga (liga · temporada) recorta con ellipsis */
.gh-meta > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gh-meta > div + div { margin-top: 2px; }
.gh-meta .gh-alive { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ===== Tarjeta de pick · 5 estados (prefijo pkc- para no chocar con el pick screen) =====
   Ember SOLO cuando debes actuar; oro solo dinero; contorno = opcional; sin botón = nada que hacer. */
.pkc-card, .pkc-elim { margin-bottom: 16px; }
/* .card.X gana al override responsivo de .card (padding 18px) en <=720px */
.card.pkc-card { padding: 14px 16px; }
.pkc-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.pkc-team { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 3px 0 2px; display: flex; align-items: center; gap: 9px; color: var(--text); }
.pkc-plan { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0; text-transform: none; }
.pkc-t { font-size: var(--fs-2); color: var(--text-2); }
.pkc-t b { color: var(--text); font-weight: 600; }
.pkc-lock { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-3); margin-top: 3px; }
.pkc-lock .msr { font-size: 15px; }
.pkc-btn { width: 100%; margin-top: 12px; }
.pkc-khead { position: relative; }
/* badge fuera del flujo → no estira la fila ni empuja el equipo hacia abajo. Anclado
   a la derecha del eyebrow (right:0 = borde del contenido, respeta el padding). */
.pkc-resbadge { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 11px; text-transform: none; letter-spacing: 0; }
/* 1 · abierto sin pick — ember (el único) */
.pkc-card.pkc-act { background: var(--primary-weak); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.pkc-card.pkc-act .pkc-k, .pkc-card.pkc-act .pkc-t { color: color-mix(in srgb, var(--primary) 55%, var(--text-2)); }
.pkc-card.pkc-act .pkc-t b { color: var(--primary); }
/* en oscuro la regla premium (:root.dark .card) pisa el borde; lo recuperamos ember */
:root.dark .pkc-card.pkc-act { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); }
/* 4 y 5 · eliminado: cabecera + stats en renglones + acción */
.card.pkc-elim { padding: 0; overflow: hidden; }
.pkc-head { padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--danger-weak); }
.pkc-head .pkc-k { color: color-mix(in srgb, var(--danger) 50%, var(--text-3)); }
.pkc-out { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-top: 4px; color: color-mix(in srgb, var(--danger) 65%, var(--text)); }
.pkc-head.cold { background: var(--surface-2); }
.pkc-head.cold .pkc-k { color: var(--text-3); }
.pkc-head.cold .pkc-out { color: var(--text-2); }
.pkc-rows { padding: 2px 16px; }
.pkc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-3); }
.pkc-row:last-child { border-bottom: 0; }
.pkc-l { color: var(--text-2); }
.pkc-r { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.pkc-foot { padding: 12px 16px 14px; }
.pkc-foot .pkc-btn { margin-top: 0; }
.btn-revive { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; border: 0; border-radius: var(--r-2); background: var(--gold); color: #fff; font: inherit; font-size: var(--fs-4); font-weight: 800; cursor: pointer; }
:root.dark .btn-revive { color: #171004; }
.pkc-sub { font-size: var(--fs-1); color: var(--text-3); text-align: center; margin-top: 8px; line-height: 1.45; }

/* ---- Tarjeta de pick BLOQUEADA = entrada a En vivo (rival · marcador · anillo) ---- */
.pkc-card.pkc-live { cursor: pointer; }
.pkc-live-k { display: flex; align-items: center; gap: 6px; }
.pkc-lock-i { font-size: 14px; color: var(--text-3); }
.pkc-live-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
/* escudo con anillo de progreso + badge de resultado (mismo lenguaje que En curso) */
.pkc-crest { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex: none; }
.pkc-crest .crest { width: 38px; height: 38px; font-size: 12px; }
.pkc-crest .crest.logo img { width: 32px; height: 32px; }
.pkc-crest .enc-ring { position: absolute; inset: 0; width: 46px; height: 46px; pointer-events: none; }
.pkc-crest .enc-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 23px 23px; }
.pkc-crest.live { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 50%; }
.pkc-badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface); font-size: 11px; font-weight: 800; line-height: 1; }
.pkc-badge .msr { font-size: 12px; }
.pkc-badge.win { background: var(--success); color: #06140d; }
.pkc-badge.lose { background: var(--danger); color: #1a0707; }
.pkc-badge.tie { background: var(--text-2); color: var(--bg); }
.pkc-tblock { flex: 1; min-width: 0; }
.pkc-card.pkc-live .pkc-team { font-size: var(--fs-6); font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkc-vs { font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* marcador SIN contenedor (3.4): bloque a la derecha, sin fondo ni borde */
.pkc-sc { flex: none; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pkc-sc-n { font-size: 19px; font-weight: 800; }
.pkc-sc-n.done { font-weight: 600; color: var(--text-2); }
.pkc-sc-l { font-size: var(--fs-2); color: var(--text-3); }
.pkc-sc-l.gold { color: var(--gold); font-weight: 700; }
.pkc-sc-when { font-size: var(--fs-4); font-weight: 600; color: var(--text-2); }
.pkc-chevron { flex: none; color: var(--text-3); }
.gh-edit { flex-shrink: 0; }
@media (max-width: 720px) { .group-head h1 { font-size: 20px; } .gh-edit .msr { margin: 0; } }

.section-title { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; margin: 32px 0 14px; display: flex; align-items: center; gap: 7px; }
.section-title .msr { font-size: 17px; color: var(--text-3); }
/* Subtítulo de la Crónica: combina con el header de la gráfica ("PERSONAS Y VIDAS") */
.rcp-perhead { text-transform: uppercase; color: var(--text-3); font-size: 11px; font-weight: 800; letter-spacing: .09em; margin-bottom: 10px; }

/* ---------- Secciones avanzadas colapsables (crear/editar survivor) ---------- */
.adv-sec { border: 1px solid var(--border); border-radius: var(--r-4); margin-top: 14px; background: var(--surface); overflow: hidden; }
.adv-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.adv-sec > summary::-webkit-details-marker { display: none; }
.adv-t { display: flex; flex-direction: column; gap: 2px; }
.adv-t > b { font-size: var(--fs-4); font-weight: 600; color: var(--text-1); }
.adv-sub { font-weight: 400; color: var(--text-3); font-size: 12px; }
.adv-caret { color: var(--text-3); transition: transform .2s ease; }
.adv-sec[open] > summary { border-bottom: 1px solid var(--border); }
/* La descripción solo tiene sentido colapsada: al expandir ya se ve el contenido */
.adv-sec[open] > summary .adv-sub { display: none; }
.adv-sec[open] > summary .adv-caret { transform: rotate(180deg); }
.adv-body { padding: 6px 18px 18px; }
.adv-body > .section-title:first-child { margin-top: 12px; }

/* ---------- Stats strip ---------- */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 680px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
/* tira única (jornada · vivos · eliminados): una tarjeta con divisiones, números centrados */
.stat-row { display: flex; padding: 0; }
.stat-seg { flex: 1; text-align: center; padding: 11px 12px; }
.stat-seg + .stat-seg { border-left: 1px solid var(--border); }
.stat-seg .v { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stat-seg .l { font-size: var(--fs-2); color: var(--text-2); margin-top: 2px; font-weight: 500; }
.stat-seg.green .v { color: var(--success); }
.stat-seg.red .v { color: var(--danger); }
.stat-seg.prov .v { text-decoration: underline dashed; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
@media (max-width: 420px) { .stat-seg { padding: 10px 6px; } .stat-seg .l { font-size: var(--fs-2); } }

/* --- Mi Perfil (estadísticas del jugador) --- */
.miperfil .card { margin-bottom: 16px; }        /* .card base no trae margen: aquí todas respiran */
.miperfil .seg { margin-bottom: 16px; }
.prof-list { padding: 4px 16px; }
.prof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.prof-row:last-child { border-bottom: 0; }
.prof-row > span:first-child { color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.prof-row .msr { font-size: 18px; color: var(--text-3); }
.prof-row b { color: var(--text); font-weight: 700; }
.prof-solo { border-color: var(--gold); }
.prof-solo-h { font-size: var(--fs-4); color: var(--text-2); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gold-badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 3px 8px; }
.prof-solo-nums { display: flex; }
.prof-solo-nums .ps-col { flex: 1; text-align: center; padding: 2px 8px; }
.prof-solo-nums .ps-col + .ps-col { border-left: 1px solid var(--border); }
.prof-solo-nums .ps-big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.prof-solo-nums .ps-big.g { color: var(--success); }
.prof-solo-nums .ps-cap { font-size: 12px; color: var(--text-3); margin-top: 2px; }
/* Estado vacío del perfil (usuario sin grupos): card centrada con icono + mensaje + CTA. */
.prof-empty { text-align: center; padding: 28px 22px; }
.prof-empty-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.prof-empty-ic .msr { font-size: 26px; color: var(--text-2); }
.prof-empty h3 { margin: 0 0 8px; font-size: var(--fs-5); }
.prof-empty p { margin: 0 0 20px; color: var(--text-2); font-size: var(--fs-3); line-height: 1.45; }
.prof-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.prof-bar .pb-l { flex: 0 0 100px; font-size: var(--fs-4); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-bar .wr-bar { flex: 1; margin: 0; }
.prof-bar .wr-bar span { background: var(--primary); }   /* ember, un solo acento en el perfil */
.prof-bar .pb-v { flex: 0 0 60px; text-align: right; font-weight: 700; font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
/* Solo el tab de MODO (Survivor|Quiniela) va ember; el de deporte/liga va neutro (como Tabla/Historial). */
.seg.prof-seg:not(.prof-modeseg) .seg-opt.active { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); }
.prof-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-4); color: var(--text-2); }
.prof-chip b { color: var(--text); }
/* ---- Perfil, modo DUELOS (récord por grupo) ---- */
/* Navegador de grupo: el nombre al centro y una flecha a cada lado. No es un segmentado porque
   el número de opciones no está acotado (un jugador puede estar en seis duelos) y los nombres
   son largos. En los extremos la flecha se oculta pero CONSERVA su hueco: el nombre no salta. */
.prof-gnav { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
.prof-gnav .pgn-nm { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-4); font-weight: 700;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-gnav .pgn-arw { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; border-radius: 999px; color: var(--text-2); cursor: pointer; }
.prof-gnav .pgn-arw:active { background: var(--surface-2); }
/* Fila "contra quién he jugado": avatar + nombre + cuántos + récord. Es una prof-row con un
   avatar al frente, no un componente nuevo. */
.prof-vsrow { cursor: pointer; gap: 10px; }
.prof-vsrow:active { opacity: .6; }
.prof-vsrow.thin { opacity: .55; }        /* menos de 3 duelos: está, pero no pesa */
.prof-vsrow .pvs-nm { flex: 1; min-width: 0; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-vsrow .pvs-n { flex: 0 0 auto; font-size: var(--fs-2); color: var(--text-3); font-variant-numeric: tabular-nums; }
.prof-vsrow .pvs-rec { flex: 0 0 54px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); }
.prof-vsrow .pvs-rec.up { color: var(--success); }
.prof-vsrow .pvs-rec.down { color: var(--danger); }
.prof-duo { display: flex; gap: 10px; align-items: stretch; }
.prof-duo > .card { flex: 1; min-width: 0; }
.prof-duo-c .pdc-k { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--text-3); margin-bottom: 9px; }
.prof-duo-c .pdc-who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-width: 0; }
.prof-duo-c .pdc-who span { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-duo-c .pdc-rec { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.prof-duo-c .pdc-rec.up { color: var(--success); }
.prof-duo-c .pdc-rec.down { color: var(--danger); }
.prof-duo-c .pdc-p { font-size: var(--fs-2); line-height: 1.35; color: var(--text-3); }
/* La misma lectura en el perfil AJENO, pero de una sola card y a dos renglones: ahí el jugador
   soy YO, así que su avatar y su nombre sobran (el rótulo ya dice de quién habla). */
.prof-vs1 { padding: 13px 16px; }
.prof-vs1 .pv1-top { display: flex; align-items: baseline; gap: 10px; }
.prof-vs1 .pv1-k { flex: 1; min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--text-3); }
.prof-vs1 .pv1-rec { flex: 0 0 auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prof-vs1 .pv1-rec.up { color: var(--success); }
.prof-vs1 .pv1-rec.down { color: var(--danger); }
.prof-vs1 .pv1-p { font-size: var(--fs-2); line-height: 1.35; color: var(--text-3); margin-top: 4px; }
/* Card de "muestra insuficiente": borde punteado = todavía no hay dato, no es un cero. */
.prof-dash { border-style: dashed; text-align: center; }
.prof-dash .pd-h { font-size: var(--fs-4); font-weight: 700; color: var(--text-2); }
.prof-dash .pd-p { font-size: var(--fs-2); line-height: 1.45; color: var(--text-3); margin-top: 5px; }
/* Nombre tocable en la tabla del grupo → abre el perfil del jugador */
.player-cell.player-link { cursor: pointer; white-space: nowrap; }
.player-cell.player-link .pl-go { color: var(--text-3); margin-left: -8px; opacity: .7; }   /* gap flex 10px − 8px = ~2px nombre↔flecha */
.player-cell.player-link:active { opacity: .6; }
/* Acceso al perfil desde marcadores en vivo, inventario y crónica */
.gp-who.player-link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 auto; cursor: pointer; }
.gp-who.player-link:active { opacity: .6; }
.gp-exprow .pl-go { color: var(--text-3); opacity: .5; flex: 0 0 auto; }
.pj-who.prof, .rcp-mo-av.prof, .rcp-aff-who.prof { cursor: pointer; }
.pj-who.prof:active, .rcp-mo-av.prof:active, .rcp-aff-who.prof:active { opacity: .6; }
/* Head-to-head por liga (Tú vs X · Liga) — card normal, como las demás.
   Prefijo vsx- para no chocar con el componente h2h- existente (líneas ~2000). */
.vsx-top { margin-bottom: 10px; }
.shared-badge { background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.vsx-title { font-family: var(--font-hero, inherit); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.vsx-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.vsx-hero { margin: 16px 0 4px; }
.vsx-hlabel { text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px; }
.vsx-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.vsx-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vsx-num { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--text-2); }
.vsx-num.win { color: var(--primary); }
.vsx-cap { font-size: 12px; color: var(--text-3); }
.vsx-dash { color: var(--text-3); font-size: 22px; padding: 0 8px; }
/* Desglose expandible de los casos del duelo */
.vsx-break { margin-top: 14px; border-top: 1px solid var(--border); }
.vsx-bhead { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: 0; padding: 12px 0 0; cursor: pointer; font-family: inherit;
  color: var(--text-2); font-size: var(--fs-4); font-weight: 600; }
.vsx-chev { color: var(--text-3); transition: transform .2s; }
.vsx-break.open .vsx-chev { transform: rotate(180deg); }
.vsx-bbody { display: none; margin-top: 6px; }
.vsx-break.open .vsx-bbody { display: block; }
.vsx-brow { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: var(--fs-4); color: var(--text-2); }
.vsx-brow:first-child { border-top: 0; }
.vsx-brow b { color: var(--text); font-variant-numeric: tabular-nums; }
.vsx-bars { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--border); }
/* Comparativa: una barra por lado en su propia escala; ganador ember, el otro gris. */
.cmp2 { padding: 12px 0; }
.cmp2 + .cmp2 { border-top: 1px solid var(--border); }
.cmp2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cmp2-label { font-size: 13px; color: var(--text-3); }
.cmp2-win { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary); flex: 0 0 auto; }
.cmp2-win.tie { color: var(--text-3); }
.cmp2-row { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 9px; margin: 5px 0; }
.cmp2-who { font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp2-track { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.cmp2-fill { display: block; height: 100%; border-radius: 5px; background: var(--text-3); min-width: 4px; }
.cmp2-fill.win { background: var(--primary); }
.cmp2-v { font-size: var(--fs-4); font-weight: 800; color: var(--text-2); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.cmp2-v.win { color: var(--primary); }
/* Tarjeta de bolsa expandible */
/* .card.X para ganarle al override responsivo de .card (padding 18px) en <=720px */
.card.bolsa-card { padding: 0; overflow: hidden; }
.bolsa-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: 0; padding: 11px 16px; cursor: pointer; font-family: inherit; color: var(--text); }
.bolsa-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.bolsa-lbl .msr { font-size: 17px; color: var(--gold); }
.bolsa-amt { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 800; color: var(--gold); }
.bolsa-amt .bolsa-caret { font-size: 19px; color: var(--text-3); font-weight: 400; }
.bolsa-detail { padding: 14px 16px 16px; border-top: 1px solid var(--border); }

/* ---------- Conversación del Survivor (chat) ---------- */
.chat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  margin-left: 7px; vertical-align: middle; box-shadow: 0 0 0 2px var(--surface); }
/* Badge de no-leídos sobre el ícono del grupo (home): número topado a +5 */
.gcr-ic { position: relative; }
.gcr-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 10px; box-sizing: border-box; background: var(--analysis-weak); color: var(--analysis);
  border: 1px solid var(--analysis-border); font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.chat-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.chat-empty { margin: auto; color: var(--text-3); font-size: var(--fs-4); }
.cm { max-width: 82%; align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; border-top-left-radius: 4px; padding: 8px 12px; }
.cm.mine { align-self: flex-end; background: var(--primary-weak); border-color: var(--primary-border);
  border-radius: 14px; border-top-right-radius: 4px; }
.cm-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; }
.cm-name { font-weight: 700; color: var(--text-2); }
.cm.mine .cm-name { color: var(--primary); }
/* Color estable por persona (solo el nombre). Evita verde/rojo/ámbar (sagrados =
   vivo/eliminado/en-vivo). Tonos oscuros/saturados para claro; claros para oscuro. */
.cm-c0 .cm-name { color: #0f766e; }
.cm-c1 .cm-name { color: #2563c9; }
.cm-c2 .cm-name { color: #7c3aed; }
.cm-c3 .cm-name { color: #b83280; }
.cm-c4 .cm-name { color: #0e7490; }
.cm-c5 .cm-name { color: #4f46e5; }
.cm-c6 .cm-name { color: #15803d; }
.cm-c7 .cm-name { color: #a21caf; }
:root.dark .cm-c0 .cm-name { color: #4fd1c5; }
:root.dark .cm-c1 .cm-name { color: #7aa2ff; }
:root.dark .cm-c2 .cm-name { color: #c08cf0; }
:root.dark .cm-c3 .cm-name { color: #ef8cbe; }
:root.dark .cm-c4 .cm-name { color: #5bc7e0; }
:root.dark .cm-c5 .cm-name { color: #9db0ff; }
:root.dark .cm-c6 .cm-name { color: #6bd88a; }
:root.dark .cm-c7 .cm-name { color: #e58fd0; }
/* Separador de día (Hoy / Ayer / 28 jul) */
.chat-daysep { display: flex; align-items: center; justify-content: center; margin: 6px 0 2px; }
.chat-daysep span { font-size: var(--fs-2); font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; }

/* Análisis NFL (comparativa de récords + probabilidad + stats del juego) */
.nfl-an { padding: 4px 2px 8px; }
.nfl-teamrow { display: flex; gap: 10px; }
.nfl-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.nfl-team img, .nfl-team .crest { width: 30px; height: 30px; flex: none; }
.nfl-ti { min-width: 0; display: flex; flex-direction: column; }
.nfl-ti b { font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfl-ti span { font-size: 12px; color: var(--text-2); }
.nfl-prob { margin: 14px 0 4px; }
.nfl-prob-bar { height: 8px; border-radius: 5px; background: var(--analysis-weak); overflow: hidden; border: 1px solid var(--analysis-border); }
.nfl-prob-bar span { display: block; height: 100%; background: var(--primary); }
.nfl-prob-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-top: 5px; font-weight: 600; }
.nfl-stats-h { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px; }
.nfl-stats-h span:last-child { text-align: right; }
.nfl-stat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 7px 4px;
  border-bottom: 1px solid var(--border); }
.nfl-stat:last-child { border-bottom: 0; }
.nfl-sv { font-weight: 700; font-size: var(--fs-4); }
.nfl-stat .nfl-sv:last-child { text-align: right; }
.nfl-sl { font-size: 12px; color: var(--text-2); padding: 0 12px; white-space: nowrap; }
.cm-time { color: var(--text-3); font-size: 11px; }
.cm-st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cm-st.alive { background: var(--success); }
.cm-st.out { background: var(--danger); }
.cm-text { font-size: var(--fs-4); line-height: 1.4; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.chat-input { flex: none; display: flex; gap: 8px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); align-items: center; background: var(--bg); }
/* Con el teclado abierto, el safe-area-inset del home indicator sobra (el teclado ya
   lo cubre): lo quitamos para que el input pegue al teclado sin hueco. */
.chat-screen.kb-open .chat-input { padding-bottom: 12px; }
.chat-input input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--fs-4); }
.chat-input input:focus { border-color: var(--primary); outline: none; }
.chat-input .btn { flex: none; padding: 12px 16px; }

/* Chat: overlay FIJO dimensionado al visualViewport por JS (top + height). Solo
   .chat-box scrollea; header e input quedan fijos y el input pega al teclado sin
   hueco. Es lo más robusto en iOS/Android (los nested overflow y el sticky fallan). */
.scroll-area.chat-mode ~ .bottom-nav { display: none; }
/* Bloqueo de scroll del documento mientras el chat está abierto. CLAVE: constreñir TODO
   el árbol a height:100% para que NO exceda el viewport (que resizes-content encoge al
   abrir el teclado). Si nada desborda, iOS no tiene a dónde scrollear -> offsetTop queda
   en 0 -> el overlay no necesita perseguir el corrimiento (sin el "desde en medio"). */
html.chat-locked, html.chat-locked body { height: 100%; overflow: hidden; }
html.chat-locked .app-shell { height: 100%; }
.chat-screen { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; z-index: 45;
  background: var(--bg); display: flex; flex-direction: column; padding: 0 16px; box-sizing: border-box;
  animation: none; overscroll-behavior: contain; }
.chat-top { flex: none; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.chat-top .back-link { margin-bottom: 4px; }
.chat-top .live-h1 { margin: 2px 0 8px; }
.chat-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-refresh { flex: none; background: none; border: 0; padding: 6px; margin: 0 0 6px; color: var(--text-2); cursor: pointer; line-height: 1; border-radius: 10px; }
@media (hover: hover) { .chat-refresh:hover { color: var(--text); background: var(--surface-2); } }
.chat-refresh .msr { font-size: 22px; }
.chat-refresh.spin .msr { animation: ptr-spin 0.7s linear infinite; }

/* Header del detalle: acciones-ícono (conversación + editar), que no compitan */
.gh-actions { display: flex; align-items: flex-start; gap: 2px; flex: none; }
.gh-iconbtn { position: relative; background: none; border: 0; padding: 6px; margin: 0; color: var(--text-2);
  cursor: pointer; line-height: 1; border-radius: 10px; transition: transform 110ms var(--ease); }
@media (hover: hover) { .gh-iconbtn:hover { color: var(--text); background: var(--surface-2); } }
.gh-iconbtn .msr { font-size: 24px; }
.gh-badge { position: absolute; top: -1px; right: -1px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 10px; box-sizing: border-box; background: var(--analysis-weak); color: var(--analysis);
  border: 1px solid var(--analysis-border); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 18px 16px; box-shadow: var(--shadow-sm); }
.stat-box .v { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.stat-box .l { font-size: var(--fs-2); color: var(--text-2); margin-top: 3px; font-weight: 500; }
.stat-box.green .v { color: var(--success); }
.stat-box.red .v { color: var(--danger); }
.stat-box.gold .v { color: var(--text); }
.stat-box.prov { border-style: dashed; border-color: var(--border-strong); }

/* Back Office · Resumen (KPIs grandes) */
.kpi-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .kpi-hero { grid-template-columns: repeat(2, 1fr); } }
.kpi-hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  padding: 18px; box-shadow: var(--shadow-sm); border-left: 3px solid var(--border); }
.kpi-hero-card .kpi-ico { font-size: 22px; color: var(--text-3); }
.kpi-hero-card .kpi-v { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; margin-top: 6px; }
.kpi-hero-card .kpi-l { font-size: 13px; color: var(--text-2); margin-top: 2px; font-weight: 500; }
.kpi-hero-card.blue { border-left-color: var(--primary); }
.kpi-hero-card.blue .kpi-ico { color: var(--primary); }
.kpi-hero-card.green { border-left-color: var(--success); }
.kpi-hero-card.green .kpi-ico, .kpi-hero-card.green .kpi-v { color: var(--success); }

/* Requiere atención (filas de alerta con color por tipo) */
.alert-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.alert-row:last-child { border-bottom: none; }
.alert-row .alert-txt { flex: 1; font-size: var(--fs-4); font-weight: 500; }
.alert-row .chev { color: var(--text-3); font-size: 20px; }
.alert-row.yellow > .msr:first-child { color: #d97706; }
.alert-row.red > .msr:first-child { color: var(--danger); }
.alert-row.green > .msr:first-child { color: var(--success); }
.alert-row.green { cursor: default; }

/* Actividad reciente */
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.act-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); }
.act-ico.blue { background: var(--primary-weak); color: var(--primary); }
.act-ico.green { background: var(--success-weak); color: var(--success); }
.act-ico.yellow { background: #fef3c7; color: #d97706; }
.act-ico.red { background: var(--danger-weak); color: var(--danger); }
.act-msg { font-size: var(--fs-4); line-height: 1.35; }
.act-time { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Gráfica mini de registros */
.chart-head { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.chart-head b { color: var(--text); font-size: var(--fs-5); font-weight: 700; }
.mini-chart { width: 100%; height: 120px; display: block; }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* ---------- Tables / lists ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-2); color: var(--text-2); font-weight: 600; letter-spacing: 0.02em; padding: 0 12px 12px; border-bottom: 1px solid var(--border); }
.table td { padding: 13px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
/* Tabla NFL (conferencia/división) en filas flex — el nombre se encoge, nunca desborda */
.nfl-tbl { display: flex; flex-direction: column; }
.nfl-tr { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: var(--fs-3); }
.nfl-tr:last-child { border-bottom: 0; }
.nfl-th { color: var(--text-2); font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.nfl-tteam { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.nfl-tteam .crest { width: 22px; height: 22px; flex: none; }
.nfl-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nfl-trec { flex: none; width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.nfl-tpct { flex: none; width: 42px; text-align: right; font-weight: 700; }
.table tr:last-child td { border-bottom: none; }
/* tu fila: contorno claro NEUTRO (arena), no ember — el ember queda para urgencia.
   Se quita el divisor propio y el de la fila de arriba para que el contorno tenga
   el MISMO tono en los 4 lados (antes el divisor --border chocaba arriba). */
.table tr.me td { background: rgba(232, 226, 212, .05); box-shadow: inset 0 1px 0 rgba(232,226,212,.2), inset 0 -1px 0 rgba(232,226,212,.2); border-bottom-color: transparent; }
.table tr:has(+ tr.me) td { border-bottom-color: transparent; }
.table tr.me td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); box-shadow: inset 0 1px 0 rgba(232,226,212,.2), inset 0 -1px 0 rgba(232,226,212,.2), inset 1px 0 0 rgba(232,226,212,.2); }
.table tr.me td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: inset 0 1px 0 rgba(232,226,212,.2), inset 0 -1px 0 rgba(232,226,212,.2), inset -1px 0 0 rgba(232,226,212,.2); }
/* width:1px + nowrap = la columna se encoge a su contenido (no recibe reparto de
   ancho sobrante que la inflaba). El número va en una caja de 2 dígitos para que
   NO cambie al expandir top-5 (1 díg.) → todos (2 díg.); el hueco #↔Jugador queda
   constante y ajustado. */
.rank-num { font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; width: 1px; white-space: nowrap; }
.rank-num .rk-n { display: inline-block; min-width: 1.5em; text-align: center; }
.player-cell { display: flex; align-items: center; gap: 10px; }
/* vidas DEBAJO del nombre (mismo ícono ♥ que ya teníamos) → sin columna Vidas ni scroll */
.player-cell .pl-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.player-cell .pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player-cell .pl-info .lives { font-size: var(--fs-1); gap: 3px; }
.player-cell .pl-info .lives .msr { font-size: 13px; }
/* línea de stats del jugador bajo el nombre: vidas · racha (o "Fuera en JX") */
.pl-stats { display: flex; align-items: center; gap: 5px; font-size: var(--fs-1); line-height: 1.1; }
.pl-sep { color: var(--border-strong); }
.pl-streak { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-streak .msr { font-size: 13px; color: var(--text-3); }
.pl-out { font-size: var(--fs-1); color: var(--text-3); }
.st-bar tr.st-out .pl-name { color: var(--text-dim); }
/* Scroll horizontal de la tabla con # y Jugador CONGELADOS (siempre saber de quién es la fila) */
.card.table-card { overflow-x: visible; }   /* el scroll lo maneja SOLO el .table-scroll (evita doble scroll) */
.table-scroll { overflow-x: auto; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; }
/* la tabla de standings usa layout fijo (todo cabe en 360px) → nunca scroll horizontal */
.table-scroll:has(.st-fixed) { overflow-x: hidden; }
.stick2 th:first-child, .stick2 td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 30px; min-width: 30px; box-sizing: border-box; padding-right: 2px; }
.stick2 th:nth-child(2), .stick2 td:nth-child(2) { position: sticky; left: 30px; z-index: 2; background: var(--surface); box-shadow: 8px 0 8px -6px rgba(0,0,0,.5); padding-right: 4px; }   /* corte más cerca de la flecha */
.stick2 thead th:first-child, .stick2 thead th:nth-child(2) { z-index: 3; }
.stick2 tr.me td:first-child, .stick2 tr.me td:nth-child(2) { background: var(--primary-weak); }

/* Barra lateral de estado por fila (reemplaza la columna "Estado" en las tablas).
   Segmento redondeado, separado del borde y del número; verde=vivo · morado=revivió ·
   rojo=fuera · tenue=provisional. El nombre se atenúa si el jugador está fuera. */
.st-bar td:first-child { position: relative; padding-left: 14px; }
.st-bar th:first-child { padding-left: 14px; }
.stick2.st-bar td:first-child { position: sticky; }
.stick2.st-bar th:first-child, .stick2.st-bar td:first-child { width: 32px; min-width: 32px; }
.stick2.st-bar th:nth-child(2), .stick2.st-bar td:nth-child(2) { left: 32px; }
.st-bar td:first-child::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--border-strong); }
.st-bar tr.st-alive td:first-child::before { background: var(--green-2); }
.st-bar tr.st-revived td:first-child::before { background: var(--duel-a); }
.st-bar tr.st-out td:first-child::before { background: var(--danger); }
.st-bar tr.st-prov td:first-child::before { opacity: .4; }   /* provisional = franja tenue */
.stick2.st-bar tr.st-out .player-cell span:not(.pl-go) { color: var(--text-dim); }   /* nombre atenuado (Resumen/General) */
.st-bar:not(.stick2) tr.st-out td:first-child { color: var(--text-dim); }            /* nombre atenuado (Historial) */
/* Historial (3 columnas): sin el min-width de tablas anchas (que lo estiraba a 440px y
   separaba mucho las columnas). Al 100% del card reparte el espacio de forma pareja. */
.st-bar:not(.stick2) { min-width: 0; }

/* Grid del historial (jornada = columna, fila = persona). Columna de nombre fija + scroll
   horizontal. Aro = resultado (verde ganó · gris empató · rojo perdió); tache = te costó. */
.hg-cap { font-size: 13px; color: var(--text-2); padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hg-cap b { color: var(--text); font-weight: 700; }
.hg-cap .hg-cap-alive { color: var(--success); font-weight: 700; }
.hg-cap .sep { color: var(--text-3); }
.hg { border-collapse: separate; border-spacing: 0; width: max-content; }
.hg th, .hg td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.hg thead th { font-size: 11px; color: var(--text-2); font-weight: 700; padding-bottom: 10px; white-space: nowrap; }
.hg th:first-child, .hg td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding-left: 28px; padding-right: 12px; min-width: 126px; box-shadow: 8px 0 8px -6px rgba(0,0,0,.5); }
.hg thead th:first-child { z-index: 3; }
.hg tbody td:first-child::before { content: ""; position: absolute; left: 18px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--border-strong); }
.hg tr.st-alive td:first-child::before { background: var(--green-2); }
.hg tr.st-revived td:first-child::before { background: var(--duel-a); }
.hg tr.st-out td:first-child::before { background: var(--danger); }
.hg tr.st-out .hg-nm { color: var(--text-dim); }
.hg-nm { font-size: var(--fs-3); font-weight: 600; white-space: nowrap; }
/* columnas de jornada: todas del mismo ancho (jugadas y futuras iguales) */
.hg th:not(:first-child), .hg td:not(:first-child) { width: 42px; min-width: 42px; box-sizing: border-box; }
/* jornada futura: un punto */
.hg-fut { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); opacity: .45; }
/* alinear todos los contenidos de celda al centro vertical (escudo/candado/punto/tache) */
.hg-logo, .hg-mark, .hg-nopick, .hg-fut { vertical-align: middle; }
/* mi fila resaltada (sé cuál soy yo) */
/* tu fila en el historial: fondo OPACO neutro (--surface-2) — la 1ª columna está congelada
   y debe tapar los escudos que scrollean detrás (no puede ser semi-transparente). Neutro, no ember. */
.hg tr.me td { background: var(--surface-2); }
.hg tr.me td:first-child { background: var(--surface-2); }
.hg thead th.cur, .hg-col-cur { color: var(--primary); }
/* escudo SIN anillo (llena el círculo, se ve más grande). Color = ganó; desaturado = no
   ganó (perdió/empató); línea roja 1px = le costó (perdió/eliminó). */
.hg-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 9.5px; font-weight: 800; color: var(--text-2); background: var(--surface-2); box-sizing: border-box; }
.hg-logo.muted { filter: saturate(.55) opacity(.9); }
/* línea horizontal roja que sobresale de ambos lados del escudo = perdió (más clara) */
.hg-logo.hurt::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 2.5px; border-radius: 2px; background: #e5252b; transform: translateY(-50%); }
.hg-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/* sin pick (jornada pasada donde no eligió): círculo con tache, sin escudo ni anillo */
.hg-nopick { position: relative; display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.hg-nopick::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1.5px; background: var(--border-strong); transform: translateY(-50%) rotate(-45deg); }
.hg-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); font-weight: 800; font-size: 13px; box-sizing: border-box; }
.hg-mark .msr { font-size: 15px; }
/* "sin elegir" (?) = círculo PUNTEADO hueco, para no confundirlo con el candado relleno de "por revelar" */
.hg-mark.hg-q { background: transparent; border: 1.5px dashed var(--border-strong); }
.hg-empty { color: var(--text-3); }
.hg tbody tr:last-child td { border-bottom: none; }
.hg-legend { display: flex; flex-wrap: wrap; gap: 12px 14px; padding: 14px 18px; margin: 0; border-top: 1px solid var(--border); font-size: var(--fs-2); color: var(--text-2); }
.hg-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.hg-legend .hg-lg { position: relative; width: 16px; height: 16px; border-radius: 50%; display: inline-block; background: linear-gradient(135deg, #e0402e, #2b6fb0); }
.hg-legend .hg-lg.muted { filter: saturate(.4) opacity(.85); }
.hg-legend .hg-lg.hurt::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; border-radius: 2px; background: #e5252b; transform: translateY(-50%); }
.hg-legend .hg-nopick { width: 16px; height: 16px; }
.hg-legend .hg-mark { width: 16px; height: 16px; font-size: 10px; }
.hg-legend .hg-mark .msr { font-size: 11px; }

/* Switch Tabla/Historial del grupo: activo NEUTRO (pastilla gris elevada), no ember,
   para no competir con el CTA de "Elegir equipo" que sí es ember. */
.seg.gtabs .seg-opt.active { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); }

/* Progreso de picks en la Tabla (jornada abierta): X/Y eligieron + cuenta regresiva.
   Línea gris si queda tiempo, roja en la última hora (urgent). */
.pk-prog { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.gtab-more { text-align: center; margin-top: 14px; }
.pk-prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.pk-prog-n { color: var(--text-2); }
.pk-prog-n b { color: var(--text); font-weight: 700; }
.pk-prog-cd { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); }
.pk-prog-line { height: 5px; border-radius: 3px; background: var(--border-strong); overflow: hidden; }
.pk-prog-line > span { display: block; height: 100%; border-radius: 3px; background: var(--text-3); transition: width .35s var(--ease), background var(--t) var(--ease); }
/* 3 niveles de tiempo (como la selección de pick): gris lejos · amarillo medio · rojo cerca */
.pk-prog.t-mid .pk-prog-cd { color: var(--analysis); }
.pk-prog.t-mid .pk-prog-line > span { background: var(--analysis); }
.pk-prog.t-near .pk-prog-cd { color: var(--danger); }
.pk-prog.t-near .pk-prog-line > span { background: var(--danger); }
/* Barra LLENA (todos eligieron): la línea vuelve a gris — el progreso ya terminó, no hay
   nada pendiente. El contador conserva su tono de tiempo (solo se apaga la línea). */
.pk-prog.full .pk-prog-line > span { background: var(--text-3); }

/* ---------- Matches ---------- */
.match { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 10px; gap: 10px; box-shadow: var(--shadow-sm); }
.match .teams { display: flex; align-items: center; gap: 12px; flex: 1; }

/* Tarjeta de marcador (scoreboard): logos anclados a los bordes, VS/marcador al
   centro y estado abajo. Logo, centro y 1ª línea del nombre alineados arriba. */
.sb { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.sb-row { display: flex; align-items: flex-start; gap: 10px; }
.sb-team { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-4); }
.sb-team.away { justify-content: flex-end; }
.sb-name { min-width: 0; line-height: 1.25; }
.sb-team.away .sb-name { text-align: right; }
.sb-team .crest { margin-top: -4px; }
.sb-mid { flex: 0 0 auto; text-align: center; min-width: 42px; }
.sb-vs { font-size: 12px; font-weight: 700; color: var(--text-3); }
.sb-score { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: -3px; display: inline-block; }
.sb-status { text-align: center; margin-top: 7px; font-size: var(--fs-2); color: var(--text-3); }
.sb-status .sb-lbl { text-transform: uppercase; letter-spacing: .05em; }
.sb-status.live { color: var(--analysis); font-weight: 700; }
.sb-status.live .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--analysis); margin: 0 6px; vertical-align: middle; }
/* "Final" = texto normal (blanco), no verde: el verde queda reservado a "equipo que ganó con pick". */
.sb-status.done { color: var(--text); font-weight: 700; }
/* ---- Marcadores en vivo (rediseño): cabecera, secciones, TU PICK ---- */
.live-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 2px; }
.live-sub { font-size: var(--fs-4); color: var(--text-2); margin: 0 0 8px; }
/* Título de identidad del survivor (En vivo/Planeación/Crónica): mismo tamaño/peso/tracking que el
   título principal del grupo (.group-head h1) para que las 4 pantallas se vean homologadas. En vivo
   parte de .live-h1 (800/-.4px) → se normaliza a 700/-0.025em; en móvil las 3 bajan a 20px como el principal. */
.live-h1.svr-id { font-weight: 700; letter-spacing: -0.025em; display: flex; align-items: center; gap: 8px; }
.page-head h1.svr-id { gap: 8px; }   /* el principal usa 8px; page-head trae 10px por defecto */
@media (max-width: 720px) { .live-h1.svr-id, .page-head h1.svr-id { font-size: 20px; } }
/* jornada/GP como subtítulo en el carrusel (el título "Cómo va este grupo" ya va arriba) */
.live-round-sub { font-size: var(--fs-4); font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.live-round-sub .msr { font-size: 17px; }
.live-meta { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.live-on { color: var(--analysis); font-weight: 700; }
.live-on .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--analysis); margin-right: 5px; vertical-align: middle; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.sb-sec { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; }
.sb-sec-l { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); }
.sb-sec-n { font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--surface-2); border-radius: 20px; padding: 1px 8px; }
/* Marcadores (misma tarjeta .pk-match que "Escoger equipo"/"Todas las jornadas"). */
.pk-match.live-card { margin-bottom: 8px; }
.pk-team.static { cursor: default; }
.pk-team.win .pk-name { font-weight: 800; }
.pk-team.mine .pk-name { color: var(--primary); font-weight: 700; }
.pk-foot-badge { display: inline-flex; align-items: center; gap: 8px; }
.pk-min { font-size: 12px; font-weight: 700; color: var(--analysis); font-variant-numeric: tabular-nums; }
.live-meta .live-badge { vertical-align: middle; }
@media (hover: hover) { .pk-team.static:hover { background: var(--surface); } }
/* más hueco en el centro para que el marcador no se encime con los escudos */
.pk-match.live-card .pk-teams .pk-team:first-child { padding-right: 30px; }
.pk-match.live-card .pk-teams .pk-team:last-child { padding-left: 30px; }
.pk-vs.pk-score { font-size: var(--fs-3); font-weight: 800; color: var(--text); letter-spacing: 0; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.pk-when.live { color: var(--analysis); font-weight: 700; }
.pk-when.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--analysis); animation: livepulse 1.4s var(--ease) infinite; }
.pk-when.done { color: var(--text); font-weight: 700; }
.pk-match .stats-panel { padding: 8px 12px 14px; }
/* ---- Capa social de Marcadores (picks del grupo, solo post-cierre) ---- */
.gp-groupbar { border: 1px solid var(--border); border-radius: var(--r-3); padding: 12px 14px; background: var(--surface); margin: 6px 0 4px; box-shadow: var(--shadow-sm); }
.gp-t { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.gp-summary { display: flex; gap: 8px; }
.gp-pill { flex: 1; text-align: center; border-radius: 10px; padding: 8px 6px; border: 1px solid var(--border); }
.gp-pill .n { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gp-pill .l { font-size: 10px; color: var(--text-2); margin-top: 3px; }
.gp-pill.win .n { color: var(--success); }
.gp-pill.tie .n { color: var(--text-2); }   /* empate = gris (ni ganó ni perdió) */
.gp-pill.lose .n { color: var(--danger); }
.gp-soon { font-size: 11px; color: var(--text-3); text-align: center; margin: 8px 0 0; }
.gp-picks { border-top: 1px solid var(--border); background: var(--surface-2); padding: 10px 12px; }
.gp-picks-h { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.gp-block { margin-bottom: 7px; }
.gp-block:last-child { margin-bottom: 0; }
.gp-rowline { display: flex; align-items: center; gap: 8px; }
.gp-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); font-weight: 700; border-radius: 8px; padding: 3px 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.gp-badge .crest { width: 16px; height: 16px; font-size: 7px; }
.gp-badge .msr { font-size: 14px; }
.gp-badge.win { color: var(--success); border-color: var(--success-border); background: var(--success-weak); }
.gp-badge.lose { color: var(--danger); border-color: var(--danger-border); background: var(--danger-weak); }
.gp-badge.tie { color: var(--text-2); border-color: var(--border-strong); background: var(--surface-2); }
.gp-badge.soon { color: var(--text-2); }
/* Ficha de confianza dentro de la pastilla del pick (En vivo). Hereda el color del estado
   (verde/rojo/arena) con un fondo apenas más denso, para que se lea como parte del pick y no
   como un badge aparte. */
.qlv-ficha { display: inline-flex; align-items: center; justify-content: center; min-width: 16px;
  height: 16px; padding: 0 4px; margin-left: 2px; border-radius: 5px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Capa social F1: cara del piloto + su posición vs el corte, en la fila del pick. */
.f1-gp-face { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.f1-gp-pos { flex: none; font-size: var(--fs-2); font-weight: 800; color: var(--text-2); min-width: 30px; }
.f1-gp-pos.win { color: var(--success); }
.f1-gp-pos.lose { color: var(--danger); }
.gp-stack { display: flex; align-items: center; }
.gp-av { margin-left: -7px; }
.gp-av:first-child { margin-left: 0; }
.gp-av .avatar { width: 24px; height: 24px; font-size: 9px; border: 2px solid var(--surface-2); }
.gp-av.me .avatar { outline: 2px solid var(--gold); outline-offset: -1px; }
/* icono/emoji del survivor cuando el pie social es la vista cross (en vez de avatar de jugador) */
.gp-av.xcf-emoji { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.gp-stack > .gp-av > .msr { font-size: 15px; color: var(--text-2); width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.gp-exprow > .gp-av.xcf-emoji, .gp-exprow > .gp-av > .msr { margin-left: 0; }
.gp-cnt { font-size: 12px; color: var(--text-2); font-weight: 600; }
.gp-expand { margin-left: auto; flex: none; background: none; border: 0; color: var(--text-2); font-size: var(--fs-2); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; font-family: inherit; }
.gp-expand .msr { font-size: 15px; }
.gp-list { display: none; padding-top: 8px; }
.gp-list.on { display: block; }
.gp-exprow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.gp-exprow .avatar { width: 22px; height: 22px; font-size: 8px; flex: none; }
.gp-exprow .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.gp-exprow .gp-st { margin-left: auto; }
.gp-st { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 7px; }
.gp-st.win { background: var(--success-weak); color: var(--success); }
.gp-st.lose { background: var(--danger-weak); color: var(--danger); }
.gp-st.tie { background: var(--surface-2); color: var(--text-2); }
.gp-st.soon { background: var(--surface-2); color: var(--text-2); }
/* Partido de tu pick (sección "Tu pick"): borde de color según el resultado. */
.pk-match.pick.tp-won { border-color: var(--success); box-shadow: 0 0 0 2px var(--success-weak); }
.pk-match.pick.tp-lost { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-weak); }
.pk-match.pick.tp-draw { border-color: var(--border-strong); box-shadow: 0 0 0 2px var(--surface-2); }
.pk-match.pick.tp-live { border-color: var(--analysis); box-shadow: 0 0 0 2px var(--analysis-weak); }
.pk-match.pick.tp-soon { border-color: var(--primary-border); box-shadow: 0 0 0 2px var(--primary-weak); }
.tp-badge { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; border-radius: 20px; padding: 4px 10px; border: 1px solid transparent; }
.tp-badge.tp-won { background: var(--success-weak); color: var(--success); border-color: var(--success-border); }
.tp-badge.tp-lost { background: var(--danger-weak); color: var(--danger); border-color: var(--danger-border); }
.tp-badge.tp-draw { background: var(--surface-2); color: var(--text-2); border-color: var(--border-strong); }
.tp-badge.tp-live { background: var(--analysis-weak); color: var(--analysis); border-color: var(--analysis-border); }
.tp-badge.tp-live .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; margin-right: 2px; animation: livepulse 1.4s var(--ease) infinite; }
/* "Próximo" = neutro (no rojo/ember): el borde cálido de la card ya marca "es tu pick" */
.tp-badge.tp-soon { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.sb-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.sb-wrap .sb:last-child { margin-bottom: 0; }
.team-pick {
  position: relative;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: var(--tap);
  border-radius: var(--r-2); cursor: pointer; border: 1.5px solid var(--border);
  background: var(--surface); flex: 1; justify-content: center; font-weight: 500; font-size: var(--fs-4);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .team-pick:hover:not(.disabled) { border-color: var(--primary); background: var(--primary-weak); } }
.team-pick.selected { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 600; }
.team-pick.selected .msr { color: var(--primary); }
.team-pick.disabled { opacity: .45; cursor: not-allowed; }
.team-pick .tp-name { text-align: center; line-height: 1.25; }

/* --- Fórmula 1 --- */
.sport-pick { display: flex; gap: 8px; }
.sport-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1;
  justify-content: center; text-align: center; line-height: 1.15;
  padding: 10px 4px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 500; font-size: 13px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.sport-opt .msr { font-size: 22px; }
.sport-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); }
.sport-opt input { display: none; }
.constructor-block { margin-bottom: 16px; }
.con-name { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
.con-duel { margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-family: inherit; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0;
  cursor: pointer; border: 1px solid var(--analysis); background: transparent;
  color: var(--analysis); border-radius: 999px; padding: 3px 9px 3px 7px; line-height: 1;
  transition: background var(--t-fast) var(--ease); }
.con-duel .msr.sm { font-size: 14px; }
.con-duel:active { background: var(--analysis-weak); }
@media (hover: hover) { .con-duel:hover { background: var(--analysis-weak); } }
.con-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.con-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.drv-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top center;
  border: 2px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.drv-photo.sm { width: 28px; height: 28px; }
.driver-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.driver-pick { justify-content: flex-start; gap: 10px; text-align: left; padding-left: 12px;
  border-left: 3px solid var(--con, var(--border)); }
.drv-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px;
  padding: 0 7px; border-radius: 6px; background: var(--surface-2); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; flex-shrink: 0; }
.driver-pick .tp-name { text-align: left; flex: 1; }
.drv-chip { display: inline-flex; align-items: center; gap: 4px; }
.pick-inline { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
/* En tablas el equipo/piloto va en una sola línea (evita que "Man United" se parta en dos
   renglones según cómo table-layout reparta el ancho en top-5 vs expandido). */
.table .pick-inline { white-space: nowrap; }
/* Estado del pick SOBRE el equipo en la Tabla general (en vez de columna Resultado):
   Ganó=verde ✓, Perdió=rojo ✗, Empató=gris = (ni ganó ni perdió), En juego=dorado con punto que late. */
/* Celda de equipo con estado en vivo (tabla): escudo + anillo de progreso + badge ✓/✗/= */
.tmc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tmc-crest { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.tmc-crest .crest { width: 30px; height: 30px; font-size: 10px; }
.tmc-crest .crest.logo img { width: 26px; height: 26px; }
/* F1: foto/ícono del piloto dentro del escudo de la tabla */
.tmc-crest .tmc-drv { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.tmc-crest .tmc-drvph { display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.tmc-crest .tmc-drvph .msr { font-size: 16px; }
.tmc-crest .enc-ring { position: absolute; inset: 0; width: 36px; height: 36px; pointer-events: none; }
.tmc-crest .enc-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 23px 23px; }
.tmc-crest.live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 50%; }
.tmc-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface); font-size: 11px; font-weight: 800; line-height: 1; }
.tmc-badge .msr { font-size: 13px; }
.tmc-badge.win { background: var(--success); color: #06140d; }
.tmc-badge.lose { background: var(--danger); color: #1a0707; }
.tmc-badge.tie { background: var(--text-2); color: var(--bg); }
.tmc-nm { font-size: var(--fs-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sin scroll horizontal: padding de celda ajustado + layout FIJO (columnas truncan, no desbordan) */
.st-bar td, .st-bar th { padding-left: 8px; padding-right: 8px; }
.st-bar td:first-child, .st-bar th:first-child { padding-left: 14px; }   /* deja aire a la franja de estado */
/* Layout AUTOMÁTICO: cada columna se dimensiona a su contenido → Jugador y Equipo se
   reparten el espacio según lo que necesitan (nombre y equipo largos caben completos,
   ambos se pegan sin hueco muerto). Los caps evitan desbordes en casos extremos. */
.st-fixed { width: 100%; }
.st-fixed td { overflow: hidden; }
.st-fixed .pl-name { max-width: 112px; }
.st-fixed .tmc-nm { max-width: 104px; }
.player-cell .pl-info { flex: 1; }
.tm-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tm-badge { display: inline-flex; align-items: center; }   /* solo el ícono se colorea; el nombre queda normal */
.tm-badge .msr { font-size: 16px; }
.tm-won .tm-badge { color: var(--success); }
.tm-lost .tm-badge { color: var(--danger); }
.tm-draw .tm-badge { color: var(--text-2); }
.tm-live .tm-badge { color: var(--gold); }
.tm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; animation: tri-pulse 1.4s ease-in-out infinite; }
.tm-eq { font-weight: 800; font-size: var(--fs-4); line-height: 1; }   /* empate = "=" (ni ganó ni perdió) */
/* plan (calendario) F1 */
.plan-driver { justify-content: flex-start; gap: 8px; border-left: 3px solid var(--con, var(--border)); }
.plan-driver .drv-num { min-width: 34px; height: 22px; color: #fff; }
@media (max-width: 560px) { .driver-row { grid-template-columns: 1fr; } }

/* Selección de equipos: dos columnas iguales y de la misma altura */
/* Filas del pick con el mismo look que el calendario: nombre en 1 línea (más
   espacio, con ellipsis) y "vs" chico. Al ser 1 línea todas las cajas miden lo
   mismo → el "vs" queda centrado sin el jitter subpíxel de las 2 líneas. */
.pick-match { flex-direction: column; align-items: stretch; gap: 8px; }
.pick-teams { display: flex; align-items: center; gap: 8px; width: 100%; }
.pick-teams .team-pick { flex: 1; min-width: 0; min-height: 46px; height: auto;
  justify-content: flex-start; padding: 8px 9px; gap: 6px; }
.pick-teams .tp-name { flex: 1; min-width: 0; text-align: left; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pick-teams .match-mid { flex: 0 0 auto; min-width: 0; }
.pick-teams .crest { width: 22px; height: 22px; }
.pick-teams .crest.logo img { width: 18px; height: 18px; }
.pick-match .kickoff { min-width: 0; text-align: left; display: inline-flex; align-items: center; gap: 4px; }
.pick-match .kickoff .msr { font-size: 15px; }
.pick-confirm { position: sticky; bottom: 0; z-index: 5; background: var(--bg); padding: 16px 0; margin-top: 10px; border-top: 1px solid var(--border); }
/* pega al fondo del área de scroll, que ya queda por encima de la barra inferior */

/* ===== Pantalla de selección (fútbol) — tarjetas por día ===== */
.pk-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.pk-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.pk-headrow .pk-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pk-deadline { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; }
.pk-deadline .msr { font-size: 16px; color: var(--analysis); }
.pk-deadline b { color: var(--analysis); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Los contadores se repintan CADA SEGUNDO. Sin cifras de ancho fijo, cada tic cambia el ancho del
   texto y el renglón tiembla (el "1" es más angosto que el "8"). Vale para todos los `.cd` —en el
   Home, en Actividad, en el duelo— y para los MONTOS, que se leen comparando una lista. */
.cd { font-variant-numeric: tabular-nums; }
.bd-row span:last-child, .up-score { font-variant-numeric: tabular-nums; }
.pk-deadline .pk-abs { font-size: 13px; color: var(--text-2); }
.pk-deadline.urgent .msr, .pk-deadline.urgent b { color: var(--danger); }
.pk-deadline.closed .msr, .pk-deadline.closed b { color: var(--text-2); }
.pk-rule { font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 10px 0 16px; }
.pk-allhead { margin: 16px 0 2px; }
.pk-allh { font-size: 16px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.pk-allhint { font-size: var(--fs-2); color: var(--text-3); margin: 2px 0 0; }
.pk-day { font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--text-3); margin: 18px 0 8px; }
.pk-allhead + .pk-day { margin-top: 12px; }
.pk-match { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-4); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.pk-teams { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: stretch; }
.pk-seam { background: var(--border); position: relative; }
.pk-vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; white-space: nowrap;
  font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: .5px; padding: 2px 7px; z-index: 2; }
.pk-team { background: var(--surface); border: 0; text-align: left; cursor: pointer; padding: 11px 12px; min-height: 52px;
  min-width: 0; /* fija cada columna al 50% aunque el nombre sea largo */
  display: flex; flex-direction: column; gap: 6px; font-family: inherit; transition: background var(--t-fast) var(--ease); }
/* hover solo con mouse real (evita el "hover pegado" al tocar en móvil) */
@media (hover: hover) { .pk-team:hover:not(:disabled) { background: var(--surface-2); } }
.pk-t2 { display: flex; align-items: flex-start; gap: 8px; }
.pk-t2 .crest { flex: none; }
.pk-name { font-size: var(--fs-4); font-weight: 600; line-height: 1.2; color: var(--text); min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.pk-bottom:empty { display: none; }
.pk-jtag { font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.pk-jtag.part { color: var(--primary); }
.pk-team.pk-flash { animation: pkflash 1.2s ease; }
@keyframes pkflash { 0%, 100% { background: var(--surface); } 30% { background: var(--analysis-weak); } }

/* ============================================================
   QUINIELA — delta de la card de pick 1X2 + marcador (.pk-match.qn)
   Reusa .pk-match/.pk-team/.pk-name/.pk-foot/.crest. Selección = ARENA (no ember:
   hay una por partido). El marcador manda; solo aparece si hay pick.
   ============================================================ */
.pk-match.qn .pk-teams { grid-template-columns: 1fr 52px 1fr; }
/* esquina exterior de las celdas de los extremos = radio de la card, para que el aro
   de selección (inset) siga el arco y no lo recorte el overflow:hidden. */
.pk-match.qn .pk-team:first-child { border-top-left-radius: var(--r-4); }
.pk-match.qn .pk-team:last-child { border-top-right-radius: var(--r-4); }
.qn .pk-t2 .crest-wrap { position: relative; width: 26px; height: 26px; flex: none; }
.qn .pk-check { display: none; position: absolute; right: -3px; bottom: -5px;
  width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%;
  background: var(--arena); border: 1.5px solid var(--surface-2);
  align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: var(--surface); }
.qn .pk-team.sel .pk-check { display: flex; }
.qn .pk-team.sel { background: var(--arena-weak); box-shadow: inset 0 0 0 2px var(--arena); }
.qn .pk-team.sel .pk-name { color: var(--text); font-weight: 700; }
/* celda de empate: mismo alto y mismo tratamiento de selección */
.qn-draw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 0; background: var(--surface); border: 0;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font-family: inherit; cursor: pointer; }
.qn-draw .qn-vs { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-3); }
.qn-draw .qn-dt { font-size: 12px; font-weight: 600; color: var(--text-2); }
.qn-draw.sel { background: var(--arena-weak); box-shadow: inset 0 0 0 2px var(--arena); }
.qn-draw.sel .qn-dt { color: var(--text); font-weight: 700; }
.qn-missing { color: var(--primary); font-weight: 600; }
/* marcador: solo si hay pick. sin título ni etiquetas (los nombres ya están arriba) */
.qn-score { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 10px; border-top: 1px solid var(--border); }
.qn-group { display: flex; align-items: center; gap: 4px; }
.qn-dash { font-size: 20px; color: var(--text-4); }
.qn-step { width: 40px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-2);
  background: var(--surface-2); color: var(--text-2); font-size: 18px; font-weight: 700; font-family: inherit;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.qn-step:disabled { color: var(--border-strong); cursor: default; }
.qn-num { width: 46px; height: 44px; padding: 0; border: 0; background: none; text-align: center; font-family: inherit;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer; touch-action: manipulation; }
.qn-num.qn-empty { color: var(--text-4); }
.qn-input { width: 46px; height: 44px; box-sizing: border-box; padding: 0; text-align: center; font-family: inherit;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
  background: var(--surface-2); border: 0; border-radius: var(--r-2); box-shadow: inset 0 0 0 2px var(--arena); }
.qn-input:focus { outline: none; }
/* ============================================================
   QUINIELA · escalera de fichas (capa 'confidence')
   La confianza es propiedad del ESCALÓN, no del partido: el riel de números vive APARTE y no
   viaja con la tarjeta. Una fila por partido en orden FIJO del DOM; lo único que cambia con el
   estado es su translateY (ver qcfLayout en app.js). Reusa .pk-match/.pk-foot sin tocarlas.
   ============================================================ */
.qcf { position: relative; margin-top: 4px; }
/* El riel: número + línea. La línea se acercó (34 → 26) y esos 8px se los quedó el nombre, que
   es el dato que no cabía.
   Y el número NO se centra en su columna: se centra en la BANDA QUE EL OJO LEE COMO RIEL, que
   empieza en el borde de la pantalla —a la izquierda del número no hay nada más—. Centrado en
   la columna (0..26) el número quedaba pegado a la línea: 18px de aire a la izquierda contra 2
   a la derecha. Por eso la caja se estira hacia afuera los 16px de padding de .container y
   arranca en -16: así el aire queda ~10 y ~10, y el número sangra un poco al margen, que es lo
   normal en un índice lateral. El escalón más ancho posible es "18" (jornada de 18 partidos) y
   mide 22.5px, así que la banda de 42 lo contiene con holgura, con uno o con dos dígitos. */
.qcf-line { position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.qcf-step { position: absolute; left: -16px; top: 0; width: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums;
  transition: transform 200ms var(--ease); pointer-events: none; }
/* Fantasma = escalera completa antes de marcar nada: enseña la mecánica sin prometer nada
   (en cuanto marcas, la ficha real manda y estos números se recalculan). */
.qcf-step.qcf-ghost { color: var(--text-4); font-weight: 700; }
/* Los 18px de padding exterior de .pk-team existen para dejar aire al costurón central de la
   card de survivor (2 columnas); aquí la rejilla es de 3 con una columna en medio, así que ese
   aire ya lo da la columna — se devuelve al nombre, que con "Seattle Seahawks" no cabía.
   El padding INTERIOR (contra la columna del centro) baja a 2px por el mismo argumento: la
   columna "VS / empate" ya separa. El EXTERIOR se queda en 8 porque ahí sí hay borde de card. */
.qcf-row .pk-teams .pk-team { padding-left: 8px; padding-right: 8px; }
.qcf-row .pk-teams .pk-team:first-child { padding-right: 2px; }
.qcf-row .pk-teams .pk-team:last-child { padding-left: 2px; }
.qcf-row .pk-teams { grid-template-columns: 1fr 46px 1fr; }
.qcf-row .pk-t2 { gap: 6px; }
.qcf-row .crest-wrap, .qcf-row .crest-wrap img { width: 22px; height: 22px; }
.qcf-row { position: absolute; left: 32px; right: 0; top: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Dos defensas contra la MISMA costura. Todas las filas se fuerzan al alto de la más alta
   (el riel tiene que cuadrar), así que a una fila baja le sobraba espacio y ahí asomaba el
   fondo de la TARJETA debajo del pie: dos tonos en la misma franja.
   1) el pie crece con la sobra (flex:1) → el tono que se ve siempre es el del pie;
   2) y de entrada miden igual, porque las flechas de la fila marcada inflaban el pie 13px
      más que el "sin ficha" de la no marcada — lo que además reacomodaba TODA la escalera
      en cuanto marcabas el primer partido. */
.qcf-row .pk-foot { flex: 1; min-height: 48px; box-sizing: border-box; }
/* En vuelo: sin transición (sigue al dedo, no lo persigue) y levantada del resto. */
.qcf-row.qcf-held { transition: none; z-index: 3; border-color: var(--border-strong);
  box-shadow: 0 10px 24px rgba(0,0,0,.55); }
/* Mientras una fila está en vuelo tomamos el gesto. OJO: esto NO es lo que frena el scroll del
   gesto en curso — el navegador fija los gestos permitidos al empezar el toque y no re-lee
   `touch-action` a medio camino, así que para el dedo que ya está abajo llega tarde. Eso lo
   resuelve el `touchmove` no pasivo de `qnBind` (ver el comentario ahí). Esto sigue sirviendo
   para un gesto NUEVO que empiece con una fila ya en vuelo (p. ej. un segundo dedo). */
.qcf-dragging { touch-action: none; }
.qcf-dragging .qcf-row { touch-action: none; }
/* Flechas de UN escalón, montadas en el pie que ya existe (.pk-foot). */
.qcf-arrows { display: flex; flex: none; margin-left: -6px; }
.qcf-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 32px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-3); }
.qcf-arrow .msr { font-size: 20px; }
.qcf-arrow:disabled { color: var(--text-4); cursor: default; }
.qcf-unmarked { font-size: 12px; color: var(--text-3); flex: none; padding-left: 2px; }
/* Nombre en dos renglones: ciudad tenue + apodo fuerte. Sin el clamp de .pk-name, que aquí
   cortaría justo el apodo (lo único que de verdad identifica al equipo). */
.qcf-row .pk-name { display: block; -webkit-line-clamp: none; overflow: visible; }
.qcf-city { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcf-nick { display: block; font-size: var(--fs-4); font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nombre SIN ciudad (futbol: "Guadalajara", "Man United"). Aquí el renglón de abajo queda libre,
   así que se le presta: hasta 2 líneas, y si aun así no cabe, puntos al final de la segunda.
   - 13px y no 14: con 14 se pasaban por 2-3px nombres que sí deberían caber ("Monterrey" 69px
     contra 66.5 de celda). Un punto menos los mete a todos; NFL conserva sus 14 en el apodo.
   - `overflow-wrap: normal` revierte el `anywhere` que hereda de .pk-name: sin eso una palabra
     sola se parte a la mitad ("Guadalajar / a"), que es peor que recortar con puntos.
   - el alto se fija en lugar de padding para igualar al de ciudad+apodo, así el riel de
     escalones no se desalinea en una jornada donde conviven nombres de 1 y de 2 renglones. */
.qcf-solo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: normal; overflow: hidden;
  font-size: 13px; line-height: 1.15; min-height: 30px; -webkit-box-pack: center;
  justify-content: center; }
.qcf-foot-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qcf-howto { display: block; margin-top: 4px; color: var(--text-3); }
.qcf-hint { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 14px; }

/* ============================================================
   DUELOS (h2h) — marcador enfrentado y calendario. Reusa .card/.qt-row/.tri-nav;
   lo único nuevo es el tablero 1v1, que no existía en ningún modo.
   ============================================================ */
.du-board { padding: 16px 14px 14px; }
.du-row { display: flex; align-items: flex-start; gap: 10px; }
.du-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.du-av .avatar, .du-av img { width: 40px; height: 40px; }
.du-nm { font-size: var(--fs-3); font-weight: 600; color: var(--text-2); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El marcador es DATO: fuera de la escala --fs-* a propósito (excepción B3 del :root). */
.du-pts { font-size: 38px; font-weight: 800; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.du-pts.du-dim { color: var(--text-3); }
.du-rec { font-size: var(--fs-2); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.du-vs { flex: none; align-self: center; font-size: var(--fs-2); font-weight: 700; letter-spacing: .5px; color: var(--text-4); }
/* Veredicto + avance en UNA fila, con divisoria dentro de la card (como el mock), no apilados
   y centrados: el chip a la izquierda y el conteo corrido a su lado se leen de un barrido. */
.du-foot { display: flex; align-items: center; gap: 8px; padding-top: 11px; margin-top: 12px; border-top: 1px solid var(--border); }
.du-verdict { display: flex; align-items: center; gap: 8px; }
/* Más chico y con esquina de 8px, no píldora: es un calificador, no una medalla. Medidas del
   mock (3px 9px · r8 · 11px). */
.du-chip { display: inline-flex; align-items: center; font-size: var(--fs-1); font-weight: 800; letter-spacing: .02em;
  line-height: 1.2; padding: 3px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.du-chip.win { color: var(--success); border-color: var(--success-border); background: var(--success-weak); }
.du-chip.loss { color: var(--danger); border-color: var(--danger-border); background: var(--danger-weak); }
/* "Vas arriba/abajo" mientras corre = ARENA, el neutro de selección de la app. El dorado
   (--analysis) es para "en vivo" y el verde para "acertaste": ninguno de los dos es esto. */
.du-chip.live { color: var(--arena); border-color: var(--arena); background: var(--arena-weak); }
.du-sub { font-size: var(--fs-2); color: var(--text-3); }
.du-prog { flex: 1; min-width: 0; font-size: var(--fs-2); color: var(--text-3); }
.du-note { font-size: var(--fs-3); line-height: 1.45; color: var(--text-2); margin: 12px 2px 0; }
.du-hist { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-3); margin: 10px 2px 0; }
/* Carrusel de los duelos de la jornada: salta a cualquier par sin cambiar de pantalla. */
.du-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.du-chips::-webkit-scrollbar { display: none; }
/* HORIZONTAL: iniciales a los extremos y puntos al centro → se lee como marcador. */
.du-chip-d { flex: none; display: flex; align-items: center; gap: 5px; padding: 7px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); cursor: pointer; font-family: inherit; }
.du-chip-d.on { border-color: var(--arena); background: var(--arena-weak); }
.du-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--arena); flex: none; }
.du-chip-ini { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text-3); }
.du-chip-p { font-size: var(--fs-3); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.du-chip-d i { font-style: normal; color: var(--text-4); }
/* Las DOS CARAS del chip. El marcado muestra "DG vs EM" (su marcador ya está abajo en grande) y
   el resto muestra el marcador. Ambas vienen en el HTML y aquí se elige: por eso seleccionar es
   una clase y se ve en el acto, sin ir a la red. El punto arena sigue la misma regla. */
.du-chip-dot, .du-chip-vs { display: none; }
.du-chip-d.on .du-chip-dot { display: block; }
.du-chip-d.on .du-chip-p, .du-chip-d.on .du-chip-sep { display: none; }
.du-chip-d.on .du-chip-vs { display: inline; font-size: 10px; font-weight: 700; }

/* Los partidos del duelo: mi lado · marcador · su lado. La simetría ES el dato — se ve de un
   vistazo en qué coinciden y dónde se separa el duelo. */
.du-m-sec { display: flex; align-items: center; gap: 7px; }
.du-m-cnt { font-size: var(--fs-1); font-weight: 700; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.du-m-card { padding: 2px 0; }
/* Cabecera: volver (con el nombre del grupo) + estado, en la misma fila. */
/* El badge alinea con el texto de "volver": .back-link trae su propio margen inferior, así que
   sin neutralizarlo el badge quedaba montado unos pixeles arriba. */
.du-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.du-top .back-link { margin: 0; }
.du-back { min-width: 0; }
.du-livebadge { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--analysis-weak); border: 1px solid var(--analysis-border);
  font-size: var(--fs-2); font-weight: 700; color: var(--analysis); }
.du-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MISMA rejilla que las filas: el centro es FIJO y los lados reparten el resto. Así los
   encabezados caen exactamente sobre su columna.
   118px = lo que mide EXACTO la píldora del partido con los escudos a 26: borde 1 + 5 + 26 + 6 +
   42 + 6 + 26 + 5 + borde 1. (El `border-box` de la píldora: medido, no deducido — los dos bordes
   de 1px se olvidan solos.) Antes eran 104 con una píldora de 110 que se desbordaba 3px por lado
   hacia los huecos — funcionaba de casualidad; ahora la columna la contiene.
   EL CENTRO SE PAGA CON LOS LADOS, y el lado tiene un piso DURO: el peor chip posible es el de la
   capa de marcador exacto en NFL ("24-17"). Por eso 118 y no "lo que midiera la píldora".

   LA CUENTA ESTABA MAL Y SE CORRIGIÓ (oct-2026). Decía que ese chip medía 46px; medido en el DOM
   con un Range, el TEXTO "24-17" mide 36.2 y el chip completo 50.2 (36.2 + 6+6 de relleno + 1+1
   de borde). Cuatro píxeles de más en el presupuesto no se notan a 375 pero a 360 sí: ahí el lado
   quedaba en 85 y el chip pedía 50.2 + 8 de hueco + 38 de puntos = 96.2 → los dígitos CRUZABAN su
   propio borde (no se recortaban: `.du-tc.sc` no tiene `overflow:hidden`, así que desbordaba a la
   vista). Se pagó quitando aire en los cuatro lugares donde no se nota, y se anota cada uno en su
   regla: relleno del chip 6→4 · hueco de `.du-sd` 8→6 · relleno de la tarjeta 10→8 · este hueco
   de columnas 6→4.
   Medir así y no con `scrollWidth`: sin `overflow:hidden` el `scrollWidth` sigue a la caja que se
   encoge, no al texto, y dice que todo cabe justo cuando deja de caber. */
.du-cols, .du-mc { display: grid; grid-template-columns: 1fr 118px 1fr; align-items: center; gap: 4px; }
/* 9 = el relleno de la tarjeta (8) + su borde (1): los encabezados caen sobre su columna porque
   arrancan donde arranca el contenido de la fila. Si uno cambia, el otro TIENE que seguirlo. */
.du-cols { padding: 0 9px; margin: 18px 0 4px;
  font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; }
.du-cols span:first-child { color: var(--text-2); }
.du-cols span:last-child { text-align: right; color: var(--text-4); font-weight: 700; }
/* Quién es quién NO lo decide la posición: el lado de quien mira va claro y el otro tenue, esté a
   la izquierda o a la derecha. En un duelo AJENO los dos van iguales — ninguna columna es tuya.
   Van con `span.` para ganarle en especificidad a las dos reglas de arriba. */
.du-cols span.du-cme { color: var(--text-2); font-weight: 800; }
.du-cols span.du-coth { color: var(--text-4); font-weight: 700; }
.du-cols span.du-cneu { color: var(--text-3); font-weight: 700; }
/* Separador de sección: etiqueta + conteo + línea que rellena. */
.du-m-sec { display: flex; align-items: center; gap: 6px; margin: 12px 11px 8px;
  font-size: var(--fs-1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.du-m-sec.live { color: var(--analysis); }
.du-m-cnt { font-weight: 700; letter-spacing: 0; color: var(--text-4); }
.du-sec-line { flex: 1; height: 1px; background: var(--border); }
.du-sec-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--analysis); flex: none; }

/* UNA TARJETA POR PARTIDO. [equipo ⟷ pts] · EL PARTIDO · [pts ⟷ equipo]: los puntos pegados al
   centro y el equipo al borde, para que las dos columnas se lean como espejo. */
.du-mc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  /* 8 y no 10: dos de los catorce píxeles que paga el peor chip (ver `grid-template-columns`).
     Quien lo cambie tiene que mover TRES cosas más: el `padding` de `.du-cols` (que es esto + el
     borde) y los dos márgenes negativos del pie y del panel (que son esto en negativo). */
  padding: 0 8px; margin-bottom: 5px;
  /* `gap: 6px` (regla compartida con `.du-cols`) también separa FILAS, y la tarjeta tiene una
     segunda fila desde que hay pie: ese hueco dejaba una franja clara entre el partido y el pie, y
     el recuadro del tiempo flotaba sin piso donde apoyarse. Las columnas sí se separan. */
  row-gap: 0; }
/* `gap: 6` y no 8: el hueco entre el chip y los puntos está DENTRO del presupuesto del peor chip
   (ver `grid-template-columns`), y es el aire que menos se nota de los cuatro — `space-between` ya
   manda a cada uno a su extremo, así que el hueco casi nunca es el que separa. */
/* `padding: 8px 0` y no 10: esta columna es la que DECIDE el alto de la primera fila (52 contra
   los 42 que pide el eje), así que los dos píxeles se devuelven cuatro veces — la tarjeta ganó
   una fila (los nombres) y se quería que no se notara en lo que hay que deslizar. */
.du-sd { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 8px 0; }
/* SIN row-reverse: el DOM ya va [puntos][equipo] y `space-between` los manda a sus extremos →
   puntos pegados al CENTRO y equipo al BORDE, en espejo del lado izquierdo. Con row-reverse se
   invertian dos veces y quedaban al reves. */
/* Chip del equipo elegido. El MÍO resaltado siempre: es lo que ubica tu lado de un vistazo. */
/* `flex: 0 1 auto` + min-width:0 → el chip CEDE y recorta con puntos suspensivos en vez de
   desbordarse sobre la columna del partido, que es fija y no puede ceder. */
.du-tc { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 auto;
  border-radius: 8px; padding: 3px 8px; font-size: var(--fs-3); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
/* MI lado lleva el ARO ARENA, el mismo idioma de selección que `.qn .pk-team.sel` en la pantalla
   de pick. Con solo `--arena-weak` de fondo la diferencia contra el chip del rival era de ~5
   puntos por canal: la regla se aplicaba y no se veía. El aro sí se lee, y de un vistazo — que es
   el punto: poder leer la fila sin subir a los encabezados TÚ / EMILIO D. */
.du-tc.mine { background: var(--arena-weak); border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--arena); color: var(--text); }
.du-tc .crest { width: 16px; height: 16px; font-size: 7px; flex: none; }
/* Variante ESCUDO: sin texto, así que el chip es un cuadro chico y nunca se trunca ni empuja
   la columna del partido. El escudo va más grande (22px) porque ahora carga toda la identidad. */
.du-tc.cr { padding: 4px 7px; }
.du-tc.cr .crest { width: 22px; height: 22px; font-size: 8px; }
/* Empate = círculo con "=" EXACTAMENTE del tamaño del escudo del chip (22px), para que un pick de
   empate pese lo mismo que uno de equipo y los dos lados queden en espejo pase lo que pase. */
/* El "=" NO es el glifo: son dos barras. Medido, la tinta del carácter caía 1.13px por DEBAJO del
   centro del círculo (centro de tinta 12.13 vs 11) — la línea base de Archivo lo deja bajo, y con
   un círculo de 22px ese píxel se ve. Un translateY lo cuadraría solo para ESTA fuente: si la
   webfont no carga, las métricas del fallback son otras y vuelve a descuadrarse. Dos barras
   centradas por flex quedan concéntricas siempre, pase lo que pase con la tipografía. */
.du-eqc { width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5px;
  color: var(--text-3); background: var(--surface); border: 1px solid var(--border-strong); }
.du-eqc::before, .du-eqc::after { content: ""; width: 9px; height: 1.5px; border-radius: 1px;
  background: currentColor; }
.du-tc.mine .du-eqc { color: var(--text-2); }
.du-tc b { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Capa de marcador: el chip es el marcador predicho, sin escudo. Tabular para que las dos
   columnas queden a la misma anchura aunque los dígitos cambien. */
/* Menos aire lateral que el resto de los chips (4 en vez de 8): este chip es TEXTO tabular, no un
   escudo, y no necesita el mismo margen para leerse. Son 8px que van directos al peor caso de la
   fila — el "24-17" de NFL, que es quien decide si la columna del chip cabe o se desborda. */
.du-tc.sc { font-size: var(--fs-3); font-weight: 800; color: var(--text); padding: 3px 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.du-tc.none, .du-tc.lock { color: var(--text-4); }
.du-tc.lock .msr { font-size: 14px; }
/* El EJE: la línea vertical baja por el centro dividiendo mi predicción de la suya, y se
   interrumpe en los dos contornos (partido y minuto). Son segmentos, no una línea continua. */
.du-mid { display: flex; flex-direction: column; align-items: center; align-self: stretch; gap: 0; }
/* La línea toca el TECHO y el PISO de la tarjeta: es un eje que divide, no un adorno entre
   elementos. Por eso los tres segmentos van en `flex: 1` dentro de una columna que ocupa todo el
   alto, y la tarjeta no lleva padding vertical — si lo llevara, la línea arrancaría despegada. */
.du-rule { flex: 1; width: 1px; min-height: 4px; background: var(--border); }
/* Contorno del partido: MISMO tratamiento que el marcador de la card de partido de la app
   (.pk-vs) — fondo `--surface`, el de la propia tarjeta, así que se lee como un RECORTE sobre la
   línea, no como un bloque encima; borde fino y radio de píldora (20px), no de caja (10px). Esa
   era la diferencia de fondo/contorno/radio. */
/* El relleno y el hueco BAJAN (7→5, 8→6) para pagar los escudos más grandes sin robarle ancho a
   los lados: el presupuesto del centro es dinero de la columna del chip, y ahí no sobra nada (ver
   la cuenta en `grid-template-columns`). El aire que se quita es el que menos se nota — el que
   rodea a los escudos, que ahora llenan la píldora. Los 42px del marcador NO se tocan: medido,
   "24–17" ocupa 41 de texto. */
.du-game { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.du-game.done { opacity: .5; }
/* El minuto: su PROPIO contorno, del mismo idioma, centrado bajo la divisora. */
/* 26px = EXACTAMENTE el escudo de la card de "En vivo" (`.qlv-match .pk-teams .crest`). Iban a 18
   y en celular no se distinguía de qué equipo era: el escudo ES la identidad del partido aquí (no
   hay nombre que lo acompañe, a diferencia de la clásica), así que es la pieza que menos podía
   encogerse. La columna del centro crece con ellos — ver `grid-template-columns`. */
.du-game .crest { width: 26px; height: 26px; font-size: 9px; flex: none; }
/* 42px = dos dígitos por lado y el guion. El mock usaba 52 porque la NFL llega a tres cifras;
   en futbol dejaba un hueco que separaba los escudos sin razón. */
.du-game b { width: 42px; text-align: center; font-size: var(--fs-4); font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
/* LOS NOMBRES DE LOS EQUIPOS, bajo los escudos. En esta tarjeta el partido se identificaba SOLO
   por dos escudos de 26px: para una Liga MX se reconocen, para la NFL (32 equipos, muchos con
   casco oscuro) no. El hueco donde caben es el que dejó el recuadro del tiempo al mudarse al pie.
   MISMA LETRA que ese recuadro (10px/600/--text-3): no es un dato nuevo que compita, es la
   etiqueta del escudo que está encima.

   VA COMO FILA COMPLETA de la rejilla (`1 / -1`), no dentro de la columna del centro: en ESTA fila
   las columnas de los lados están VACÍAS (el chip y los puntos viven en la de arriba), así que el
   ancho disponible es el de la tarjeta entera. Dentro de la columna del centro solo habría 118px
   entre los dos y "Commanders" ya mide 61. Por eso tampoco hubo que crecer la columna del centro.

   Y es una REJILLA de 1fr·42px·1fr, no un flex con hueco: los 42 del centro son exactamente los
   del marcador (`.du-game b`), así que el canal que separa a los dos nombres queda a plomo con el
   eje de arriba y con el marcador. `justify-self` end/start pega cada nombre a su lado del canal,
   hacia su propio escudo.
   `minmax(0, 1fr)` y no `1fr`: con `auto` de mínimo, un nombre imposiblemente largo ensancharía su
   columna y descuadraría el canal; así se queda en su carril y, en ese caso que no existe en
   ninguna liga de hoy, recorta con puntos suspensivos en vez de romper la rejilla.

   LA CAJA (oct-2026). Primero fueron texto suelto con el eje cruzándolos, y se leían como una cola
   de la parte de arriba. Ahora son un RECUADRO DE TRES LADOS apoyado en el piso de su sección —
   su borde inferior ES la divisora del pie — exactamente el idioma del viejo recuadro de la hora
   (`.du-game-s`, abajo), que es de donde salió este acomodo. Dos consecuencias que son el punto:
   el eje TERMINA en el borde de arriba de la caja en vez de atravesarla, y los nombres quedan
   encerrados con los escudos a los que pertenecen.
   `margin-bottom: -1px` funde sus dos patas con la divisora del pie (si no, línea doble).
   El fondo es `--surface` (el de la tarjeta) y no `--surface-2`: la caja se dibuja con el BORDE.
   Teñirla la pegaría con la franja del pie y las dos se leerían como un solo bloque gris.

   EL ANCHO: 186px, CENTRADA — no toda la tarjeta. Al principio se estiraba de borde a borde y
   cruzaba la tarjeta casi entera para sostener dos palabras cortas; una caja así de ancha ya no se
   lee como caja, se lee como otra franja. 186 es el PAR REAL MÁS LARGO del catálogo con un pelo de
   holgura: el nombre más ancho que existe es "Bournemouth" (61.8px a 10/600) y "Commanders" le
   sigue con 61.0, así que cada carril se dimensionó a 64.8 + un respiro → 67·2 + 42 del canal + 8
   de relleno + 2 de borde = 186. Medido, no estimado (ver `_TEAM_SHORT`: NFL 32, Premier 20 y Liga
   MX, los tres catálogos completos).
   `min-width` y no `width`: la caja NORMALMENTE mide exactamente 186 porque ningún nombre de hoy
   llega a tanto, pero si mañana entra una liga con un nombre más largo, CRECE en vez de recortar
   (hasta el ancho de la tarjeta, que es el `max-width`). Es la diferencia entre un tope y un
   corsé: el peor caso se ensancha un poco y se sigue leyendo, en vez de quedar en "Bournemout…".
   `justify-self: center` la deja a plomo con el eje y con el marcador: la caja es simétrica, así
   que su canal de 42 cae exactamente donde cae el del renglón de arriba. */
.du-mc > .du-tn { grid-column: 1 / -1; justify-self: center; min-width: 186px; max-width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center; font-size: 10px; font-weight: 600; color: var(--text-3);
  padding: 3px 4px 4px; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0; border-radius: 9px 9px 0 0;
  margin-bottom: -1px; }
.du-mc > .du-tn > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-mc > .du-tn > span:first-child { justify-self: end; padding-right: 3px; text-align: right; }
.du-mc > .du-tn > span:last-child { justify-self: start; padding-left: 3px; }
/* Terminado: los nombres se atenúan con la píldora del partido — el resultado ya no es la noticia
   (misma razón y mismo valor que `.du-game.done`), y si no bajaran juntos el nombre quedaría más
   presente que el marcador al que pertenece. */
.du-mc > .du-tn.done { opacity: .5; }
/* El recuadro del tiempo en el EJE DEL CENTRO. Ya NO se usa en la pantalla de duelo (el estado se
   mudó al pie, junto al botón de estadísticas, que es donde vive en survivor/quiniela y donde el
   nombre del equipo no le pelea el lugar). Se conserva porque es el idioma del que salió la franja
   del pie y porque documenta por qué el pie se apoya en el piso sin crecer la tarjeta.
   El tiempo NO es una píldora: es un recuadro de TRES lados apoyado en el piso de la tarjeta —
   su borde inferior ES el borde de la tarjeta. El `margin-bottom: -1px` funde sus dos patas con
   ese borde, sin línea doble. */
.du-game-s { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-3);
  white-space: nowrap; padding: 2px 9px 3px; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0; border-radius: 9px 9px 0 0;
  margin-bottom: -1px; }
.du-game-s.live { color: var(--analysis); font-weight: 700; }
/* Puntos del partido: 38px fijos para que los dos lados queden en espejo exacto. */
.du-pp { width: 38px; flex: none; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 17px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.du-pp.hit { color: var(--text); }
.du-pp.burn { color: var(--text-4); text-decoration: line-through; }
.du-pp.none { color: var(--text-4); font-weight: 600; }
/* Palomita en círculo ARENA (no verde): es el neutro de acierto que usa el resto de la app. */
.du-ok { width: 13px; height: 13px; flex: none; border-radius: 50%; background: var(--arena);
  display: inline-flex; align-items: center; justify-content: center; }
.du-ok .msr { font-size: 10px; font-weight: 700; color: var(--bg); }
/* PIE DE ESTADÍSTICAS de la tarjeta de partido. `du-mfoot` y no `du-foot`: ese nombre ya es el pie
   de la TARJETA DE DUELO (arriba, con su margin-top y su gap) — son dos piezas distintas.
   Misma anatomía que `.pk-foot` de la card de "En vivo" (franja gris apoyada en el piso, con
   divisora arriba) y AHORA TAMBIÉN EL MISMO REPARTO: el estado a la izquierda, el botón a la
   derecha, `space-between`. Antes el botón iba centrado y solo, porque el estado vivía en el eje
   del centro (`.du-game-s`); al mudarse el estado aquí, centrar el botón lo dejaría encima del
   dato. Y el cambio no es solo de acomodo: la hora y el minuto ahora se leen en el MISMO sitio de
   la tarjeta en los tres modos (survivor, clásica y duelos), y el hueco que dejaron en el eje es
   el que ocupan los nombres de los equipos (`.du-tn`).
   Va como fila completa de la rejilla (`1 / -1`): sin eso caería en la primera columna, debajo de
   mi chip, y partiría la tarjeta en dos. Y los márgenes negativos lo llevan BORDE A BORDE,
   rompiendo el `padding` de la tarjeta — una franja que no toca los lados se lee como una caja
   suelta adentro, no como el piso. Van en NEGATIVO DEL PADDING: si uno cambia, el otro también. */
/* El relleno VERTICAL del pie lo pone el BOTÓN, no el pie (`padding: 0 11px` aquí, `8px 0` abajo).
   Suena a lo mismo y no lo es: el alto de la franja sale igual, pero esos 16px de alto son área
   de toque en vez de hueco muerto. Antes el botón ocupaba el pie entero y eso se daba solo; al
   compartir la franja con el estado hay que devolvérselo a mano. */
.du-mc > .du-mfoot { grid-column: 1 / -1; margin: 0 -8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 0 11px; background: var(--surface-2); border-top: 1px solid var(--border); }
/* El ESTADO reusa `.pk-when` tal cual —  es la misma pieza de la card de "En vivo": 12px/--text-2,
   el punto que pulsa en vivo, el "Final" en negritas. Solo baja a 11px para empatar con el botón
   de al lado, que en esta tarjeta ya iba a 11 (ver abajo). */
.du-mc > .du-mfoot .pk-when { font-size: 11px; min-width: 0; }
.du-mc > .du-mfoot .pk-when .msr { font-size: 14px; }
/* EL BOTÓN BAJA DE TONO. Trae el tamaño de la card de "En vivo" (12px/700 con icono de 18), que
   allá vive en una tarjeta de 215px de alto; aquí la tarjeta mide ~100 y el mismo botón salía
   GRITANDO —  más fuerte que la hora del partido (10px/600), que es el dato principal. A 11px con
   icono de 15 queda a la par de la hora, que es su vecina en el pie, y un escalón abajo del
   marcador. Ya no ocupa todo el ANCHO del pie —  ahora lo comparte con el estado— pero sí todo el
   ALTO: ese `padding: 8px 0` es el que hace la franja, y así lo que se pica sigue siendo una barra
   de 35px de alto y no una etiqueta de 19. `flex: none` para que el estado nunca lo apriete. */
.du-mc > .du-mfoot .stats-toggle { flex: none; padding: 8px 0; font-size: 11px; color: var(--text); font-weight: 700; }
.du-mc > .du-mfoot .stats-toggle .msr { font-size: 15px; }
.du-mc > .du-mfoot .stats-toggle.pre { color: var(--gold); }
/* El panel inline cuelga de la misma tarjeta y también es fila completa. Hereda el gris y el
   relleno de `.qlv-stats-panel`: es el mismo panel, no una copia.
   NINGUNO de los dos (pie ni panel) redondea sus esquinas: el PISO de la tarjeta es a veces el pie
   y a veces el panel abierto, y escribir esa condición en CSS pide un `:has` que se rompe en
   cuanto cambie el orden del DOM. `overflow: hidden` en la tarjeta recorta a quien le toque
   quedar abajo, sin preguntar quién es. */
.du-mc > .du-stats-panel { grid-column: 1 / -1; margin: 0 -8px; }
.du-mc.has-foot { overflow: hidden; }
.du-mnote { font-size: var(--fs-2); color: var(--text-3); margin: 14px 2px 0; }
/* Tablero del duelo: hereda .pkc-card (borde/sombra/radio del resumen). */
.du-board.qh-pkcard { padding: 15px 14px 13px; }
/* [foto] puntos – puntos [foto] en UNA fila. Los bloques de número ocupan lo que sobra y se
   alinean hacia el centro, así el guion queda entre los dos marcadores. */
.du-row2 { display: flex; align-items: center; gap: 10px; }
.du-num { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* OJO: aqui iba `:nth-of-type`, que cuenta TODOS los <span> hermanos — y el primero es el
   avatar, no el numero. El selector no casaba con nada y los numeros nunca se alineaban hacia el
   guion. Van por CLASE, que no depende del orden ni del tipo de los hermanos. */
.du-row2 .du-num.l { align-items: flex-end; text-align: right; }
.du-row2 .du-num.r { align-items: flex-start; text-align: left; }
.du-num b { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.du-num b.du-dim { color: var(--text-3); }
.du-num i { font-style: normal; font-size: var(--fs-2); font-weight: 700; line-height: 1.3; color: var(--text-3);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.du-av .avatar, .du-av img { width: 32px; height: 32px; font-size: 11px; }
.du-dash2 { flex: none; font-size: var(--fs-2); font-weight: 700; color: var(--text-4); }
.du-sub2 { font-size: var(--fs-3); color: var(--text-2); margin: 2px 0 14px; }
/* "Tu duelo" en el resumen: el COMPONENTE es .pkc-card/.qh-pkcard (el mismo de "Tu quiniela");
   aquí solo viven las dos piezas de contenido que esa card no tenía. */
.du-hub-sc { font-variant-numeric: tabular-nums; }
.du-dash { color: var(--text-4); margin: 0 2px; }
.du-pend { color: var(--text-4); }
/* El que va perdiendo, apagado. NO rojo: la jornada sigue corriendo y nadie ha perdido aún —
   el rojo es el veredicto final, no el marcador a media semana. */
.du-dim { color: var(--text-3); }
/* El calificador usa EXACTAMENTE el tono del "hasta ahora" de la quiniela (--text-2): mientras
   la jornada corre no hay nada que celebrar. Solo toma color cuando el resultado ya es
   definitivo. */
.du-hub-st { font-size: 14px; font-weight: 600; color: var(--text-2); margin-left: 6px; }
.du-hub-st.win { color: var(--success); }
.du-hub-st.loss { color: var(--danger); }
.du-lock { color: var(--text-3); margin-left: 4px; }
/* Tabla de duelos: el RÉCORD es la columna protagonista, el PF queda como desempate. */
.qs-row .du-col-rec { min-width: 54px; font-variant-numeric: tabular-nums; }
.qs-row .du-col-pf { min-width: 44px; color: var(--text-3); font-weight: 600; }
.qs-head .du-col-pf { color: var(--text-3); }
/* El PF se ENCIENDE cuando es el criterio que está ordenando (varios empatados en duelos
   ganados). Así la tabla explica su propio orden en vez de parecer que se equivocó. */
.qs-row .du-col-pf.du-decide { color: var(--text); font-weight: 800; }
.du-tbl-as { padding: 9px 16px 2px; font-size: var(--fs-1); color: var(--text-3); }
/* Calendario */
.du-cal { cursor: pointer; }
/* La jornada en curso NO lleva marco ni fondo: lo dice el punto parpadeante, en el mismo lugar
   donde las demás llevan su G/P/E. Un recuadro dorado alrededor de toda la fila gritaba más que
   la información y rompía la lectura de corrido de la columna. */
/* El separador entre filas lo pone YA el border-bottom de .qt-row. Un border-top encima daba DOS
   líneas pegadas entre cada par de filas (medido: row {top:1px, bot:1px}).
   Y el `.qt-row:last-child { border-bottom: 0 }` de la tarjeta dejó de aplicar al envolver la fila
   en .du-cal-wrap: la fila ya no es el último hijo, lo es el panel del acordeón. Por eso la última
   fila sumaba su línea a la de la tarjeta → la doble línea del final. Se repone aquí, salvo cuando
   está ABIERTA (ahí la línea sí separa la fila de su panel). */
.du-cal-wrap:last-child:not(.open) > .du-cal { border-bottom: 0; }
/* ACORDEÓN: cerrado de verdad (sin alto, sin eventos), no solo invisible. */
.du-cal-panel { display: none; padding: 2px 16px 14px; }
.du-cal-wrap.open .du-cal-panel { display: block; }
.du-cal-wrap.open .du-cal-chev { transform: rotate(180deg); }
.du-cal-chev { transition: transform .18s ease; }
.du-cal-rec { font-size: var(--fs-1); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.du-cal-l { margin-right: 5px; }
.du-cal-sc.live { color: var(--text); display: inline-flex; align-items: baseline; gap: 6px; }
.du-cal-sc.live i { font-style: normal; font-size: var(--fs-2); font-weight: 700; color: var(--gold); }
.du-cal-oh { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-3); padding: 8px 0 6px; }
.du-cal-o { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.du-cal-on { min-width: 0; font-size: var(--fs-3); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-cal-on b { font-weight: 700; color: var(--text-2); }
.du-cal-on b.w, .du-cal-os b.w { color: var(--text); font-weight: 800; }
.du-cal-os { flex: none; font-size: var(--fs-3); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.du-cal-note2 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-3); margin: 8px 0 0; }
.du-cal-go { width: 100%; margin-top: 10px; padding: 11px 0; background: none; border: 0;
  border-top: 1px solid var(--border); color: var(--text); font-family: inherit;
  font-size: var(--fs-3); font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 2px; }
.du-cal-go .msr { font-size: 18px; }
.du-cal-sub { display: block; margin: 2px 0 14px; }
.du-cal-j { width: 34px; flex: none; font-size: var(--fs-2); font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; }
.du-cal-nm { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.du-cal-note { font-size: var(--fs-1); font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* EL MARCADOR SIEMPRE DEL MISMO COLOR. El color vive en el estado, no en el número: antes un
   6-3 verde y un 6-12 rojo hacían que el número pareciera significar algo por su color. */
.du-cal-sc { flex: none; font-size: var(--fs-3); font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
.du-cal-sc.pend { font-weight: 500; color: var(--text-3); }
/* El estado: ancho FIJO para que el marcador caiga siempre en la misma columna, sea letra o punto. */
.du-cal-l { width: 14px; flex: none; margin-right: 6px; text-align: center; }
/* Y el marcador su propia columna, alineado a la derecha: con "6-3" y "6-12" en el mismo bloque,
   el ancho del número empujaba la letra 8px a la izquierda y la columna de estados se desalineaba.
   Medido: 275 vs 283. Es min-width, no width: si algún día hay tres cifras, crece en vez de cortar. */
.du-cal-n { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.du-cal-l.win { color: var(--success); }
.du-cal-l.loss { color: var(--danger); }
.du-cal-l.draw { color: var(--text-2); }
.du-cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); animation: livepulse 1.4s var(--ease) infinite; }
.du-cal-chev { flex: none; font-size: 18px; color: var(--text-4); margin-left: 4px; }
/* La nota de la vuelta cortada va en su PROPIO renglón, no dentro del título. El .section-title es
   un flex, así que al meterle una frase larga al lado se comprimía el título y partía "Vuelta 4"
   en dos líneas. */
.du-cut { font-size: var(--fs-2); font-weight: 500; color: var(--text-3); margin: -8px 0 12px; }

/* subtítulo del encabezado + contador de la barra de acción (quiniela) */
.qn-sub { font-size: var(--fs-4); color: var(--text-2); margin: 3px 0 0; }
.qn-status { font-size: var(--fs-2); color: var(--text-2); text-align: center; }

/* Recomendación de la jornada (arriba de la lista de partidos) */
.reco { border: 1px solid var(--success); border-radius: 15px; background: var(--surface); margin: 2px 0 0; box-shadow: 0 0 0 3px var(--success-weak); }
.reco-in { padding: 10px 14px 11px; }
.reco-lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.reco-lbl .msr { font-size: 16px; color: var(--success); }
/* top-3: fila = rank, escudo, nombre, %, botón "Usar" (verde sin relleno) */
.reco-list { display: flex; flex-direction: column; }
.reco-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.reco-row .reco-rk { font-size: 11px; font-weight: 800; color: var(--text-3); width: 12px; text-align: center; flex: none; }
.reco-row .crest { width: 24px; height: 24px; font-size: 8px; flex: none; }
.reco-row .crest.logo img { width: 20px; height: 20px; }
.reco-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top center; flex: none; box-sizing: border-box; border: 2px solid var(--border); background: var(--surface-2); }
.reco-photo.ph { display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--text-2); }
.reco-rn { font-size: var(--fs-4); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-rp { font-size: var(--fs-4); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.reco-use { flex: none; background: transparent; border: 1px solid var(--success); color: var(--success); border-radius: 9px; font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 13px; cursor: pointer; }
.reco-use:active { background: var(--success-weak); }
/* para guardar: caja aparte, más chica (sugerencia, NO un botón como "Usar") */
/* "Para guardar": una sola línea → símbolo + equipo + → JX (nombre legible) */
.reco-save2 { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 10px 12px; margin: 10px 0 16px; }
.reco-save { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); }
.reco-bk { color: var(--primary); font-size: 18px; flex: none; }
.reco-save .crest { width: 22px; height: 22px; font-size: 7px; flex: none; }
.reco-save .crest.logo img { width: 18px; height: 18px; }
.reco-sn { font-size: var(--fs-4); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-savepos { flex: none; font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.reco-save-w { color: var(--text-3); font-weight: 600; margin-right: 4px; }
/* barrita de Favoritos en el calendario (colapsada por default) */
/* En planeación (calendario) el acento es AZUL (en el pick es verde), pero SIN
   marco: azul solo en el ícono, botones "Planear", símbolo de guardar y → JX. */
.cal-favs { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cal-favs-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; border: 0; background: none;
  color: var(--text-2); font-family: inherit; font-size: var(--fs-2); font-weight: 700; cursor: pointer; }
.cal-favs-bar > .msr:first-child { color: var(--primary); font-size: 17px; }
.cal-favs-info { margin-left: 6px; }
.cal-favs.note-open .cal-favs-info { color: var(--primary); }
.cal-favs-note { display: none; margin: 0 0 8px; font-size: var(--fs-2); line-height: 1.5; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.cal-favs.note-open .cal-favs-note { display: block; }
.cal-favs-chev { margin-left: auto; color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
.cal-favs.open .cal-favs-chev { transform: rotate(180deg); }
.cal-favs-body .reco-in { padding: 2px 0 0; }
.cal-favs-body .reco-save2 { margin: 8px 0 0; }
.cal-favs-body .reco-use { border-color: var(--primary); color: var(--primary); }
.cal-favs-body .reco-use:active { background: var(--primary-weak); }
.cal-favs-load { font-size: var(--fs-2); color: var(--text-3); padding: 8px 0; }
.cal-round.cal-flash .card { animation: calflash 1.4s ease; }
@keyframes calflash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px var(--primary); } }
.pk-check { display: none; margin-left: auto; color: var(--primary); font-size: 20px; }
.pk-team.sel { background: var(--primary-weak); box-shadow: inset 0 0 0 2px var(--primary); }
.pk-team.sel .pk-name { color: var(--primary); font-weight: 700; }
.pk-team.sel .pk-check { display: block; }
/* redondear las esquinas superiores de las cajas para que el aro ember del
   seleccionado no se recorte cuadrado contra la esquina redondeada del card.
   DEBE seguir el radio del card (.pk-match = --r-4); si no, la selección no
   cubre la esquina. */
.pk-teams .pk-team:first-child { border-top-left-radius: var(--r-4); padding-right: 18px; }
.pk-teams .pk-team:last-child { border-top-right-radius: var(--r-4); padding-left: 18px; }
.pk-team.used { cursor: not-allowed; }
.pk-team.used .crest, .pk-team.used .pk-name { opacity: .42; }
/* jornada cerrada en vivo: apaga las cards de equipo sin recargar */
.pk-team.pk-off { opacity: .5; cursor: not-allowed; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  background: var(--surface-2); border-top: 1px solid var(--border); }
.pk-when { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.pk-when .msr { font-size: 15px; }
.pk-fscore { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-analysis { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--analysis); display: flex; align-items: center; gap: 5px; padding: 2px; }
.pk-analysis .msr { font-size: 15px; }
@media (hover: hover) { .pk-analysis:hover { opacity: .75; } }
/* barra de confirmar */
/* Barra de acción de pick: sticky abajo, BORDE A BORDE (rompe el padding del container), opaca,
   borde superior 1px, zona segura, y sombra hacia arriba solo al pasar 8px de scroll. */
.pick-confirm.pk-confirm {
  margin: 10px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: none; transition: box-shadow .2s var(--ease);
}
.pick-confirm.pk-confirm.scrolled { box-shadow: 0 -6px 18px rgba(0, 0, 0, .38); }
/* renglón de estado con alto mínimo fijo (no cambia de tamaño al elegir) */
.pk-status { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 10px; font-size: var(--fs-4); }
.pk-status-empty, .pk-status-lbl { color: var(--text-2); }
.pk-status .crest { width: 22px; height: 22px; flex: none; }
.pk-status-team { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cta { width: 100%; min-height: 48px; padding: 14px; border-radius: 14px; border: 0; font-family: inherit; font-size: 16px; font-weight: 700;
  background: var(--primary); color: #fff; cursor: pointer;
  transition: opacity var(--t-fast), transform 110ms var(--ease); }   /* transform = acuse al tocar */
.pk-cta:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
@media (hover: hover) { .pk-cta:not(:disabled):hover { opacity: .92; } }

/* Regla: con barra de acción fija (pick), NO se muestra la nav (cualquiera de las dos variantes),
   para todos. La barra sticky ya reserva su espacio → sin el padding/degradado de la nav. */
.app-shell:has(.pk-confirm) .bottom-nav { display: none; }
.app-shell:has(.pk-confirm) .scroll-area { padding-bottom: 0; }
/* el padding-bottom del contenedor limitaba hasta dónde baja la barra sticky y
   dejaba un hueco (~28px) por donde se asomaba el contenido al scrollear. */
.app-shell:has(.pk-confirm) .scroll-area > .container { padding-bottom: 0; }
.app-shell:has(.pk-confirm)::after { display: none; }
.match .vs { color: var(--text-3); font-size: 11px; font-weight: 600; padding: 0 6px; }
.match .kickoff { font-size: 12px; color: var(--text-2); min-width: 96px; text-align: right; }
.match .score { font-weight: 700; font-size: 18px; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.result-select { display: flex; gap: 6px; }
.result-select button { min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all var(--t-fast) var(--ease); }
@media (hover: hover) { .result-select button:hover { border-color: var(--primary); color: var(--primary); } }
.result-select button.sel { background: var(--primary); color: #fff; border-color: var(--primary); }

/* team crest */
.crest { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.crest.logo { background: var(--surface-2); border: 1px solid var(--border); }
/* La imagen va RELATIVA al contenedor, no en 22px fijos. Con el tamaño por defecto (.crest de
   26px) el resultado es idéntico —26 − 2·2 de padding = 22— pero ahora cualquier escudo más
   chico escala en vez de DESBORDARSE: con .crest de 18px la imagen seguía midiendo 22 y se salía,
   que es por qué unos se veían más grandes que otros.
   El padding es 1px, no 2: el borde de .crest.logo ya consume 2px del contenedor, así que
   100% − 2·1 = 22px, EXACTAMENTE lo que medía antes. Con 2px quedaba en 20 y encogía todos los
   escudos de la app (survivor incluido). */
.crest.logo img { width: 100%; height: 100%; padding: 1px; box-sizing: border-box; object-fit: contain; }

/* ---------- Invite / join ---------- */
.invite-box { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.invite-box code { flex: 1; font-size: var(--fs-4); word-break: break-all; color: var(--text); font-family: "SF Mono", ui-monospace, Menlo, monospace; }

/* ---------- Winner / podium ---------- */
.winner-screen { text-align: center; padding: 24px 20px 8px; }
/* B1: la tarjeta de cierre lleva la superficie CON ESTADO (ember) cuando GANASTE
   —celebra el triunfo— y se mantiene el trofeo/monto en oro (dinero). Al perder
   no lleva superficie (neutro). */
.winner-screen.won { max-width: 460px; margin: 0 auto; border-radius: var(--r-4); padding: 22px 20px 18px; }
:root.dark .winner-screen.won { background: var(--card-hot); border: 1px solid var(--primary-border); box-shadow: var(--shadow-md), var(--glow-hot); }
.winner-trophy { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 20px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.winner-trophy .msr { font-size: 44px; }
.winner-screen .eyebrow { color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 600; margin-top: 18px; }
.winner-screen h1 { font-size: 32px; font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.03em; }
.winner-screen .pot-big { font-size: 26px; font-weight: 700; color: var(--gold); margin-top: 14px; letter-spacing: -0.02em; }

/* ---- Cierre (sección 9): eyebrow "Survivor · Terminó" · chip Ganaste·Nº/Perdiste · reparto ---- */
.winner-flag { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: var(--r-3); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.winner-flag .msr { font-size: 40px; }
.winner-flag.won { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }   /* ganaste = trofeo dorado */
.wc-eyebrow { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wc-eyebrow .msr { font-size: 16px; }
.wc-chipwrap { margin: 12px 0 4px; }
.wc-chip { font-size: var(--fs-2); }
.winner-screen .wc-sub { color: var(--text-2); font-size: var(--fs-3); margin-top: 4px; }
/* reparto: rango separado del avatar · nombre · monto en oro con centavos */
.card.wc-reparto { max-width: 460px; margin: 0 auto; padding: 6px 14px; }
.wc-tierh { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 12px 2px 6px; }
.wrow { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.wrow:last-child { border-bottom: 0; }
.wrow.me { margin: 0 -8px; padding: 11px 8px; border-radius: var(--r-1); background: rgba(232,226,212,.05); box-shadow: inset 0 0 0 1px rgba(232,226,212,.18); border-bottom-color: transparent; }
.wrow:has(+ .wrow.me) { border-bottom-color: transparent; }   /* el divisor de arriba no choca con el contorno */
.wrank { width: 22px; flex: none; font-size: var(--fs-2); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: center; }
.wname { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wyou { font-size: 10px; font-weight: 700; color: var(--bg); background: var(--text); border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.wamt { flex: none; font-weight: 700; color: var(--gold); font-size: var(--fs-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wamt.out { color: var(--text-3); font-weight: 600; font-size: var(--fs-2); }
/* Quiniela: nombre + PUNTOS (gris, pequeño) apilados en la fila del reparto. El nombre sube un poco
   y los puntos van abajo — la fila casi no crece (queda a la altura del avatar). Para saber por qué
   ganó cada quien sin ir a la tabla. Clase propia: no toca la fila de survivor. */
.qzw-name { display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.15; }
.qzw-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qzw-pts { font-size: 11px; font-weight: 600; color: var(--text-3); line-height: 1; }
.wc-unpaid { border-top: 1px solid var(--border); }
.wc-unpaid > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-size: var(--fs-3); font-weight: 600; color: var(--text-2); }
.wc-unpaid > summary::-webkit-details-marker { display: none; }
.wc-unpaid[open] > summary .msr { transform: rotate(180deg); }
.wc-unpaid > summary .msr { transition: transform var(--t-fast) var(--ease); color: var(--text-3); }

.podium-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 10px; }
.podium-row:last-child { margin-bottom: 0; }
.podium-row.first { background: var(--primary-weak); border: 1px solid var(--primary-border); }
.pod-medal { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: var(--fs-4); flex-shrink: 0; }
.podium-row.first .pod-medal { background: var(--primary); color: #fff; border-color: var(--primary); }
.pod-info { flex: 1; min-width: 0; text-align: left; }
.pod-name { font-weight: 600; font-size: var(--fs-4); }
.pod-place { font-size: var(--fs-2); color: var(--text-2); }
.pod-amount { font-weight: 700; color: var(--gold); font-size: var(--fs-4); white-space: nowrap; letter-spacing: -0.02em; }

/* ---------- Card "Sin premio" colapsable ---------- */
.unpaid-card { opacity: .82; }
.unpaid-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.unpaid-card > summary::-webkit-details-marker { display: none; }
.unpaid-caret { color: var(--text-3); transition: transform .2s; }
.unpaid-card[open] .unpaid-caret { transform: rotate(180deg); }

/* ---------- Reparto escalonado (tiers) ---------- */
.wtier { margin-bottom: 16px; }
.wtier:last-child { margin-bottom: 0; }
.wtier-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.wtier-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.wtier.top .wtier-lbl { color: var(--primary); }
.wtier-share { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

/* ---------- Pie de la pantalla final ---------- */
.wf-sub { display: flex; align-items: center; max-width: 360px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--border); }
.wf-link { flex: 1; text-align: center; color: var(--text-2); font-weight: 600; font-size: var(--fs-4); cursor: pointer; }
.wf-link:active { opacity: .55; }
.wf-div { width: 1px; height: 18px; background: var(--border); flex: none; }
.btn-danger-text { background: none; border: 0; color: var(--danger); font-weight: 600; font-size: var(--fs-4); padding: 8px 12px; cursor: pointer; }
.btn-danger-text:disabled { color: var(--text-3); cursor: default; }
.btn-danger-text:active:not(:disabled) { opacity: .6; }
.btn-muted-text { background: none; border: 0; color: var(--text-2); font-weight: 600; font-size: var(--fs-4); padding: 8px 12px; cursor: pointer; }
.btn-muted-text:active { opacity: .6; }

/* ---------- Breakdown / split ---------- */
.breakdown { display: flex; flex-direction: column; gap: 10px; }
.bd-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: var(--fs-4); }
.bd-row span:first-child { min-width: 0; }
.bd-row span:last-child { white-space: nowrap; flex-shrink: 0; }
.bd-row.muted { color: var(--text-2); }
.bd-row.total { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 2px; font-weight: 700; }
.bd-row.total span:last-child { color: var(--gold); }   /* dinero = oro (no verde) */
/* Nota del costo fijo (modo comisión "recuperar"): oculta hasta tocar el ⓘ */
.breakdown .bd-row .sec-info { font-size: var(--fs-4); vertical-align: -2px; color: var(--text-3); cursor: pointer; margin-left: 3px; }
.breakdown .rec-note { display: none; font-size: 12px; color: var(--text-3); line-height: 1.35; margin: -4px 0 2px; }
.breakdown.recinfo .rec-note { display: block; }
/* Nota del costo fijo en el preview de unirse (togglea con el ⓘ). La nota va DENTRO del pill
   (en columna) para que quede arriba del divisor, no debajo. */
.pill-info.pill-com { flex-direction: column; align-items: stretch; gap: 0; }
.pill-com-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.join-cominfo { font-size: var(--fs-4); vertical-align: -2px; color: var(--text-3); cursor: pointer; margin-left: 3px; }
.join-com-note { display: none; margin: 8px 0 0; }
.join-com-note.show { display: block; }
.split-mini { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.split-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.split-row span:last-child { color: var(--text); font-weight: 600; }
.split-input-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.split-input-row:last-child { border-bottom: none; }
.split-input-row .split-pct { width: 76px; min-height: 40px; padding: 8px 10px; text-align: right; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-4); font-family: inherit; }
.split-total { margin-top: 12px; font-size: var(--fs-4); color: var(--text-2); }

/* ---------- Notes / callouts ---------- */
.note { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-size: var(--fs-3); color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.note .msr { font-size: 19px; color: var(--text-3); margin-top: 1px; }
.note.info { background: var(--primary-weak); border-color: var(--primary-border); color: var(--primary-hover); }
.note.info .msr { color: var(--primary); }
.note.success { background: var(--success-weak); border-color: var(--success); color: var(--success); }
.note.success .msr { color: var(--success); }
.note.danger { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }
.note.danger .msr { color: var(--danger); }
.note.danger b, .note.success b { color: inherit; }
/* Landing pública */
.landing { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
/* barra superior de ancho completo, igual que el topbar del app (borde a borde) */
.lp-nav { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.lp-nav.scrolled { border-bottom-color: var(--border); }
.lp-nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-create { display: none; }
.nav-create.show { display: inline-flex; }
.lp-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; white-space: nowrap; flex-shrink: 0; }
/* en móvil, al aparecer "Crear cuenta" en la barra, el nombre no debe partirse:
   marca en una sola línea + botones/logo un poco más compactos para que quepan */
@media (max-width: 420px) {
  .lp-nav .brand { font-size: var(--fs-4); gap: 8px; }
  .lp-nav .brand .logo { width: 26px; height: 26px; }
  .lp-nav-actions { gap: 6px; }
  .lp-nav-actions .btn-sm { padding: 0 10px; }
}
.lp-nav .brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lp-nav .brand .logo svg { width: 19px; height: 19px; }
.lp-hero { text-align: center; padding: 40px 0 30px; }
.lp-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-weak); color: var(--primary); border: 1px solid var(--primary-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.lp-hero h1 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 62px; text-transform: uppercase; letter-spacing: 0; margin: 18px 0 16px; line-height: .9; }
.lp-hero h1 .hl { color: var(--primary); }
.lp-hero h1 .out { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--primary); text-decoration-thickness: 6px; }
.lp-hero > p { color: var(--text-2); font-size: 17px; max-width: 560px; margin: 0 auto; line-height: 1.55; }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 26px 0 18px; }
.lp-leagues { color: var(--text-2); font-size: var(--fs-3); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lp-leagues-row { display: contents; }   /* escritorio: etiqueta y pills en una sola fila, como siempre */
.lp-leagues-lbl::after { content: ":"; } /* los dos puntos son de la frase de escritorio, no del antetítulo móvil */
.league-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-weight: 600; color: var(--text); }
.league-pill img { width: 16px; height: 16px; object-fit: contain; }
.lp-section { padding: 44px 0; }
.lp-section h2 { text-align: center; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 28px; }
/* Bajada bajo el título de sección. El h2 deja 28px pensados para que le siga el grid DIRECTO;
   cuando hay bajada se recupera ese aire para que el párrafo quede pegado a SU título y no
   flotando a media distancia entre los dos bloques. */
.lp-lead { text-align: center; color: var(--text-2); font-size: var(--fs-3); line-height: 1.5; max-width: 52ch; margin: -18px auto 28px; }
.lp-alt { background: var(--surface-2); border-radius: 20px; padding: 44px 28px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-step { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; position: relative; }
.lp-step .lp-step-n { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-step > .msr { font-size: 34px; color: var(--primary); margin-top: 6px; }
.lp-step h3 { font-size: var(--fs-5); margin: 10px 0 6px; }
.lp-step p { color: var(--text-2); font-size: var(--fs-3); line-height: 1.5; }
.lp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp-feature { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 18px; }
.lp-feature > .msr { font-size: 26px; color: var(--primary); }
.lp-feature h3 { font-size: var(--fs-4); margin-bottom: 4px; }
.lp-feature p { color: var(--text-2); font-size: var(--fs-3); line-height: 1.5; }
.lp-founder-card { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; border-radius: 20px; padding: 40px 32px; text-align: center; }
.lp-founder-card .founder-badge { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.40); }
.lp-founder-card h2 { color: #fff; margin: 16px 0 10px; }
.lp-founder-card p { color: rgba(255,255,255,.9); max-width: 460px; margin: 0 auto 16px; line-height: 1.55; }
.lp-founder-card .btn-primary { background: #fff; color: var(--primary); }
.lp-price { font-size: 30px; font-weight: 800; margin-bottom: 18px; }
.lp-price span { font-size: var(--fs-4); font-weight: 500; opacity: .85; }
.lp-faqs { max-width: 640px; margin: 0 auto; }
.lp-footer { text-align: center; border-top: 1px solid var(--border); padding-top: 30px; margin-top: 20px; color: var(--text-2); font-size: var(--fs-3); }
.lp-footer .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.lp-footer .brand .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lp-footer .brand .logo svg { width: 16px; height: 16px; }
.lp-footer a { color: var(--primary); }
.lp-legal { margin: 8px 0; }
.lp-copy { color: var(--text-3); font-size: 12px; margin-top: 8px; }
/* ============================================================
   LANDING — capa de movimiento
   Un producto que presume dato en vivo no puede entrar de golpe, como un documento.
   Todo el movimiento es UNA transición de opacidad + desplazamiento, disparada por la
   clase `.in`; CERO keyframes a propósito: las transiciones son medibles en el preview
   (los keyframes se congelan ahí) y son baratas en móvil porque solo tocan opacity y
   transform, que van en el compositor y no provocan relayout.
   La curva es de salida rápida y frenado largo: entra con decisión y se acomoda.
   ============================================================ */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1); }
.rv.in { opacity: 1; transform: none; }
/* El h1 se revela RENGLÓN POR RENGLÓN (de ahí los span en vez de <br>): es el gesto que
   más se siente, porque el ojo ya está ahí cuando carga la página. */
.lp-hero h1 span { display: block; }
/* Las tarjetas se levantan al apuntarlas. Solo con mouse: en touch, :hover se queda
   pegado después de tocar y la tarjeta se queda flotando sin razón. */
@media (hover: hover) {
  .lp-step, .lp-feature { transition: transform var(--t), border-color var(--t); }
  .lp-step:hover, .lp-feature:hover { transform: translateY(-3px); border-color: var(--primary-border); }
}
/* Respeto a quien pidió menos movimiento en su sistema: se ve TODO, de inmediato.
   No es solo accesibilidad — en iOS lo activa el modo de ahorro de batería. */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  .lp-step, .lp-feature { transition: none; }
  .lp-step:hover, .lp-feature:hover { transform: none; }
}

@media (max-width: 720px) {
  .lp-hero h1 { font-size: 52px; }
  .lp-steps, .lp-features { grid-template-columns: 1fr; }
  .lp-section { padding: 34px 0; }
  /* el contenedor gris conserva aire lateral en móvil, si no las tarjetas de
     adentro tocan los bordes y se ven apretadas */
  .lp-alt { padding: 34px 18px; }
  /* Las 5 ligas se amontonaban en TRES renglones desiguales (111px), con la etiqueta
     pegada a la primera pill. Ahora la etiqueta sube a su propio renglón como antetítulo
     y las pills se reparten solas, centradas y parejas. La etiqueta en versalitas hace
     el trabajo de separar sin necesitar dos puntos ni una línea extra. */
  .lp-leagues { flex-direction: column; gap: 10px; }
  .lp-leagues-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .lp-leagues-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 700; }
  .lp-leagues-lbl::after { content: none; }
  .league-pill { padding: 5px 10px; font-size: var(--fs-3); }
}

.help-fab { position: absolute; right: 20px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; border: none; border-radius: 999px; padding: 12px 18px; cursor: pointer;
  font-size: var(--fs-4); font-weight: 600; box-shadow: var(--shadow-md); transition: transform var(--t), background var(--t); }
@media (hover: hover) { .help-fab:hover { transform: translateY(-2px); background: var(--primary-hover); } }
.help-fab .msr { font-size: 20px; }
@media (max-width: 720px) { .help-fab { bottom: calc(72px + env(safe-area-inset-bottom)); right: 16px; padding: 12px; } .help-fab .help-fab-txt { display: none; } }
.legal-body h3 { font-size: var(--fs-4); margin: 18px 0 6px; }
.legal-body p { color: var(--text-2); font-size: var(--fs-4); line-height: 1.6; margin: 0 0 8px; }
.legal-body p:last-child { margin-bottom: 0; }
.auth-legal { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-3); }
.auth-legal a { color: var(--text-2); }
.note b { color: var(--text); font-weight: 600; }
.note.info b { color: var(--primary-hover); }

.pill-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.pill-info:last-child { border-bottom: none; }
.pill-info .k { color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.pill-info .v { font-weight: 600; text-align: right; }

/* ---------- Misc ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--text-2); }
.empty .icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--surface-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.empty .icon .msr { font-size: 30px; }
.empty h3 { color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 6px; }

.back-link { color: var(--text-2); font-size: var(--fs-4); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 20px; font-weight: 500; transition: color var(--t-fast) var(--ease); }
.back-link::before { font-family: "Material Symbols Rounded"; content: "arrow_back"; font-size: 18px; }
@media (hover: hover) { .back-link:hover { color: var(--text); } }

.link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: var(--fs-4); color: var(--text-2); }
.link-more::after { font-family: "Material Symbols Rounded"; content: "chevron_right"; font-size: 18px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; }
.tabs button { background: none; border: none; color: var(--text-2); min-height: 44px; padding: 0 16px; cursor: pointer; font-size: var(--fs-4); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; font-family: inherit; transition: color var(--t-fast) var(--ease); margin-bottom: -1px; }
@media (hover: hover) { .tabs button:hover { color: var(--text); } }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
/* tabs FIJAS y repartidas en partes iguales (Resumen/Tabla general/Historial): sin scroll */
.tabs.tabs-even { overflow: visible; gap: 0; }
.tabs.tabs-even button { flex: 1; text-align: center; padding: 0 6px; }

.streak { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.streak .msr { font-size: 16px; color: var(--text-3); }

.divider-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; margin: 20px 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(140px);
  /* El fondo es --text (arena CLARA, snackbar invertido): con color:#fff daba 1.1:1 — ilegible. */
  background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 300; transition: transform var(--t) var(--ease);   /* por encima de los modales (overlay: 200) */
  max-width: calc(100vw - 32px); font-size: var(--fs-4); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); color: var(--danger-weak); }      /* 5.8:1 (antes 2.9:1 en blanco) */
.toast.success { background: var(--success); color: var(--success-weak); }  /* 8.2:1 (antes 2.0:1 en blanco) */

/* Pop-up / modal (verificación de correo) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; padding: 16px;
  background: rgba(15, 17, 21, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein var(--t) var(--ease);
}
.modal {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 32px;
  box-shadow: var(--shadow-lg); animation: modalpop var(--t) var(--ease);
}
@keyframes modalpop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Pop-up BLOQUEANTE de Términos y Condiciones (no cerrable) + previsualización admin */
.tyc-gate { z-index: 260; padding: 0; }
.tyc-modal { max-width: 560px; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; }
@media (min-width: 560px) { .tyc-modal { height: auto; max-height: 88vh; border-radius: 16px; } }
.tyc-head { display: flex; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--border); }
.tyc-head .msr { font-size: 26px; color: var(--primary); flex: none; margin-top: 2px; }
.tyc-head h2 { font-size: var(--fs-6); margin: 0; }
.tyc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.tyc-actions { padding: 14px 20px; border-top: 1px solid var(--border); }
.tyc-body, .tyc-preview { font-size: var(--fs-4); line-height: 1.6; color: var(--text); }
.tyc-preview { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.tyc-body h2, .tyc-preview h2 { font-size: 17px; margin: 18px 0 8px; }
.tyc-body h3, .tyc-preview h3 { font-size: var(--fs-4); margin: 14px 0 6px; }
.tyc-body h4, .tyc-preview h4 { font-size: var(--fs-4); margin: 12px 0 4px; }
.tyc-body p, .tyc-preview p { margin: 0 0 10px; }
.tyc-body ul, .tyc-body ol, .tyc-preview ul, .tyc-preview ol { margin: 0 0 10px; padding-left: 22px; }
.tyc-body li, .tyc-preview li { margin: 3px 0; }
.tyc-body a, .tyc-preview a { color: var(--primary); }
.auth-accept { margin: 4px 0 14px; font-size: 13px; line-height: 1.45; align-items: flex-start; }
.auth-accept a { color: var(--primary); }
/* El modal de auth NO hace scroll; el cuerpo (#authBody) sí. Así la X queda
   fija arriba a la derecha y siempre se puede tocar aunque el form sea largo
   o Google reacomode el layout al cargar. */
.modal.auth-modal { position: relative; max-width: 400px;
  max-height: 86vh; max-height: 86dvh;   /* deja siempre marco visible → se lee como tarjeta */
  border-color: var(--border-strong);
  overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.auth-modal #authBody { overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 18px; }   /* contain: el fondo no se mueve */
.modal.auth-modal svg { }
/* compacto: el registro (el form más largo) debe caber sin scroll y sin
   agrandar el modal. Reglas consolidadas para que no se pisen entre sí. */
.auth-modal .auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-modal .auth-head .brand-mark { margin-bottom: 0; }
.auth-modal .auth-head .auth-h { margin-bottom: 0; }
.auth-modal .brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; }
.auth-modal .brand-mark svg { width: 22px; height: 22px; }
.auth-modal .auth-h { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 3px; }
.auth-modal .sub { color: var(--text-2); font-size: var(--fs-4); margin-bottom: 12px; }
.auth-modal .field { margin-bottom: 9px; }
.auth-modal .field label { margin-bottom: 5px; }
.auth-modal .field .hint { margin-top: 4px; font-size: 12px; line-height: 1.35; }
.auth-modal .or-sep { margin: 8px 0; }
.auth-modal .gwrap { min-height: 64px; }
.auth-modal .auth-switch { margin-top: 12px; }
.auth-modal .auth-legal { margin-top: 8px; font-size: var(--fs-2); }
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
@media (hover: hover) { .modal-x:hover { background: var(--border); color: var(--text); } }
.modal-x .msr { font-size: 20px; }
.modal .brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.modal .brand-mark .msr { font-size: 24px; }
.modal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.modal .sub { color: var(--text-2); font-size: var(--fs-4); margin-bottom: 22px; }

/* Back Office — filtros */
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-filters .chip { min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-3); font-weight: 500; cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease); }
@media (hover: hover) { .admin-filters .chip:hover { border-color: var(--primary); color: var(--primary); } }
.admin-filters .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.admin-filters .chip { white-space: nowrap; flex: 0 0 auto; }
/* filtros que hacen scroll horizontal en una sola fila (sin amontonarse) */
.admin-filters.scroll-x { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.admin-filters.scroll-x::-webkit-scrollbar { display: none; }

/* Acceso Fundador */
.founder-hero { text-align: center; padding: 8px 0 24px; }
.founder-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--primary-weak); color: var(--primary); font-weight: 600; font-size: 13px; border: 1px solid var(--primary-border); }
.founder-badge .msr { font-size: 17px; }
.founder-hero h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 16px 0 8px; }
.founder-hero .sub { color: var(--text-2); font-size: var(--fs-4); max-width: 460px; margin: 0 auto; }
.founder-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.fp-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.fp-meta { color: var(--text-2); font-size: 13px; margin-top: 2px; }
@keyframes pulseHi { 0% { box-shadow: 0 0 0 0 rgba(240,85,45,.35); } 70% { box-shadow: 0 0 0 10px rgba(240,85,45,0); } 100% { box-shadow: 0 0 0 0 rgba(240,85,45,0); } }
.pulse { animation: pulseHi 1.1s ease-out 2; border-color: var(--primary) !important; }
/* Fila de usuario: info a lo ancho (nombres largos caben), engrane fijo arriba-
   derecha (sin recuadro) y letras de rol U/F/A abajo-derecha. Mismo lugar siempre,
   sin importar el largo del texto. */
.user-row { display: flex; align-items: stretch; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: none; }
.user-row .ur-main { min-width: 0; flex: 1; }
.user-row .ur-name { font-weight: 600; font-size: var(--fs-4); word-break: break-word; }
.user-row .ur-email { font-size: 12px; color: var(--text-2); word-break: break-word; }
.user-row .ur-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.user-row .ur-gear { background: none; border: 0; padding: 2px; margin: -2px -2px 0 0; color: var(--text-2); cursor: pointer; line-height: 1; }
@media (hover: hover) { .user-row .ur-gear:hover { color: var(--text); } }
.user-row .ur-gear .msr { font-size: 20px; }
.user-row .ur-roles { display: flex; gap: 4px; }
.req-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.req-row:last-child { border-bottom: none; }
.benefit-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.benefit-row:last-child { border-bottom: none; }
.benefit-row .msr { font-size: 20px; color: var(--primary); }
.faq { padding: 12px 0; border-bottom: 1px solid var(--border); }
.faq:last-child { border-bottom: none; }
.faq-q { font-weight: 600; font-size: var(--fs-4); }
.faq-a { color: var(--text-2); font-size: var(--fs-3); margin-top: 4px; line-height: 1.5; }

/* Carrusel de ligas (desliza para cambiar de liga) */
.banner-carousel { position: relative; margin-bottom: 20px; }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-track > .home-banner { flex: 0 0 100%; scroll-snap-align: center; margin-bottom: 0; }
.banner-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.banner-dots .bdot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--border); transition: background var(--t), width var(--t); }
.banner-dots .bdot.active { background: var(--primary); width: 20px; border-radius: 4px; }

/* Marquee: los partidos se mueven solos */
.up-row.marquee { overflow: hidden; padding-bottom: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.up-row.marquee .marquee-inner { display: flex; gap: 10px; width: max-content; animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .up-row.marquee .marquee-inner { animation: none; } .up-row.marquee { overflow-x: auto; pointer-events: auto; } }

/* Banner de futbol (inicio) */
.home-banner { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(135deg, #15803d 0%, #166534 55%, #14532d 100%); box-shadow: var(--shadow-md); }
.home-banner .pitch-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.home-banner .pitch-bg rect, .home-banner .pitch-bg line, .home-banner .pitch-bg circle {
  fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.4; }
.home-banner .pitch-bg .fill { fill: rgba(255,255,255,.8); stroke: none; }
.home-banner-inner { position: relative; padding: 18px 20px 20px; }
.hb-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.league-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; font-size: var(--fs-2); font-weight: 600; backdrop-filter: blur(2px); }
.league-chip img { width: 16px; height: 16px; object-fit: contain; }
.hb-title { color: #fff; font-weight: 700; font-size: var(--fs-4); letter-spacing: -.01em; margin-bottom: 12px; }
.hb-sub { color: rgba(255,255,255,.85); font-size: 13px; }
.up-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.up-row::-webkit-scrollbar { display: none; }
.up-match { flex: 0 0 auto; background: rgba(255,255,255,.95); border-radius: 12px; padding: 10px 14px; text-align: center; min-width: 116px; }
.up-teams { display: flex; align-items: center; justify-content: center; gap: 8px; }
.up-teams img { width: 26px; height: 26px; object-fit: contain; }
.up-vs { font-size: 11px; font-weight: 700; color: var(--text-2); }
.up-score { font-size: var(--fs-4); font-weight: 800; color: var(--text); letter-spacing: .01em; }
.up-date { margin-top: 6px; font-size: 11px; color: var(--text-2); font-weight: 500; }
.up-match.live { box-shadow: 0 0 0 1.5px var(--analysis); }
.up-match.live .up-date { color: var(--analysis); font-weight: 700; }
/* banner F1 */
.home-banner.f1-banner { background: linear-gradient(135deg, #262b33 0%, #14181f 55%, #0b0e13 100%); }
.home-banner .track-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.home-banner .track-bg .trk { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 11; stroke-linejoin: round; stroke-linecap: round; }
.home-banner .track-bg .trk.dash { stroke: rgba(255,255,255,.55); stroke-width: 1.6; stroke-dasharray: 3 7; }
.home-banner .track-bg .grid rect { fill: rgba(255,255,255,.8); stroke: none; }
.f1-chip { background: rgba(0,0,0,.32); color: #fff; font-weight: 700; }
.f1-logo { height: 14px; width: auto; display: block; }
/* respetar el aspecto del wordmark F1 dentro de pills/chips (que fuerzan 16x16) */
.league-chip .f1-logo, .league-pill .f1-logo { width: auto; height: 15px; object-fit: contain; }
/* posiciones en vivo (pantalla de carrera) */
.f1-live-card { padding: 6px 8px; }
.f1-live-row { display: grid; grid-template-columns: 30px 44px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid var(--border); }
.f1-live-row:last-child { border-bottom: none; }
.f1-live-pos { font-weight: 800; color: var(--text-2); text-align: center; }
.f1-live-code { font-weight: 800; font-size: 12px; letter-spacing: .03em; text-align: center;
  border-left: 3px solid var(--border); padding-left: 7px; }
.f1-live-name { font-weight: 600; }
.f1-live-team { font-size: 12px; color: var(--text-dim); }
.gp-info { padding: 4px 2px 12px; font-size: var(--fs-4); display: flex; align-items: center; gap: 6px; }
.gp-info .msr { color: var(--primary); }
/* clasificación de carrera (stats) */
.f1-race-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.f1-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); padding: 6px 11px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.f1-meta-chip .msr { color: var(--primary); }
.f1-class-row { display: grid; grid-template-columns: 26px 28px 1fr auto; align-items: center; gap: 10px;
  padding: 8px; border-bottom: 1px solid var(--border); }
.f1-class-row:last-child { border-bottom: none; }
/* piloto que elegí: solo resalto su NOMBRE en azul (sin fondo en la fila) */
.f1-class-row.mine .f1-class-name { color: var(--primary); font-weight: 700; }
.f1-mine-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 10px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; color: var(--primary); vertical-align: middle; }
.f1-mine-tag .msr { font-size: 13px; }
.f1-class-main { min-width: 0; }
.f1-class-name { font-weight: 600; font-size: var(--fs-4); }
/* tarjeta "Tu pick" arriba de la clasificación: caja gris, resalto título+icono y nombre */
.f1-tp { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-4); padding: 12px 14px; margin-bottom: 14px; }
.f1-tp-eyebrow { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--primary); }
.f1-tp-eyebrow .msr { font-size: 15px; }
.f1-tp-body { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.f1-tp-name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1-tp-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.f1tp-pos { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.f1tp-wait { font-size: 13px; font-weight: 600; color: var(--text-2); }
.f1-class-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.con-logo.sm { width: 15px; height: 15px; }
.f1-class-stats { display: flex; align-items: center; gap: 10px; }
.f1-gain { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 700; }
.f1-gain .msr { font-size: 15px; }
.f1-gain.up { color: var(--success); }
.f1-gain.down { color: var(--danger); }
.f1-gain.flat { color: var(--text-dim); font-weight: 500; }
.f1-stat { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.f1-stat .msr { font-size: 15px; color: var(--text-dim); }
.gp-stats-panel { margin-top: 6px; }
.gp-stats-panel .f1-class-row { padding-left: 4px; padding-right: 4px; }
.up-match.f1-pos { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.up-match.f1-pos .f1-p { font-size: 12px; font-weight: 800; color: var(--text-2); }
.up-match.f1-pos .f1-code { font-size: var(--fs-4); font-weight: 800; letter-spacing: .03em; }
.up-match.f1-pos .f1-team { font-size: 11px; color: var(--text-2); }
.up-match.f1-race { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.up-match.f1-race .f1-gp { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.up-match.f1-race .f1-date { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.up-match.f1-race .msr { color: var(--primary); }
.live-tag { display: inline-flex; align-items: center; gap: 4px; }
.live-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--analysis); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
/* variante compacta (dashboard con grupos) */
.home-banner.compact .home-banner-inner { padding: 12px 14px; }
.home-banner.compact .hb-top { margin-bottom: 10px; }
.home-banner.compact .up-match { padding: 8px 12px; min-width: 104px; }
.home-banner.compact .up-teams img { width: 22px; height: 22px; }

/* Banner por-liga: icono de liga (arriba-izq) + partido centrado con su fecha/estado debajo.
   Los partidos de la liga rotan solos; swipe/puntos cambia de liga. */
.home-banner.be { margin-bottom: 20px; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.home-banner.be img { -webkit-user-drag: none; user-drag: none; }
/* en la landing el banner va en su propia sección; no dupliques el espacio inferior */
.lp-banner { padding-top: 0 !important; padding-bottom: 0 !important; }
.lp-banner .home-banner.be { margin-bottom: 0; }
.home-banner.be .track-bg { display: none; }
.home-banner.be.f1 { background: linear-gradient(135deg, #262b33 0%, #14181f 55%, #0b0e13 100%); }
.home-banner.be.f1 .pitch-bg { display: none; }
.home-banner.be.f1 .track-bg { display: block; }
.home-banner.be .be-shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,19,.45) 0%, rgba(10,13,19,.30) 45%, rgba(10,13,19,.72) 100%); }
/* icono de liga en la esquina superior izquierda */
.be-chip { position: absolute; top: 0; left: 0; z-index: 2; padding: 9px 10px; }
.be-league { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); }
.be-league img { width: 18px; height: 18px; object-fit: contain; }
.be-league .msr { font-size: 17px; color: #fff; }
.be-league.f1 .f1-logo { width: auto; height: 12px; }
.home-banner.be.compact .be-chip { padding: 7px 8px; }
.home-banner.be.compact .be-league { width: 24px; height: 24px; }
/* viewport que recorta; fútbol = ticker de chips (be-track), F1 = fundido (be-fade) */
.home-banner.be .be-content { position: relative; overflow: hidden; padding: 16px 14px 22px; }
/* landing/no-compacto: alto fijo para que F1 (contenido más corto) mida igual que fútbol */
.home-banner.be:not(.compact) .be-content { min-height: 88px; }
.home-banner.be.compact .be-content { padding: 0 0 13px; height: 74px; }
.home-banner.be .be-track { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; will-change: transform; }
.home-banner.be .be-track.be-static { justify-content: center; }
.home-banner.be .be-track.be-marquee { width: max-content; gap: 0;
  animation-name: be-marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes be-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .home-banner.be .be-marquee { animation: none; } }
/* chip de partido del ticker, con divisor vertical sutil (degradado) entre uno y otro */
.be-chip-card { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 26px; }
.be-chip-card .be-match { gap: 8px; }
.be-chip-card .be-crest { width: 26px; height: 26px; }
.be-marquee .be-chip-card:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.22) 45%, rgba(255,255,255,0)); }
/* F1: una tarjeta con fundido, centrada */
.home-banner.be .be-fade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%;
  transition: opacity .26s var(--ease); }
.home-banner.be .be-fade.out { opacity: 0; }
.be-match { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.be-match.be-crests { gap: 12px; }
.be-crest { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.92); padding: 1px; flex: none; }
.be-crests .be-crest { width: 30px; height: 30px; }
.be-name { font-size: var(--fs-4); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.be-name.dim { color: rgba(255,255,255,.7); font-weight: 600; }
.be-score { font-size: 17px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .5px; flex: none; margin: 0 2px; }
.be-vs { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.7); letter-spacing: 1px; flex: none; margin: 0 3px; }
.be-gp { font-size: var(--fs-4); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-flag { color: #fff; }
.be-when { display: flex; align-items: center; justify-content: center; }
.be-when-t { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.82); }
.be-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #1a1610;
  background: #f0b429; border-radius: 999px; padding: 2px 9px; flex: none; }
.be-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #1a1610; animation: blink 1.1s ease-in-out infinite; }
.home-banner.be.compact .be-name { max-width: 118px; font-size: 13px; }
.home-banner.be.compact .be-score { font-size: var(--fs-4); }
.home-banner.be .banner-dots.be-dots { position: absolute; bottom: 6px; left: 0; right: 0; margin: 0; }

/* Sección "Te toca elegir" (inicio) */
.todo-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.todo-head .msr { font-size: 16px; color: var(--text-2); }
.todo-toggle { cursor: pointer; user-select: none; }
.todo-caret { margin-left: auto; font-size: 18px !important; color: var(--text-2); }
.todo-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
@media (hover: hover) { .todo-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } }
.todo-card.t-near { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.todo-card .tc-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--primary); font-size: 20px; }
.todo-card .tc-b { flex: 1; min-width: 0; }
.todo-card .tc-nm { font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.01em; }
/* El Home solo aparece ≤72h → siempre ámbar, y rojo en la última hora (t-near). Nunca gris. */
.todo-card .tc-dl { font-size: var(--fs-2); font-weight: 600; color: var(--analysis); margin-top: 1px; }
.todo-card.t-near .tc-dl { color: var(--danger); }
.todo-card .tc-dl .cd { font-variant-numeric: tabular-nums; }
.todo-card .tc-go { flex: none; padding: 8px 14px; height: auto; font-size: var(--fs-2); }

/* barra de acento por estado en las tarjetas de grupo */
.group-card { position: relative; overflow: hidden; }
.group-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-strong); }
.group-card.gc-alive::before { background: var(--green-2); }
.group-card.gc-out::before { background: var(--danger); }
.group-card.gc-won::before { background: var(--success); }
.group-card.gc-open::before { background: var(--admin-blue); }   /* inscripción = azul administrativo */
.group-card.gc-done::before { background: var(--border-strong); }   /* terminado: gris neutro */
.group-card.gc-gold::before { background: var(--gold); }            /* quiniela en podio: franja dorada */

/* Ficha de grupo compacta (fila): icono · nombre/meta · (badge arriba, jornada+admin abajo) */
.gcr-listhead { margin-top: 20px; }
.gcr-listhead .msr { color: var(--text-2); }
.gcr-count { color: var(--text-2); font-weight: 700; }
.gcr-toggle { cursor: pointer; user-select: none; }
.gcr-caret { margin-left: auto; font-size: 18px !important; color: var(--text-2); }
.gcr-list { display: flex; flex-direction: column; gap: 10px; }
.group-card.gcr { flex-direction: row; align-items: stretch; gap: 12px; padding: 12px 14px 12px 17px; min-height: 66px; }
.gcr-ic { width: 48px; height: 48px; border-radius: var(--r-3); flex: none; align-self: center; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 24px; overflow: visible; }
.gcr-ic .msr { font-size: 24px; color: var(--primary); }
.gcr-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-3); }
.gcr-body { flex: 1; min-width: 0; align-self: center; }
.gcr-nm { display: block; font-size: var(--fs-5); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* meta a 2 renglones FIJOS (nunca wrap): r1 = liga · conteo/estado; r2 = bolsa.
   Solo la liga se encoge (ellipsis); conteo y bolsa van flex:none y con cifras tabulares. */
.gcr-meta { margin-top: 3px; font-size: var(--fs-2); color: var(--text-2); min-width: 0; }
.gcr-mrow { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0; }
.gcr-m2 { margin-top: 2px; }
.gcr-league { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gcr-meta .sep { color: var(--border-strong); flex: none; }
.gcr-meta .alive { color: var(--green-2); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.gcr-meta .gcr-pos { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }   /* quiniela: tu lugar en blanco */
.gcr-meta .prov { outline: 1px dashed var(--border-strong); outline-offset: 2px; border-radius: 3px; flex: none; }
.gcr-prize { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.gcr-prize .msr { font-size: 15px; }
.gcr-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding-left: 6px; }
.gcr-right .badge { flex: none; }
.gcr-rbottom { display: flex; align-items: center; gap: 7px; }
.gcr-round { font-size: var(--fs-2); font-weight: 800; letter-spacing: -0.02em; color: var(--text-2); }
.gcr-open { font-size: 12px; color: var(--analysis); font-weight: 700; }
.gcr-admin { display: inline-flex; align-items: center; color: var(--text-3); }
.gcr-admin .msr { font-size: 15px; }
/* etiqueta de modo (QUINIELA/SURVIVOR) a la derecha, antes del round; solo si tienes >1 modo */
.gcr-mode { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

.btn-lg { padding: 0 22px; height: 46px; font-size: var(--fs-4); }

/* Estadísticas del partido en vivo */
/* Tarjeta scoreboard + botón "Ver estadísticas" abajo y afuera de la caja */
.sb-wrap { margin-bottom: 10px; }
.sb-wrap .sb { margin-bottom: 6px; }
.match-wrap { border-bottom: 1px solid var(--border); }
.match-wrap:last-child { border-bottom: none; }
.match-wrap .match { border-bottom: none; }
/* padding simétrico: el botón se centra con "Final"/estado y no agranda el pie.
   El aire antes del panel inline lo pone el propio panel (.pk-match .stats-panel). */
.stats-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: var(--fs-2); font-weight: 600; padding: 2px 0; }
/* estadísticas PREVIAS al partido: ámbar + gráfica, como en pick */
.stats-toggle.pre { color: var(--analysis); }
.stats-panel { padding: 6px 0 14px; }
.stats-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-4); margin-bottom: 14px; }
.stat-line { margin-bottom: 12px; }
.stat-vals { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.stat-vals .stat-label { color: var(--text-2); font-weight: 500; font-size: var(--fs-2); }
.stat-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 5px; background: var(--surface-2); }
.stat-bar .sb-home { background: var(--primary); }
.stat-bar .sb-away { background: var(--text-dim); }
/* calendario plegable (jornadas/GPs) + scrubber de scroll rápido */
.cal-rounds { min-width: 0; }
.cal-round { margin-top: 14px; }
.cal-round:first-child { margin-top: 4px; }
.cal-round-head { width: 100%; display: flex; align-items: center; gap: 8px; background: transparent;
  border: none; cursor: pointer; padding: 6px 2px; font-family: inherit; font-size: var(--fs-4); font-weight: 700;
  color: var(--text); text-align: left; }
.cal-round-head .crh-spacer { flex: 1; }
.cal-chevron { transition: transform var(--t-fast) var(--ease); color: var(--text-2); }
.cal-round.collapsed .cal-chevron { transform: rotate(-90deg); }
.cal-round.collapsed .cal-round-body { display: none; }
.cal-round.cal-current .crh-title { color: var(--primary); }
.crh-rem { color: var(--text-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* selección/plan en gris, visible solo cuando la ronda está colapsada */
.crh-pick { color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.crh-pick.crh-plan { color: var(--primary); font-weight: 600; }   /* plan (tentativo) vs hecho (gris) */
.cal-round:not(.collapsed) .crh-pick { display: none; }
/* resaltar SOLO la tarjeta blanca del GP/jornada actual (no todo el bloque) */
.cal-round.cal-current .card { border-color: var(--primary-border); box-shadow: 0 0 0 1px var(--primary-border); }
.cal-round-body .card { margin-top: 6px; }
/* scrubber: zona invisible en el borde derecho; al deslizar aparece la guía + burbuja */
.cal-scrub { position: fixed; right: 0; top: 60px; bottom: 58px; width: 22px; z-index: 45;
  touch-action: none; }
body.scrubbing .cal-scrub::before { content: ""; position: absolute; right: 7px; top: 0; bottom: 0;
  width: 4px; border-radius: 4px; background: var(--primary-weak); }
.cal-scrub-bubble { position: fixed; right: 28px; display: none; align-items: center; gap: 4px;
  padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 800;
  font-size: var(--fs-4); box-shadow: var(--shadow-lg); z-index: 46; pointer-events: none; }
.cal-scrub-bubble.show { display: inline-flex; }
/* Planeación de picks en el calendario */
.plan-head { font-size: 13px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.plan-head .plan-yes { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); }
.plan-head .plan-yes .msr { font-size: 18px; }
.plan-head .plan-no { color: var(--text-2); }
/* tache para desplanear rápido desde "Tu plan:" */
.plan-clear { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
  padding: 3px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text-2);
  cursor: pointer; flex: none; }
.plan-clear .msr { font-size: 15px; }
@media (hover: hover) { .plan-clear:hover { background: var(--danger-weak); color: var(--danger); } }
.plan-match { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.plan-match .plan-vs { flex: 0 0 auto; min-width: 42px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-2); }
.plan-team { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--r-2); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--fs-4); font-weight: 500; text-align: left;
  transition: border-color var(--t), background var(--t); min-width: 0; }
.plan-team .pt-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .plan-team:hover:not(:disabled) { border-color: var(--primary-border); background: var(--primary-weak); } }
.plan-team.sel { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 600; }
.plan-team.sel .msr { color: var(--primary); }
.plan-team.used, .plan-team:disabled { opacity: .5; cursor: not-allowed; }
.plan-team .pt-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); font-weight: 700; }

.spinner { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 80px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Esqueletos de carga (forma de lo que viene). Shimmer por background-position ===== */
.sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 16px; margin-top: 14px; }
.sk-line { height: 15px; border-radius: 7px; }
.sk-line + .sk-line { margin-top: 10px; }
.sk-crestrow { display: flex; gap: 14px; }
.sk-crest { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.sk-crest.sm { width: 30px; height: 30px; }
.sk-feedrow { margin-top: 12px; }
/* Inicio: tarjeta de grupo (icono + 2 líneas + chip) */
.sk-sechead { margin: 20px 0 0; }
.sk-gcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 66px; }
.sk-gic { width: 42px; height: 42px; border-radius: var(--r-3); flex: none; }   /* = .gcr-ic real */
.sk-gbody { flex: 1; min-width: 0; }
.sk-gbody .sk-line + .sk-line { margin-top: 9px; }
.sk-gchip { width: 62px; height: 24px; border-radius: 999px; flex: none; }
/* En curso: fila de avatares, pills del tablero, cards de partido */
.sk-avrow { display: flex; gap: 14px; margin-top: 12px; }
.sk-pillrow { display: flex; gap: 10px; }
.sk-pill { flex: 1; height: 58px; border-radius: var(--r-2); }
.sk-match { display: flex; align-items: center; gap: 10px; }
.sk-mid { width: 34px; height: 22px; border-radius: var(--r-1); flex: none; }
/* Grupo: filas de tabla */
.sk-trow { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sk-line, .sk-crest, .sk-gic, .sk-gchip, .sk-pill, .sk-mid {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-strong) 42%, var(--surface-2) 60%);
  background-size: 300% 100%; animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-line, .sk-crest, .sk-gic, .sk-gchip, .sk-pill, .sk-mid { animation: none; } }

.mstatus { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.mstatus.live { color: var(--analysis); }
.mstatus.done { color: var(--success); }
.match-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 90px; }

/* entrada suave de vistas */
.container > * { animation: fadein var(--t) var(--ease); }
/* al VOLVER (swipe-back): sin fadein. iOS ya anima el gesto; reinsertar el nodo re-dispara la
   animación CSS y eso es el mini-parpadeo. La clase la pone el router en back (ver _setNavAnim). */
.container.no-anim > * { animation: none !important; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===================== Acuse al tocar =====================
   El problema: tocas y la pantalla NO se mueve hasta que contesta la red. En una PWA instalada eso
   se siente como que el toque no entró (y la gente vuelve a picar). Lo único que había era
   `.btn:active { translateY(.5px) }`, medio píxel = invisible.

   Van DOS piezas y van JUNTAS, por superficie:
   (a) apagamos el destello gris del sistema, y
   (b) ponemos nuestro propio acuse (un escalado corto, 110ms, con la curva de la casa).
   Apagar (a) sin poner (b) dejaría la superficie MUDA, así que la lista de selectores es la misma
   en los dos bloques. Lo que no esté aquí conserva el destello nativo: nunca queda sin acuse.

   Solo van elementos HOJA (sin nada tocable adentro): `:active` también le pega a los ancestros,
   así que escalar una tarjeta que lleva un botón dentro haría doble escalado al picar el botón.
   Por eso `.act-pick` (lleva "Elegir") queda fuera y su botón se escala solo. */
.btn, .pk-cta, .group-card.gcr, .act-card:not(.act-pick), .gh-iconbtn, .sheet-choose,
.tri-item, .emoji-chip, .seg-opt, .opt-card, .xc-sv-row, .stats-toggle, .back-link {
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled),
.pk-cta:active:not(:disabled),
.sheet-choose:active:not(:disabled),
.tri-item:active, .seg-opt:active { transform: scale(.97); }
.group-card.gcr:active, .act-card:not(.act-pick):active, .opt-card:active { transform: scale(.985); }
.gh-iconbtn:active, .emoji-chip:active { transform: scale(.9); }
.xc-sv-row:active, .stats-toggle:active, .back-link:active { opacity: .55; }
/* OJO: aquí NO se declara `transition`. Cada superficie ya trae la suya (`.btn`, `.group-card` y
   `.act-card` incluyen transform; `.seg-opt` y `.opt-card` usan `all`) y una regla compartida la
   PISARÍA —se perderían los cambios de fondo y borde del hover—. A las cuatro que no tenían
   ninguna se les agregó transform en su propia regla, allá arriba.
   `.btn:active { translateY(.5px) }` sigue arriba a propósito: si este bloque desaparece, el botón
   no se queda sin nada; mientras exista, esta regla gana por orden. */

/* Quien pide menos movimiento no quiere un escalado: se le acusa el toque bajando la opacidad.
   (El bloque global de abajo ya mata las transiciones, así que esto es instantáneo, como debe ser.) */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .pk-cta:active:not(:disabled),
  .sheet-choose:active:not(:disabled), .tri-item:active, .seg-opt:active,
  .group-card.gcr:active, .act-card:not(.act-pick):active, .opt-card:active,
  .gh-iconbtn:active, .emoji-chip:active { transform: none; opacity: .62; }
}

/* ---- Que un toque sostenido no "seleccione texto" en lo que es un CONTROL ----
   En iOS, mantener el dedo sobre un botón o una tarjeta levanta la lupa de selección y el menú
   Copiar/Compartir: delata que esto es una página web y, peor, come el toque (el tap no llega).
   Pasa mucho aquí porque casi todo lo tocable es un <div>/<span> con texto, no un <button>.

   Es LISTA EXPLÍCITA, no `*`, y eso es la mitad del arreglo: el código de invitación, la CLABE
   y los montos TIENEN que seguir seleccionables a mano (el botón "Copiar" falla sin HTTPS y en
   algunas webviews, así que la selección manual es el plan B del único dato que mueve dinero).
   Antes de agregar un selector aquí: si el usuario podría querer COPIAR ese texto, no va. */
.btn, .pk-cta, .sheet-choose, .seg-opt, .tri-item, .emoji-chip, .opt-card,
.group-card.gcr, .act-card, .gh-iconbtn, .stats-toggle, .back-link, .xc-sv-row,
.bottom-nav, .topbar nav, .sheet-handle, .sheet-x, .chip, .pk-team, .plan-team,
.nav-float .nav-fab, .help-fab {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Los escudos y los avatares son decoración: el long-press ofrecía "Guardar imagen" / "Copiar"
   sobre un PNG de 150px del proveedor. Solo mata el menú — la imagen se sigue viendo igual. */
.crest img, .avatar img, .msr { -webkit-touch-callout: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) { *, .container > * { animation: none !important; transition: none !important; } }

/* ===================== Responsive / móvil ===================== */
@media (max-width: 720px) {
  .container { padding: 24px 16px 28px; }
  .topbar { padding: 0 14px; }
  .topbar nav button { padding: 0 10px; font-size: 13px; }
  .page-head h1 { font-size: 21px; }
  .card { padding: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 440px; }
  /* Tabla general (standings): ancho al CONTENIDO, no el 440 fijo (calibrado para 6
     columnas). Sin Resultado son 5 columnas → evita el aire de sobra en Equipo. */
  .stick2.st-bar { min-width: max-content; }
  .table th, .table td { padding: 11px 8px; font-size: 13px; }
  .match { flex-wrap: wrap; }
  .match .kickoff { width: 100%; text-align: left; order: 9; }
  .winner-screen h1 { font-size: 26px; }
}
@media (max-width: 420px) {
  .page-head { flex-direction: column; }
  .page-head .btn { width: 100%; }
  .stat-box .v { font-size: 19px; }
}

/* ============================================================
   Pulido de MODO OSCURO (elegante · moderno). Todo scopeado a
   :root.dark → el modo claro NO se toca. Sin blur de header ni
   transiciones nuevas (pendientes de validar aparte).
   ============================================================ */

/* 5. Texto secundario ~12% más brillante (menos apagado) — cálido, sin azul. */
/* --text-3 (terciario) estaba en #6e665a = 3.17:1 sobre --surface, por debajo del mínimo legible,
   y lo usan 250 reglas: pistas, placeholders, letras chicas de 11-12px. Sube a 5.3:1 sobre tarjeta
   y 4.7:1 sobre sub-elemento. No se sube más para no aplastar la jerarquía contra --text-2 (8.1:1).
   Pendiente honesto: dentro de un sheet (--surface-3) queda en 4.1:1 — está en el archivo de Tier 1. */
:root.dark { --text-2: #b6ad9d; --text-3: #938a7e; }

/* 1+7. Tarjeta azul (Hero Fundador): degradado con profundidad — arriba el
   azul principal, abajo un azul más oscuro (antes subía a un tono más
   brillante y se percibía plano y "más grande"). Un poco de aire lateral. */
:root.dark .lp-founder-card {
  background: linear-gradient(180deg, #f0552d 0%, #c43d1c 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  margin-left: 10px; margin-right: 10px;
}

/* 3. Badge (Acceso Fundador / hero): borde e icono más presentes. No toca
   el badge blanco que va dentro de la tarjeta azul. */
:root.dark .lp-badge,
:root.dark .founder-hero .founder-badge {
  background: rgba(240,85,45, .12);
  border-color: var(--primary-border);
  color: var(--primary);
}

/* 4. Profundidad de tarjetas: en oscuro las sombras casi no se ven, así que
   damos relieve con un borde hairline algo más claro + sombra tenue. */
:root.dark .card {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .30);
}

/* 2+8. CTA principal con más presencia (sombra azul sutil) y hover notorio. */
:root.dark .btn-primary { box-shadow: 0 2px 10px rgba(240,85,45, .28); }
@media (hover: hover) { :root.dark .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(240,85,45, .40); } }

/* 9. Separadores más legibles (FAQ y filas de detalle). */
:root.dark .faq,
:root.dark .pill-info { border-bottom-color: rgba(255, 255, 255, .07); }

/* ============================================================
   Análisis del partido (bottom sheet) — datos para elegir mejor.
   ============================================================ */
/* con un sheet abierto, bloqueamos SOLO el scroll interno (sin mover el body → sin
   reflow que despegue la barra). La posición del scroll se conserva sola. */
body.sheet-open .scroll-area { overflow: hidden; }
/* Lock robusto al abrir un sheet: congela también la ventana (pantallas con window
   scroll, no solo .scroll-area). Mismo patrón que el chat; conserva la posición. */
html.sheet-locked, html.sheet-locked body { height: 100%; overflow: hidden; }
/* Con el body en position:fixed (bloqueo de scroll del sheet), iOS reposiciona los
   elementos fijos/sticky de abajo y "se despegan" a media pantalla. Como el sheet
   los tapa igual, los ocultamos mientras está abierto. */
body.sheet-open .bottom-nav,
body.sheet-open .help-fab,
body.sheet-open .pick-confirm { display: none !important; }
.sheet-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(15, 17, 21, .55);
  display: flex; align-items: flex-end; justify-content: center; animation: fadein var(--t) var(--ease); touch-action: none; }
.sheet { touch-action: pan-y; }
.sheet { width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--surface);
  border: 1px solid var(--border-strong); border-bottom: 0; box-shadow: var(--shadow-lg);
  border-top-left-radius: 20px; border-top-right-radius: 20px; animation: sheetup var(--t) var(--ease); }
@keyframes sheetup { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 4px; }
/* El fondo de la hoja toca el borde de abajo de la pantalla (el overlay es `align-items:flex-end`),
   así que en iPhone el último renglón o botón queda debajo de la barra de gestos. El relleno vive
   aquí y no en el `style=` de cada hoja para que sea UNA sola regla.
   OJO: las hojas con `.sheet-cta` NO llevan esta clase. Ese bloque es sticky y queda clavado al
   borde de su contenedor, así que el 24px de abajo ya hace de margen de seguridad; sumarle el
   `env()` del padre lo levantaría ~58px del piso = hueco muerto. */
.sheet-pad { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.sheet-pad.pt2 { padding-top: 2px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 6px; }
.sheet-title { font-size: var(--fs-6); font-weight: 700; letter-spacing: -0.01em; }
.sheet-x { background: none; border: 0; color: var(--text-2); cursor: pointer; padding: 2px; line-height: 1; }
.sheet-sec { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); margin: 18px 0 8px; }
.conf-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: var(--fs-4); }
.conf-stars { letter-spacing: 2px; color: var(--primary); font-size: 16px; }
.conf-stars .off { color: var(--border-strong); }
/* icono de info + nota inline (expandir/colapsar) junto al título de una sección */
.sec-info { font-size: 16px; color: var(--text-3); cursor: pointer; vertical-align: -3px; margin-left: 6px; transition: color var(--t-fast) var(--ease); }
.info-block.open .sec-info { color: var(--primary); }
@media (hover: hover) { .sec-info:hover { color: var(--primary); } }
.info-note { display: none; margin: 0 0 10px; font-size: var(--fs-2); color: var(--text-2); line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.info-note b { color: var(--text); font-weight: 600; }
.info-block.open .info-note { display: block; }
.prob-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.prob-legend { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); gap: 8px; }
.prob-legend b { color: var(--text-2); font-weight: 700; }
.prob-legend b.prob-max { color: var(--text); font-size: 16px; }   /* el % mayor resalta */
.form-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: var(--fs-4); }
.form-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; font-size: 11px; font-weight: 700; margin-left: 5px; }
.form-chip.fc-pos { width: auto; min-width: 22px; padding: 0 6px; }
.fc-won { background: var(--success-weak); color: var(--success); }
.fc-lost { background: var(--danger-weak); color: var(--danger); }
.fc-draw { background: #faf0d5; color: #a06a08; }
:root.dark .fc-draw { background: #3a2e10; color: #f0b429; }
.fc-na { background: var(--surface-2); color: var(--text-3); }
.an-info { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin-top: 8px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: var(--fs-4); }
.an-info > span { color: var(--text-2); }
/* Historial directo (H2H): intensidad NEUTRA (sand ganador / gris apagado), NO %.
   A propósito distinto de la barra de probabilidad (morado/aqua): es un conteo, no una estimación. */
.h2h-tally { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 8px; gap: 10px; }
.h2h-side { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.h2h-side.r { flex-direction: row; }
.h2h-side .crest { width: 24px; height: 24px; font-size: 9px; flex: none; }
.h2h-side .crest.logo img { width: 20px; height: 20px; }
.h2h-tn { font-size: var(--fs-4); color: var(--text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; flex: none; }
.h2h-num.lead { color: var(--gold); }
.h2h-num.less { color: var(--text-3); }
.h2h-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; }
.h2h-seg.win { background: var(--gold); }
.h2h-seg.dim { background: var(--text-3); }
.h2h-seg.draw { background: var(--border-strong); }
.h2h-cards { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; }
.h2h-cards::-webkit-scrollbar { display: none; }
.h2h-card { flex: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; text-align: center; }
.h2h-yr { font-size: 11px; color: var(--text-3); margin-bottom: 3px; letter-spacing: .02em; }
.h2h-sc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.h2h-sc .crest { width: 20px; height: 20px; font-size: 8px; flex: none; }
.h2h-sc .crest.logo img { width: 16px; height: 16px; }
.h2h-sc b.w { color: var(--gold); }
.h2h-dash { color: var(--text-3); font-weight: 400; }
.h2h-low { font-size: var(--fs-4); color: var(--text-2); margin: 2px 0 10px; }
.h2h-caut { font-size: 12px; color: var(--text-3); margin-top: 8px; }
/* ---- Votos de la comunidad (¿y la gente qué opina?) ---- */
.vote-block { margin-top: 2px; }
.vote-opts { display: flex; gap: 8px; }
.vote-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  position: relative; padding: 10px 6px; border: 1.5px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.vote-opt .crest { width: 30px; height: 30px; flex: none; }
.vote-opt .vote-face { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; object-position: top center; }
.vote-opt .vote-x { font-size: 24px; color: var(--text-3); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.vote-opt .vote-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vote-opt.mine { border-color: var(--gold); background: rgba(232, 179, 65, .10); }
.vote-opt .vote-ck { position: absolute; top: 5px; right: 6px; color: var(--gold); font-size: var(--fs-4); }
.vote-count { text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.vote-count .msr { font-size: 15px; vertical-align: -2px; color: var(--text-3); }
.vote-changehint { text-align: center; margin-top: 2px; font-size: var(--fs-2); color: var(--text-3); }
/* Carta "Forma y estadísticas": disclaimer siempre visible + micro-rótulo de la barra */
.stat-disclaimer { margin: -2px 0 8px; font-size: 12px; color: var(--text-3); }
.prob-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
@media (hover: hover) { .vote-opt:hover:not(.mine) { border-color: var(--primary); } }
.vote-insight { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 12px 14px;
  border-radius: 12px; font-size: var(--fs-3); line-height: 1.5; color: var(--text-2); }
.vote-insight .msr { font-size: 19px; margin-top: 1px; }
.vote-insight b { color: var(--text); }
.vote-insight.agree { background: var(--success-weak); border: 1px solid var(--success-border); }
.vote-insight.agree .msr, .vote-insight.agree b { color: var(--success); }
.vote-insight.differ { background: var(--analysis-weak); border: 1px solid var(--analysis-border); }
.vote-insight.differ .msr, .vote-insight.differ b { color: var(--analysis); }
.h2h b { color: var(--text); }
/* Recomendación (pill) + CTA "Elegir X" del sheet de análisis */
.rec-row { align-items: flex-start; gap: 12px; }
.rec-team { min-width: 0; }
.rec-note { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.3; }
.rec-pill { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 4px 11px; white-space: nowrap; flex: none; }
.rec-pill.use { color: var(--success); background: var(--success-weak); }
.rec-pill.ok { color: var(--primary); background: var(--primary-weak); }
.rec-pill.hold { color: var(--analysis); background: var(--analysis-weak); }
.rec-pill.avoid { color: var(--danger); background: var(--danger-weak); }
.rec-pill.used { color: var(--text-3); background: var(--surface-2); }
.sheet-cta { position: sticky; bottom: 0; display: flex; gap: 10px; margin: 18px -20px 0; padding: 12px 20px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); }
.sheet-choose { flex: 1; padding: 13px; border-radius: 12px; border: 0; font-family: inherit; font-size: var(--fs-4); font-weight: 700; cursor: pointer; transition: transform 110ms var(--ease); }
.sheet-choose.primary { background: var(--primary); color: #fff; }
.sheet-choose.second { background: var(--surface-2); color: var(--text); }
.sheet-choose:disabled { opacity: .5; cursor: not-allowed; }

/* Calendario: toggle Por jornada / Inventario + vista de inventario */
/* switcher de planeación (Por equipo / Por jugador / Por jornada): mismo radio
   que el segmentado tratado (.seg = --r-4 contenedor, --r-3 botón). */
.inv-seg { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 4px; margin-bottom: 16px; }
.inv-seg button { flex: 1; border: 0; background: none; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px; border-radius: var(--r-3); cursor: pointer; }
.inv-seg button.on { background: var(--surface-2); color: var(--text); }
/* Selector de jugadores del inventario (ver el de los demás) */
/* padding vertical: el aro dorado (.on) sobresale y overflow-x lo recortaría arriba/abajo */
.inv-players { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.inv-players::-webkit-scrollbar { display: none; }
.inv-pl { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.inv-pl.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.inv-pl .avatar { width: 26px; height: 26px; }
.inv-pl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.inv-pl-dot.al { background: var(--success); }
.inv-pl-dot.el { background: var(--danger); }
.inv-sum { display: flex; gap: 8px; margin-bottom: 14px; }
.inv-stat { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.inv-big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.inv-big.g { color: var(--success); }
.inv-cap { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.inv-note { font-size: var(--fs-2); color: var(--text-2); line-height: 1.5; margin: 0 0 14px; }
.inv-grouplbl { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); margin: 16px 0 8px; }
.inv-chips { display: flex; flex-direction: column; gap: 8px; }
.inv-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); }
.inv-chip.dim { opacity: .6; }
.inv-chip.f1 .drv-photo { width: 26px; height: 26px; }
.inv-chip.f1 .msr { font-size: 20px; color: var(--text-3); }
.inv-name { font-size: var(--fs-4); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-st { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.inv-st.avail { color: var(--success); background: var(--success-weak); }
.inv-st.draft { color: var(--analysis); background: var(--analysis-weak); }
.inv-st.used { color: var(--text-3); background: var(--surface-2); }
/* ── Vista "Por equipo": escasez del grupo ── */
.inv-seg3 button { font-size: var(--fs-2); padding: 8px 4px; }
.tm-insight { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 2px 0 16px; }
.tm-insight b { color: var(--text); font-weight: 700; }
.tm-hl { color: var(--success); font-weight: 700; }
.tm-lbl { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.tm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 10.5px; color: var(--text-3); margin: 0 2px 10px; }
.tm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tm-legend i { width: 9px; height: 9px; border-radius: 2px; }
.tm-legend i.o { background: var(--primary); }
.tm-legend i.g { background: var(--success); }
.tm-legend i.gold { background: var(--gold); }
.tm-legend .tm-star { font-size: 13px; }
.tm-list { display: flex; flex-direction: column; }
.tm-row { border-bottom: 1px solid var(--border); }
.tm-row.open { background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: 12px; border-bottom-color: transparent; }
.tm-head { display: flex; flex-direction: column; gap: 9px; width: 100%; background: none; border: 0; cursor: pointer; padding: 12px 6px; font-family: inherit; text-align: left; }
.tm-line1 { display: flex; align-items: center; gap: 11px; width: 100%; }
.tm-crest { flex-shrink: 0; display: inline-flex; }
.tm-crest img, .tm-crest .crest { width: 30px; height: 30px; }
.tm-name { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-name.struck { color: var(--text-3); text-decoration: line-through; }
.tm-star { font-size: var(--fs-4); color: var(--gold); }
.tm-mytag { font-size: 10px; font-weight: 800; border-radius: 20px; padding: 2px 7px; letter-spacing: .02em; flex-shrink: 0; }
.tm-mytag.used { color: var(--text-3); background: var(--surface-2); }
.tm-mytag.part { color: var(--primary); background: var(--primary-weak); }
.tm-mytag.draft { color: var(--analysis); background: var(--analysis-weak); }
.tm-count { flex-shrink: 0; font-size: var(--fs-4); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.tm-count .tm-den { color: var(--text-3); font-weight: 600; }
.tm-starslot { flex-shrink: 0; width: 18px; text-align: center; }
.tm-bar { display: block; width: 100%; height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.tm-bar i { display: block; height: 100%; border-radius: 5px; }
.tm-bar i.o { background: var(--primary); }
.tm-bar i.g { background: var(--success); }
.tm-bar i.gold { background: var(--gold); }
.tm-detail { padding: 2px 6px 14px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-chip { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 5px 11px; border: 1px solid var(--border); }
.tm-chip.free { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.tm-chip.used { color: var(--text-3); background: var(--surface-2); }
/* Bloque COLAPSABLE de equipos sin usar (nadie los ha quemado) */
.tm-intact { margin-top: 12px; border-top: 1px solid var(--border); }
.tm-intact-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; cursor: pointer; padding: 13px 4px; font-family: inherit; }
.tm-intact-h { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); }
.tm-intact-strong { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-2); font-weight: 800; color: var(--gold); }
.tm-intact-chev { margin-left: auto; color: var(--text-3); transition: transform .15s var(--ease); }
.tm-intact.open .tm-intact-chev { transform: rotate(180deg); }
.tm-intact-rows { padding-bottom: 4px; }   /* filas completas (mismo formato); [hidden] las oculta */
/* ── Vista "Por jugador": fuertes restantes por jugador ── */
.pj-hl { color: var(--gold); font-weight: 700; }
.pj-list { display: flex; flex-direction: column; }
.pj-row { border-bottom: 1px solid var(--border); }
.pj-row.open { background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: 12px; border-bottom-color: transparent; }
/* head en flex-WRAP: avatar + nombre + escudos usados. El contador va ABSOLUTO arriba-derecha
   (no baja con los escudos). padding-right reserva su lugar. */
.pj-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; background: none; border: 0; cursor: pointer; padding: 11px 54px 11px 6px; font-family: inherit; text-align: left; }
/* avatar + nombre + flecha = acceso al perfil; el resto de la fila expande la despensa */
.pj-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.pj-go { color: var(--text-3); opacity: .55; flex: 0 0 auto; margin-left: -2px; }
.pj-av { flex-shrink: 0; margin-right: 3px; }
.pj-av .avatar { width: 38px; height: 38px; font-size: var(--fs-4); }
/* escudos usados: bloque ATÓMICO (nowrap) pegado a la derecha; cabe en la línea del nombre o baja
   COMPLETO a la 2ª línea (también a la derecha). Nunca se parte. */
.pj-ucs { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; }
.pj-uc { display: inline-flex; flex-shrink: 0; }
.pj-uc .crest, .pj-uc img { width: 22px; height: 22px; }
.pj-umore { font-size: 12px; font-weight: 700; color: var(--text-3); flex-shrink: 0; }
/* .stacked = si a algún jugador le bajaron los escudos, se los bajamos a TODOS (2ª línea, derecha) */
.pj-list.stacked .pj-ucs { flex-basis: 100%; justify-content: flex-end; }
.pj-name { flex: 0 1 auto; min-width: 0; max-width: 55%; font-size: var(--fs-4); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-name.struck { color: var(--text-3); text-decoration: line-through; }
.pj-pips { display: inline-flex; gap: 3px; flex-shrink: 0; }
.pj-pips i { width: 11px; height: 15px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border-strong); }
.pj-pips i.on { background: var(--gold); border-color: var(--gold); }
/* contador FIJO arriba-derecha (línea del nombre); no baja con los escudos */
.pj-count { position: absolute; right: 8px; top: 11px; height: 38px; line-height: 38px; font-size: var(--fs-3); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.pj-count.low b { color: var(--primary); }
.pj-count .pj-den { color: var(--text-3); font-weight: 600; }
.pj-row.dead .pj-head { padding-right: 6px; }   /* muertos: una línea, sin espacio para escudos */
.pj-out { margin-left: auto; flex-shrink: 0; font-size: var(--fs-2); font-weight: 700; color: var(--text-3); background: var(--surface-2); border-radius: 20px; padding: 3px 9px; }
.pj-detail { padding: 4px 6px 16px; }
.pj-dtitle { font-size: var(--fs-4); font-weight: 700; color: var(--text); margin: 2px 0 12px; }
.pj-free { color: var(--gold); }
.pj-glbl { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-3); margin: 14px 0 8px; }
.pj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pj-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pj-card .pj-cav { display: inline-flex; }
.pj-card .pj-cav img, .pj-card .pj-cav .crest { width: 30px; height: 30px; }
.pj-cn { font-size: var(--fs-2); font-weight: 700; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pj-card.used { opacity: .5; }
.pj-card.used .pj-cn { text-decoration: line-through; color: var(--text-3); }
.pj-card.used .pj-ctag { color: var(--text-3); background: var(--surface-2); }
.pj-card.part { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pj-card.part .pj-ctag { color: var(--primary); background: var(--primary-weak); }
.pj-grid.strong .pj-card.free { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.pj-grid.strong .pj-card.free .pj-cn { color: var(--gold); }
.pj-card.draft { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.pj-card.draft .pj-cn { color: var(--success); }
.pj-ctag { position: absolute; top: 6px; right: 6px; font-size: 9.5px; font-weight: 800; color: var(--success); background: var(--success-weak); border-radius: 20px; padding: 1px 6px; }
.pj-priv { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 14px 0 0; display: flex; gap: 6px; }
.pj-priv .msr { font-size: 15px; flex-shrink: 0; }
/* disparador: el "vs" del partido, tocable, en ámbar para resaltar el análisis */
.vs-analysis { font-family: inherit; cursor: pointer; border: 1px solid var(--analysis);
  background: transparent; color: var(--analysis); border-radius: var(--radius-pill); padding: 3px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; transition: background var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 3px; }
.vs-analysis .msr { font-size: 14px; letter-spacing: 0; }
.vs-analysis:active { background: var(--analysis-weak); }
@media (hover: hover) { .vs-analysis:hover { background: var(--analysis-weak); } }
.plan-match .plan-vs.vs-analysis { min-width: 0; color: var(--analysis); }

/* Solicitudes pendientes de pago: nombre/email + acciones, apilables en móvil */
.pending-list { margin-top: 8px; }
.pending-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pending-row:last-child { border-bottom: none; }
.pending-row .player-cell { flex: 1 1 160px; min-width: 0; }
.pending-who { min-width: 0; }
.pending-who > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-email { font-size: 12px; color: var(--text-dim); }
.pending-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
  .pending-actions { width: 100%; }
  .pending-actions .btn { flex: 1; justify-content: center; }
}
.cal-hint, .pick-hint { font-size: var(--fs-2); color: var(--text-2); margin: -6px 0 12px; }
/* el "vs" del hint se ve igual que la píldora que se toca, en ámbar para que resalte */
.vs-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--analysis); color: var(--analysis);
  background: transparent; border-radius: var(--radius-pill); padding: 1px 8px; margin: 0 1px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; vertical-align: middle; }
.vs-chip .msr { font-size: 13px; letter-spacing: 0; }

/* ============ Crónica · recap "cómo nos fue" (Archivo + tabular-nums, sin Anton) ============ */
.rcp-curve { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 16px 16px 14px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.rcp-clbl { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.rcp-clbl b { color: var(--success); }
/* Barras estándar (4 casos): verde = personas, dorado encima = colchón de vidas. Ancho mínimo
   por barra + scroll horizontal cuando hay muchas jornadas (arranca en las últimas). */
.rcp-steps-wrap { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.rcp-steps-wrap::-webkit-scrollbar { height: 0; }
/* Difuminar el borde que tiene columnas ocultas por el scroll (evita cortar el número en seco) */
.rcp-steps-wrap.fade-l:not(.fade-r) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px); mask-image: linear-gradient(90deg, transparent 0, #000 24px); }
.rcp-steps-wrap.fade-r:not(.fade-l) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
.rcp-steps-wrap.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
/* Tablas: SOLO se difumina el borde DERECHO (hay más → scrollea). El izquierdo NUNCA, para
   no apagar la franja de estado (verde/rojo) ni las columnas fijas al scrollear a la derecha. */
.table-scroll.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
.rcp-steps { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; padding-top: 4px; }
.rcp-steps.ml { gap: 14px; }   /* multivida: más aire para separar los pares verde+dorado; una sola vida no lo necesita */
.rcp-sp { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; }
.rcp-plot { height: 96px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.rcp-plat { display: flex; flex-direction: column; border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.rcp-grn, .rcp-gold { display: flex; align-items: center; justify-content: center; overflow: visible; }
.rcp-grn { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 34%, transparent), color-mix(in srgb, var(--success) 12%, transparent)); border-top: 2px solid var(--success); border-radius: 0 0 3px 3px; }
.rcp-gold { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 42%, transparent), color-mix(in srgb, var(--gold) 18%, transparent)); border-top: 2px solid var(--gold); border-radius: 3px 3px 0 0; }
/* números DENTRO de su segmento: vidas en el dorado, gente en pie en el verde */
.rcp-nl, .rcp-np { font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
/* Dos barras separadas (personas/vidas), cada una a su propio tope, número arriba */
.rcp-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.rcp-b { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; flex: 1; min-width: 0; }
.rcp-b .rcp-bn { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; margin-bottom: 2px; }
.rcp-b i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.rcp-b.grn i { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 55%, transparent), color-mix(in srgb, var(--success) 20%, transparent)); border-top: 2px solid var(--success); }
.rcp-b.grn .rcp-bn { color: var(--success); }
.rcp-b.gold i { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, transparent), color-mix(in srgb, var(--gold) 20%, transparent)); border-top: 2px solid var(--gold); }
.rcp-b.gold .rcp-bn { color: var(--gold); }
.rcp-lblw { position: relative; margin-top: 8px; }
.rcp-lbl { text-align: center; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
/* recompra a la ALTURA de la etiqueta (J1/GP12…), anclada a la FRONTERA entre la jornada anterior y esta */
.rcp-rev-foot { position: absolute; left: -2px; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; color: var(--duel-a); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcp-rev-foot .msr { font-size: 13px; }
.rcp-clbl .grn { color: var(--success); }
.rcp-clbl .gold { color: var(--gold); }
.rcp-clbl .sep { color: var(--text-3); }
.rcp-leg { display: flex; gap: 16px; margin-top: 10px; font-size: var(--fs-2); color: var(--text-2); }
.rcp-leg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.rcp-leg i.grn { background: var(--success); }
.rcp-leg i.gold { background: var(--gold); }
.rcp-leg i.rev { width: 8px; height: 8px; border-radius: 50%; background: var(--duel-a); }
.rcp-cap { font-size: var(--fs-2); color: var(--text-2); line-height: 1.55; margin-top: 11px; }
.rcp-cap b { color: var(--text); font-weight: 700; }
/* Detalle por jornada = los 4 personajes, en un sheet deslizable (botón estilo estadísticas) */
.rcp-pj { margin-top: 12px; display: flex; justify-content: flex-end; }
.rcp-mos { display: flex; flex-direction: column; gap: 8px; }
.rcp-mo { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; }
.rcp-mo-t { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.rcp-mo-row { display: flex; gap: 11px; align-items: flex-start; }
.rcp-mo-l { flex: 0 0 auto; }
.rcp-mo-l .avatar.rcp-mo-av { width: 40px; height: 40px; font-size: var(--fs-4); font-weight: 800; border-radius: 11px; }
/* avatar tipo "chip": fondo tintado + borde + INICIALES del tono (no blancas). Tonos de marca. */
.rcp-mo.red .rcp-mo-av { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--primary) 55%, transparent); color: var(--primary); }
.rcp-mo.green .rcp-mo-av { background: color-mix(in srgb, var(--success) 20%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--success) 55%, transparent); color: var(--success); }
.rcp-mo.gold .rcp-mo-av { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); }
/* tono NEUTRO (quiniela: rebase / marcador exacto): avatar gris, no de marca */
.rcp-mo.neutral .rcp-mo-av { background: var(--surface-2); border: 1.5px solid var(--border-strong); color: var(--text-2); }
/* manada = cuadros (pips): count en dorado sobre el total del grupo */
.rcp-mo-pips { display: flex; gap: 5px; margin: 0 0 9px; }
.rcp-mo-pips i { flex: 1; height: 24px; max-width: 40px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border-strong); }
.rcp-mo-pips i.on { background: var(--gold); border-color: var(--gold); }
.rcp-mo-x { min-width: 0; font-size: var(--fs-3); color: var(--text-2); line-height: 1.5; }
.rcp-mo-x b { color: var(--text); font-weight: 700; }
.rcp-mo-x .pj-prob { color: var(--gold); font-weight: 800; }

.rcp-jr { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 15px 16px; margin-bottom: 11px; box-shadow: var(--shadow-sm); }
.rcp-jr.flat { padding: 12px 16px; }
.rcp-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rcp-jr.flat .rcp-top { margin-bottom: 0; }
.rcp-num { font-weight: 800; font-size: 11px; letter-spacing: .09em; color: var(--gold); text-transform: uppercase; }
.rcp-dt { font-size: var(--fs-2); color: var(--text-3); }
/* delta en la esquina sup-derecha, FUERA del flujo: su altura (1 o 2 líneas) no empuja el título */
.rcp-delta { position: absolute; top: 15px; right: 16px; font-size: 12px; font-weight: 800; }
.rcp-delta.d { color: var(--primary); }
.rcp-delta.s { color: var(--success); }
.rcp-delta.rev { color: var(--duel-a); }   /* +N revive (morado del badge) */
.rcp-delta.multi { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.3; }   /* delta doble apilado: fuera arriba, vidas abajo */
.rcp-delta .po { color: var(--primary); }
.rcp-delta .pl { color: var(--gold); }
.rcp-delta .pr { color: var(--duel-a); }
.rcp-h { font-weight: 800; font-size: var(--fs-5); line-height: 1.25; letter-spacing: -.005em; margin-bottom: 7px; color: var(--text); text-transform: uppercase; }
.rcp-who { font-size: 13px; color: var(--text-2); line-height: 1.55; font-variant-numeric: tabular-nums; }
.rcp-who b { color: var(--text); font-weight: 700; }
/* tono del titular por caso (card + sheet); neutral = --text por defecto, sin regla */
/* El titular usa solo ember/verde/blanco; el dorado queda reservado para kicker y botones. */
.rcp-h.tone-bad, .rcp-sheet-h.tone-bad { color: var(--primary); }
.rcp-h.tone-good, .rcp-sheet-h.tone-good { color: var(--success); }
.rcp-h.tone-gold, .rcp-sheet-h.tone-gold { color: var(--gold); }
.rcp-final { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.rcp-final .msr { font-size: 12px; }
/* header del sheet de Eventos: jornada + titular del caso + "N en pie de M" (misma tipografía) */
.rcp-sheet-hd { margin-bottom: 16px; }
.rcp-sheet-kick { font-weight: 800; font-size: 11px; letter-spacing: .09em; color: var(--gold); text-transform: uppercase; }
.rcp-sheet-h { font-weight: 800; font-size: var(--fs-5); line-height: 1.25; letter-spacing: -.005em; margin: 5px 0 7px; color: var(--text); text-transform: uppercase; }
.rcp-sheet-alive { font-size: var(--fs-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.rcp-sheet-alive b { color: var(--text); font-weight: 800; }
.rcp-revd { color: var(--duel-a); font-weight: 700; }   /* revivió — morado del badge */
/* franja de recompra entre jornadas (⟲) + badge "volvió" en la fila del afectado */
.rcp-strip { display: flex; align-items: center; gap: 11px; padding: 2px 6px 13px; }
.rcp-strip-dot { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--revived-weak); border: 1.5px solid var(--revived-border); color: var(--duel-a); line-height: 1; }
.rcp-strip-dot .msr { font-size: 15px; }
.rcp-strip-cp { min-width: 0; display: flex; flex-direction: column; }
.rcp-strip-t { font-size: var(--fs-2); line-height: 1.3; color: var(--text-2); }
.rcp-strip-t b { color: var(--duel-a); font-weight: 700; }
.rcp-strip-s { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.rcp-rb { display: inline-flex; align-items: center; padding: 1px 3px; border-radius: 5px; background: var(--revived-weak); border: 1px solid var(--revived-border); color: var(--duel-a); margin-left: 5px; flex: 0 0 auto; vertical-align: middle; }
.rcp-rb .msr { font-size: 13px; }
/* eliminados agrupados por equipo (tipo marcador): escudo+equipo · ✕N · AVATARES.
   Los nombres (detalle) están ocultos y salen al hacer click en la fila. */
.rcp-elims { margin: 6px 0 10px; }
.rcp-elim { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.rcp-elim:not(:first-child) { border-top: 1px solid var(--border); }
.rcp-elim.open { background: var(--surface-2); }
.rcp-elim-t { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.rcp-elim-x { flex: 0 0 auto; color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.rcp-elim-av { flex: 1; min-width: 0; display: flex; align-items: center; }
.rcp-elim-av .avatar.rcp-av { width: 24px; height: 24px; font-size: 9.5px; margin-left: -7px; border: 1.5px solid var(--surface); }
.rcp-elim-av .avatar.rcp-av:first-child { margin-left: 0; }
.rcp-elim-n { flex-basis: 100%; min-width: 0; color: var(--text-2); line-height: 1.5; display: none; margin-top: 2px; }
.rcp-elim.open .rcp-elim-n { display: block; }
/* grupo "Sin pick": los que cayeron por no elegir, separados con un divisor */
.rcp-elim-div { height: 1px; background: var(--border-strong); margin: 8px -8px 2px; }
.rcp-elim.nopick { border-top: none; }
.rcp-nopick { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-weight: 700; }
.rcp-elim.nopick .rcp-elim-x { color: var(--text-3); }
/* pips de vidas por persona: 🟩 base viva · 🟪 comprada/revive viva · ⬜ gastada */
.rcp-pips { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.rcp-pips i { width: 12px; height: 12px; border-radius: 3px; box-sizing: border-box; }
.rcp-pips i.have { background: var(--success); }
.rcp-pips i.buy { background: var(--duel-a); }
.rcp-pips i.spent { background: transparent; border: 1.5px solid var(--border-strong); }
/* bloque de afectados (multi-vida), expandible: colapsado = avatares+resumen, abierto = lista */
.rcp-aff { margin: 6px 0 10px; cursor: pointer; }
.rcp-aff-hd { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.rcp-aff-avs { display: flex; align-items: center; }
.rcp-aff-avs .avatar.rcp-av { width: 24px; height: 24px; font-size: 9.5px; margin-left: -7px; border: 1.5px solid var(--surface); }
.rcp-aff-avs .avatar.rcp-av:first-child { margin-left: 0; }
.rcp-aff-more { font-size: 11px; font-weight: 700; color: var(--text-2); margin-left: 4px; }
.rcp-aff-sum { font-size: 13px; color: var(--text-2); font-weight: 600; }
.rcp-aff-chev { margin-left: auto; color: var(--text-3); font-size: 20px; }
.rcp-aff.open .rcp-aff-chev { transform: rotate(180deg); }
.rcp-aff.open .rcp-aff-avs { display: none; }
.rcp-aff-list { display: none; margin-top: 2px; }
.rcp-aff.open .rcp-aff-list { display: block; }
.rcp-aff-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.rcp-aff-row:not(:first-child) { border-top: 1px solid var(--border); }
.rcp-aff-who { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; }
.rcp-aff-who .avatar.rcp-av { width: 22px; height: 22px; font-size: 9px; flex: 0 0 auto; }
.rcp-aff-who b { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rcp-aff-tm { flex: 0 0 auto; display: inline-flex; align-items: center; }
.rcp-aff-tm .crest, .rcp-aff-tm .drv-photo { width: 20px; height: 20px; font-size: 8px; }
.rcp-aff-st { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gold); }
.rcp-aff-st.out { color: var(--primary); }
.rcp-aff-sec { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); margin: 9px 0 4px; }
.rcp-aff-sec.soft { color: var(--text-3); }
.rcp-aff-list > .rcp-aff-sec:first-child { margin-top: 2px; }
.rcp-lite { font-size: var(--fs-2); color: var(--text-2); margin-top: 5px; }
.rcp-lite b { color: var(--text); }
/* conteo del roster (como el mockup): verde en pie · rojo cayó esa jornada · gris antes */
.rcp-mini { display: flex; gap: 3px; margin-top: 12px; height: 10px; }
.rcp-mini i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--success) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 72%, var(--surface)); }
.rcp-mini i.wound { background: color-mix(in srgb, var(--gold) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 72%, var(--surface)); }   /* herido = oro apagado (perdió una vida, sigue vivo) */
.rcp-mini i.new { background: var(--primary); border-color: var(--primary); }
.rcp-mini i.old { background: var(--surface-2); border: 1px solid var(--border-strong); }
.rcp-mnd { font-size: 12px; color: var(--text-2); margin-top: 9px; font-variant-numeric: tabular-nums; }
.rcp-mnd b { color: var(--text); font-weight: 700; }
.rcp-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--text-3); margin: 8px 2px 0; }
.rcp-legend.key { margin: 0 2px 14px; }
.rcp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.rcp-legend .a { background: color-mix(in srgb, var(--success) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 72%, var(--surface)); }
.rcp-legend .w { background: color-mix(in srgb, var(--gold) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 72%, var(--surface)); }
.rcp-legend .n { background: var(--primary); }
.rcp-legend .o { background: var(--surface-2); border: 1px solid var(--border-strong); }

/* ============================================================
   Navegación transversal (HU-1) + Pantalla Actividad (HU-2/3)
   Todo aditivo — no altera estilos existentes.
   ============================================================ */
.nav-add { color: var(--primary) !important; }
@media (max-width: 720px) {
  .bottom-nav .nav-plus {
    flex: none; width: 52px; height: 52px; margin: 0 8px; border-radius: 16px;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; align-self: center;
    box-shadow: 0 6px 16px rgba(240, 85, 45, .40);
    transition: transform var(--t-fast) var(--ease);
  }
  .bottom-nav .nav-plus .msr { font-size: 28px; }
  .bottom-nav .nav-plus:active { transform: scale(.94); }
  .bottom-nav .nav-plus-spacer { flex: 1; background: none; border: none; pointer-events: none; }
}
/* hoja del (+) */
.cj-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-family: inherit; color: var(--text);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.cj-opt:active { transform: scale(.99); }
@media (hover: hover) { .cj-opt:hover { border-color: var(--border-strong); } }
.cj-opt .cj-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); }
.cj-opt .cj-ic.ember { background: var(--primary-weak); color: var(--primary); }
.cj-opt .cj-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cj-opt .cj-tx small { line-height: 1.35; }
.cj-opt .cj-tx b { font-size: var(--fs-4); font-weight: 700; }
.cj-opt .cj-tx small { font-size: var(--fs-2); color: var(--text-2); }
.cj-opt .cj-arw { color: var(--text-3); flex: none; }

/* Popover del FAB (+): menú corto anclado al botón (reemplaza la hoja en móvil) */
.cj-pop-overlay { position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, .5); }
.cj-pop { position: fixed; z-index: 90; padding: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45);
  transform-origin: bottom right; opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.cj-pop.in { opacity: 1; transform: translateY(0) scale(1); }
/* dentro del popover las opciones van sin borde propio, separadas por una línea */
.cj-pop .cj-opt { background: none; border: 0; border-radius: 12px; margin: 0; padding: 13px 12px; }
.cj-pop .cj-opt + .cj-opt { border-top: 1px solid var(--border); border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .cj-pop { transition: none; opacity: 1; transform: none; } }
/* la nav (con el ✕) queda POR ENCIMA del dim para verse y poder cerrar; el + gira 45° → ✕ */
.bottom-nav.nav-float.cj-open { z-index: 89; }
.nav-float .nav-fab .msr { transition: transform .2s var(--ease); }
.nav-float .nav-fab.open .msr { transform: rotate(45deg); }
.nav-float .nav-fab:focus:not(:focus-visible) { outline: none; }   /* sin aro dorado al tocar/click */
/* barra "En vivo" de Actividad */
.act-live { display: flex; flex-direction: column; gap: 12px; background: var(--primary-weak);
  border: 1px solid var(--primary-border); border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 16px; cursor: pointer; }
.act-live .al-head { display: flex; align-items: center; gap: 10px; }
.act-live .al-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: none; animation: pulseHi 1.8s infinite; }
.act-live .al-tx { flex: 1; font-size: var(--fs-4); color: var(--text); }
.act-live .al-arw { color: var(--primary); flex: none; }
.act-live .al-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.act-live .al-c { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 4px; }
.act-live .al-c b { display: block; font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.act-live .al-c span { display: block; font-size: 9.5px; color: var(--text-2); margin-top: 3px; }
.act-live .al-c.win b { color: var(--success); }
.act-live .al-c.tie b { color: var(--text-2); }
.act-live .al-c.lose b { color: var(--danger); }
.act-live .al-soon { font-size: 11px; color: var(--text-3); text-align: center; margin: 7px 0 0; }
/* "En curso" gris (todo por jugar): sin ember, punto gris, sin pulso */
.act-live.gray { background: var(--surface); border-color: var(--border); }
/* "Listo por ahora": no navega (sin flecha) → cursor normal */
.act-live.listo { cursor: default; }
/* con sub bajo cada escudo (día/marcador), dar aire al pie para que no se pegue */
.act-live.listo .al-sched { margin-top: 8px; }
.act-live.gray .al-dot { background: var(--text-3); animation: none; }
.act-live.gray .al-arw { color: var(--text-3); }
/* fallback 1 survivor: card del partido de mi pick */
.act-live .al-pick { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--border); }
.act-live:not(.gray) .al-pick { border-top-color: var(--primary-border); }   /* Fase 3 ember: divisor ember */
/* Mismo tamaño que el escudo de "En curso" (.enc-crestbox): caja 46, escudo 38, logo 32. */
.act-live .al-crest { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.act-live .al-crest .crest { width: 38px; height: 38px; font-size: 13px; }
.act-live .al-crest .crest img, .act-live .al-crest img { width: 32px; height: 32px; object-fit: contain; }
.act-live .al-crest > .msr { font-size: 30px; color: var(--text-2); }
.act-live .al-pk-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act-live .al-pk-team { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.01em; }
.act-live .al-pk-sub { font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-live .al-pk-state { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.act-live .al-pk-state .msr { font-size: 14px; }
.al-pk-state.soon, .al-pk-state.tie { background: var(--surface-2); color: var(--text-2); }
.al-pk-state.done { background: var(--surface-2); color: var(--text-2); }
.al-pk-state.live { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); }
.al-pk-state.win { background: var(--success-weak); color: var(--success); }
.al-pk-state.lose { background: var(--danger-weak); color: var(--danger); }
/* fallback N survivors: escudos de mis equipos + "Empiezan el …" (el gap del .act-live ya separa) */
.act-live .enc-crests { display: flex; align-items: flex-start; gap: 10px; }
.act-live .enc-crest { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.act-live .enc-crestbox { position: relative; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
/* pista tenue del anillo (el "resto por llenar"): faltaba en la card de En curso;
   mismo tratamiento que el pick (.pkc-crest.live) y la tabla (.tmc-crest.live). */
.act-live .enc-crestbox.live { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 26%, transparent); }
.act-live .enc-crestbox .crest { width: 38px; height: 38px; font-size: 13px; }
.act-live .enc-crestbox .crest.logo img { width: 32px; height: 32px; }
/* F1: foto/ícono del piloto dentro del escudo de "En curso" */
.act-live .enc-crestbox .enc-drv { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.act-live .enc-crestbox .enc-drvph { display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.act-live .enc-crestbox .enc-drvph .msr { font-size: 20px; }
.act-live .enc-crestbox .enc-qic { font-size: 20px; }   /* quiniela: emoji/ícono del grupo en el círculo */
.act-live .enc-badge.qpts { font-size: 9.5px; }         /* badge de puntos (2-3 dígitos) un pelín más chico */
/* bloque "vas N.º": movimiento bajo el número (donde survivor pone el minuto) — flecha por posición */
.act-live .qm { display: inline-flex; align-items: center; justify-content: flex-end; gap: 1px; font-weight: 700; }
.act-live .qm .msr { font-size: 13px; }
.act-live .qm.qm-up { color: var(--success); }
.act-live .qm.qm-down { color: var(--danger); }
.act-live .qm.qm-flat { color: var(--text-3); }
/* Página 0 del carrusel "En curso": una card por grupo (reusa .act-live/.al-pick/átomo) */
.xc-cross-cards { display: flex; flex-direction: column; gap: 10px; }
.act-live.xc-ccard { margin-bottom: 0; }
.xc-cc-head { display: flex; align-items: center; gap: 8px; }
.xc-cc-nm { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-cc-arw { color: var(--text-3); flex: none; font-size: 20px !important; }
.xcav-badge.qpts { font-size: 9px; }
/* card de varios survivors con el mismo equipo: emojis apilados + contador + "ver más" desplegable */
.xc-cc-emojis { display: inline-flex; align-items: center; flex: none; }
.xc-sv-emoji { font-size: 17px; line-height: 1; }
.xc-cc-emojis .xc-sv-emoji { margin-left: -5px; }
.xc-cc-emojis .xc-sv-emoji:first-child { margin-left: 0; }
.xc-sv-cnt { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 4px; }
.act-live .xc-sv-more { flex: none; color: var(--text); }   /* arena (no ember), el estándar */
.xc-sv-list { display: none; flex-direction: column; margin-top: 8px; }
.xc-sv-list.on { display: flex; }
.xc-sv-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; background: none; border: 0; width: 100%; text-align: left; color: var(--text); font-size: var(--fs-3); cursor: pointer; }
.xc-sv-row .xc-sv-emoji { font-size: 15px; }
.xc-sv-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-live .enc-drvname { display: block; font-size: 10px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; text-align: center; }
/* anillo dorado de progreso (arranca arriba con rotate -90) */
.act-live .enc-ring { position: absolute; inset: 0; width: 46px; height: 46px; pointer-events: none; }
.act-live .enc-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 23px 23px; }
/* A5: anillo punteado gris (pospuesto) — estático, sin progreso */
.enc-ring-dot { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-dasharray: 2.5 4; stroke-linecap: round; opacity: .5; }
/* badge de estado sobre el escudo (abajo-derecha) */
.act-live .enc-badge { position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--primary-weak); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; }
.act-live.gray .enc-badge, .act-live.listo .enc-badge { border-color: var(--surface); }
.act-live .enc-badge.win { background: var(--success); color: #06140d; }
.act-live .enc-badge.lose { background: var(--danger); color: #1a0707; }
.act-live .enc-badge.tie { background: var(--text-2); color: var(--bg); }
.act-live .enc-badge .msr { font-size: 12px; }
.act-live .enc-cnt { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 2px solid var(--primary-weak); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.act-live.gray .enc-cnt, .act-live.listo .enc-cnt { border-color: var(--surface); }
.act-live .enc-score { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.act-live .listo-day { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: lowercase; }
/* Nombre del rival bajo el escudo (duelos): la minúscula de .listo-day es para el día ("sáb"), un
   nombre propio no se escribe "ana". Se corta con … si no cabe en el ancho del escudo (46px). */
.act-live .listo-day.enc-rival { text-transform: none; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A5: nota de estado del partido (pospuesto/cancelado), gris muted — nunca rojo */
.act-live .enc-note { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; }
.act-live .enc-more { width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 700; }
.act-live .al-sched { font-size: 13px; color: var(--text-2); margin: 0; }
.act-live .al-sched b { color: var(--text); font-weight: 700; }
/* secciones + tarjetas de Actividad */
.act-sec { margin-bottom: 20px; }
.act-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.act-head .msr { font-size: 16px; }
.act-toggle { cursor: pointer; user-select: none; }
.act-caret { margin-left: auto; font-size: 18px !important; transition: transform var(--t) var(--ease); }
.act-sec.collapsed .act-caret { transform: rotate(180deg); }
.act-sec.collapsed .act-cards { display: none; }
.act-sec-ember .act-head, .act-sec-ember .act-head .msr { color: var(--primary); }
.act-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
@media (hover: hover) { .act-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } }
/* "Te toca" (picks) por tier de urgencia: gris >72h · gris+timer ámbar+botón ember 1-72h · ember <1h */
.act-pick .act-b { flex: 1; min-width: 0; }
.act-pick .act-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* el nombre trunca con ellipsis; la jornada (·JX) nunca se parte → el título va en UNA línea */
.act-pick .act-nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.act-pick .act-nm-r { flex: none; white-space: nowrap; }
.act-pick .act-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-pick .cd { font-weight: 700; color: var(--text-2); }
.act-pick.t-mid .cd { color: var(--gold); }
.act-pick.t-near .cd { color: var(--primary); }
.act-pick.t-near { background: var(--primary-weak); border-color: var(--primary-border); }
/* mismo rectángulo que "Revisar" (.btn); solo cambia el color por tier */
.act-elegir { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
.act-pick.t-mid .act-elegir, .act-pick.t-near .act-elegir { background: var(--primary); border-color: var(--primary); color: #fff; }
/* "En tus survivors" agrupado: una tarjeta por survivor con sus jornadas y eventos */
.act-svgroup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
@media (hover: hover) { .act-svgroup:hover { border-color: var(--border-strong); transform: translateY(-1px); } }
.act-svgroup .act-svhead { display: flex; align-items: center; gap: 8px; }
.act-svgroup .act-svnm { flex: 1; min-width: 0; font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.act-svgroup .act-meta { flex: none; display: flex; align-items: center; gap: 5px; }
.act-svrounds { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.act-svmore { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.act-svmore[hidden] { display: none; }
.act-svround { display: flex; align-items: flex-start; gap: 10px; }
/* ancho FIJO del chip de jornada para que TODO lo de su derecha alinee (GP22 == J3) */
.act-rlbl { flex: none; width: 48px; box-sizing: border-box; margin-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--text-2); background: var(--surface-2); border-radius: 6px; padding: 2px 4px; text-align: center; }
.act-revs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.act-ev { display: flex; align-items: center; gap: 7px; font-size: var(--fs-3); color: var(--text); }
.act-evic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; }
.act-evic .msr { font-size: 14px; }
.act-evic.green { background: var(--success-weak); color: var(--success); }
.act-evic.red { background: var(--danger-weak); color: var(--danger); }
.act-evic.amber { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); }
.act-evic.gray { background: var(--surface-2); color: var(--text-3); }
/* fila-expander: chip con el rango de jornadas ocultas + chevron, con línea de separación arriba */
.act-svxrow { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); cursor: pointer; }
.act-xrange { width: auto; min-width: 48px; padding-left: 8px; padding-right: 8px; }
.act-xlabel { font-size: 12px; font-weight: 600; color: var(--text-3); }
.act-svmore { margin-top: 5px; }
.act-xcaret { margin-left: auto; color: var(--text-3); font-size: 20px; }
/* badge Ganaste/Perdiste: absoluto, no agranda la card */
.act-svgroup { position: relative; }
.act-svbadge { position: absolute; top: 0; right: 0; }   /* alineado con la 1ª jornada, a la derecha */
/* estados vacíos de Actividad: card con copy y (A) botones unirme/crear */
.act-empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: 18px 16px; margin-top: 4px; }
.act-empty h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
.act-empty p { font-size: var(--fs-3); color: var(--text-2); margin: 0; line-height: 1.45; }
.act-empty p b { color: var(--text); font-weight: 700; }
.act-empty-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.act-empty-btns .btn { flex: 1; min-width: 140px; justify-content: center; }

/* ===== Onboarding (estado vacío de Inicio y Actividad, sin ningún survivor) ===== */
.onb-ctas { display: flex; gap: 10px; margin: 6px 0 0; flex-wrap: wrap; }
.onb-ctas .btn { flex: 1; min-width: 160px; justify-content: center; }

.onb-block { margin-top: 26px; }
.onb-h2 { font-size: var(--fs-6); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.onb-tag { font-size: 12px; font-weight: 600; color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 3px 10px; letter-spacing: 0; }
.onb-foot { font-size: var(--fs-3); color: var(--text-3); margin: 16px 0 0; }

/* ===== "Cómo se juega": carrusel de 4 pasos ANIMADOS (solo transform/opacidad) ===== */
.onbst-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 2px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onbst-track::-webkit-scrollbar { display: none; }
.onbst-slide { flex: 0 0 88%; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px 16px; }
.onbst-scene { height: 132px; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.onbst-slide h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 0; }
.onbst-slide p { font-size: 13px; color: var(--text-2); margin: 4px 0 0; }
.onbst-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.onbst-dots button { width: 7px; height: 7px; border-radius: 4px; border: 0; background: var(--border-strong); cursor: pointer; padding: 0; transition: transform .25s var(--ease), background .25s var(--ease); }
.onbst-dots button.on { background: var(--text); transform: scaleX(1.7); }

/* escudos reales dentro de las escenas */
.onbst-pcr .crest, .onbst-bcr .crest { width: 100%; height: 100%; }
.onbst-pcr .crest.logo img { width: 38px; height: 38px; }
.onbst-bcr .crest.logo img { width: 42px; height: 42px; }

/* Paso 1: elegir sin repetir */
.onbst-picks { position: relative; display: flex; gap: 20px; padding-top: 14px; }
.onbst-pslot { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.onbst-pcr { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.onbst-pcr.big { transform: scale(1.08); }
.onbst-pcr.used { opacity: .4; }
.onbst-pcr.used::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--text); transform: rotate(-35deg); z-index: 1; }
.onbst-plbl { font-size: 11px; font-weight: 600; color: var(--text-3); height: 14px; }
.onbst-plbl.tu { color: var(--text); }
.onbst-sel { position: absolute; left: -5px; top: 9px; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--text); transform: translateX(72px); opacity: 0; }
.onbst-nope { position: absolute; left: -6px; top: -6px; font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; opacity: 0; }
.onbst-slide.play .onbst-sel { animation: onbst-sel 2.6s ease both; }
.onbst-slide.play .onbst-pcr.used.wiggle { animation: onbst-shake 2.6s ease both; }
.onbst-slide.play .onbst-nope { animation: onbst-nope 2.6s ease both; }
.onbst-slide.play .onbst-pcr.big { animation: onbst-pick 2.6s ease both; }
.onbst-slide.play .onbst-plbl.tu { animation: onbst-fadeLate 2.6s ease both; }
@keyframes onbst-sel { 0%{opacity:0;transform:translateX(0)} 10%,40%{opacity:1;transform:translateX(0)} 60%,100%{opacity:1;transform:translateX(72px)} }
@keyframes onbst-shake { 0%,14%{transform:translateX(0)} 18%{transform:translateX(-4px)} 22%{transform:translateX(4px)} 26%{transform:translateX(-3px)} 30%,100%{transform:translateX(0)} }
@keyframes onbst-nope { 0%,16%{opacity:0;transform:translateY(4px)} 22%,44%{opacity:1;transform:translateY(0)} 54%,100%{opacity:0} }
@keyframes onbst-pick { 0%,58%{transform:scale(1)} 68%{transform:scale(1.18)} 76%,100%{transform:scale(1.08)} }
@keyframes onbst-fadeLate { 0%,68%{opacity:0;transform:translateY(4px)} 80%,100%{opacity:1;transform:translateY(0)} }

/* Pasos 2 y 3: partido con anillo + marcador + resultado */
.onbst-match { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.onbst-bw { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.onbst-bring { position: absolute; inset: 0; width: 72px; height: 72px; transform: rotate(-90deg); opacity: 0; }
.onbst-trk { fill: none; stroke: var(--border); stroke-width: 3; }
.onbst-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.onbst-bcr { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
.onbst-bst { position: absolute; right: -2px; bottom: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); opacity: 0; }
.onbst-bst .msr { font-size: 15px; }
.onbst-bst.ok { background: var(--success); color: #06140d; }
.onbst-bst.x { background: var(--danger); color: #1a0707; }
.onbst-scores { position: relative; width: 74px; height: 16px; }
.onbst-sc { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; opacity: 0; }
.onbst-sc.k4 { opacity: 1; }
.onbst-res { font-size: var(--fs-4); font-weight: 600; display: flex; align-items: center; gap: 7px; height: 20px; }
.onbst-res.ok { color: var(--success); }
.onbst-res.bad { color: var(--text); }
.onbst-hb { position: relative; display: inline-flex; width: 18px; height: 18px; }
.onbst-hb .msr { position: absolute; left: 0; top: 0; font-size: 18px; color: var(--danger); }
.onbst-hb .hon { opacity: 0; }
.onbst-slide.play .r1 { animation: onbst-k1 3s linear both; }
.onbst-slide.play .r2 { animation: onbst-k2 3s linear both; }
.onbst-slide.play .r3 { animation: onbst-k3 3s linear both; }
.onbst-slide.play .onbst-sc.k1 { animation: onbst-k1 3s linear both; }
.onbst-slide.play .onbst-sc.k2 { animation: onbst-k2 3s linear both; }
.onbst-slide.play .onbst-sc.k3 { animation: onbst-k3 3s linear both; }
.onbst-slide.play .onbst-sc.k4 { animation: onbst-k4 3s linear both; }
.onbst-slide.play .onbst-bst { animation: onbst-pop 3s ease both; }
.onbst-slide.play .onbst-res { animation: onbst-rise 3.2s ease both; }
.onbst-slide.play .onbst-hb .hoff { animation: onbst-hoff 3.2s ease both; }
.onbst-slide.play .onbst-hb .hon { animation: onbst-hon 3.2s ease both; }
@keyframes onbst-k1 { 0%,24%{opacity:1} 25%,100%{opacity:0} }
@keyframes onbst-k2 { 0%,24%{opacity:0} 25%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes onbst-k3 { 0%,49%{opacity:0} 50%,74%{opacity:1} 75%,100%{opacity:0} }
@keyframes onbst-k4 { 0%,74%{opacity:0} 75%,100%{opacity:1} }
@keyframes onbst-pop { 0%,76%{opacity:0;transform:scale(0)} 84%{opacity:1;transform:scale(1.25)} 90%,100%{opacity:1;transform:scale(1)} }
@keyframes onbst-rise { 0%,80%{opacity:0;transform:translateY(6px)} 92%,100%{opacity:1;transform:translateY(0)} }
@keyframes onbst-hoff { 0%,84%{opacity:1;transform:scale(1)} 90%{opacity:1;transform:scale(1.3)} 100%{opacity:0;transform:scale(.6)} }
@keyframes onbst-hon { 0%,88%{opacity:0;transform:scale(.6)} 96%,100%{opacity:1;transform:scale(1)} }

/* Paso 4: quién queda en pie */
.onbst-crowd { display: grid; grid-template-columns: repeat(3, 44px); gap: 12px 18px; }
.onbst-p { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; opacity: .18; transform: translateY(6px) scale(.9); }
.onbst-p.win { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--text); }
.onbst-trophy { position: absolute; right: -8px; top: -8px; display: inline-flex; }
.onbst-trophy .msr { font-size: 18px; color: var(--gold); }
.onbst-p.c1 { background: #5B6FB5; } .onbst-p.c2 { background: #8E5BAE; } .onbst-p.c3 { background: #2F7A70; }
.onbst-p.c4 { background: #A0543A; } .onbst-p.c5 { background: #46627A; } .onbst-p.c6 { background: #6B5A3C; }
.onbst-slide.play .onbst-p:not(.win) { animation: onbst-out .5s ease both; }
.onbst-slide.play .onbst-p.o1 { animation-delay: .3s; } .onbst-slide.play .onbst-p.o2 { animation-delay: .7s; }
.onbst-slide.play .onbst-p.o3 { animation-delay: 1.1s; } .onbst-slide.play .onbst-p.o4 { animation-delay: 1.5s; }
.onbst-slide.play .onbst-p.o5 { animation-delay: 1.9s; }
.onbst-slide.play .onbst-p.win { animation: onbst-winner 2.9s ease both; }
.onbst-slide.play .onbst-trophy { animation: onbst-popLate 2.9s ease both; }
@keyframes onbst-out { 0%{opacity:1;transform:none} 100%{opacity:.18;transform:translateY(6px) scale(.9)} }
@keyframes onbst-winner { 0%,80%{transform:scale(1)} 90%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes onbst-popLate { 0%,82%{opacity:0;transform:scale(0)} 92%{opacity:1;transform:scale(1.3)} 100%{opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { .onbst-slide.play *, .onbst-slide * { animation: none !important; } .onbst-sc.k4, .onbst-bst, .onbst-sel, .onbst-plbl.tu { opacity: 1 !important; } .onbst-track { scroll-behavior: auto; } }

/* tarjeta "Aún no estás en ningún survivor" (Actividad) */
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 16px 16px; margin-top: 4px; }
.onb-card-t { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.onb-card-s { font-size: var(--fs-4); color: var(--text-3); margin: 0 0 14px; line-height: 1.45; }
.onb-card .onb-ctas .btn { background: var(--surface-2); }
.onb-card .onb-ctas .btn-primary { background: var(--primary); }

/* preview "Así se ve cuando ya juegas": componentes reales, pero inertes (solo muestra) */
.onb-demo { pointer-events: none; }
.onb-demo > * { margin-bottom: 12px; }
.onb-demo > *:last-child { margin-bottom: 0; }
.act-card .act-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); font-size: 20px; }
.act-card .act-ic.ember { background: var(--primary-weak); color: var(--primary); }
.act-card .act-ic.green { background: var(--success-weak); color: var(--success); }
.act-card .act-ic.red { background: var(--danger-weak); color: var(--danger); }
.act-card .act-ic.gray { background: var(--surface-2); color: var(--text-3); }
.act-card .act-ic.amber { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); }
.act-card .act-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act-card .act-nm { font-size: var(--fs-4); font-weight: 600; letter-spacing: -0.01em; }
.act-card .act-sub { font-size: var(--fs-2); color: var(--text-2); }
.act-card .act-go { flex: none; padding: 7px 12px; font-size: 13px; min-width: 96px; justify-content: center; }
.act-more { margin-top: 4px; }
/* ===== En curso transversal — Página 0 (resumen cross) ===== */
.xc-head { background: var(--primary-weak); border: 1px solid var(--primary-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.xc-htitle { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: var(--primary); margin-bottom: 10px; }
.xc-htitle .msr { font-size: 20px; }
.xc-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.xc-c { font-size: var(--fs-2); font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.xc-c.green { background: var(--success-weak); color: var(--success); }
.xc-c.amber { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); }
.xc-c.red { background: var(--danger-weak); color: var(--danger); }
.xc-c.gray { background: var(--surface-2); color: var(--text-3); }
/* Header FIJO del carrusel: tabs de liga + dots (filtran el cross Y qué survivors se deslizan). */
.xc-header { margin: 2px 0 0; }
.back-link.xc-back-tight { margin-bottom: 8px; }
.xc-tabs { display: flex; gap: 7px; margin: 0 0 4px; padding-bottom: 2px; }
.xc-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: var(--fs-2); font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.xc-tab.active { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.xc-tab-n { font-size: 10.5px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); }
.xc-tab.active .xc-tab-n { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
/* Carrusel "Cómo vas tú": header fijo (tabs+dots) + título deslizable + escenario deslizable */
.xc-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.xc-viewing { font-size: var(--fs-3); color: var(--text-2); margin: 3px 0 11px; }
.xc-viewing b { color: var(--text); font-weight: 700; }
.xc-viewing b.xc-all { color: var(--primary); }
/* Fila de avatares (navegación tipo "stories" que reemplaza los dots) */
.xcav-row { display: flex; flex-wrap: nowrap; gap: 14px; margin: 8px 0 0; padding: 2px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.xcav-row::-webkit-scrollbar { display: none; }
.xcav { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; opacity: .62; transition: opacity var(--t-fast) var(--ease); }
.xcav.on { opacity: 1; }
.xcav-box { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
/* "Tú" al mismo tamaño que los escudos achicados (aunque nunca lleve anillo) para que no se vea más grande */
.xcav-box .avatar { width: 37px; height: 37px; font-size: 13px; }
.xcav-crest { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
/* escudo un poco más chico para que el anillo de progreso quepa alrededor sin crecer el espacio */
.xcav-crest .crest { width: 37px; height: 37px; }
.xcav-crest .crest.logo img { width: 28px; height: 28px; }
/* F1: foto/ícono del piloto en el carrusel "Cómo vas tú" */
.xcav-crest .enc-drv { width: 37px; height: 37px; border-radius: 50%; object-fit: cover; }
.xcav-crest .enc-drvph { display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.xcav-crest .enc-drvph .msr { font-size: 18px; }
/* anillo de progreso (arco dorado que avanza con el partido), reusa _encRing */
.xcav-crest .enc-ring { position: absolute; inset: 0; width: 44px; height: 44px; pointer-events: none; }
.xcav-crest .enc-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 23px 23px; }
/* en vivo sin dato de progreso: aro dorado tenue de respaldo (para que "en juego" siempre se lea) */
.xcav-crest.live { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 50%; }
.xcav-badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--bg); font-size: 12px; font-weight: 800; }
.xcav-badge .msr { font-size: 12px; }
.xcav-badge.win { background: var(--success); color: #06140d; }
.xcav-badge.lose { background: var(--danger); color: #1a0707; }
.xcav-badge.tie { background: var(--text-2); color: var(--bg); }
.xcav-fallback { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; }
.xcav-fallback .msr { font-size: 22px; color: var(--text-2); }
/* Línea divisoria por deporte dentro de la fila de avatares */
.xcav-div { flex: none; align-self: flex-start; width: 1px; height: 44px; margin: 0 3px; background: var(--border); }

.xcav-cap { font-size: var(--fs-4); line-height: 1; height: 18px; display: flex; align-items: center; color: var(--text-2); font-weight: 600; }
.xcav.on .xcav-cap { color: var(--text); }
/* Subrayado del activo como ELEMENTO real (no ::after) — Safari repinta confiable al quitar la clase. */
.xcav-bar { width: 18px; height: 2.5px; border-radius: 2px; background: var(--text); margin-top: 3px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.xcav.on .xcav-bar { opacity: 1; }
.xc-divider { height: 1px; background: var(--border); margin: 8px 0 12px; }
/* En #/encurso el back-link va justo antes del título → menos aire que el margen global (20px). */
.back-link.xc-back { margin-bottom: 8px; }
.xc-stage { overflow: hidden; }
.xc-content { will-change: transform, opacity; }
.xc-loading { min-height: 200px; }
.xc-meta { margin: 0 0 14px; }
.xc-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; }
.xc-auto { display: flex; align-items: center; gap: 6px; }
.xc-auto .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); display: inline-block; animation: pulseHi 1.8s infinite; }
.xc-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
@media (hover: hover) { .xc-row:hover { border-color: var(--border-strong); transform: translateY(-1px); } }
.xc-row .xc-b { flex: 1; min-width: 0; }
.xc-row .xc-nm { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.01em; }
.xc-row .xc-sub { font-size: var(--fs-2); color: var(--text-2); margin-top: 1px; }
.xc-badge { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.xc-badge.green { background: var(--success-weak); color: var(--success); }
.xc-badge.amber { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); }
.xc-badge.red { background: var(--danger-weak); color: var(--danger); }
.xc-badge.gray { background: var(--surface-2); color: var(--text-3); }
.xc-row .xc-arw { color: var(--text-3); flex: none; }
/* footer cross del partido: survivors donde elegí ese equipo */
.xc-matches { margin-top: 12px; }
.xcf { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.xcf-h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.xcf-row { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.xcf-row .xcf-ic { font-size: 16px; line-height: 1; width: 20px; text-align: center; flex: none; }
.xcf-row .xcf-ic .msr { font-size: 15px; color: var(--text-2); }
.xcf-nm { font-weight: 700; color: var(--text); }
.xcf-tm { color: var(--text-2); font-size: 12px; margin-left: auto; }
.act-card .act-arw { color: var(--text-3); flex: none; }
.act-card .act-meta { flex: none; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.act-card .act-meta .act-when { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.act-card .act-meta .act-arw { font-size: 20px; }

/* ============================================================
   REDISEÑO DE TARJETAS (v1) — superficies, brillo y latido.
   Capa visual (solo dark, tema forzado de la app). No mueve
   contenido. Animaciones solo transform/opacidad.
   NOTA: el tinte por deporte se descartó — el verde (Liga MX) y
   el rojo (F1) chocaban con la semántica sagrada (verde=vivo,
   rojo=fuera). El ícono va sobre caja NEUTRA para todos.
   ============================================================ */

/* --- 1a. Superficie ELEVADA: tarjetas que representan "una cosa" --- */
/*   Inicio (survivor) · En curso de Actividad · tarjeta de cierre/estado del survivor */
:root.dark .group-card.gcr,
:root.dark .act-live,
:root.dark .act-svgroup,
:root.dark .act-card,
:root.dark .rcp-jr,
:root.dark .card.pkc-card,
:root.dark .card.pkc-elim {
  background: var(--card-up);
  border: 1px solid var(--edge-up);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-4);
}
/* Actividad narrativa donde CAÍSTE: mismo tono NEUTRO que las demás (informativa;
   el ember distraía). Decisión Diego (PRD). Antes usaba --card-hot + glow. */

/* --- 1b. Superficie CON ESTADO (ember): SOLO pick por elegir/confirmar
   y En curso cuando ya inició un partido o hay jugados --- */
:root.dark .card.pkc-card.pkc-act,
:root.dark .act-live:not(.gray) {
  background: var(--card-hot);
  border: 1px solid var(--primary-border);
  box-shadow: var(--shadow-md), var(--glow-hot);
}
/* título en blanco puro en la superficie con estado */
:root.dark .card.pkc-card.pkc-act .pkc-team,
:root.dark .act-live:not(.gray) .al-tx b { color: #fff; }

/* --- 1c. Superficie HUNDIDA: survivor terminado o fuera · pick "no alcanzaste" (plano, sin sombra) --- */
:root.dark .group-card.gcr.gc-done,
:root.dark .group-card.gcr.gc-out,
:root.dark .card.pkc-card.pkc-cold {
  background: var(--card-down);
  border: 1px solid rgba(232, 226, 212, .05);
  box-shadow: none;
}

/* --- 3. Cuadro del ícono: caja NEUTRA (sin color por deporte) --- */
/*   El emoji del admin (o el ícono deportivo de respaldo) va sobre una caja
     elevada neutra: degradado surface-3→surface-2 + luz interior. Sin tinte
     de deporte para no chocar con la semántica (verde=vivo, rojo=fuera). */
:root.dark .group-card.gcr .gcr-ic {
  border-radius: var(--r-3);
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* superficie hundida (terminado/fuera): ícono/emoji en escala de grises */
:root.dark .group-card.gcr.gc-done .gcr-ic,
:root.dark .group-card.gcr.gc-out .gcr-ic {
  filter: grayscale(1);
  opacity: .85;
}

/* --- 4. Brillo (solo en tarjeta accionable) --- */
:root.dark .card.pkc-card.pkc-act,
:root.dark .act-live:not(.gray) { position: relative; overflow: hidden; }
:root.dark .card.pkc-card.pkc-act::after,
:root.dark .act-live:not(.gray)::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 230, .16), transparent);
  transform: skewX(-18deg) translateX(-60%);
  animation: cardShine 6s ease-in-out infinite;
  pointer-events: none; z-index: 2;
}
@keyframes cardShine {
  0%   { transform: skewX(-18deg) translateX(-60%); }
  12%  { transform: skewX(-18deg) translateX(420%); }
  100% { transform: skewX(-18deg) translateX(420%); }
}

/* --- 5. Latido: el punto junto al tiempo restante (En curso ember) --- */
@keyframes dotPulse {
  0%, 100% { transform: scale(1);  opacity: 1; }
  50%      { transform: scale(.8); opacity: .45; }
}
:root.dark .act-live:not(.gray) .al-dot {
  animation: dotPulse 2.4s ease-in-out infinite;
}

/* reduce-motion: se apagan brillo y latido; superficies y degradados se quedan */
@media (prefers-reduced-motion: reduce) {
  :root.dark .card.pkc-card.pkc-act::after,
  :root.dark .act-live:not(.gray)::after { animation: none; opacity: 0; }
  :root.dark .act-live:not(.gray) .al-dot { animation: none; }
}

/* ============================================================
   QUINIELA — Tabla de puntos + En vivo (lecturas)
   ============================================================ */
/* fila propia resaltada (arena, como la tabla del survivor) */
.qt-table tr.me { background: var(--arena-weak); }
.qt-you { font-size: var(--fs-1); font-weight: 700; color: var(--arena); background: var(--arena-weak); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.qt-move { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-2); font-weight: 700; }
.qt-move .msr { font-size: 15px; }
.qt-move.up { color: var(--success); }
.qt-move.down { color: var(--danger); }
.qt-move.flat { color: var(--text-3); font-weight: 400; }

/* En vivo — partidos */
.ql-matches { padding: 4px 0; }
.ql-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ql-match:last-child { border-bottom: 0; }
.ql-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ql-team.right { justify-content: flex-end; }
.ql-tn { font-size: var(--fs-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-sc { font-size: var(--fs-3); font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 8px; color: var(--text); }
.ql-mstatus { grid-column: 1 / -1; text-align: center; margin-top: 2px; }
.ql-mtag { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.ql-mtag.live { color: var(--analysis); font-weight: 700; }
.ql-mtag.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--analysis); animation: livepulse 1.4s var(--ease) infinite; }
.ql-mtag.done { color: var(--text-2); }
.ql-mtag.void { color: var(--danger); }

/* En vivo — tablero de jugadores */
.ql-pcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); margin-bottom: 8px; overflow: hidden; }
.ql-pcard.me { border-color: var(--arena); background: var(--arena-weak); }
.ql-phead { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: none; border: 0; color: var(--text); font-family: inherit; cursor: pointer; text-align: left; }
.ql-rank { font-size: var(--fs-3); font-weight: 800; color: var(--text-2); min-width: 18px; }
.ql-pn { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-pts { font-size: var(--fs-3); font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.ql-caret { color: var(--text-3); font-size: 20px; transition: transform var(--t-fast) var(--ease); }
.ql-preds { display: none; padding: 2px 14px 12px; }
.ql-preds.on { display: block; }
.ql-predrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.ql-pm { font-size: var(--fs-2); color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-pred { font-size: var(--fs-2); font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.ql-pred.hit { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.ql-pred.miss { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ql-pred.none { background: none; color: var(--text-3); }

/* Tabla de puntos: layout fijo (cabe en 360px, sin scroll horizontal) */

/* Tabla de puntos — layout flex propio (sin la clase .table, cabe siempre) */
.qt-card { padding: 4px 0; }
.qt-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.qt-row:last-child { border-bottom: 0; }
.qt-row.qt-head { padding: 8px 16px; color: var(--text-2); font-size: var(--fs-2); font-weight: 600; }
.qt-row.me { background: var(--arena-weak); }
.qt-rank { width: 20px; text-align: center; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.qt-row .qt-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.qt-pts { width: 40px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.qt-head .qt-pts, .qt-head .qt-mov { font-weight: 600; }
.qt-mov { width: 46px; display: inline-flex; justify-content: center; flex: none; }


/* Quiniela resumen — reutiliza clases survivor; solo faltan estos detalles chicos */
.tri-item:disabled { opacity: .4; cursor: default; }
.qt-delta { display: block; font-size: 11px; font-weight: 700; color: var(--gold); line-height: 1; margin-top: 2px; }
/* status card de la tabla (en vivo / abierta / J1 sin puntos) */
.qt-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 10px; }
.qt-sb-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-sb-txt b { font-size: var(--fs-3); }
.qt-sb-txt span { font-size: var(--fs-2); color: var(--text-2); }
.qt-sb-mark { font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; flex: none; }
/* Tabla de posiciones de quiniela: layout fijo real (cabe #·jugador·pts·mov sin scroll) */
.q-standings { table-layout: fixed; }
.q-standings th:first-child, .q-standings td:first-child { width: 30px; }
.q-standings th.q-pts, .q-standings td.q-pts { width: 54px; }
.q-standings th.q-mov, .q-standings td.q-mov { width: 34px; }
/* Pick card de quiniela: clickable con chevron a la derecha (sin botón, compacta) */
.qh-pkcard { cursor: pointer; }
/* Card de subconjunto (admin): CHICA — solo título + "se congela en" + chevron, sin barra ni conteo */
.qh-subsetcard { padding: 13px 16px; }
.qh-subsetcard .pkc-team { font-size: var(--fs-4); font-weight: 800; }
.qh-subsetcard .pkc-t { margin-top: 3px; }
/* fila del título: título a la izquierda, flecha alineada con él a la derecha */
.qh-trow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qh-trow .pkc-team { flex: 1; min-width: 0; }
.qh-pkarrow { flex: none; color: var(--text-3); }
.qh-pkcard.pkc-act .qh-pkarrow { color: color-mix(in srgb, var(--primary) 55%, var(--text-2)); }
/* En las cards ember (Sin selección / Te faltan) el riel va un ember INTERMEDIO: más claro
   que el fondo de la card (--primary-weak) para que se distinga, pero más apagado que el
   relleno lleno (--primary). El relleno sigue ember (--primary, inline). */
.qh-pkcard.pkc-act .pk-prog-line { background: color-mix(in srgb, var(--primary) 32%, var(--primary-weak)); }

/* Tabla de posiciones de quiniela — layout flex (siempre cabe), fila propia con el tratamiento
   arena REAL del survivor (fondo tenue + borde interior arena + esquinas). */
.qs-list { padding: 2px 0; }
.qs-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.qs-row:last-child { border-bottom: 0; }
.qs-row.qs-head { color: var(--text-2); font-size: var(--fs-2); font-weight: 600; padding: 8px 16px; }
.qs-row.me { background: rgba(232, 226, 212, .05); box-shadow: inset 0 0 0 1px rgba(232, 226, 212, .22); border-radius: var(--radius-sm); border-bottom-color: transparent; }
.qs-row.qs-link { cursor: pointer; }
@media (hover: hover) { .qs-row.qs-link:hover { background: var(--surface-2); } }
.qs-rank { width: 20px; text-align: center; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.qs-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-3); font-weight: 600; }
.qs-pts { width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; line-height: 1.1; }
.qs-head .qs-pts { font-weight: 600; }
.qs-pts .qs-delta { display: block; font-size: 11px; font-weight: 700; color: var(--gold); }
.qs-mov { width: 30px; display: inline-flex; justify-content: flex-end; flex: none; }
/* Tabla del resumen: expandir EN SU LUGAR (top-5 → todos) con link arena, no ember */
.qh-tbl:not(.exp) .qs-row.qs-hidden { display: none; }
.gtab-more .qz-arena { color: var(--text); cursor: pointer; }

/* ============================================================
   QUINIELA — pantalla En vivo (.qlv-*). Posición + partidos por estado (en vivo/finales/por
   jugar) con las predicciones del grupo agrupadas por resultado. Reusa crest/avatar/.pk-analysis
   y los colores semánticos (analysis=en vivo, gold=puntos, success=acierto).
   ============================================================ */
.avatar.xs { width: 22px; height: 22px; font-size: 8px; }
.qz-count { color: var(--text); font-weight: 700; }   /* conteo de jugadores (resumen): blanco, no verde */
/* Tarjeta de posición */
.qlv-pos { padding: 15px 16px; margin: 6px 0 22px; }
.qlv-pos-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qlv-vas { font-size: var(--fs-7); font-weight: 800; letter-spacing: -.01em; }
.qlv-pos-mv { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.qlv-mv { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-3); font-weight: 800; }
.qlv-mv .msr { font-size: 16px; }
.qlv-mv.up { color: var(--success); }
.qlv-mv.down { color: var(--danger); }
.qlv-rp { color: var(--gold); font-weight: 800; font-size: var(--fs-4); }
.qlv-pos-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.qlv-lead { font-size: var(--fs-3); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Acordeón "Tabla provisional" (En vivo): cabecera togglable + cuerpo colapsable. Reusa la misma
   tabla (.qs-list) que la oficial, pero con datos provisionales (+en vivo). Sin link a ningún lado. */
.qlv-provtbl { padding: 0; margin: 0 0 22px; overflow: hidden; }
.qlv-provtbl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; background: none; border: 0; font-family: inherit; color: var(--text); cursor: pointer; }
.qlv-provtbl-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-4); font-weight: 800; letter-spacing: -.01em; }
.qlv-provtbl-lbl .msr { font-size: 18px; color: var(--gold); }
.qlv-provtbl-caret { font-size: 22px; color: var(--text-3); transition: transform .2s ease; }
.qlv-provtbl.open .qlv-provtbl-caret { transform: rotate(180deg); }
.qlv-provtbl-body { display: none; padding: 0 12px 12px; }
.qlv-provtbl.open .qlv-provtbl-body { display: block; }
.qlv-provtbl-note { font-size: var(--fs-2); color: var(--text-3); padding: 0 4px 10px; line-height: 1.4; }
/* Encabezado de sección con contador */
.qlv-sec { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 20px 2px 10px; }
.qlv-cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 700; }
/* Tarjeta de partido = card de survivor en vivo (.pk-match.live-card): celdas de equipo con
   costura + marcador en medio (.pk-teams/.pk-seam/.pk-vs). Abajo, la sección de estado +
   estadísticas + predicciones va en GRIS (surface-2), distinta del bloque de equipos+marcador
   de arriba — igual que survivor (.pk-foot / .gp-picks). */
.qlv-match .pk-when.live { color: var(--analysis); }        /* En vivo = ámbar (estado con punto) */
.qlv-match .pk-when.done.qlv-final { color: var(--text); }  /* Final = BLANCO (estado, no botón) */
/* En vivo/Final → gráfica ARENA (botón); Próximos (.pre) → lupa DORADA (análisis). */
.qlv-match .pk-foot .stats-toggle { color: var(--text); font-weight: 700; }
.qlv-match .pk-foot .stats-toggle.pre { color: var(--gold); }
.qlv-stats-panel { padding: 8px 12px 14px; background: var(--surface-2); }
/* Predicciones: parte de la franja gris (surface-2), como .gp-picks de survivor */
.qlv-preds { padding: 11px 12px 11px; border-top: 1px solid var(--border); background: var(--surface-2); }
.qlv-preds-lbl { font-size: var(--fs-1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
/* Solo chevron: ancho CONSTANTE. Con la palabra pasaba de 40px ("Ver") a 65px ("Ocultar")
   justo al expandir, y la fila saltaba. Área táctil de 44px aunque el icono mida 17 (§targets). */
.qlv-preds-toggle { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: -6px; background: none; border: 0; font-family: inherit; font-size: var(--fs-3); font-weight: 700; color: var(--text); cursor: pointer; }
.qlv-preds-toggle .msr { font-size: 17px; }
.qlv-preds .qlv-gp { display: none; }
.qlv-preds.open .qlv-gp { display: block; }
/* Fila colapsada: pastilla + quienes coinciden + [+N pts] + Ver, todo en una línea */
.qlv-mypick { display: flex; align-items: center; gap: 10px; margin-top: 9px; min-width: 0; }
/* CAUSA RAÍZ del botón de Ver/Ocultar comido: los cuatro hijos de la fila eran `flex: 0 0 auto`,
   así que NADIE cedía ancho y el sobrante se lo tragaba el último — que es justo el control.
   Ahora la que cede es la PASTILLA (el dato más recortable: el escudo y el encabezado de la card
   ya dicen qué equipo es), y el botón queda clavado. `min-width: 0` en los dos niveles porque sin
   él un hijo flex no baja de su contenido y el ellipsis nunca entra. */
.qlv-mypick > .gp-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.gp-badge .gp-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlv-mypick > .gp-stack { flex: none; }
/* Antes del cierre: fila "Tu pick" dentro de la card del partido (sin grupo/toggle) */
.qlv-mypick.solo { margin-top: 0; padding: 7px 12px 7px; }
.qlv-mp-lbl { font-size: var(--fs-2); font-weight: 700; color: var(--text-3); letter-spacing: .02em; }
.qlv-av-more { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.qlv-pts { flex: none; font-size: var(--fs-4); font-weight: 800; font-variant-numeric: tabular-nums; }
.qlv-pts.prov { color: var(--text); }          /* en vivo: provisional (blanco, aún no decide) */
.qlv-pts.win { color: var(--success); }        /* final: acertaste el resultado (≥3, verde) */
.qlv-pts.soon { color: var(--text-2); }        /* final: sólo puntos de marcador (gris) */
/* Sin predicción: MISMO tamaño que la pastilla del equipo (.gp-badge), solo borde punteado */
.qlv-nopred { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); }
/* Distribución = tally de los 3 resultados (siempre los 3): escudo + nº, espejado como el
   encabezado (home izq · empate centro · away der). El nº del que va atinando en blanco. */
/* Línea punteada entre mi selección (arriba) y la distribución (lo que agregamos abajo) */
.qlv-tally { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--border-strong); }
.qlv-tside { display: inline-flex; align-items: center; gap: 6px; }
.qlv-tcrest { display: inline-flex; }
.qlv-tcrest .crest { width: 18px; height: 18px; font-size: 7px; }
.qlv-teq { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 800; color: var(--text-3); }
.qlv-tnum { font-size: var(--fs-4); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-3); }
.qlv-tnum.win { color: var(--text); }
/* Expandido: los 3 resultados con su gente */
.qlv-gp { margin-top: 10px; }
.qlv-gpsec { padding: 8px 0; border-top: 1px solid var(--border); }
.qlv-gpsec:first-child { border-top: 0; }
.qlv-gphead { font-size: var(--fs-1); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.qlv-gphead b { color: var(--text); }
.qlv-sumando { color: var(--analysis); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: var(--fs-2); }
.qlv-plrow { padding: 5px 0; }
.qlv-plrow .nm { flex: 0 1 auto; }
.qlv-plrow.me .nm { color: var(--text); }
.qlv-plrow.qlv-plink { cursor: pointer; }
@media (hover: hover) { .qlv-plrow.qlv-plink:hover .nm { color: var(--arena); } }
.qlv-pl-sc { margin-left: auto; flex: none; font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); }
.qlv-pl-sc.none { font-weight: 500; color: var(--text-3); }
.qlv-pl-pts { flex: none; min-width: 32px; text-align: right; font-size: var(--fs-3); font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.qlv-pl-pts.zero { color: var(--text-3); font-weight: 700; }
.qlv-plmore { padding: 4px 0 2px 32px; font-size: var(--fs-2); color: var(--text-3); }
/* ============================================================
   QUINIELA — Historial: REUSA la tabla del historial de survivor (.hg / .hg-cap / .hg-legend /
   columna fija). Solo cambia el CONTENIDO de la celda (puntos + heat-map) y el pie (leyenda).
   ============================================================ */
.qz-hist .hg-cap .qhx-cap-n { color: var(--text); font-weight: 700; }    /* "20 jugadores" = conteo → blanco */
.qz-hist .hg tbody td:first-child::before { display: none; }            /* sin barra de estado (no hay vivo/out) */
/* sin barra a la izquierda → sin ese espacio reservado */
.qz-hist .hg th:first-child, .qz-hist .hg td:first-child { padding-left: 16px; }
.qz-hist .hg td { font-variant-numeric: tabular-nums; }
/* nombre = ancho fijo (el del más largo, via JS) → los totales quedan alineados en columna */
.qz-hist .hg-nm { display: inline-block; vertical-align: middle; }
/* acumulado de temporada después del nombre: número blanco, "pts" gris y más chico */
.qhx-total { margin-left: 7px; font-size: var(--fs-2); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.qhx-total small { color: var(--text-3); font-weight: 600; font-size: 10px; }
.qhx-pts { color: var(--text-2); font-weight: 600; }
.qhx-pts.qhx-top { color: var(--text); font-weight: 800; }               /* SOLO la mejor de la columna, blanca negrita */
/* 4 niveles de calor vs el máximo de la jornada. Selector con specificity que GANA a la fila .me
   de survivor (surface-2), así MI fila también sigue los niveles (no queda plana). El "aquí estás"
   se ve por el resalte del nombre (1ª columna). Orden: base 'pts' antes que h2/h3/h4. */
.qz-hist .hg tbody td.qhx-pts { background: transparent; }                       /* frío = sin fondo */
.qz-hist .hg tbody td.qhx-h2 { background: color-mix(in srgb, var(--gold) 7%, transparent); }    /* bajo  30-54% */
.qz-hist .hg tbody td.qhx-h3 { background: color-mix(in srgb, var(--gold) 15%, transparent); }   /* medio 55-79% */
.qz-hist .hg tbody td.qhx-h4 { background: color-mix(in srgb, var(--gold) 26%, transparent); }   /* alto  ≥80% */
/* 0 con quiniela = sin fondo (apagado). sin quiniela (—) = casi negro. */
.qz-hist .qhx-zero { color: var(--text-4); font-weight: 700; }
.qz-hist .hg tbody td.qhx-zero { background: transparent; }
.qz-hist .qhx-none { color: var(--text-4); }
.qz-hist .hg tbody td.qhx-none { background: rgba(0, 0, 0, .32); }
/* 2px entre celdas SIN border-spacing (así el sticky de la 1ª columna no se mueve). El hueco
   (der+abajo, via box-shadow inset = fondo oscuro de la card) separa las celdas de calor contiguas. */
.qz-hist .hg { border-spacing: 0; }
.qz-hist .hg th, .qz-hist .hg td { border-bottom: 0; }
.qz-hist .hg tbody td:not(:first-child), .qz-hist .hg thead th:not(:first-child) { box-shadow: inset -2px -2px 0 var(--surface); }
/* Divisor de la columna de nombres (línea original a 2px). La última fila no lleva: el footer ya corta. */
.qz-hist .hg tbody td:first-child { border-bottom: 2px solid var(--border); }
.qz-hist .hg tbody tr:last-child td:first-child { border-bottom: 0; }
/* ---- DUELOS: la MISMA tabla, con G/P/E en la celda ----------------------------------------
   Hereda todo de .qz-hist (sticky, huecos, divisor, futuras). Lo único propio es el contenido:
   letra del resultado sobre un fondo teñido con su color semántico. Nada de heat-map: aquí no
   hay magnitud que comparar, solo tres estados. El récord junto al nombre usa .qhx-total. */
.qz-hist .hg tbody td.du-hgc { font-weight: 800; cursor: pointer; }
.qz-hist .hg tbody td.du-hgc.win { color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
.qz-hist .hg tbody td.du-hgc.loss { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.qz-hist .hg tbody td.du-hgc.draw { color: var(--text-2); background: color-mix(in srgb, var(--text-3) 14%, transparent); }
.hg-legend .du-hgl { width: 16px; text-align: center; font-weight: 800; }
.hg-legend .du-hgl.win { color: var(--success); }
.hg-legend .du-hgl.loss { color: var(--danger); }
.hg-legend .du-hgl.draw { color: var(--text-2); }
/* La celda de "sin concluir" lleva FONDO propio, como las de G/P/E. Sin él, los 2px de hueco
   entre celdas (box-shadow inset) partían la columna en pedacitos: se leía como celdas rotas en
   vez de una columna. Va en ÁMBAR, el idioma de "esto está corriendo" en toda la app (badge En
   vivo, pestaña dorada, punto del partido en juego), y no choca con los tres semánticos.
   OJO: el 0 TAMBIÉN se tiñe. Es el mismo estado (va sumando, todavía no concluye) y dejarlo sin
   fondo volvía a partir la columna, que es justo lo que se estaba arreglando. */
.du-hg .hg tbody td.qhx-pts,
.du-hg .hg tbody td.qhx-zero { background: color-mix(in srgb, var(--gold) 15%, transparent); }
.du-hg .hg tbody td.qhx-pts { color: var(--text); }
.du-hg .hg tbody td.qhx-zero { color: var(--text-3); }
/* Muestra de color en la leyenda, no un número de ejemplo: el "12" era un valor inventado y se
   leía como si doce significara algo. */
.hg-legend .du-hgs { width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: color-mix(in srgb, var(--gold) 15%, transparent); }
.qhx-zero { color: var(--text-3); font-weight: 700; }
.qhx-none { color: var(--text-4); }
.qhx-legend .qhx-swatch { display: inline-block; width: 30px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 9%, transparent), var(--gold)); }
.qhx-legend .qhx-lg0 { color: var(--text-3); font-weight: 800; margin-right: 3px; }
/* celda tocable → abre el detalle de esa jornada del jugador */
.qz-cell { cursor: pointer; }
@media (hover: hover) { .qz-cell:hover { filter: brightness(1.3); } }
/* Detalle de celda (bottom-sheet): encabezado + una línea por partido + totales */
.qzd-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; border-bottom: 1px solid var(--border); }
.qzd-head .avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.qzd-id { flex: 1; min-width: 0; }
/* Hoja del duelo (celda del historial de DUELOS): misma cabecera, sin avatar — aquí son DOS
   jugadores y el marcador vive en el board, no en la esquina. El board de la pantalla de duelo
   se reusa tal cual, solo se le quita el margen que tenía como card suelta. */
.du-sheet-head { padding-bottom: 12px; }
.du-sheet-head .du-livebadge { flex: none; }
.sheet .du-board { margin-top: 14px; }
/* En la hoja, la MISMA tarjeta de partido del duelo pero sin la franja del tiempo: en su lugar un
   punto de estado. Hueco = no ha empezado · ámbar = en juego · gris = terminado. Al no llevar el
   recuadro de tres lados, la tarjeta se encoge sola (ese recuadro ocupaba el piso). */
.du-st { width: 6px; height: 6px; border-radius: 50%; margin-bottom: 5px; box-sizing: border-box; }
.du-st.soon { border: 1.5px solid var(--border-strong); }
.du-st.live { background: var(--gold); }
.du-st.done { background: var(--text-4); }
.sheet .du-cols { margin-top: 16px; }

.qzd-nm { font-size: var(--fs-5); font-weight: 800; }
.qzd-metasub { font-size: var(--fs-3); color: var(--text-2); margin-top: 1px; }
.qzd-total { flex: none; text-align: right; line-height: 1; }
.qzd-total b { font-size: 26px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.qzd-total span { display: block; font-size: var(--fs-2); color: var(--text-3); margin-top: 3px; }
.qzd-lines { padding: 4px 0; }
.qzd-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.qzd-line:last-child { border-bottom: 0; }
.qzd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.qzd-dot.hit { background: var(--success); }
.qzd-dot.miss { background: var(--text-4); }
.qzd-dot.pend { background: transparent; border: 1.5px solid var(--border-strong); box-sizing: border-box; }
.qzd-match { flex: 1; min-width: 0; font-size: var(--fs-3); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qzd-match b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; margin: 0 3px; }
.qzd-pred { flex: none; font-size: var(--fs-2); color: var(--text-2); }
.qzd-nopick { color: var(--text-4); }
/* Ficha de confianza (detalle de jornada): el número que explica por qué el mismo acierto
   suma distinto. Pastilla neutra — el color ya lo lleva el punto y el "+N" de la derecha. */
.qzd-ficha { display: inline-flex; align-items: center; justify-content: center; min-width: 17px;
  height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 10px; font-weight: 800; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.qzd-pts { flex: none; min-width: 40px; text-align: right; font-size: var(--fs-3); font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qzd-pts.on { color: var(--text); }             /* +X por partido = BLANCO (solo los totales son dorados) */
/* encabezado de columnas: Partido · Predicción · Puntos */
.qzd-colhead { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.qzd-colhead .qzd-dot { visibility: hidden; }
.qzd-ch-match { flex: 1; }
.qzd-ch-pts { flex: none; min-width: 40px; text-align: right; }
.qzd-foot { display: flex; align-items: center; gap: 10px; padding: 12px 0 2px; margin-top: 4px; border-top: 1px solid var(--border-strong); font-size: var(--fs-3); color: var(--text-2); }
/* Nota pre-cierre */
.qlv-prenote { padding: 13px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 3px; }
.qlv-prenote b { font-size: var(--fs-4); }
.qlv-prenote span { font-size: var(--fs-3); color: var(--text-2); }

/* ============================================================
   CRÓNICA de la quiniela — curva de puntos (líneas, como el mock) + tarjetas por jornada.
   Las tarjetas reusan .rcp-* de la Crónica de survivor; aquí solo va lo NUEVO: la curva de
   líneas y los cuadros de puntos por jornada.
   ============================================================ */
.qcv { padding: 15px 14px 12px; margin-top: 4px; }
.qcv-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.qcv-t { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.qcv-r { font-size: var(--fs-3); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
/* Plot = eje Y fijo (izquierda) + área scrolleable (derecha). La escala de puntos no se desplaza. */
.qcv-plot { display: flex; align-items: flex-start; }
.qcv-axis-wrap { flex: 0 0 auto; }
.qcv-axis { display: block; }
.qcv-wrap { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.qcv-wrap::-webkit-scrollbar { height: 0; }
.qcv-wrap.fade-l:not(.fade-r) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px); mask-image: linear-gradient(90deg, transparent 0, #000 24px); }
.qcv-wrap.fade-r:not(.fade-l) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
.qcv-wrap.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.qcv-svg { display: block; }
.qcv-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.qcv-grid.base { opacity: 1; }
.qcv-yl { fill: var(--text-3); font-size: 9.5px; font-weight: 700; text-anchor: end; font-variant-numeric: tabular-nums; }
.qcv-line { fill: none; stroke-linejoin: round; }
.qcv-line.me { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.qcv-line.top { stroke: #6F6862; stroke-width: 1.5; }
.qcv-line.avg { stroke: #4D4642; stroke-width: 1.5; stroke-dasharray: 5 4; }
.qcv-line.low { stroke: #3A3330; stroke-width: 1.5; stroke-dasharray: 0.5 4; stroke-linecap: round; }   /* punteado */
.qcv-dot.me { fill: #fff; }
.qcv-end { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: start; font-variant-numeric: tabular-nums; }
.qcv-xl { fill: var(--text-3); font-size: 10px; font-weight: 700; text-anchor: middle; }
.qcv-leg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.qcv-leg span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.qcv-leg i { width: 14px; height: 3px; border-radius: 2px; }
.qcv-leg i.me { background: #fff; }
.qcv-leg i.top { background: #6F6862; }
.qcv-leg i.avg { background: #4D4642; }
.qcv-leg i.low { background: #3A3330; }
/* Arriba-derecha de la tarjeta: mis puntos de la jornada (blanco) + cuántos lugares me moví. */
.qcr-myd { align-items: flex-end; }
.qcr-mypts { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.qcr-mymove { display: inline-flex; align-items: center; gap: 1px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qcr-mymove .msr { font-size: 13px; }
.qcr-mymove.up { color: var(--success); }
.qcr-mymove.down { color: var(--primary); }
.qcr-mymove.flat { color: var(--text-3); }
/* Resumen colapsado de "se movieron": ▲N verde · ▼M ember. */
.qcr-up { color: var(--success); font-weight: 800; margin-right: 8px; }
.qcr-sumpts { color: var(--text); font-weight: 800; }   /* total de puntos sumados (blanco) */
.qcr-histlink { color: var(--text); }   /* link a historial = arena (no ember), el estándar */
.qcr-down { color: var(--primary); font-weight: 800; margin-right: 8px; }
/* Encabezados de sección del detalle (Subieron verde · Bajaron ember). */
.qcr-moves .rcp-aff-sec { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 8px 0 2px; }
.qcr-moves .rcp-aff-sec.up { color: var(--success); }
.qcr-moves .rcp-aff-sec.down { color: var(--primary); }
/* Renglón del detalle: transición de lugar (de X a Y) + puntos ganados (blanco). */
.qcr-tr { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.qcr-tr .msr { font-size: 13px; color: var(--text-3); }
.qcr-rpts { flex: 0 0 auto; min-width: 32px; text-align: right; font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- CRÓNICA DE DUELOS: lo único propio son los tres estados del duelo -------------------------
   Misma paleta que la rejilla del historial (verde ganó · rojo perdió · gris empató), a propósito:
   es la que el jugador ya aprendió a leer ahí. NO se reusa `.new`/`.n` (ember) para "perdiste" —
   el ember es identidad de marca y aquí el rojo es SEMÁNTICA, que es la capa sagrada. */
.du-crsc.win { color: var(--success); }
.du-crsc.loss { color: var(--danger); }
.du-crsc.draw { color: var(--text-2); }
/* Chips de la tarjeta = MI récord, un cuadro por jornada (no un jugador por cuadro como en
   quiniela), así que la tira de la tarjeta más reciente se lee como mi 5-2-1. */
.rcp-mini i.du-w { background: color-mix(in srgb, var(--success) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 72%, var(--surface)); }
.rcp-mini i.du-l { background: color-mix(in srgb, var(--danger) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 72%, var(--surface)); }
.rcp-mini i.du-d { background: var(--surface-2); border: 1px solid var(--border-strong); }
.rcp-legend .du-w { background: color-mix(in srgb, var(--success) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 72%, var(--surface)); }
.rcp-legend .du-l { background: color-mix(in srgb, var(--danger) 26%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 72%, var(--surface)); }
.rcp-legend .du-d { background: var(--surface-2); border: 1px solid var(--border-strong); }

/* ============================================================
   Elegir partidos (subconjunto, admin): navegación por jornada + filas con check + barra de guardar.
   ============================================================ */
.qss-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; }
.qss-nav::-webkit-scrollbar { height: 0; }
.qss-navchip { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-2); font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.qss-navchip.on { background: var(--arena-weak); border-color: var(--arena); color: var(--text); }
.qss-navchip.ro:not(.on) { color: var(--text-3); }   /* jornada pasada/bloqueada (solo lectura) = más apagada */
/* Indicador chico de congelamiento (una línea, sin barra ni conteo: la elección es binaria). */
.qss-freeze { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 7px 12px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-2); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qss-freeze .msr { font-size: 16px; }
.qss-freeze .cd { color: var(--text-2); }
.qss-freeze.t-mid, .qss-freeze.t-mid .cd { color: var(--analysis); }
.qss-freeze.t-near, .qss-freeze.t-near .cd { color: var(--danger); }
.qss-list { display: flex; flex-direction: column; gap: 8px; }
/* separador de día dentro de la lista (el aire lo da el gap del flex, no un margen grande) */
.qss-list .pk-day { margin: 4px 0 0; }
.qss-list .pk-day:first-child { margin-top: 0; }
.qss-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: 12px 14px; color: var(--text); font-family: inherit; }
.qss-row.on { background: var(--arena-weak); border-color: var(--arena); }
/* Guardado y sin cambios: los NO elegidos se atenúan para resaltar los que cuentan. */
.qss-list.saved .qss-row:not(.on) { opacity: .4; }
.qss-row.ro { cursor: default; }
.qss-row.ro .qss-check { color: var(--text-2); }
/* equipos: rejilla 1fr · centro · 1fr. Escudo SIEMPRE a la izquierda de cada columna (misma posición). */
.qss-teams { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.qss-side { display: inline-flex; align-items: center; gap: 8px; min-width: 0; justify-content: flex-start; }
.qss-teams .crest { width: 26px; height: 26px; font-size: 10px; flex: none; }
.qss-tn { font-size: var(--fs-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* centro: VS con la hora justo debajo (sin icono, sin aire extra) */
.qss-mid { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.qss-vs { color: var(--text-3); font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qss-time { font-size: var(--fs-1); color: var(--text-3); font-variant-numeric: tabular-nums; }
.qss-check { flex: none; color: var(--text-3); display: inline-flex; }
.qss-check .msr { font-size: 24px; }
.qss-row.on .qss-check { color: var(--arena); }
/* la barra reusa .pick-confirm/.pk-confirm (oculta la nav inferior + posición correcta) */

/* Cierre de picks en la PANTALLA DE DUELO. Clase propia: .pk-deadline la comparte la pantalla de
   pick y ahí los huecos están bien. Medido aquí: 14px entre el subtítulo y el cierre (demasiado,
   lo separaba de la jornada a la que pertenece) y 2px entre el cierre y la card (muy poco, se
   pegaban). Se invierten: el cierre queda junto al subtítulo y respira antes del tablero. */
.du-deadline { margin: 4px 0 14px; }
/* OJO: el hueco de 14px lo pone .du-sub2 y NO se puede achicar en general — ahí es donde entra el
   CARRUSEL de los otros duelos de la jornada (.du-chips), y con 3+ duelos ese aire hace falta.
   Solo cuando el cierre va PEGADO al subtítulo (o sea, cuando no hay carrusel porque el grupo
   tiene un único duelo) se recorta. El negativo es porque los márgenes COLAPSAN: con el 4px de
   arriba el hueco seguía siendo 14 (gana el mayor); 14 + (-6) = 8. */
.du-sub2 + .du-deadline { margin-top: -6px; }
/* Las dos notas van JUNTAS, arriba de las columnas: la de "aún no llena" y la de "se revelan al
   cierre". Antes una quedaba arriba de TÚ/RIVAL y la otra abajo, partiendo el encabezado de las
   filas que encabeza. */
.du-mnote + .du-cols, .du-note + .du-mnote { margin-top: 8px; }