:root {
    /* Valores heredados; Pulso los adapta desde ob-foundations.css */
    --bg: #0c0e14;         /* Pulso dark canvas, also before external styles load */
    --bg2: #2a2a2a;        /* placeholder de banderas */
    --card: #18191A;       /* color/surface */
    --card2: #202122;      /* superficie interna sutil */
    --glass: rgba(15,17,22,.75); /* color/surface-glass (#0F1116 @ 75%) */
    --header: #08090A;     /* color/bg-header */
    --border: rgba(255,255,255,.04);   /* color/border-subtle (#FFFFFF0A) */
    --border-soft: rgba(255,255,255,.05);
    --border-strong: rgba(118,118,118,.19); /* color/border-strong (#76767630) */
    --text: #ffffff;       /* color/text-primary */
    --muted: #b5b5b5;      /* color/text-secondary */
    --neutral: #d9d9d9;    /* color/text-neutral */
    --accent: #00C853;     /* color/brand (identidad Cuotario) */
    --accent-dim: rgba(0,200,83,.09);
    --accent-line: rgba(0,200,83,.85);
    --color-brand-soft: rgba(30, 198, 118, 0.07);  /* fondo suave del botón "Hazte pro" (Figma) */
    --brand-ink: #ffffff;  /* tinta del isotipo (la "O"): blanca sobre oscuro */
    --gold: #f5be47;       /* color/accent-gold */
    --red: #ff6b6b;        /* color/danger */
    --blue: #4d9fff;
    --r-lg: 12px;          /* radius/lg */
    --r-md: 8px;           /* radius/md */
    --r-sm: 4px;           /* radius/sm */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px;
  }
  /* tema claro — mismos tokens, valores claros (para tablas densas y mejor lectura) */
  :root[data-theme="light"] {
    --bg: #eef0f3;
    --bg2: #e2e6ea;
    --card: #ffffff;
    --card2: #f0f2f5;
    --glass: rgba(255,255,255,.82);
    --header: #ffffff;
    --border: rgba(16,24,40,.08);
    --border-soft: rgba(16,24,40,.06);
    --border-strong: rgba(16,24,40,.16);
    --text: #0f1728;
    --muted: #5b6472;
    --neutral: #344054;
    /* verde accesible para tema claro (texto ≥4.5:1 sobre blanco, WCAG AA).
       El #00C853 daba ~2.1:1 y no se leía. */
    --accent: #0A7C36;
    --accent-dim: rgba(10,124,54,.12);
    --accent-line: rgba(10,124,54,.55);
    --color-brand-soft: rgba(10,124,54,.10);
    --gold: #b07d0c;
    --red: #e5484d;
    --blue: #2f7ee6;
    --brand-ink: #05111F;  /* tinta del isotipo (la "O") sobre fondo claro */
  }
  /* En claro el hero (carrusel) llevaba texto blanco + sombra para fondo oscuro;
     el velo del fondo ya es blanco, así que el texto debe ir oscuro y sin sombra. */
  :root[data-theme="light"] .hero-slide { text-shadow: none; }
  :root[data-theme="light"] .hs-name,
  :root[data-theme="light"] .hs-hora,
  :root[data-theme="light"] span.hs-flag { color: var(--text); }
  :root[data-theme="light"] .hs-torneo { color: var(--neutral); }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family:var(--p-font-body);
    min-height: 100vh;
    padding-bottom: 96px;
  }
  /* los form controls no heredan la fuente por defecto → usar la tipografía compartida en todos */
  button, input, select, textarea { font-family: inherit; }
  .wrap { max-width: 520px; margin: 0 auto; padding: 0 var(--s4); }
  svg { display: block; }

  /* ================= MOTION SYSTEM =================
     Tokens únicos para TODO el movimiento de la app (bench: M3 + fintech 2026).
     Reglas: entrar lento (decelerate), salir rápido (accelerate); animar solo
     transform/opacity; datos en vivo = flash de color, cero movimiento. */
  /* Interaction durations and curves are defined in pulso-motion.css. */

  /* ---------- interacción: transiciones sutiles y consistentes (premium) ----------
     Capa base para que hovers/estados/press se sientan suaves en toda la app.
     No usamos `* { transition: all }` (tosco y caro): la aplicamos a lo interactivo.
     Reglas específicas que definen su propio `transition` siguen ganando (van después). */
  a, button, [role="button"], .partido-card, .tk, .tk-head, .acc-head, .chip, .tab,
  input, select, textarea, .cuota-btn, .cuota, .opt-zona, .sb-liga, .sb-zona, .ed-opt, .ed-num,
  .pro-chip, .hdr-ingresar, .mp-pay-auto, .mp-pay-card, .leg, .leg-editor, .casa, .cc-tabla td,
  .nav-item, .toggle, .badge, .mp-badge {
    transition: color var(--m-fast) var(--e-standard),
      background-color var(--m-fast) var(--e-standard),
      border-color var(--m-fast) var(--e-standard),
      box-shadow var(--m-normal) var(--e-standard),
      transform var(--m-fast) var(--e-standard),
      opacity var(--m-fast) var(--e-standard);
  }
  /* press: hundido sutil e INMEDIATO (feedback <100ms), suelta con spring */
  button:active, [role="button"]:active, .partido-card:active, .cuota-btn:active,
  .cuota:active, .sb-liga:active, .opt-zona:active, .nav-item:active {
    transform: scale(.97); transition-duration: var(--m-instant); }
  /* hover lift solo donde hay puntero real (desktop) — no en táctil */
  @media (hover: hover) {
    .partido-card:hover, .tk:hover { box-shadow: 0 8px 24px rgba(0,0,0,.16); transform: translateY(-1px); }
    :root[data-theme="light"] .partido-card:hover,
    :root[data-theme="light"] .tk:hover { box-shadow: 0 8px 24px rgba(15,23,42,.10); }
    .cuota-btn:hover, .cuota:hover { border-color: var(--accent-line); }
  }
  /* aperturas de contenedores colapsables: se ANIMA LA ALTURA real (grid-rows
     0fr→1fr) para que el contenido empuje suavemente — se "abre", no se "prende".
     Cada cuerpo lleva un único hijo envoltorio con overflow hidden. */
  .acc-body, .tk-legs, .sb-zona-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--m-slow) var(--e-standard);
  }
  .acc.open .acc-body, .tk.open .tk-legs { grid-template-rows: 1fr; }
  .sb-zona-body { grid-template-rows: 1fr; }              /* zonas: abiertas por defecto */
  .sb-zona.col + .sb-zona-body { grid-template-rows: 0fr; }
  .acc-body > *, .tk-legs > *, .sb-zona-body > * {
    overflow: hidden; min-height: 0;
    transition: padding-top var(--m-slow) var(--e-standard),
      padding-bottom var(--m-slow) var(--e-standard),
      opacity var(--m-normal) var(--e-standard) 40ms;
  }
  /* cerrado: el padding vertical se va a 0 para que el cuerpo colapse del todo
     (con solo grid-rows el padding quedaría como un "asomo" bajo el header) */
  .acc:not(.open) .acc-body > *,
  .tk:not(.open) .tk-legs > *,
  .sb-zona.col + .sb-zona-body > * { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* el contenido interior se desvanece un pelín en sincronía (remate premium) */
  .acc-body > *, .tk-legs > * { opacity: 0; }
  .acc.open .acc-body > *, .tk.open .tk-legs > * { opacity: 1; }

  /* ---- ASIMETRÍA DE SALIDA: abrir lento (decelerate), cerrar rápido
     (accelerate) — lo que se va no merece ceremonia ---- */
  .acc.open .acc-body, .tk.open .tk-legs, .sb-zona:not(.col) + .sb-zona-body,
  .coach-panel:not(.col) .coach-body {
    transition-duration: var(--m-slow); transition-timing-function: var(--e-decelerate); }
  .acc:not(.open) .acc-body, .tk:not(.open) .tk-legs, .sb-zona.col + .sb-zona-body,
  .coach-panel.col .coach-body {
    transition-duration: var(--m-normal); transition-timing-function: var(--e-accelerate); }
  /* al cerrar, el contenido se apaga rápido y SIN delay (el delay es solo de entrada) */
  .acc:not(.open) .acc-body > *, .tk:not(.open) .tk-legs > *,
  .sb-zona.col + .sb-zona-body > *, .coach-panel.col .coach-body > * {
    transition-duration: var(--m-fast); transition-delay: 0ms; }

  /* ---- CHEVRONES: un solo lenguaje de movimiento ----
     Rotación 180° con leve overshoot (spring) y tinte accent al abrir.
     Los chevrones de NAVEGACIÓN (▸) no rotan: se deslizan 2px en hover. */
  /* CHEVRON DE DISCLOSURE — componente canónico ÚNICO.
     Regla: cerrado ▾ · abierto ▴ (rota 180° el WRAPPER, nunca el svg: mismo
     origen de giro en todos). 260ms, curva de entrada y salida, tinte accent abierto. */
  .flecha-sel, .zona-chev, .bc-chev, .acc-head .arrow, .coach-chev, .tk-chev,
  .tp-head .arrow, .sp-chev, .z-chev {
    display: inline-flex;
    transition: transform var(--p-motion-base) var(--p-motion-standard), color var(--m-fast) var(--e-standard);
  }
  .select-wrap.open .flecha-sel,
  .opt-zona.col:not(.col-on) .zona-chev,
  .breadcrumb.open .bc-chev,
  .acc.open .acc-head .arrow,
  .coach-panel:not(.col) .coach-chev,
  .tk.open .tk-chev,
  .tp.open .tp-head .arrow,
  .sb-sport:not(.col) .sp-chev,
  .sb-zona:not(.col) .z-chev {
    transform: rotate(180deg);
    color: var(--accent);
  }
  .vr-chev, .equipo-item > svg, .ts-item > svg, .bc-item .chev {
    transition: transform var(--m-fast) var(--e-standard); }
  @media (hover: hover) {
    .vivo-row:hover .vr-chev, .equipo-item:hover > svg,
    .ts-item:hover > svg, .ts-item.active > svg { transform: translateX(2px); }
  }

  /* ---------- transiciones ---------- */
  @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes aparecerBajar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .anim { animation: aparecer .24s cubic-bezier(.2,.7,.3,1) both; }
  .anim-baja { animation: aparecerBajar .2s ease both; }
  /* escalonado suave para listas (cada hijo entra un pelín después) */
  .anim-lista > * { animation: aparecer .28s cubic-bezier(.2,.7,.3,1) both; }
  .anim-lista > *:nth-child(1) { animation-delay: 0ms; }
  .anim-lista > *:nth-child(2) { animation-delay: 35ms; }
  .anim-lista > *:nth-child(3) { animation-delay: 70ms; }
  .anim-lista > *:nth-child(4) { animation-delay: 105ms; }
  .anim-lista > *:nth-child(5) { animation-delay: 140ms; }
  .anim-lista > *:nth-child(n+6) { animation-delay: 175ms; }
  /* ---------- skeleton loaders (bench NN/g: reducen el tiempo percibido) ----------
     Shimmer por transform (compositor, 60fps). Aparición diferida 250ms: si la
     carga es rápida, el skeleton ni se ve (evita el flash de esqueleto). */



  @keyframes skShimmer { to { transform: translateX(100%); } }
  .sk-wrap { opacity: 0; animation: skIn 1ms linear 250ms forwards; }
  @keyframes skIn { to { opacity: 1; } }

  /* flash de dato en vivo (gol): color, cero movimiento — patrón bet365/Action.
     Aparece <100ms y se desvanece ~1.3s; jamás desplaza layout. */
  .flash-dato { position: relative; }
  .flash-dato::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--accent); opacity: 0; pointer-events: none;
    animation: flashDato 1.4s var(--e-standard) both; }
  @keyframes flashDato { 0% { opacity: 0; } 7% { opacity: .30; } 100% { opacity: 0; } }

  /* entrada de vista al cambiar de tab (250ms decelerate, solo transform/opacity) */
  @keyframes vistaEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .vista-entra { animation: vistaEntra var(--m-normal) var(--e-decelerate) both; }

  /* reduced-motion: se elimina el MOVIMIENTO pero no el feedback — los cambios
     de color/opacidad se conservan a duración mínima (la UI no queda muerta) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
  }

  /* ---------- header ---------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header);
    box-shadow: 0 1px 0 var(--border), 0 4px 12px rgba(0,0,0,.05);
  }
  /* sombra paralela un poco más presente en el tema claro para que el header
     no se funda con el contenido */
  :root[data-theme="light"] header { box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(15,23,42,.07); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 57px; }
  .brand { display: flex; align-items: center; gap: var(--s2); }
  .brand h1 { font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
  .brand-iso { height: 24px; width: auto; flex: 0 0 auto; color: var(--brand-ink); display: block; }
  #sidebar .sb-brand .brand-iso { height: 26px; }
  .brand h1 em { color: var(--accent); font-style: normal; }
  .beta {
    font-size: 9px; font-weight: 700; color: var(--gold);
    border: 1px solid rgba(245,185,66,.5); border-radius: 6px; padding: 2px 7px;
    text-transform: uppercase; letter-spacing: .8px;
  }

  /* ---------- secciones ---------- */
  .seccion {
    display: flex; align-items: center; gap: var(--s2);
    font-size: 16px; font-weight: 700; color: var(--text);
    margin: var(--s5) 2px var(--s3);
  }
  .seccion svg { color: var(--accent); }
  /* bajada explicativa bajo un título de sección (p. ej. Picks del día) */
  .seccion-sub { color: var(--muted); font-size: 13px; line-height: 1.4; margin: -8px 2px 12px; }

  /* ---------- header derecho: nav de iconos (vuesax) ---------- */
  .header-right { display: flex; align-items: center; gap: 12px; }
  .hdr-auth { display: flex; align-items: center; }
  .hdr-login { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1f2328;
    font-weight: 700; font-size: 13px; border: none; border-radius: 999px; padding: 8px 15px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); }
  .hdr-login:hover { filter: brightness(.97); }
  .hdr-auth .gbtn { display: flex; }
  .hdr-login.compact { padding: 8px; border-radius: 50%; box-shadow: none; }
  /* morph del ícono del menú (hamburguesa → X) — anima las líneas del SVG.
     el color no cambia al abrir (se mantiene el del header) */
  .burger-svg line { transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .18s ease;
    transform-origin: center; transform-box: fill-box; }
  #btnMenu.abierto .burger-svg .l1 { transform: translateY(5px) rotate(45deg); }
  #btnMenu.abierto .burger-svg .l2 { opacity: 0; transform: scaleX(.2); }
  #btnMenu.abierto .burger-svg .l3 { transform: translateY(-5px) rotate(-45deg); }
  /* botón sobrio de acceso + modal de auth (marca + Google + captura de correo) */
  /* Regístrate: SIN borde (Figma) — solo el relleno en degradado */
  .hdr-ingresar { box-sizing: border-box; display: inline-flex; align-items: center;
    justify-content: center; gap: 10px; height: 40px; padding: 12px 24px; border-radius: 32px;
    border: none; background: linear-gradient(98deg, #01E65E, #01D83D);
    color: #08090A; font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer;
    transition: filter .15s, transform .15s; }
  .hdr-ingresar:hover { filter: brightness(1.05); }
  .hdr-ingresar:active { transform: translateY(1px); }
  /* modal de acceso — misma línea gráfica del Pay pop up (#0F1011, radius 24, pills) */
  .modal-auth { background: #0F1011; border: 1px solid #181A1A; border-radius: 24px; width: 100%;
    max-width: 720px; overflow: hidden; position: relative; display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    transform: translateY(22px); transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .modal-pro-back.open .modal-auth { transform: none; }
  :root[data-theme="light"] .modal-auth { background: #ffffff; border-color: rgba(16,24,40,.10); }
  .auth-brand { background: linear-gradient(155deg, #013b20, #0a1320 70%); padding: 34px 26px;
    display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .auth-brand-logo { font-weight: 900; font-size: 22px; color: #fff; }
  .auth-brand-logo em { color: var(--accent); font-style: normal; }
  .auth-brand h3 { font-size: 23px; font-weight: 900; line-height: 1.15; color: #fff; }
  .auth-brand ul { list-style: none; display: grid; gap: 10px; }
  .auth-brand li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #d7e9df; }
  .auth-brand li svg { color: var(--accent); flex: 0 0 auto; }
  .auth-form { padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 12px; }
  .auth-form h2 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; padding-right: 40px; }
  .auth-sub { color: var(--muted); font-size: 14px; margin-top: -6px; }
  .auth-form .gbtn { display: flex; justify-content: center; margin-top: 8px; min-height: 44px; }
  .auth-legal { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
  .auth-news-head { font-size: 14px; font-weight: 800; }
  .auth-news-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: -6px 0 2px; }
  .auth-news { display: flex; gap: 8px; }
  .auth-news input { flex: 1; min-width: 0; background: #181A1A; border: 1px solid #1E1F20; color: var(--text);
    border-radius: 32px; padding: 11px 16px; font-size: 14px; }
  .auth-news input::placeholder { color: var(--muted); }
  :root[data-theme="light"] .auth-news input { background: #f0f2f5; border-color: rgba(16,24,40,.10); }
  .auth-news-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px;
    background: linear-gradient(98deg, #01E65E, #01D83D); color: #08090A; font-weight: 800; font-size: 13px;
    border: none; border-radius: 32px; padding: 0 18px; cursor: pointer; white-space: nowrap; }
  @media (max-width: 640px) { .modal-auth { grid-template-columns: minmax(0,1fr); max-width: 370px; } .auth-brand { display: none; } }
  /* fuera del layout desktop (<1024px): el header muestra solo el isotipo OB */
  @media (max-width: 1023px) {
    header .brand h1 { display: none; }
  }
  @media (max-width: 640px) {
    .reg-extra { display: none; }       /* "Regístrate" (sin "gratis") */
    .hdr-ingresar { padding: 0 14px; font-size: 12.5px; }
    .pro-chip { padding: 0 12px; font-size: 12.5px; }
    .header-right { gap: 7px; }
  }
  .hnav { display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; background: none; border: 0; padding: 0; }
  .hnav svg { width: 18px; height: 18px; }
  .lupa {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--card); border: 1px solid var(--border); border-radius: 50%;
    color: var(--text); cursor: pointer;
  }
  .lupa:active { border-color: var(--accent-line); }

  /* ---------- buscador (bottom sheet) ---------- */
  .modal { position: fixed; inset: 0; z-index: 100; display: none; }
  .modal.open { display: block; }
  .modal::before { content: ""; position: absolute; inset: 0; background: rgba(4,7,14,.6); backdrop-filter: blur(3px); }
  .sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--bg2); border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  }
  .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 0 auto var(--s3); }
  .buscar-cab { display: flex; gap: var(--s2); align-items: center; }
  .buscar-cab input {
    flex: 1; height: 44px; padding: 0 var(--s4); border-radius: var(--r-md);
    background: var(--card); border: 1px solid var(--border); color: var(--text);
    font-size: 15px; font-family: inherit;
  }
  .buscar-cab input:focus { outline: none; border-color: var(--accent-line); }
  .buscar-x {
    width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--muted); cursor: pointer;
  }
  .buscar-res { overflow-y: auto; margin-top: var(--s3); }
  .buscar-hint { text-align: center; color: var(--muted); font-size: 12px; padding: var(--s5) 0; }
  .buscar-grupo { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
    color: var(--muted); padding: 12px 2px 6px; }
  .buscar-grupo:first-child { padding-top: 2px; }

  /* ---------- calibración ---------- */
  .calib {
    margin: var(--s3) 0; padding: var(--s4); border-radius: var(--r-lg);
    background: var(--card); border: 1px solid var(--border);
  }
  .calib h4 { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--s3); }
  .calib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .calib-box { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px; text-align: center; }
  .calib-box .v { font-size: 18px; font-weight: 800; }
  
  .calib-box .v.media { color: var(--gold); }
  .calib-box .v.mala { color: var(--red); }
  .calib-box .k { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

  /* ---------- verificación ---------- */
  .verif-fila {
    display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); align-items: center;
    padding: var(--s3) var(--s4); font-size: 13px;
  }
  .verif-fila + .verif-fila { border-top: 1px solid var(--border-soft); }
  .verif-fila.reconstruccion { grid-template-columns: 1fr auto; }
  .verif-fila .verif-meta { color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
  .verif-originales { max-height: 430px; overflow-y: auto; }
  .verif-fila .quien { font-weight: 600; }
  .verif-fila .par { text-align: right; font-size: 12px; }
  .verif-fila .par small { color: var(--muted); display: block; margin-top: 1px; }
  .verif-fila .par .real { font-weight: 800; color: var(--text); font-size: 14px; }
  .verif-badge { font-size: 10.5px; font-weight: 800; padding: 5px 8px; border-radius: var(--r-sm); min-width: 62px; text-align: center; }

  .tab-pendiente { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); font-size: 13px; line-height: 1.6; }
  .tab-pendiente svg { color: var(--border); margin: 0 auto var(--s3); }
  .tab-pendiente b { color: var(--text); display: block; font-size: 15px; margin-bottom: var(--s2); }

  /* ---------- estadísticas del partido (comparativa local/visita) ---------- */
  .stat-comp { padding: var(--s2) 0; }
  .stat-comp-fila { padding: var(--s2) var(--s4); }
  .stat-comp-fila .vals { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; }
  .stat-comp-fila .lbl { text-align: center; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 2px 0 4px; }
  .stat-bar { display: flex; height: 6px; gap: 3px; }
  .stat-bar .l, .stat-bar .r { height: 100%; border-radius: 3px; }
  .stat-bar .l { margin-left: auto; }
  
  
  

  /* ---------- lista de equipos ---------- */
  .equipo-item {
    display: flex; align-items: center; gap: var(--s3);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--s3) var(--s4); margin-bottom: var(--s2); cursor: pointer;
  }
  .equipo-item:active { border-color: var(--accent-line); }
  .equipo-item .nombre { flex: 1; font-size: 14px; font-weight: 700; }
  .equipo-item .n { font-size: 11px; color: var(--muted); }

  /* ---------- ficha de equipo ---------- */
  .ficha-head {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--s4);
    padding: var(--s5) var(--s4); margin: var(--s3) 0; border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .ficha-head > .fh-row, .ficha-head > .forma { position: relative; z-index: 1; }
  .fh-row { display: flex; align-items: center; gap: var(--s4); }
  .ficha-head .escudo { width: 48px; height: 48px; }
  .ficha-head .bandera-xl { width: 56px; height: 40px; border-radius: 8px 8px 8px 0; object-fit: cover; flex: 0 0 auto; border: 1px solid #fff; }
  .ficha-head .bandera-xl.crest { object-fit: contain; border: none; }
  .ficha-head .escudo.mono { width: 56px; height: 40px; border-radius: 8px 8px 8px 0; font-size: 18px; }
  .ficha-head h2 { font-size: 20px; font-weight: 800; }
  .ficha-head .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

  .ficha-sec { margin: var(--s5) 2px var(--s3); font-size: 16px; font-weight: 700; color: var(--text); }
  .ficha-sec small, .ficha-sec .sub { font-size: 11px; font-weight: 500; color: var(--muted); }
  .balance-row { background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 16px 18px; }
  .balance-row .bl-head { display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s3); margin-bottom: 13px; }
  .balance-row .bl-tit { font-size: 16px; font-weight: 700; color: var(--text); }
  .balance-row .bl-total { color: var(--muted); font-size: 12px; }
  .balance-row .bl-track { display: flex; height: 8px; overflow: hidden;
    border-radius: 999px; background: var(--bg2); }
  .balance-row .bl-track span { display: block; height: 100%; }
  .balance-row .bl-track .v { background: var(--p-result-win-fill); }
  .balance-row .bl-track .e { background: var(--p-result-draw-fill); }
  .balance-row .bl-track .d { background: var(--p-result-loss-fill); }
  .balance-row .bl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none; margin: 13px 0 0; padding: 0; }
  .balance-row .bl-list li { display: flex; align-items: baseline; justify-content: center;
    gap: 8px; min-width: 0; border-right: 1px solid var(--border); }
  .balance-row .bl-list li:last-child { border-right: 0; }
  .balance-row .bl-list strong { font-size: 22px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
  .balance-row .bl-list .v strong { color: var(--p-success); }
  .balance-row .bl-list .e strong { color: var(--p-text-muted); }
  .balance-row .bl-list .d strong { color: var(--p-danger); }
  .balance-row .bl-list span { font-size: 13px; font-weight: 600; }
  .balance-row .bl-list small { color: var(--muted); font-size: 12px; }
  @media (max-width: 600px) {
    .balance-row .bl-list li { flex-direction: column; align-items: center; gap: 3px; }
    .balance-row .bl-list span { font-size: 11px; }
    .balance-row .bl-list small { font-size: 11px; }
  }

  /* ---------- card de sección de ficha (título + divisor + contenido) ---------- */
  .fcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    margin: var(--s3) 0; overflow: hidden; }
  .fcard-head { padding: 16px; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: var(--s2); }
  .fcard-body { padding: 12px 0; }
  .fcard-body.pad { padding: 16px; }

  .prom-fila {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; font-size: 13px;
  }
  .prom-fila .barra { flex: 1; height: 6px; background: var(--bg2); border-radius: 3px; margin: 0 var(--s3); overflow: hidden; }
  .prom-fila .barra i { display: block; height: 100%; background: var(--p-chart-home); border-radius: 3px; }
  .prom-fila b { font-size: 15px; font-weight: 800; min-width: 34px; text-align: right; }

  .forma-item {
    display: flex; align-items: center; gap: var(--s4);
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    cursor: pointer; font-size: 13px;
  }
  .forma-item:last-child { border-bottom: 0; }
  .forma-item:active { background: var(--card2); }
  .forma-item .desc { flex: 1; min-width: 0; }
  .forma-item .desc .mk-line { font-size: 16px; display: flex; align-items: center; gap: 8px; }
  .forma-item .desc small { color: var(--muted); display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
  .forma-item .desc .op-flag { width: 26px; height: 18px; border-radius: 4px 4px 4px 0; object-fit: cover; border: 1px solid #fff; flex: 0 0 auto; }
  .forma-item .mk { font-weight: 700; }
  .forma-item svg { color: var(--muted); flex: 0 0 auto; }

  /* ---------- selector de torneo (dropdown custom, mismo tema) ---------- */
  .select-wrap { position: relative; }
  .select-btn {
    width: 100%; height: 40px; display: flex; align-items: center; gap: var(--s2);
    background: var(--card2);
    border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit;
    padding: 0 16px; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
  }
  .select-btn:hover { border-color: var(--accent-line); }
  .select-btn .txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
  .select-btn .txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .select-btn .txt svg { flex: 0 0 auto; color: var(--accent); }
  .select-btn .txt .liga-logo { flex: 0 0 auto; }
  .select-btn .flecha-sel {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--muted);
  }
  .select-wrap.open .select-btn { border-color: var(--accent-line); }
  .menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(0,0,0,.5); overflow-y: auto; overflow-x: hidden;
    max-height: 66vh; display: none;
  }
  .select-wrap.open .menu { display: block; }
  .opt {
    display: flex; align-items: center; gap: var(--s2);
    padding: 13px var(--s4); font-size: 13.5px; font-weight: 600;
    color: var(--muted); cursor: pointer;
  }
  .opt + .opt { border-top: 1px solid var(--border-soft); }
  /* encabezado de zona (no clickeable) */
  .opt-zona {
    position: sticky; top: 0; z-index: 1;
    padding: 9px var(--s4) 5px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
    background: var(--header); border-top: 1px solid var(--border-soft);
  }
  .opt-zona:first-child { border-top: none; }
  .opt-zona + .opt { border-top: none; }
  .opt:active { background: var(--bg2); }
  .opt.on { color: var(--accent); background: var(--accent-dim); }
  .opt svg { flex: 0 0 auto; color: var(--accent); }
  /* buscador del dropdown (fijo arriba) */
  .menu-buscar {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
    padding: 10px var(--s4); background: var(--card2); border-bottom: 1px solid var(--border);
  }
  .menu-buscar svg { color: var(--muted); flex: 0 0 auto; }
  .menu-buscar input {
    flex: 1; background: var(--bg2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; outline: none;
  }
  .menu-buscar input:focus { border-color: var(--accent-line); }
  .menu .opt-zona { top: 55px; }  /* que las cabeceras peguen bajo el buscador */
  /* chips de populares */
  .pop-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--s4); }
  .pop-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
    background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 999px;
    color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  }
  .pop-chip:active { background: var(--accent-dim); }
  .pop-chip img { width: 15px; height: 15px; object-fit: contain; }
  /* bandera de país de la liga */
  .opt-flag { flex: 0 0 auto; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; margin-left: 6px; }
  /* estrella de favorito */
  .opt-fav {
    margin-left: 8px; background: none; border: none; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--muted); padding: 2px 4px;
  }
  .opt-fav.on { color: var(--gold, #f5c518); }
  /* la bandera va antes de la estrella; el nombre empuja al centro */
  .opt > span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* cabecera de zona colapsable */
  .opt-zona.col { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  /* estándar de disclosure: cerrado ▾, abierto ▴ (col-on = colapsado) */
  .opt-zona.col .zona-chev { display: flex; color: var(--muted); }
  .opt-zona.col:active { background: var(--bg2); }
  .liga-logo {
    flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain;
    border-radius: 4px 4px 4px 0; background: #fff; padding: 1px;
  }

  /* ---------- cards de partido ---------- */
  .partido-card {
    display: flex; flex-direction: column; gap: 0;
    background: var(--card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 0 0 12px; margin-bottom: 12px;
    cursor: pointer; transition: border-color .15s, transform .1s;
  }
  .partido-card:active { transform: scale(.985); }
  .ver-mas {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 12px; margin: 2px 0 10px;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  }
  .ver-mas:active { transform: scale(.99); }
  .ver-mas svg { display: block; }
  .partido-card.on { border-color: var(--accent-line); cursor: default; box-shadow: 0 0 0 1px var(--accent-line); }
  .pc-tag { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .pc-top { display: flex; align-items: center; gap: 16px; padding: 16px; }
  .pc-main { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .pc-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .pc-teams { display: flex; flex-direction: column; gap: 16px; }
  .pc-fecha { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; }
  .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 0; border-top: 1px solid var(--border); font-size: 12px; font-weight: 500; }
  .pc-foot .pf-fav { display: flex; align-items: center; gap: 4px; }
  .pc-foot .pf-cuota { display: flex; align-items: center; gap: 6px; }
  .pc-foot svg { color: var(--gold); flex: 0 0 auto; }
  .pc-foot b { color: var(--gold); font-weight: 600; }
  .pc-foot .pctv, .pc-foot .sep { color: var(--text); }
  .pc-foot .c { color: var(--accent); }
  .liga-tag {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: .7px;
  }
  .liga-logo-mini {
    width: 16px; height: 16px; object-fit: contain; border-radius: 3px 3px 3px 0;
  }
  .eq { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 700; }
  .eq .rol {
    flex: 0 0 34px; text-align: center;
    font-size: 8.5px; font-weight: 700; color: var(--muted);
    background: var(--bg2); border: 1px solid var(--border-soft); border-radius: 5px;
    padding: 2px 0; text-transform: uppercase; letter-spacing: .5px;
  }

  /* ---------- escudos: banderas + monogramas ---------- */
  .escudo {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; background: var(--bg2);
    border: 1px solid var(--border-soft);
  }
  .escudo.mono {
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; border: none; letter-spacing: .3px;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 -4px 7px rgba(0,0,0,.28);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  .escudo.crest { object-fit: contain; background: none; border: none; }
  .escudo-lg { width: 34px; height: 34px; }
  .escudo-lg.mono { font-size: 13px; }
  /* ---------- rematadores ---------- */

  .p-detail-player-group .p-detail-grid > .acc:has(.p-player-shot-columns) { flex-basis: 100%; width: 100%; }
  .p-player-shot-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .p-player-shot-more { margin-top: 12px; }
  .p-player-shot-more summary { width: fit-content; min-height: 36px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--muted); }
  .p-player-shot-more summary::after { content: '⌄'; }
  .p-player-shot-more[open] summary::after { transform: rotate(180deg); }
  .p-player-shot-more summary:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 3px; }
  .p-player-shot-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 16px; }
  .p-player-shot-team { min-width: 0; }
  .p-player-shot-team h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
  .p-player-shot-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
  .p-player-shot-table th:first-child { width: 46%; text-align: left; }
  .p-player-shot-table :is(th,td) { padding: 10px 4px; border-bottom: 1px solid var(--border-soft); text-align: right; vertical-align: middle; }
  .p-player-shot-table thead th { color: var(--muted); font-size: 11px; font-weight: 600; }
  .p-player-shot-table tbody th { font-weight: 600; }
  .p-player-shot-table small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
  .p-player-shot-name { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
  .p-player-shot-name .jug-foto { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; object-fit: cover; }
  @media (max-width: 700px) { .p-player-shot-columns { grid-template-columns: minmax(0,1fr); gap: 24px; } }

  .rematadores-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .rematadores-cols h4 {
    font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: var(--s2);
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .jug {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) 0;
  }
  .jug + .jug { border-top: 1px solid var(--border-soft); }
  .jug .rank {
    flex: 0 0 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg2); color: var(--muted);
  }
  .jug .rank.top { background: var(--accent-dim); color: var(--accent); }
  .jug .jug-foto { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--bg2); }
  .jug .info { flex: 1; min-width: 0; }
  .jug .nom { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jug .sub { font-size: 10px; color: var(--muted); }
  .jug .rpp { text-align: right; }
  .jug .rpp b { font-size: 14px; font-weight: 800; color: var(--accent); }
  .jug .rpp small { display: block; font-size: 9px; color: var(--muted); }

  .fav-mini {
    display: flex; align-items: center; gap: 5px;
    margin-top: var(--s2);
    font-size: 11px; color: var(--muted);
  }
  .fav-mini svg { color: var(--gold); flex: 0 0 auto; }
  .fav-mini b { color: var(--gold); font-weight: 700; }
  .fav-mini .c { color: var(--accent); font-weight: 800; }
  .cuando { text-align: right; flex: 0 0 auto; }
  .dia-pill {
    display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
    border-radius: var(--r-md); padding: 3px 8px; margin-bottom: 5px;
    background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-line);
    text-transform: uppercase;
  }
  .dia-pill.hoy { border-color: var(--accent); }
  .dia-pill.live { color:#ff5252; background:rgba(255,82,82,.12); border-color:rgba(255,82,82,.5);
    display:inline-flex; align-items:center; gap:5px; }
  .live-dot { width:6px; height:6px; border-radius:50%; background:#ff5252; animation:livePulse 1.2s ease-in-out infinite; }
  @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
  .hora { font-size: 14px; font-weight: 700; }
  .ir {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--muted);
  }

  /* ---------- hero: carrusel de destacados del día ---------- */
  #hero { margin-top: var(--s3); position: relative; }
  .hero-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg);
  }
  .hero-track::-webkit-scrollbar { display: none; }
  .hero-slide {
    position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
    flex: 0 0 100%; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    border-radius: 12px; padding: 24px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
  }
  /* fondo mosaico solo para el Mundial; el resto usa logos en blur (mh-bg) */
  .hs-bg-img { position: absolute; inset: 0; z-index: -2; background: url("/logos/hero-bg.png?v=3") center/cover no-repeat; }
  .hs-torneo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--gold); }
  .hs-torneo img { width: 16px; height: 16px; object-fit: contain; }
  .hs-body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .hs-rivales { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 4px; box-sizing: border-box; }
  .hs-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; }
  .hs-flag { width: 60px; height: 40px; object-fit: cover; border: 1px solid #fff; flex: 0 0 auto; border-radius: 8px 8px 8px 0; }
  .hs-flag.crest { object-fit: contain; background: none; border: none; width: 48px; height: 48px; }
  span.hs-flag { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
  .hs-name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .hs-fecha { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
  .hs-fecha .dia-pill { border-radius: 4px; padding: 4px 6px; font-size: 12px; margin: 0; }
  .hs-hora { font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
  /* dots en-flujo dentro de la card (5px grises, gap 4, a 16px de los rivales — exacto del Figma) */
  .hs-dots { display: flex; justify-content: center; gap: 4px; }
  .hs-dot { width: 5px; height: 5px; border-radius: 50%; background: #7c7c7c; transition: background .2s; }
  .hs-dot.on { background: #d9d9d9; }

  /* ---------- strip "Hoy": partidos del día (terminado / en vivo / por jugar) ---------- */
  .hoy-head { display: flex; align-items: center; justify-content: space-between; margin: var(--s5) 2px var(--s3); }
  .hoy-head .seccion { margin: 0; }
  .hoy-cal { background: none; border: 0; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px; }
  .hoy-track { display: flex; flex-wrap: wrap; gap: var(--s3); padding: 2px; }
  .hoy-card {
    flex: 1 1 240px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 12px 16px; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    transition: border-color .15s, transform .1s;
  }
  .hoy-card:active { transform: scale(.98); }
  .hoy-card.vivo { border-color: rgba(255,107,107,.5); }
  .hoy-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .hoy-eq.der { justify-content: flex-end; }
  .hoy-eq .bandera-sm { width: 24px; height: 16px; border-radius: 4px 4px 4px 0; }
  .hoy-eq .nombre { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hoy-centro { text-align: center; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .hoy-score { font-size: 15px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
  .hoy-hora { font-size: 12.5px; font-weight: 700; color: var(--neutral); white-space: nowrap; }
  .hoy-estado { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
    display: inline-flex; align-items: center; gap: 4px; }
  .hoy-card.vivo .hoy-estado { color: var(--red); }
  .hoy-card.vivo .hoy-estado .live-dot { width: 6px; height: 6px; }

  /* ---------- header de partido (detalle, estilo Sofascore) ---------- */
  .mh {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: var(--s3); padding: var(--s5) var(--s5) var(--s6);
    border-radius: var(--r-lg);
    background: var(--card); border: none;
  }
  /* fondo del match/team detail: banderas mitad y mitad con BLUR (LAYER_BLUR 70 del Figma) */
  .mh-bg { position: absolute; inset: -50px; display: flex; z-index: -2;
    /* el color de los escudos se DISUELVE hacia los bordes: sin esto, un escudo
       muy saturado (p.ej. Celtic verde) tiñe toda la card y el borde recto la
       corta como un "cuadrado" — el fade lo funde con la superficie */
    -webkit-mask-image: radial-gradient(115% 95% at 50% 42%, #000 22%, transparent 76%);
    mask-image: radial-gradient(115% 95% at 50% 42%, #000 22%, transparent 76%);
  }
  .mh-bg > div {
    flex: 1; background-size: cover; background-position: center;
    filter: blur(28px) brightness(.72) saturate(.85); transform: scale(1.3);
    opacity: .75;
  }
  .mh-overlay { position: absolute; inset: 0; z-index: -1; background: var(--glass); }
  .mh > .mh-liga, .mh > .mh-row { position: relative; z-index: 1; }
  .mh-team .bandera-xl {
    width: 74px; height: 52px; border-radius: 8px 8px 8px 0; object-fit: cover;
    border: 1px solid #fff;
  }
  .mh-team .bandera-xl.crest { object-fit: contain; border: none; }
  .mh-team .escudo.mono { width: 74px; height: 52px; border-radius: 8px 8px 8px 0; font-size: 20px; }
  .mh-liga {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 10px; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--s4);
  }
  .mh-liga img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; background: #fff; padding: 1px; }
  .mh-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); }
  .mh-team { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
  .mh-team.clickable { cursor: pointer; border-radius: var(--r-md); padding: 6px 4px; transition: background .15s; }
  .mh-team.clickable:active { background: var(--bg2); }
  .mh-team .escudo { width: 54px; height: 54px; }
  .mh-team .escudo.mono { font-size: 20px; }
  .mh-team .nombre { font-size: 14px; font-weight: 700; line-height: 1.2; }
  .mh-mid { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: 0 var(--s3); }
  .mh-hora { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }

  /* ---------- en vivo ---------- */
  .live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--red);
    box-shadow: 0 0 8px rgba(255,107,107,.8); animation: pulse 1.2s infinite;
  }
  .vivo-card {
    background: var(--card);
    border: 1px solid rgba(255,107,107,.35); border-radius: var(--r-lg);
    padding: var(--s4); margin-bottom: var(--s3);
  }
  .vivo-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--s3);
  }
  .vivo-min {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; color: var(--red);
    text-transform: uppercase; letter-spacing: .6px;
  }
  .marcador {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: var(--s2); margin-bottom: var(--s3);
  }
  .marcador .lado { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .marcador .lado .nombre { font-size: 12.5px; font-weight: 700; line-height: 1.15; }
  .marcador .num { font-size: 30px; font-weight: 800; letter-spacing: 2px; }
  .vivo-stats { border-top: 1px solid var(--border-soft); padding-top: var(--s3); }
  .vivo-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .st-chip {
    flex: 1 1 0; min-width: 62px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: var(--bg2); border: 1px solid var(--border-soft);
    border-radius: var(--r-sm); padding: 7px 6px;
  }
  .st-chip .lbl {
    font-size: 8.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  }
  .st-chip .val { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; }
  .st-chip svg { color: var(--muted); }
  .st-chip.amarilla svg { color: var(--gold); }
  .st-chip.roja svg { color: var(--red); }
  .vs-row {
    display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
    padding: 5px 0; font-size: 12px;
  }
  .vs-row .v { font-weight: 800; text-align: center; }
  .vs-row .k { text-align: center; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
  .vs-row .est { color: var(--accent); }
  .vivo-cuotas {
    display: flex; gap: var(--s2); margin-top: var(--s2);
  }
  .vivo-cuotas .cq {
    flex: 1; text-align: center; background: var(--bg2);
    border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 7px 4px;
  }
  .vivo-cuotas .cq b { display: block; font-size: 14px; color: var(--accent); }
  .vivo-cuotas .cq span { font-size: 9px; color: var(--muted); text-transform: uppercase; }

  /* ---------- contexto / noticias ---------- */
  .noticia { padding: var(--s2) 0; border-top: 1px solid var(--border-soft); }
  .noticia:first-child { border-top: none; }
  a.noticia { display: block; color: inherit; text-decoration: none; }
  a.noticia:active { background: var(--bg2); }
  a.noticia .t { color: var(--accent); }
  .noticia .t { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
  .noticia .f { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .ctx-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
  .ctx-chip {
    font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px;
    background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-line);
  }
  .ctx-chip.veto { background: rgba(255,107,107,.1); color: var(--red); border-color: rgba(255,107,107,.4); }
  .ctx-resumen { font-size: 12.5px; line-height: 1.5; }
  .ctx-sub { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin: var(--s3) 0 var(--s1); }

  /* ---------- breadcrumb desplegable (torneo → partidos / equipos) ---------- */
  .det-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: var(--s4) 0 var(--s1); }
  .det-back {
    flex: 0 0 auto; background: none; border: none; color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px;
    font-family: inherit; font-size: 16px; font-weight: 600;
  }
  .det-back:active { opacity: .6; }
  .det-back svg { flex: 0 0 auto; }
  .det-top .breadcrumb { flex: 0 1 auto; min-width: 0; margin: 0; }
  .breadcrumb { position: relative; z-index: 70; margin: var(--s4) 0 var(--s1); }
  .bc-drop {
    display: inline-flex; align-items: center; gap: var(--s2);
    background: none; border: 0; padding: 6px 4px; cursor: pointer;
    color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700;
    max-width: 100%;
  }
  .bc-drop .bc-logo { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
  .bc-drop .bc-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-drop .bc-chev { display: flex; color: var(--muted); flex: 0 0 auto; }
  /* bottom-sheet modal "Selecciona el Partido/Equipo" (fiel a Select Match/Team) */
  .bc-modal { position: fixed; inset: 0; z-index: 200; display: none; }
  .bc-modal.open { display: block; }
  .bc-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.64); }
  .bc-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto;
    background: var(--card); background: color-mix(in srgb, var(--card) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-radius: 16px 16px 0 0; padding: 24px 0 24px;
    max-width: 520px; margin: 0 auto;
    animation: sheetUp .22s ease both;
  }
  @keyframes sheetUp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
  .bc-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 8px; }
  .bc-sheet-head .bc-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .bc-x { background: none; border: 0; color: var(--text); cursor: pointer; display: flex; padding: 4px; }
  .bc-sheet-body { padding: 0 16px; }
  .bc-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%;
    padding: 16px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text);
    font-family: inherit; text-align: left; cursor: pointer;
  }
  .bc-row:last-child { border-bottom: 0; }
  .bc-row:active { opacity: .7; }
  .bc-row.actual .bc-tm { color: var(--accent); }
  .bc-match { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .bc-match.match { justify-content: flex-start; }
  .bc-tm { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-vs { font-size: 15px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
  .bc-flag { width: 30px; height: 20px; border-radius: 6px 6px 6px 0; object-fit: cover; flex: 0 0 auto; background: var(--bg2); border: .5px solid #fff; }
  .bc-flag.crest { object-fit: contain; border: none; background: none; border-radius: 4px 4px 4px 0; }
  .bc-caret { flex: 0 0 auto; display: flex; color: var(--muted); }

  /* ---------- vacío / aviso ---------- */
  .vacio {
    text-align: center; padding: var(--s6) var(--s5); color: var(--muted); font-size: 13px;
    background: var(--card); border: 1px dashed var(--border); border-radius: var(--r-lg);
    line-height: 1.6;
  }
  .vacio b { color: var(--text); display: block; font-size: 15px; margin-bottom: var(--s2); }
  .aviso {
    position: relative;
    display: flex; gap: var(--s2); align-items: flex-start;
    margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md);
    background: rgba(245,185,66,.07); border: 1px solid rgba(245,185,66,.3);
    color: var(--gold); font-size: 12px; line-height: 1.5;
  }
  .aviso svg { flex: 0 0 auto; margin-top: 1px; }
  .aviso.cerrable { padding-right: 36px; }
  .aviso-x {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 6px;
    color: var(--gold); cursor: pointer; opacity: .7;
  }
  .aviso-x:active { opacity: 1; background: rgba(245,185,66,.15); }

  /* ---------- acordeón ---------- */
  .acc {
    margin: var(--s3) 0; border-radius: var(--r-lg);
    background: var(--card); border: 1px solid var(--border); overflow: hidden;
  }
  .acc-head {
    width: 100%; display: flex; align-items: center; gap: var(--s3);
    padding: var(--s5); background: none;
    border: none; color: var(--text); cursor: pointer; text-align: left;
    font-family: inherit;
  }
  .acc-head .ico { color: var(--accent); flex: 0 0 auto; }
  .acc-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .acc-head h3 { font-size: 16px; font-weight: 700; }
  .acc-head .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
  .acc-head .arrow {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--muted);
  }
  
  .acc-body > * { border-top: 1px solid var(--border-soft); }
  .pad { padding: var(--s5); }

  /* ---------- favorito ---------- */
  .fav-equipo { font-size: 16px; font-weight: 700; color: var(--text); }
  .bandera-sm { width: 32px; height: 22px; border-radius: 6px 6px 6px 0; object-fit: cover; flex: 0 0 auto; background: var(--bg2); border: 0.5px solid #fff; }
  .bandera-sm.crest { object-fit: contain; background: none; border: none; }
  .eq .escudo.mono, .fav-equipo .escudo.mono { width: 32px; height: 22px; border-radius: 6px 6px 6px 0; }
  .fav-fuente { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .probbar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; margin-top: var(--s4); gap: 3px; }
  .probbar div { height: 100%; border-radius: 4px; }
  
  
  
  .problabels { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: var(--s2); }

  /* ---------- filas de mercado ---------- */
  .fila.cabecera {
    padding: var(--s2) var(--s5) 2px;
    font-size: 9px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .8px;
  }
  .fila.cabecera .proy-h { text-align: right; }
  .fila.cabecera .pick-h { min-width: 100px; text-align: center; }
  .fila.cabecera + .fila { border-top: none; }
  .fila {
    display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center;
    padding: var(--s4) var(--s5);
  }
  .fila + .fila { border-top: 1px solid var(--border-soft); }
  .fila .quien { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
  .pdot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--accent); }
  .pdot.media { background: var(--gold); }
  .pdot.off { background: var(--muted); opacity: .5; }
  .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .dot.alta { background: var(--accent); box-shadow: 0 0 7px rgba(30,198,118,.8); }
  .dot.media { background: var(--gold); }
  .dot.baja { background: var(--red); }
  .fila .proy { font-size: 15px; font-weight: 800; text-align: right; }
  .fila .proy small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; margin-top: 1px; }
  .pick {
    font-size: 12px; font-weight: 800; text-align: center;
    background: var(--accent-dim); color: var(--accent);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm); padding: 6px 10px; min-width: 100px;
  }
  .pick small { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
  .pick.sin { background: none; border-color: var(--border); color: var(--muted); }

  .nota-metodo { font-size: 10.5px; color: var(--muted); padding: 2px var(--s5) var(--s2); }
  .nota-metodo b { color: var(--text); font-weight: 700; }

  /* ---------- línea de tiempo ---------- */
  .tl { padding: var(--s4) var(--s5); }
  .tl-fila { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
  .tl-fila + .tl-fila { border-top: 1px solid var(--border-soft); }
  .tl-fila.visitante { flex-direction: row-reverse; text-align: right; }
  .tl-min { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--muted); min-width: 26px; }
  .tl-mark {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .tl-mark.gol { background: var(--accent-dim); color: var(--accent); }
  .tl-mark.cambio { background: var(--bg2); color: var(--muted); }
  .tl-mark.amarilla { width: 11px; height: 15px; border-radius: 2px; background: var(--gold); }
  .tl-mark.roja { width: 11px; height: 15px; border-radius: 2px; background: var(--red); }
  .tl-mark.otro { background: var(--bg2); }
  .tl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tl-jug { font-size: 13px; font-weight: 600; }
  .tl-sub { font-size: 10px; color: var(--muted); }

  /* ---------- esports (seguimiento Dota 2) ---------- */
  .es-serie { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    margin: var(--s2) 0; padding: 12px 14px; }
  .es-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); }
  .es-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .es-eq.der { justify-content: flex-end; }
  .es-eq .nom { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .es-eq:not(.gana) .nom { color: var(--muted); font-weight: 600; }
  .es-logo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
  .es-logo.ph { background: var(--bg2); border-radius: 5px; }
  .es-marc { font-size: 18px; font-weight: 800; white-space: nowrap; padding: 0 6px; }
  .es-marc span { color: var(--muted); font-weight: 600; }
  .es-games { margin-top: 6px; font-size: 10px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .es-g { background: var(--bg2); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
  .es-torneo { font-size: 14px; margin-top: var(--s5); }
  .es-pred { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-soft);
    font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .es-pred b { color: var(--text); }
  .es-ok { font-weight: 900; }
  .es-no { color: var(--red); font-weight: 900; }
  /* ---------- otros deportes: tabs superiores estilo Sofascore ---------- */
  .dep-tabs {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dep-tabs::-webkit-scrollbar { display: none; }
  .dep-tab {
    flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: var(--card); border: 1px solid var(--border-strong);
    color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 800;
  }
  .dep-tab.on { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
  .dep-tab:active { transform: scale(.97); }
  .dep-ev { display: flex; align-items: center; gap: 10px; }
  .dep-nom { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dep-marc { font-size: 15px; font-weight: 800; white-space: nowrap; }
  .dep-marc small { font-size: 12px; font-weight: 700; color: var(--muted); }
  .dep-marc span { color: var(--muted); font-weight: 600; }
  .dep-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: var(--red); }
  .dep-fin { font-size: 10px; font-weight: 800; color: var(--muted); }
  .dep-click { cursor: pointer; }
  .dep-click:active { border-color: var(--accent-line); }
  .dep-logo { width: 34px; height: 34px; object-fit: contain; }

  .dota-h2h { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
  .dota-h2h select { width: 100%; padding: 9px 8px; border-radius: var(--r-sm); background: var(--bg2);
    color: var(--text); border: 1px solid var(--border-strong); font-family: inherit; font-size: 12px; }
  .dota-vs { font-size: 11px; font-weight: 800; color: var(--muted); }
  .dota-pred { margin-top: 12px; }
  .dota-bar { height: 10px; border-radius: 6px; overflow: hidden; background: #eaeaea; }
  .dota-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #06b378); }
  .dota-pct { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; }
  .dota-pct b:last-child { color: var(--muted); }

  /* ---------- resumen de cambios ---------- */

  /* ---------- cuotas ---------- */
  .cuota-fila {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
    background: var(--bg2); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: 13px;
  }
  .cuota-fila + .cuota-fila { margin-top: var(--s2); }
  .cuota-fila b { color: var(--accent); font-size: 14px; }
  .cuota-fila .lin { font-weight: 700; }
  .cuota-fila small { color: var(--muted); }
  .cuotas-1x2 { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
  .cuotas-1x2 .cq {
    flex: 1; text-align: center; background: var(--bg2);
    border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 8px 4px;
  }
  .cuotas-1x2 .cq span { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
  .cuotas-1x2 .cq b { font-size: 15px; font-weight: 800; color: var(--accent); }
  .casa { display: inline-flex; align-items: center; gap: 3px; }
  .cuotas-1x2 .cq .casa { justify-content: center; margin-top: 5px; }
  .casa-logo { height: 14px; width: auto; max-width: 48px; object-fit: contain; background: #fff; padding: 2px 3px; border-radius: 3px; }
  .casa-nom { font-size: 9px; color: var(--muted); font-weight: 600; }
  .cuota-fila .ou-vals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .cuota-fila .ou-vals .casa-nom { font-size: 8.5px; }

  /* ---------- calculadora ---------- */
  .pad p.sub { font-size: 12px; color: var(--muted); margin-bottom: var(--s3); line-height: 1.5; }
  .pad .inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); }
  .pad label { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
  .pad input {
    width: 100%; margin-top: var(--s1); padding: 10px; border-radius: var(--r-sm);
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-size: 15px; font-weight: 700; font-family: inherit;
  }
  .pad input:focus { outline: none; border-color: var(--accent-line); }
  .pad .out { margin-top: var(--s3); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); text-align: center; }
  .pad .out .box { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 6px; }
  .pad .out .v { font-size: 16px; font-weight: 800; }
  .pad .out .k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
  
  .pad .out .neg { color: var(--red); }

  /* ---------- loader / footer ---------- */
  .loader { text-align: center; padding: var(--s6) 0; color: var(--muted); font-size: 14px; display: none; }
  .loader.on { display: block; }
  .pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: var(--s2); animation: pulse 1s infinite; }
  @keyframes pulse { 50% { opacity: .2; } }
  /* ---------- skeletons: evitan el "flash" de página vacía al cargar ---------- */




  @keyframes sk-shine { 100% { transform: translateX(100%); } }
  @media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }
  .sk-card { height: 92px; margin-bottom: var(--s3); }
  .sk-line { height: 11px; border-radius: 6px; background: var(--border-strong); }
  .sk-hero { height: 150px; margin-bottom: var(--s4); border-radius: var(--r-md); }

  footer {
    background: var(--header);
    border-top: 1px solid var(--border-soft);
    padding: var(--s3) var(--s4);
    font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.5;
  }

  /* ---------- nav inferior (menu_footer del Figma) ---------- */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--header); border-top: 1px solid var(--border-soft);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; color: var(--muted); font-family: inherit;
    padding: 2px 0;
  }
  .tab .lbl { font-size: 12px; font-weight: 500; }
  .tab .badge-tab { position: absolute; }
  .tab.on { color: var(--accent); }
  .tab.on .lbl { font-weight: 700; }

  /* ---------- cupón: botón agregar pick ---------- */
  .addleg {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px 6px 6px 0;
    border: 1px solid var(--border-strong); background: var(--bg2);
    color: var(--accent); font-size: 16px; font-weight: 800; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: transform .1s, background .15s;
  }
  .addleg:active { transform: scale(.88); }
  .addleg.in { background: var(--accent); color: #fff; border-color: var(--accent); }
  .cuotas-1x2 .cq .addleg { margin: 6px auto 0; }
  .fila .addleg { margin-left: auto; }
  .pick-add { display: flex; align-items: center; gap: 6px; }

  /* ---------- cupón: FAB flotante ---------- */
  .cupon-fab {
    position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 60; width: 54px; height: 54px; border-radius: 16px 16px 16px 0;
    background: var(--accent); border: none; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.45); display: none;
    align-items: center; justify-content: center; color: #fff;
    transition: transform .12s;
  }
  .cupon-fab.on { display: inline-flex; }
  .cupon-fab:active { transform: scale(.92); }
  .cupon-fab .cnt {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff;
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center;
    justify-content: center; border: 2px solid var(--bg);
  }

  /* ---------- cupón: bottom-sheet ---------- */
  .cupon-modal { position: fixed; inset: 0; z-index: 70; display: none; }
  .cupon-modal.open { display: block; }
  /* overlay tipo Apple: fondo oscurecido + desenfoque de lo que hay detrás */
  .cupon-scrim { position: absolute; inset: 0; background: rgba(8,9,10,.55);
    backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
  .cupon-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card); border-radius: 18px 18px 0 0;
    max-height: 86vh; display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    animation: subir .24s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes subir { from { transform: translateY(100%); } }
  .cupon-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 10px; border-bottom: 1px solid var(--border-soft);
  }
  .cupon-head h3 { font-size: 16px; font-weight: 800; color: var(--text); }
  .cupon-head .acciones { display: flex; align-items: center; gap: 10px; }
  .cupon-vaciar { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
  .cupon-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; }
  .cupon-legs { overflow-y: auto; padding: 8px 16px; flex: 1; }
  .cupon-vacio { text-align: center; color: var(--muted); font-size: 13px; padding: 32px 12px; line-height: 1.6; }
  .leg {
    display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border);
    animation: legEntra .22s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes legEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .leg:last-child { border-bottom: none; }
  .leg-main { flex: 1; min-width: 0; }
  .leg-part { font-size: 11px; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
  .leg-sel { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
  .leg-tag {
    display: inline-block; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
  }
  .leg-tag.nuestro { background: rgba(0,214,143,.16); color: var(--accent); }
  .leg-tag.casa { background: var(--bg2); color: var(--muted); }
  .leg-estado { font-size: 11px; font-weight: 700; margin-top: 4px; }
  
  .leg-estado.perdida, .leg-estado.perdiendo { color: var(--red); }
  .leg-estado.en_vivo { color: var(--gold); }
  .leg-estado.pendiente { color: var(--muted); }
  .leg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .leg-cuota { font-size: 16px; font-weight: 800; color: var(--accent); }
  /* Etiqueta opcional en acciones del historial; el ticket usa Pulso. */
  .btn-txt { display: none; }
  .leg-tag.editada { background: rgba(245,185,66,.16); color: var(--gold); }
  .leg-editor { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 12px;
    animation: edEntra .22s cubic-bezier(.2,.7,.3,1) both; transform-origin: top; }
  @keyframes edEntra { from { opacity: 0; transform: translateY(-6px) scaleY(.94); } to { opacity: 1; transform: none; } }
  /* salida: espejo de la entrada — el editor se pliega al confirmar la cuota */
  @keyframes edSale { to { opacity: 0; transform: translateY(-6px) scaleY(.94); } }
  .leg-editor.saliendo { animation: edSale .22s ease both; }
  .ed-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .ed-row:last-of-type { margin-bottom: 0; }
  .ed-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); width: 46px; flex: 0 0 auto; }
  /* Lado como segmented control (píldora con segmento activo) */
  .ed-lado { display: inline-flex; gap: 0; background: var(--card); border: 1px solid var(--border-strong); border-radius: 9px; padding: 3px; }
  .ed-opt { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 6px; border: none; background: none; color: var(--muted); cursor: pointer; }
  .ed-opt:hover { color: var(--text); }
  .ed-opt.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
  .ed-num { width: 88px; padding: 8px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); font-size: 14px; font-weight: 700; font-family: inherit; }
  .ed-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  .ed-nota { font-size: 10px; color: var(--muted); line-height: 1.45; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .cupon-foot { padding: 12px 16px 16px; border-top: 1px solid var(--border-soft); background: var(--header); }
  .cupon-resumen { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
  .cupon-resumen .estado-global { font-weight: 800; }
  .cupon-stake { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
  .cupon-stake .campo { flex: 1; }
  .cupon-stake label { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
  .cupon-stake input {
    width: 100%; margin-top: 4px; padding: 11px; border-radius: var(--r-sm);
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-size: 16px; font-weight: 800; font-family: inherit;
  }
  .cupon-stake input:focus { outline: none; border-color: var(--accent-line); }
  .cupon-stake .comb { text-align: right; }
  .cupon-stake .comb .k { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
  .cupon-stake .comb .v { font-size: 20px; font-weight: 800; color: var(--text); }
  .cupon-pago {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,214,143,.10); border: 1px solid var(--accent-line);
    border-radius: var(--r-md); padding: 12px 14px;
  }
  .cupon-pago .k { font-size: 12px; color: var(--muted); font-weight: 700; }
  .cupon-pago .v { font-size: 20px; font-weight: 800; color: var(--accent); }
  .cupon-acciones { display: flex; gap: 8px; margin-top: 10px; }
  /* Coach preventivo: análisis del cupón ANTES de guardar */
  .coach-pre {
    margin-top: 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--accent-dim); border-left: 3px solid var(--accent);
    display: flex; flex-direction: column; gap: 5px;
  }
  .coach-pre .cp-hd { display: flex; align-items: center; gap: 6px; font-size: 11px;
    font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
  .coach-pre .cp-fila { font-size: 11.5px; line-height: 1.45; color: var(--text); }
  .coach-pre .cp-fila.warn { color: var(--red); }
  .coach-pre .cp-fila b { font-weight: 800; }
  .cupon-guardar {
    flex: 1; padding: 12px; border-radius: var(--r-md); border: none; cursor: pointer;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .cupon-guardar:active { transform: scale(.99); }
  .cupon-share {
    flex: 0 0 auto; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--bg2); border: 1px solid var(--border-strong); color: var(--text);
    font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  }
  .cupon-share:active { transform: scale(.99); }
  .cupon-nota { font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.4; }

  /* ---------- mis apuestas: tarjetas de cupón guardado ---------- */
  .tk { border: 1px solid var(--border-strong); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; background: var(--card); }
  .tk-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
  .tk-info { flex: 1; min-width: 0; }
  .tk-tit { font-size: 13.5px; font-weight: 800; color: var(--text); }
  .tk-edit { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid transparent;
    color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
    padding: 3px 6px; border-radius: 7px; vertical-align: middle; margin-left: 2px;
    transition: background .18s ease, transform .1s ease; }
  .tk-edit svg { display: block; }
  .tk-edit:hover { background: var(--accent-dim); }
  .tk-edit:active { transform: scale(.9); }
  /* Entrenador */
  .coach-cta { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    background: linear-gradient(135deg, rgba(88,166,255,.12), rgba(88,166,255,.03));
    border: 1px solid rgba(88,166,255,.35); border-radius: 14px; padding: 12px 14px;
    color: var(--text); cursor: pointer; margin: 12px 0; }
  .coach-cta.locked { cursor: default; opacity: .8; }
  .coach-cta .coach-ico { color: var(--accent); display: flex; }
  .coach-cta-tx b, .coach-cta > div b { font-size: 14px; }
  .coach-cta p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
  .coach-go { margin-left: auto; color: var(--muted); }  /* navegación: ▸ real, sin rotar */
  .coach-load { display: flex; align-items: center; gap: 8px; padding: 16px; color: var(--muted);
    font-size: 13px; background: var(--card); border-radius: 14px; margin: 12px 0; }
  .coach-panel { background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px; margin: 12px 0; }
  /* cabecera clicable (pliega el panel, igual que "Rendimiento por mercado") */
  .coach-hd { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit;
    font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 12px;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
  .coach-panel.col .coach-hd { margin-bottom: 0; }
  .coach-hd svg { color: var(--accent); }
  .coach-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff;
    background: var(--accent); border-radius: 6px; padding: 2px 6px; }
  .coach-chev { margin-left: auto; color: var(--muted); display: inline-flex; }
  .coach-chev svg { color: var(--muted); }
  /* estándar: abierto ▴ (colapsará hacia arriba), cerrado ▾ — antes estaba invertido */
  /* mismo mecanismo del acordeón: se animan las filas del grid (altura real) */
  .coach-body { display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .34s cubic-bezier(.22, .61, .36, 1); }
  .coach-panel.col .coach-body { grid-template-rows: 0fr; }
  .coach-body > * { overflow: hidden; min-height: 0; opacity: 1;
    transition: opacity .28s ease .04s; }
  .coach-panel.col .coach-body > * { opacity: 0; }
  .coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .cm { background: var(--bg); border-radius: 10px; padding: 10px; }
  .cm-v { font-size: 18px; font-weight: 800; }
   
  .cm-k { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
  .coach-veredicto { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .coach-diag { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
  .coach-sec { margin-top: 14px; }
  .coach-sec h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin: 0 0 8px; }
  .coach-ok { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); line-height: 1.6; }
  .coach-err { background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
    padding: 8px 10px; margin-bottom: 8px; }
  .coach-err b { font-size: 13px; color: var(--text); }
  .coach-err p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .coach-fix { font-weight: 600; }
  .coach-plan { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); line-height: 1.6; }
  .coach-empty, .coach-nota { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .coach-nota { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
  .tk-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .tk-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .tk-estado { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 6px; }
  /* registrar / editar cash out desde el ticket */
  .tk-cash { background: none; border: none; padding: 0 0 0 6px; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px; }
  .tk-cash:hover { color: var(--accent); }
  /* botón "registrar apuesta ya jugada" */
  .reg-manual { display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 14px 0 4px; padding: 12px 16px; cursor: pointer;
    background: none; border: 1px dashed var(--border-strong); border-radius: 12px;
    color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
    transition: color .2s ease, border-color .2s ease, background .2s ease; }
  .reg-manual:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-dim); }
  .reg-manual svg { display: block; }
  /* formulario de registro manual */
  .rm-modal { max-width: 380px; }
  .rm-tit { font-size: 19px; font-weight: 800; margin: 6px 0 4px; }
  .rm-sub { font-size: 12px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
  .rm-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); margin: 10px 0 5px; }
  .rm-in { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg2);
    border: 1px solid var(--border-strong); color: var(--text); font: inherit; font-size: 14px; }
  .rm-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  .rm-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .rm-res { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px;
    background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px; }
  .rm-opt { font: inherit; font-size: 12px; font-weight: 700; padding: 8px 6px; cursor: pointer;
    border: none; background: none; border-radius: 7px; color: var(--muted); }
  .rm-opt.on { background: var(--accent); color: #fff; }
  .rm-save { margin-top: 16px; width: 100%; }
  .tk-right .pnl { font-size: 13px; font-weight: 800; }
  /* el resultado en plata: verde si ganaste, rojo si perdiste */
  
  .tk-right .pnl.neg { color: var(--red); }
  .tk-del { background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    transition: color .18s ease, background .18s ease, transform .1s ease; }
  .tk-del:hover { color: var(--red); background: rgba(240,90,90,.12); }
  .tk-del:active { transform: scale(.88); }
  .tk-chev { color: var(--muted); display: inline-flex; }
  .tk.open { box-shadow: 0 4px 16px rgba(0,0,0,.14); border-color: var(--border-strong); }
  .tk-legs-inner { padding: 0 14px 6px; border-top: 1px solid var(--border); }
  .tk-leg { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .tk-leg:last-child { border-bottom: none; }
  .tk-leg-m { flex: 1; min-width: 0; }
  .tk-sel { font-size: 13px; font-weight: 700; color: var(--text); }
  .tk-part { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
  .tk-leg .est { font-size: 11px; font-weight: 700; margin-top: 3px; }
  
  .tk-leg .est.perdida, .tk-leg .est.perdiendo { color: var(--red); }
  .tk-leg .est.en_vivo { color: var(--gold); }
  .tk-leg .est.pendiente { color: var(--muted); }
  .tk-cuota { font-size: 13px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }


  /* Compact saved slips; scope controls so global button sizes do not stretch rows. */
  #apuestasTabBody .tk { margin-bottom: 8px; }
  #apuestasTabBody .tk-head { padding: 8px 12px; gap: 12px; }
  #apuestasTabBody .tk-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 1.4; }
  #apuestasTabBody .tk-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; line-height: 1.4; margin-top: 0; }
  #apuestasTabBody .tk-edit, #apuestasTabBody .tk-cash { min-height: 24px; padding: 2px 5px; margin: 0; font-size: 11px; gap: 4px; box-shadow: none; }
  #apuestasTabBody .tk-edit svg { width: 14px; height: 14px; }
  #apuestasTabBody .tk-del { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
  #apuestasTabBody .tk-right { gap: 6px; }
  #apuestasTabBody .tk:not(.open) .tk-legs-inner { padding-top: 0; padding-bottom: 0; border-top: 0; }
  .ap-mode { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  #apuestasTabBody .ap-mode .p-button { min-height: 36px; padding: 6px 12px; font-size: 12px; }
  .ap-mode-note { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
  .tk-list-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 12px; color: var(--muted); }
  .tk-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
  .tk-page-label { font-size: 12px; color: var(--muted); }
  #apuestasTabBody .tk-pagination .p-button { min-height: 36px; padding: 6px 10px; font-size: 12px; gap: 5px; }
  @media (max-width: 600px) {
    #apuestasTabBody .tk-head { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; }
    #apuestasTabBody .tk-right { justify-content: flex-end; }
    #apuestasTabBody .tk-edit, #apuestasTabBody .tk-cash { min-height: 32px; }
    #apuestasTabBody .tk-del { width: 36px; height: 36px; min-height: 36px; }
    #apuestasTabBody .tk-pagination .p-button { min-height: 44px; }
    .tk-pagination { justify-content: center; gap: 8px; }
  }

  /* ---------- detalle en vivo: cabecera + apuestas sugeridas ---------- */
  .vivo-card { cursor: pointer; }
  /* fila compacta cuando hay 2+ partidos en vivo */
  /* ---------- guía para principiantes ---------- */
  .guia-intro { font-size: 13px; color: var(--text); line-height: 1.6; padding: 4px 0 10px; }
  .guia-tit { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin: 14px 0 8px; }
  .guia-paso { display: flex; gap: 12px; padding: 9px 0; }
  .guia-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px 8px 8px 0;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .guia-paso .t { font-size: 13px; color: var(--text); line-height: 1.55; }
  .guia-paso .t b { color: var(--accent); }
  .guia-regla { display: flex; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }
  .guia-regla .ico { flex: 0 0 auto; color: var(--gold); }
  .guia-dato { font-size: 12px; color: var(--muted); line-height: 1.55; padding: 4px 0; }
  .guia-dato b { color: var(--text); }
  .guia-cta {
    width: 100%; margin: 14px 0 10px; padding: 13px; border-radius: var(--r-md); border: none;
    background: var(--accent); color: #fff; font-family: inherit; font-size: 14px;
    font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  /* ---------- picks del día (buscador de valor) ---------- */
  .picks-btn {
    width: 100%; padding: 14px; border-radius: var(--r-md); cursor: pointer;
    background: var(--card); border: 1px solid var(--border-strong); color: var(--text);
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .picks-btn:active { background: var(--bg2); }
  /* franja de inteligencia del Home: oportunidades + ROI personal en un vistazo */
  .intel-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: 10px 14px; margin-bottom: 8px; font-size: 12px; color: var(--muted);
  }
  .intel-strip .is-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .intel-strip b { color: var(--text); font-size: 13.5px; }
  .intel-strip b.pos { color: var(--accent); }
  .intel-strip b.neg { color: var(--red); }
  .intel-strip .is-item + .is-item::before { content: "·"; color: var(--border-strong); margin-right: 8px; }
  /* ---------- tabla de posiciones de la liga (colapsable) ---------- */
  .tp { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    margin-bottom: 10px; overflow: hidden; }
  .tp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px;
    background: none; border: 0; color: var(--text); font: inherit; font-size: 13.5px;
    font-weight: 800; cursor: pointer; }
  .tp-head .extra { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--muted); }
  .tp-head .arrow { color: var(--muted); display: inline-flex; }
  .tp-body { display: none; padding: 0 8px 10px; }
  .tp.open .tp-body { display: block; }
  .tp table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  .tp th { text-align: right; padding: 4px 6px; color: var(--muted); font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); }
  .tp th.eq, .tp td.eq { display: table-cell; text-align: left; }
  .tp td { text-align: right; vertical-align: middle; padding: 5px 6px; border-bottom: 1px solid var(--border); }
  .tp tr:last-child td { border-bottom: 0; }
  .tp td.eq { min-width: 0; font-weight: 700; }
  .tp-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .tp td.eq img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
  .tp td.eq .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp td.eq a.nm { color: inherit; text-decoration: none; border-radius: 2px; }
  .tp td.eq a.nm:hover { color: var(--p-emphasis); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .tp td.eq a.nm:focus-visible { outline: 2px solid var(--p-emphasis); outline-offset: 2px; }
  .tp-more { display: flex; align-items: center; gap: 6px; margin: 8px auto 0; padding: 6px 10px;
    border: 0; border-radius: 6px; background: none; color: var(--p-emphasis); font: inherit;
    font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .tp-more:hover { background: var(--p-brand-soft); }
  .tp-more:focus-visible { outline: 2px solid var(--p-emphasis); outline-offset: 2px; }
  .tp-more svg { transition: transform var(--m-fast) var(--e-standard); }
  .tp-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .tp td.pos { color: var(--muted); font-weight: 800; width: 24px; font-family: var(--font-display); }
  .tp td.pts { font-weight: 800; color: var(--accent); font-family: var(--font-display); }
  .tp tr.tp-top td.pos { color: var(--accent); }
  /* zona de copas / descenso: barra de color al borde de la fila */
  .tp tr.tp-top td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  .tp tr.tp-desc td:first-child { box-shadow: inset 3px 0 0 var(--red); }
  .tp tr.tp-desc td.pos { color: var(--red); }
  @media (hover: hover) and (pointer: fine) {
    .tp tbody tr { transition: background var(--m-fast) var(--e-standard); }
    .tp tbody tr:hover { background: var(--card2); }
  }
  .tp-head .tp-lider { font-size: 11.5px; font-weight: 700; color: var(--muted);
    margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-head .tp-lider b { color: var(--accent); font-family: var(--font-display); }
  .tp.open .tp-head .tp-lider { display: none; }  /* abierta: la tabla ya lo dice */
  .tp-leyenda { display: flex; gap: 14px; padding: 8px 6px 0; font-size: 10px;
    font-weight: 700; color: var(--muted); }
  .tp-leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
    margin-right: 5px; vertical-align: -1px; }
  /* mini-tabla contextual del partido: posición de ambos equipos */
  .mini-tabla { background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 8px 12px; margin: 10px 0 4px; }
  :root[data-theme="light"] .mini-tabla { background: var(--card); border-color: var(--border-strong); }
  .mt-fila { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer;
    font-size: 12px; font-weight: 700; }
  .mt-fila + .mt-fila { border-top: 1px solid var(--border); }
  .mt-fila .pos { color: var(--accent); font-weight: 800; min-width: 26px; }
  .mt-fila img { width: 16px; height: 16px; object-fit: contain; }
  .mt-fila .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt-fila .pj { color: var(--muted); font-size: 10.5px; font-weight: 700; }
  .mt-fila .pts { font-weight: 800; }
  .mt-gap { font-size: 10px; color: var(--muted); padding-top: 5px; border-top: 1px solid var(--border); }
  /* cara a cara: últimos enfrentamientos */
  .h2h-res { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .h2h-chip { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 9px;
    background: var(--card2); border: 1px solid var(--border); }
  .h2h-fila { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px;
    border-bottom: 1px solid var(--border); }
  .h2h-fila:last-child { border-bottom: 0; }
  .h2h-fila .f { color: var(--muted); font-size: 10px; min-width: 62px; }
  .h2h-fila .eqn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
  .h2h-fila .eqn.der { text-align: right; }
  .h2h-fila .mk { font-weight: 800; padding: 1px 8px; border-radius: 6px; background: var(--card2); }
  
  .picks-panel { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 4px 14px; }
  .picks-meta { font-size: 10.5px; color: var(--muted); padding: 10px 2px 6px; line-height: 1.5; }
  .picks-filtro {
    display: block; width: 100%; margin: 10px 0 4px; padding: 8px 10px; text-align: left;
    background: var(--bg2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  }
  .picks-filtro.on { color: var(--accent); border-color: var(--accent-line); }
  .picks-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 2px 4px; border-bottom: 1px solid var(--border);
  }
  .picks-cab > span { font-size: 11px; font-weight: 800; color: var(--muted); }
  .picks-toggle {
    display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px;
    background: none; border: none; color: var(--accent); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 800;
  }
  .picks-toggle svg { display: block; }
  .pick-item { cursor: pointer; }
  .pick-liga { display: inline-flex; align-items: center; gap: 4px; }
  .pick-alt { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
  .pick-alt-l { background: var(--bg2); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
  /* jugada más probable del partido (tarjeta destacada del análisis) */
  .mj-card { background: var(--card); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
    padding: 14px 16px; margin: var(--s3) 0; }
  .mj-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 8px; }
  .mj-fila { display: flex; align-items: center; gap: 10px; }
  .mj-sel { flex: 1; min-width: 0; }
  .mj-sel .sel { font-size: 14.5px; font-weight: 800; }
  .mj-sel .det { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .mj-prob { font-size: 20px; font-weight: 800; color: var(--accent); white-space: nowrap; }
  .mj-aviso { display: flex; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft);
    font-size: 10.5px; color: var(--muted); line-height: 1.55; }
  .mj-aviso svg { flex: 0 0 auto; margin-top: 1px; color: var(--gold, #f5c518); }
  /* chips 1x2 apostables del favorito */
  .fav-bets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .fav-bet { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 9px; }
  /* light: el gris de card2 se funde con el fondo de página → chip blanco
     definido por un borde sutil (menos masa gris, más nítido) */
  :root[data-theme="light"] .fav-bet { background: var(--card); border-color: var(--border-strong); }
  .fav-bet .n { font-size: 10.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fav-bet .c { font-size: 12px; font-weight: 800; color: var(--accent); }
  .fav-nota { margin-top: 8px; font-size: 10px; color: var(--muted); }
  /* toast de pronóstico cumplido */
  .toast { position: fixed; left: 50%; bottom: 76px; transform: translate(-50%, 24px); opacity: 0;
    display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--accent-line);
    border-radius: var(--r-md); padding: 12px 16px; z-index: 320; box-shadow: 0 10px 32px rgba(0,0,0,.55);
    transition: transform .25s ease, opacity .25s ease; max-width: 92vw; }
  .toast.on { transform: translate(-50%, 0); opacity: 1; }
  .toast .tico { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 900; flex: 0 0 26px; }
  .toast b { font-size: 13px; }
  .toast .tsub { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .pick-liga img { width: 12px; height: 12px; object-fit: contain; }
  .pick-min { font-size: 10px; color: var(--muted); }
  .pick-min b { color: var(--gold); }

  .vivo-liga {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: var(--muted); margin: 14px 0 8px;
  }
  .vivo-liga:first-child { margin-top: 4px; }
  .vivo-row {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 11px 12px; margin-bottom: 8px; background: var(--card);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
  }
  .vivo-row:active { background: var(--bg2); }
  .vivo-row .vr-min { flex: 0 0 auto; width: 40px; color: var(--red); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
  .vivo-row .vr-eq { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .vivo-row .vr-eq.der { justify-content: flex-end; }
  .vivo-row .vr-eq .escudo { width: 20px; height: 20px; flex: 0 0 auto; }
  .vivo-row .vr-nom { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vivo-row .vr-score { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--text); padding: 0 4px; }
  .vivo-row .vr-chev { flex: 0 0 auto; color: var(--muted); }
  .vd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
  }
  .vd-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
  .vd-team .escudo { width: 44px; height: 44px; }
  .vd-team .nombre { font-size: 12px; font-weight: 700; color: var(--text); }
  .vd-mid { text-align: center; padding: 0 10px; }
  .vd-score { font-size: 26px; font-weight: 800; color: var(--text); white-space: nowrap; }
  .vd-min { font-size: 11px; color: var(--red); font-weight: 700; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
  .vd-sec-tit { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 16px 0 8px; }
  .sug {
    display: flex; align-items: center; gap: 10px; padding: 11px 0;
    border-bottom: 1px solid var(--border);
  }
  .sug:last-child { border-bottom: none; }
  .sug-main { flex: 1; min-width: 0; }
  .sug-merc { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
  .sug-sel { font-size: 14px; font-weight: 700; color: var(--text); }
  .sug-proy { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .sug-conf { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
  
  
  .sug-conf.baja { background: var(--bg2); color: var(--muted); }
  .sug-right { display: flex; align-items: center; gap: 10px; }
  .sug-cuota { font-size: 15px; font-weight: 800; color: var(--accent); }
  .vd-nota { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }

  /* ---------- menú hamburguesa ---------- */
  .menu-op {
    display: flex; align-items: center; gap: 12px; padding: 15px 4px;
    border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text);
  }
  .menu-op:last-child { border-bottom: none; }
  a.menu-op { text-decoration:none; }
  .menu-op .ico { color: var(--muted); display: inline-flex; }
  .menu-op .lbl { font-size: 15px; font-weight: 700; flex: 1; }
  .menu-op .badge { font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 9px; padding: 1px 7px; }
  .menu-op .chev { color: var(--muted); }
  .menu-op.disabled { opacity: .45; cursor: default; }
  .menu-op.disabled .badge { background: var(--bg2); color: var(--muted); }
  /* toggle de idioma dentro del menú móvil (banderitas ES/EN) */
  /* selector de idioma (dropdown) — compartido sidebar + menú móvil */
  .lang-sel {
    appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
    padding: 8px 30px 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
    background: var(--bg2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 9px center;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700;
  }
  .lang-sel:focus { outline: none; border-color: var(--accent-line); }
  .menu-lang { flex: 0 0 auto; min-width: 148px; }
  .menu-user { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
  .menu-user img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
  .menu-user .mu-nom { font-size: 14px; font-weight: 800; color: var(--text); }
  .menu-user .mu-mail { font-size: 11px; color: var(--muted); }
  .menu-login { padding: 14px 4px; }
  .menu-login .mu-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
  .menu-login .gbtn { display: flex; justify-content: center; min-height: 40px; }

  /* ---------- mis apuestas ---------- */
  .ap-resumen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .ap-box { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
    padding: 12px 6px; text-align: center; transition: border-color .15s, background .15s; }
  /* sistema semáforo: verde en positivo, rojo en negativo (tinte del mismo color) */
  
  
  .ap-box .v { font-size: 17px; font-weight: 800; color: var(--text); }
  
  .ap-box .v.neg { color: var(--red); }
  .ap-box .k { font-size: 10px; font-weight: 700; color: var(--neutral); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
  .ap-grupo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 14px 0 4px; }
  .ap-bet { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
  .ap-bet:last-child { border-bottom: none; }
  .ap-bet .m { flex: 1; min-width: 0; }
  .ap-bet .part { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
  .ap-bet .sel { font-size: 14px; font-weight: 700; color: var(--text); }
  .ap-bet .est { font-size: 11px; font-weight: 700; margin-top: 3px; }
  
  .ap-bet .est.perdida, .ap-bet .est.perdiendo { color: var(--red); }
  .ap-bet .est.en_vivo { color: var(--gold); }
  .ap-bet .est.pendiente { color: var(--muted); }
  .ap-bet .r { text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
  .ap-bet .cuota { font-size: 13px; font-weight: 700; color: var(--muted); }
  .ap-bet .pnl { font-size: 14px; font-weight: 800; }
  
  .ap-bet .pnl.neg { color: var(--red); }
  .rm-fila { display: grid; grid-template-columns: 1fr 70px auto auto; align-items: center; gap: 8px; padding: 7px 0; }
  .rm-fila + .rm-fila { border-top: 1px solid var(--border-soft); }
  .rm-nom { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-bar { height: 6px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
  .rm-bar i { display: block; height: 100%; background: var(--muted); }
  
  .rm-bar i.neg { background: var(--red); }
  .rm-pct { font-size: 12px; font-weight: 800; }
  
  .rm-pct.neg { color: var(--red); }
  .rm-fila small { font-size: 10px; color: var(--muted); }
  .ap-stake { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
  .ap-stake input { width: 70px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; font-family: inherit; }
  .ap-stake input:focus { outline: none; border-color: var(--accent-line); }

  /* ---------- props de jugador (remata 1+) ---------- */
  .pj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 480px) { .pj-cols { grid-template-columns: 1fr; } }
  .pj-eq { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
  .pj-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
    border: 1px solid transparent; }
  .pj-row.pick { background: var(--accent-dim); border-color: var(--accent-line); }
  .pj-nom { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-p { font-size: 12.5px; font-weight: 800; color: var(--accent); flex: 0 0 auto; }
  .pj-row:not(.pick) .pj-p { color: var(--muted); }
  /* bajas y dudas */
  .les-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; }
  .les-nom { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .les-pos { margin-left: 5px; font-size: 9.5px; color: var(--muted); font-weight: 700; }
  .les-chip { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .4px; background: rgba(255,107,107,.14); color: var(--red); }
  .les-chip.duda { background: rgba(245,190,71,.14); color: var(--gold); }
  .les-mot { margin-left: auto; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
  .pj-chip { flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 12px;
    background: var(--p-highlight); color: var(--p-highlight-ink, #101116); letter-spacing: .2px; }
  .pj-chip.off { background: none; color: var(--muted); font-weight: 600; }

  /* ---------- comparador de cuotas por casa ---------- */
  .cc-aviso { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
  .cc-faltan { color: var(--gold); }
  .cc-mercado { margin-bottom: 14px; }
  .cc-mtit { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
  .cc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 260px; }
  .cc-tabla th, .cc-tabla td { padding: 7px 8px; text-align: center; white-space: nowrap; }
  .cc-tabla thead th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border-soft); }
  .cc-tabla thead th .cch { display: inline-flex; align-items: center; justify-content: center; }
  .cc-tabla thead th .cch .casa-logo { height: 18px; max-width: 60px; }
  /* tabla unificada: un solo encabezado de casas (más grande, sticky) para todos los mercados */
  .cc-unificada thead th { position: sticky; top: 0; z-index: 2; background: var(--card);
    padding: 10px 8px; border-bottom: 1px solid var(--border-strong); }
  .cc-unificada thead th .cch-lg .casa-logo { height: 26px; max-width: 86px; }
  .cc-grow .cc-gtit { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); padding: 14px 8px 5px; background: var(--card2);
    border-bottom: 1px solid var(--border-soft); }
  .cc-unificada tbody tr:last-child { border-bottom: none; }
  .cc-tabla .cc-sel { text-align: left; color: var(--text); font-weight: 600; font-size: 12.5px; }
  .cc-tabla tbody tr { border-bottom: 1px solid var(--border); }
  .cc-tabla tbody tr:last-child { border-bottom: none; }
  .cc-odd { font-weight: 700; color: var(--text); }
  .cc-odd.best { color: var(--accent); }
  
  .cc-odd.neg { color: var(--red); }
  .cc-val {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: 9px; font-weight: 800; background: var(--bg2); color: var(--muted);
    vertical-align: middle; white-space: nowrap;
  }
  
  .cc-odd.na { color: var(--muted); opacity: .5; font-weight: 400; }
  .cc-add {
    font: inherit; font-weight: 700; font-size: 13px; color: var(--text);
    background: var(--bg2); border: 1px solid var(--border-strong);
    border-radius: 6px 6px 6px 0; padding: 5px 9px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    transition: transform .1s;
  }
  .cc-add svg { display: block; }
  .cc-add:active { transform: scale(.9); }
  .cc-add.best { color: var(--accent); border-color: var(--accent-line); }
  .cc-add.in { background: var(--accent); color: #fff; border-color: var(--accent); }
  .cc-nota { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }

  /* ============================================================
     DASHBOARD DESKTOP — activo desde tablet landscape (≥1024px).
     Por debajo se mantiene la app móvil intacta.
     Enfoque de bajo riesgo: sidebar fija + rail fijo + márgenes en
     el contenido, sin reestructurar el DOM del móvil.
     ============================================================ */
  .desktop-only { display: none; }         /* sidebar/rail: ocultos en móvil */
  @media (min-width: 1024px) {
    :root { --sidebar-w: 244px; --rail-w: 360px; }
    body { padding-bottom: 0; }
    .desktop-only { display: block; }
    /* Etiqueta visible en acciones del historial. */
    .btn-txt { display: inline; }

    /* --- sidebar de navegación (izquierda, fija) --- */
    #sidebar {
      position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
      background: var(--header); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; z-index: 80; padding: 18px 14px;
    }
    #sidebar .sb-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 20px; }
    #sidebar .sb-brand h1 { font-size: 21px; font-weight: 900; letter-spacing: -.4px; color: var(--text); }
    #sidebar .sb-brand em { color: var(--accent); font-style: normal; }
    #sidebar .sb-nav { display: flex; flex-direction: column; gap: 3px; }
    .sb-item {
      display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
      background: none; border: none; cursor: pointer; color: var(--muted);
      font: inherit; font-size: 14px; font-weight: 600; text-align: left; width: 100%;
      transition: background .12s, color .12s;
    }
    .sb-item:hover { background: var(--card2); color: var(--text); }
    .sb-item.on { background: var(--accent-dim); color: var(--accent); }
    .sb-item svg { flex: 0 0 auto; }
    /* zona scrollable (nav + árbol de torneos) */
    .sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 4px -4px 0; padding: 0 4px; }
    .sb-scroll::-webkit-scrollbar { width: 6px; }
    .sb-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    /* árbol de torneos estilo Betano */
    .sb-arbol { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
    .sb-sport { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
      background: none; border: none; cursor: pointer; color: var(--text); font: inherit;
      font-size: 14px; font-weight: 700; border-radius: 10px; text-align: left; }
    .sb-sport:hover { background: var(--card2); }
    .sb-sport .sp-ico { display: flex; color: var(--accent); flex: 0 0 auto; }
    /* estándar de disclosure: cerrado ▾ (expandirá hacia abajo), abierto ▴ */
    .sb-sport .sp-chev { margin-left: auto; color: var(--muted); }
    .sb-sub { overflow: hidden; }
    .sb-sub { display: grid; grid-template-rows: 1fr;
      transition: grid-template-rows var(--m-slow) var(--e-decelerate); }
    .sb-sub > * { overflow: hidden; min-height: 0; }
    .sb-sport.col + .sb-sub { grid-template-rows: 0fr;
      transition-duration: var(--m-normal); transition-timing-function: var(--e-accelerate); }
    .sb-liga { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 12px 7px 14px;
      background: none; border: none; cursor: pointer; color: var(--muted); font: inherit;
      font-size: 13px; font-weight: 500; border-radius: 8px; text-align: left; }
    .sb-liga:hover { background: var(--card2); color: var(--text); }
    .sb-liga.on { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
    .sb-liga img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
    .sb-liga .l-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sb-liga .l-pais { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; line-height: 1.1; }
    .sb-liga .l-cup { flex: 0 0 auto; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .4px; color: var(--muted); background: var(--bg2); border-radius: 4px; padding: 1px 5px; }
    .sb-zona { display: flex; align-items: center; width: 100%; padding: 9px 16px 5px; gap: 6px;
      background: none; border: none; cursor: pointer; color: var(--muted); font: inherit;
      font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: .5px; text-align: left;
      border-radius: 8px; transition: color .2s ease, background .2s ease; }
    .sb-zona:hover { color: var(--text); background: var(--bg2); }
    /* chevron: colapsado apunta ABAJO (despliega hacia abajo); abierto rota a arriba */
    .sb-zona .z-chev { margin-left: auto; }
    .sb-zona.col + .sb-zona-body { grid-template-rows: 0fr; }
    /* nivel 2 (país dentro de continente): indentado, capitalizado, menos gritón */
    .sb-zona2 { padding-left: 24px; text-transform: none; font-size: 12px; font-weight: 400;
      color: var(--text); letter-spacing: 0; }
    .sb-zona-body .sb-zona-body .sb-liga { padding-left: 30px; }
    .sb-grp { padding: 9px 12px 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .5px; color: var(--gold); }
    .sb-spacer { flex: 1; }
    .sb-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
    .sb-mini { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
      background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 13px;
      font-weight: 600; text-align: left; width: 100%; }
    .sb-mini:hover { background: var(--card2); color: var(--text); }
    .sb-idioma { padding: 2px 12px 4px; }
    /* bloque de sesión: avatar + nombre + cerrar sesión */
    .sb-sesion { margin-top: 2px; }
    .sb-sesion.in { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px;
      border-radius: 10px; background: var(--card2); }
    .sb-user { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
    .sb-user img, .sb-user .sb-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
      object-fit: cover; display: flex; align-items: center; justify-content: center;
      background: var(--bg2); color: var(--muted); }
    .sb-user-tx { display: flex; flex-direction: column; min-width: 0; }
    .sb-user-nom { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
    .sb-user-mail { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-logout { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--muted);
      padding: 6px; border-radius: 8px; display: inline-flex; }
    .sb-logout:hover { background: var(--bg2); color: var(--red); }
    .sb-sesion .gbtn { display: flex; justify-content: center; }
    /* bloque login/registro (deslogueado) — compacto */
    .sb-login { display: block; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card2); }
    .sb-login-tit { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; margin-bottom: 7px; }
    .sb-login .gbtn { display: flex; justify-content: center; }
    .sb-gbtn-fallback { display: inline-flex; align-items: center; gap: 8px; width: 100%;
      justify-content: center; padding: 9px 12px; border-radius: 999px; cursor: pointer;
      background: #fff; border: 1px solid var(--border-strong); color: #1f2430; font: inherit;
      font-size: 13px; font-weight: 600; }

    /* --- buscador grande del header (predictivo) --- */
    header .wrap { gap: 20px; }
    .topsearch { position: relative; flex: 1; max-width: 620px; }
    .topsearch .ts-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--muted); display: flex; pointer-events: none; }
    #tsInput { width: 100%; height: 42px; padding: 0 16px 0 40px; border-radius: 12px;
      background: var(--card2); border: 1px solid var(--border-strong); color: var(--text);
      font: inherit; font-size: 14px; transition: border-color .15s, background .15s; }
    #tsInput::placeholder { color: var(--muted); }
    #tsInput:focus { outline: none; border-color: var(--accent-line); background: var(--card); }
    .ts-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      font: 600 11px/1 inherit; color: var(--muted); background: var(--bg2);
      border: 1px solid var(--border-strong); border-radius: 5px; padding: 3px 6px; pointer-events: none; }
    .topsearch.focus .ts-kbd { display: none; }
    .ts-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 90;
      background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px;
      box-shadow: 0 16px 40px rgba(0,0,0,.18); overflow: hidden; max-height: 70vh; overflow-y: auto;
      display: none; }
    .topsearch.open .ts-drop { display: block; }
    .ts-grupo { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
      color: var(--muted); padding: 12px 14px 6px; }
    .ts-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer;
      border: none; background: none; width: 100%; text-align: left; font: inherit; color: var(--text); }
    .ts-item:hover, .ts-item.active { background: var(--accent-dim); }
    .ts-item img, .ts-item .escudo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
    .ts-item .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
    .ts-item .nombre mark { background: none; color: var(--accent); font-weight: 800; }
    .ts-item .sub { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
    .ts-item svg { color: var(--muted); flex: 0 0 auto; }
    .ts-hint { padding: 18px 14px; text-align: center; color: var(--muted); font-size: 12.5px; }

    /* --- header: arranca después de la sidebar --- */
    header { margin-left: var(--sidebar-w); z-index: 65; }
    header .wrap { max-width: none; padding: 0 28px; }
    /* cuenta, Cómo usar, tema e idioma viven arriba (header + menú): ocultar el
       pie del sidebar para no duplicarlos */
    #sidebar .sb-foot { display: none; }
    .brand { display: none; }             /* el logo vive en la sidebar */
    #btnBuscar { display: none; }         /* redundante: el buscador es la barra inline */
    #secTorneos, #selectWrap { display: none; }  /* los torneos viven en el sidebar */

    /* --- contenido central: entre sidebar y rail --- */
    main.wrap {
      max-width: none; margin: 0; padding: 0 28px 40px;
      margin-left: var(--sidebar-w); margin-right: var(--rail-w);
    }
    /* el footer vive DENTRO de main (ya desplazado): solo darle aire y ancho completo */
    footer { margin: 32px -28px 0; border-radius: 0; }

    /* --- cartelera densa multi-columna (fluida: más columnas a más ancho) --- */
    #partidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
    #partidos .ver-mas { grid-column: 1 / -1; }
    /* el hero/otras secciones se quedan a ancho completo del centro */

    /* --- cupón como RAIL persistente (derecha), DEBAJO del header --- */
    #cuponModal.rail-desktop {
      display: block; position: fixed; top: 57px; right: 0; bottom: 0; left: auto;
      width: var(--rail-w); z-index: 40;
    }
    #cuponModal.rail-desktop .cupon-scrim { display: none; }
    #cuponModal.rail-desktop .cupon-x { display: none; }   /* el rail no se cierra */
    #cuponModal.rail-desktop .cupon-sheet {
      position: static; inset: auto; max-height: none; height: 100%;
      border-radius: 0; border-left: 1px solid var(--border);
      background: var(--header); animation: none;
    }
    /* el header del rail ("Mi cupón") a la misma altura que el header principal (57px) */
    #cuponModal.rail-desktop .cupon-head { height: 57px; padding: 0 16px; border-bottom: 1px solid var(--border); }
    /* ocultar nav inferior y FAB en desktop */
    .tabbar, .cupon-fab { display: none !important; }

    /* modales de diálogo (detalle en vivo, menú, guía, apuestas): tarjeta
       CENTRADA por encima de la sidebar/rail — si no, el bottom-sheet queda
       tapado por la barra lateral (z-index 80) y se ve cortado. */
    #vivoModal.open, #menuModal.open, #guiaModal.open, #apuestasModal.open {
      display: flex; align-items: center; justify-content: center; z-index: 120;
    }
    #vivoModal .cupon-sheet, #menuModal .cupon-sheet,
    #guiaModal .cupon-sheet, #apuestasModal .cupon-sheet {
      position: relative; left: auto; right: auto; bottom: auto;
      width: min(780px, 90vw); max-height: 86vh; border-radius: 16px; animation: none;
    }
    /* el MENÚ (⚙) en desktop es un desplegable anclado arriba a la derecha,
       no un lightbox centrado */
    #menuModal.open { display: block; z-index: 130; }
    #menuModal .cupon-head { display: none; }   /* sin título "Menú": es un desplegable */
    /* desplegable puro: sin oscurecer ni difuminar el entorno */
    #menuModal .cupon-scrim { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #menuModal .cupon-sheet {
      position: fixed; top: 62px; right: 16px; left: auto; bottom: auto;
      width: 320px; max-height: min(72vh, 540px); border-radius: 14px;
      border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0,0,0,.5);
      transform-origin: top right; animation: menuDrop .18s cubic-bezier(.16,1,.3,1);
    }
    @keyframes menuDrop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
    /* ícono de cerrar como chevron ⌄ (afordancia de desplegable), con animación */
    #menuModal.open #menuX svg { animation: chevIn .28s ease; }
    @keyframes chevIn { from { transform: rotate(-90deg); opacity: .3; } to { transform: rotate(0); opacity: 1; } }

    /* Mis apuestas en desktop: rejilla de tickets a 2 columnas para densidad */
    #vistaApuestas .tk { break-inside: avoid; }
  }
  /* pulido desktop: respiración, radios homologados y diálogos centrados */
  @media (min-width: 1024px) {
    /* ritmo entre secciones: más aire, títulos un punto más grandes */
    main.wrap .seccion { margin: 30px 2px 16px; font-size: 17px; }
    main.wrap .seccion:first-child { margin-top: 20px; }
    #partidos { gap: 16px; }
    /* homologar el radio de todas las tarjetas principales a un valor de card */
    .partido-card, .coach-panel, .tk, .mh, .es-serie, .hoy-card,
    #ccBody .cc-scroll, #resultado .acc, .hero-slide, .cupon-legs .leg {
      border-radius: 14px;
    }
    /* más padding interno donde la info se ve condensada */
    .coach-panel { padding: 18px 20px; }
    .cc-nota, .coach-nota { margin-top: 14px; }
    /* buscador: diálogo centrado por encima de sidebar/rail (no bottom-sheet tapado) */
    .modal.open { display: flex; align-items: center; justify-content: center; }
    .modal .sheet { position: relative; left: auto; right: auto; bottom: auto;
      width: min(640px, 90vw); max-height: 82vh; border-radius: 16px; }

    /* breadcrumb (Selecciona partido/equipo): en desktop es un POPOVER anclado
       bajo el trigger, no un bottom-sheet. La posición la fija el JS. */
    #bcModal .bc-scrim { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #bcModal .bc-sheet {
      position: fixed; left: auto; right: auto; bottom: auto; margin: 0;
      width: 460px; max-width: 92vw; max-height: 62vh; padding: 14px 4px;
      border: 1px solid var(--border-strong); border-radius: 14px;
      box-shadow: 0 18px 44px rgba(0,0,0,.22); background: var(--card);
      animation: bcDrop .16s cubic-bezier(.2,.7,.3,1) both; transform-origin: top right;
    }
    @keyframes bcDrop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

    /* detalle de partido: aprovechar el ancho con flujo en Z (los bloques llenan
       izquierda→derecha→siguiente fila). Evita el hueco grande cuando un bloque
       (p.ej. las cuotas) no carga: los siguientes ocupan su lugar en la fila. */
    .det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
    .det-grid > * { min-width: 0; margin: 0; }
    .det-headline .mj-card { margin-bottom: 14px; }
    .det-headline .acc { margin-bottom: 14px; }
  }

  /* pantallas anchas (≥1600, monitores Full HD 1920): más aire y densidad */
  @media (min-width: 1600px) {
    :root { --sidebar-w: 260px; --rail-w: 380px; }
    main.wrap { padding: 0 40px 48px; }
    header .wrap { padding: 0 40px; }
    #partidos { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
  }

  /* ═══════════════ plan Pro (chip, teaser, paywall) ═══════════════ */
  /* Hazte pro: borde SÓLIDO 1px #01D83D (Figma) + relleno brand-soft */
  .pro-chip { box-sizing: border-box; display: inline-flex; align-items: center;
    justify-content: center; gap: 10px; height: 40px; padding: 12px 24px; cursor: pointer; color: #00D83E;
    border: 1px solid #01D83D; border-radius: 32px; background: var(--color-brand-soft);
    font-weight: 800; font-size: 14px; white-space: nowrap; }
  .pro-chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .pro-chip:hover { background: rgba(30,198,118,.12); }
  .pro-chip.on { background: rgba(30,198,118,.14); }
  /* teaser con candado (coach / picks) */
  .pro-teaser { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-top: 10px;
    background: linear-gradient(135deg, rgba(245,179,1,.10), rgba(247,143,30,.04));
    border: 1px dashed rgba(245,179,1,.5); border-radius: 14px; padding: 14px; transition: border-color .2s, transform .12s; }
  .pro-teaser:hover { border-color: #f5b301; transform: translateY(-1px); }
  .pro-lock { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; background: linear-gradient(135deg, #f5b301, #f78f1e); color: #201400; }
  .pro-teaser-tx { flex: 1; min-width: 0; }
  .pro-teaser-tx b { font-size: 14px; display: block; }
  .pro-teaser-tx p { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .pro-teaser-cta { font-size: 12px; font-weight: 800; color: #f5b301; white-space: nowrap; }
  .picks-lock { margin: 8px 0; }
  .cupon-pro-lock { text-align: center; padding: 34px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .cupon-pro-lock .pro-lock { width: 54px; height: 54px; border-radius: 16px; }
  .cupon-pro-lock b { font-size: 16px; }
  .cupon-pro-lock p { font-size: 13px; color: var(--muted); max-width: 250px; }
  .cupon-pro-btn { margin-top: 6px; background: linear-gradient(135deg, #f5b301, #f78f1e); color: #201400;
    font-weight: 800; border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; }
  /* ===== "Mis apuestas es Pro" (compuesto con los SVG del Figma) ===== */
  .map-pro { position: relative; overflow: hidden; display: flex; justify-content: center;
    padding: 22px 16px 30px; cursor: pointer; background: transparent; }
  /* puntos decorativos (Figma): arcos punteados con degradado, anclados abajo */
  .map-pro-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
    height: auto; pointer-events: none; z-index: 0; }
  .map-pro-inner { position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; text-align: center; width: 100%; max-width: 340px; }
  .mapp-ico { width: 62px; height: 62px; margin-bottom: 16px; }
  .mapp-tit { font-size: 24px; font-weight: 900; letter-spacing: -.4px; }
  .mapp-tit em { color: var(--accent); font-style: normal; }
  .mapp-sub { color: var(--muted); font-size: 14px; margin: 8px 0 18px; line-height: 1.45; }
  .mapp-card-img { width: 100%; height: auto; display: block; margin-bottom: 22px; }
  /* tema claro: la tarjeta de charts es arte para fondo oscuro (texto blanco) →
     placa oscura detrás para que siga leyéndose como preview del dashboard */
  :root[data-theme="light"] .mapp-card-img { background: #010F10; border-radius: 14px; padding: 8px 6px; }
  :root[data-theme="light"] .map-pro-bg { opacity: .55; }
  /* Desbloquear Pro (Figma): gradiente SIN borde (stroke oculto) */
  .mapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(98deg, #01E65E, #01D83D); color: #08090A; font-weight: 800; font-size: 14px;
    border: none; border-radius: 32px; padding: 12px 24px; cursor: pointer;
    box-shadow: 0 12px 30px -10px rgba(0,200,83,.7); transition: transform .15s, filter .15s; }
  .mapp-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
  .mapp-foot { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 14px; }
  .mapp-foot svg { color: var(--accent); }
  /* paywall modal */
  .modal-pro-back { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s; padding: 10px; }
  .modal-pro-back.open { opacity: 1; }
  /* Pay pop up (Figma): fondo #0F1011, borde #181A1A, radius 24, padding 24/24/32 */
  .modal-pro { background: #0F1011; border: 1px solid #181A1A; border-radius: 24px;
    width: 100%; max-width: 370px; max-height: 92vh; overflow-y: auto; padding: 24px 24px 32px;
    position: relative; transform: translateY(30px); transition: transform .25s cubic-bezier(.16,1,.3,1); }
  /* tema claro: mismos componentes sobre tarjeta blanca */
  :root[data-theme="light"] .modal-pro { background: #ffffff; border-color: rgba(16,24,40,.10); }
  :root[data-theme="light"] .mp-x { background: #f0f2f5; border-color: rgba(16,24,40,.10); color: #5b6472; }
  /* tema claro: los verdes hardcodeados (#00D83E) no pasan contraste sobre blanco →
     usar el verde accesible del token en texto y borde de los componentes Pro */
  :root[data-theme="light"] .pro-chip { color: var(--accent); border-color: var(--accent-line); }
  /* íconos verdes con stroke fijo (card #00E65E, shield #01DE4B) → verde accesible */
  :root[data-theme="light"] .mapp-foot svg path { stroke: var(--accent); }
  .modal-pro-back.open .modal-pro { transform: none; }
  .mp-x { position: absolute; top: 24px; right: 24px; background: #181A1A; border: 1px solid #1E1F20;
    color: #B5B5B5; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex;
    align-items: center; justify-content: center; }
  /* Tag Pro (Figma): brand-soft + borde sólido #01D83D + corona, texto #00D83E */
  .mp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0;
    color: #00D83E; background: var(--color-brand-soft); border: 1px solid #01D83D; padding: 6px 12px; border-radius: 32px; }
  .mp-badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .modal-pro h2 { font-size: 28px; font-weight: 800; line-height: 1.1; margin: 14px 0 6px; letter-spacing: -.5px; }
  .modal-pro h2 em { color: var(--accent); font-style: normal; }
  .mp-sub { color: var(--muted); font-size: 14px; }
  .mp-precio { margin: 16px 0; font-weight: 800; }
  .mp-precio b { font-size: 34px; color: var(--accent); }
  .mp-precio span { color: var(--muted); font-size: 15px; font-weight: 600; }
  .mp-bene { list-style: none; display: grid; gap: 12px; margin: 16px 0 0; }
  .mp-bene li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.3; }
  .mp-bene svg { color: var(--accent); flex: 0 0 auto; }
  /* Pagar con QR (primario): gradiente, SIN borde (Figma), radius 32 */
  .mp-pay-auto { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    background: linear-gradient(98deg, #01E65E, #01D83D); color: #08090A; font-weight: 800; font-size: 14px;
    border: none; border-radius: 32px; padding: 12px 24px; cursor: pointer; transition: filter .15s; }
  .mp-pay-auto:hover { filter: brightness(1.04); }
  /* gaps del popup (Figma): botón→nota 8, nota→tarjeta 24, tarjeta→pie 8 */
  .mp-pay-note { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 24px; line-height: 1.35; }
  /* Pagar con tarjeta (fantasma): borde sólido #01D83D, radius 32 */
  .mp-pay-card { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    background: var(--color-brand-soft); color: #00D83E; font-weight: 800; font-size: 14px;
    border: 1px solid #01D83D; border-radius: 32px; padding: 12px 24px; cursor: pointer; }
  .mp-foot-secure { display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--muted); font-size: 12px; margin-top: 8px; }
  /* pantalla "pago recibido → inicia sesión para activar" */
  .qr-login { padding: 20px 6px; text-align: center; }
  .qr-login .qr-ok-ic { margin-bottom: 10px; }
  .qr-login h2 { margin: 0 0 4px; font-size: 20px; }
  .qr-login p { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
  #qrLoginBtn { display: flex; justify-content: center; min-height: 44px; }
  /* vista de pago con QR (orden Culqi) */
  .qr-pay { text-align: center; padding: 8px 4px; }
  .qr-pay h2 { margin: 10px 0 2px; font-size: 20px; }
  .qr-pay-img { display: block; width: 220px; height: 220px; object-fit: contain; margin: 14px auto 10px;
    background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .qr-code-alt { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
  .qr-code-alt b { color: var(--text); letter-spacing: .5px; }
  .qr-wait { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted);
    font-size: 13.5px; font-weight: 600; margin: 4px 0 14px; }
  .qr-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border);
    border-top-color: var(--accent); animation: qrspin .8s linear infinite; }
  @keyframes qrspin { to { transform: rotate(360deg); } }
  .qr-regen, .qr-cancel { background: none; border: 0; color: var(--accent); font-weight: 800; font-size: 13px; cursor: pointer; }
  .qr-cancel { color: var(--muted); }
  .qr-load { padding: 44px 0; color: var(--muted); }
  .qr-load svg { color: var(--accent); animation: qrspin 1s linear infinite; }
  .qr-ok { padding: 30px 4px; }
  .qr-ok-ic { width: 66px; height: 66px; margin: 0 auto 8px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; background: var(--p-success-bg); color: var(--p-success); }
  .mp-o { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0; }
  .mp-o::before, .mp-o::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .mp-pago { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
  .mp-pago-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
  .mp-pago-h svg { color: #f5b301; }
  .mp-pasos { color: var(--muted); font-size: 12.5px; margin: 6px 0 12px; }
  /* íconos de marca de medios de pago (Yape/Plin/tarjetas) */
  .pay-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 24px; }
  /* logos homogéneos (Figma 32×32, radius 2.6) */
  .pay-brands img { width: 32px; height: 32px; display: block; border-radius: 3px; }
  /* QR con pestañas Yape/Plin */
  .qr-wrap { text-align: center; margin-bottom: 12px; }
  .qr-tabs { display: inline-flex; gap: 4px; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px; margin-bottom: 10px; }
  .qr-tab { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px;
    padding: 5px 14px; border-radius: 999px; cursor: pointer; }
  .qr-tab.on { background: var(--p-highlight); color: var(--p-highlight-ink); }
  .qr-hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
  .qr-hint b { color: var(--text); }
  .pro-qr { display: block; width: 172px; height: 172px; object-fit: contain; margin: 0 auto;
    border-radius: 14px; background: #fff; padding: 8px; }
  .pro-pago-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .pro-pago-row span { color: var(--muted); width: 54px; flex: 0 0 auto; }
  .pro-pago-row b { flex: 1; font-weight: 800; }
  .mp-copy { background: var(--bg2); border: 1px solid var(--border); color: var(--text); font-size: 11px;
    font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
  .mp-canje { margin-top: 16px; }
  .mp-canje label { font-size: 13px; font-weight: 700; color: var(--muted); }
  .mp-canje-row { display: flex; gap: 8px; margin-top: 7px; }
  .mp-canje-row input { flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 11px 12px; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
  .mp-activar { background: linear-gradient(135deg, var(--accent), #3BF08C); color: #04120a; font-weight: 800;
    border: none; border-radius: 10px; padding: 0 16px; cursor: pointer; white-space: nowrap; }
  .mp-msg { font-size: 13px; margin-top: 8px; min-height: 18px; }
  .mp-msg:empty { display: none; }
  .mp-msg.ok { font-weight: 700; }
  

  /* ---------- panel admin ---------- */
  .adm-tabs { display: flex; gap: 6px; margin: 12px 0 16px; flex-wrap: wrap; }
  .adm-tabs button { background: var(--card); border: 1px solid var(--border); color: var(--muted);
    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: color var(--m-fast) var(--e-standard), border-color var(--m-fast) var(--e-standard); }
  .adm-tabs button.on { color: var(--accent); border-color: var(--accent); }
  /* charts del panel: paleta validada (CVD-safe) por tema */
  :root { --ch1: #00B24A; --ch2: #3F8FE6; --ch-warn: #e6a23c; --ch-bad: #ff5252; }
  [data-theme="light"] { --ch1: #00813A; --ch2: #2C6FC0; --ch-warn: #b97a14; --ch-bad: #d43c3c; }
  .adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
  .adm-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; }
  .adm-kpi .ki { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex;
    align-items: center; justify-content: center; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .adm-kpi .ki.warn { color: var(--ch-warn); background: color-mix(in srgb, var(--ch-warn) 14%, transparent); }
  .adm-kpi .ki.bad { color: var(--ch-bad); background: color-mix(in srgb, var(--ch-bad) 13%, transparent); }
  .adm-kpi .ki.b2 { color: var(--ch2); background: color-mix(in srgb, var(--ch2) 13%, transparent); }
  .adm-kpi .k { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.25; }
  .adm-kpi .v { font-size: 23px; font-weight: 800; margin-top: 1px; line-height: 1.15; }
  .adm-kpi .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .adm-kpi .d b { color: var(--accent); }
  .adm-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .adm-card h4 { font-size: 13px; font-weight: 800; margin: 0 0 2px; }
  .adm-card .sub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
  .adm-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 8px; }
  .adm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
  .adm-grid2 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  @media (min-width: 900px) { .adm-grid2 { grid-template-columns: 1fr 1fr; } }
  .adm-svg { display: block; width: 100%; height: auto; }
  .adm-svg .col { cursor: pointer; }
  .adm-svg text { font-family: inherit; }
  #admTip { position: fixed; z-index: 500; pointer-events: none; background: var(--card);
    border: 1px solid var(--border-strong, var(--border)); border-radius: 9px; padding: 7px 11px;
    font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 0;
    transition: opacity var(--m-fast) var(--e-standard); max-width: 230px; }
  #admTip.on { opacity: 1; }
  #admTip .tt { font-weight: 800; margin-bottom: 2px; }
  #admTip .tr { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
  #admTip .tr b { color: var(--text); }
  .adm-meter { position: relative; width: 110px; height: 8px; border-radius: 4px;
    background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: visible; display: inline-block; vertical-align: middle; }
  .adm-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
  .adm-meter em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--muted); opacity: .55; }

  /* ============ capa visual 2026 (bench Behance: BetRoom/TerraFlux/MATRIX) ============
     dark-first con glow ambiental de acento, profundidad por capas (sombra + brillo
     superior), hover-lift con halo, pills luminosas y micro-detalles techno-utility.
     Aditiva: no toca estructura ni tokens, solo eleva lo existente. */

  /* El lienzo neutro se define en Pulso: .p-canvas. */

  /* 2) profundidad por capas: brillo hairline arriba + sombra suave apilada */
  .partido-card, .hoy-card, .hero-slide, .coach-panel, .tk, .mh, .es-serie,
  .adm-card, .adm-kpi, .admg-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,.028), transparent 42px);
    box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 8px 28px -12px rgba(0,0,0,.42);
  }
  :root[data-theme="light"] .partido-card, :root[data-theme="light"] .hoy-card,
  :root[data-theme="light"] .coach-panel, :root[data-theme="light"] .tk,
  :root[data-theme="light"] .mh, :root[data-theme="light"] .adm-card,
  :root[data-theme="light"] .adm-kpi {
    background-image: none;
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.14);
  }

  /* 3) hover-lift con halo de acento (solo puntero fino: desktop) */
  @media (hover: hover) and (pointer: fine) {
    .partido-card, .hoy-card, .tk, .adm-kpi, .adm-card {
      transition: transform var(--m-fast) var(--e-standard),
                  box-shadow var(--m-fast) var(--e-standard),
                  border-color var(--m-fast) var(--e-standard);
    }
    .partido-card:hover, .hoy-card:hover, .tk:hover {
      transform: translateY(-2px);
      border-color: rgba(0,200,83,.28);
      box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 14px 36px -12px rgba(0,0,0,.5),
                  0 0 0 1px rgba(0,200,83,.10), 0 6px 26px -8px rgba(0,200,83,.14);
    }
    .adm-kpi:hover { transform: translateY(-1px); border-color: var(--border-strong); }
  }

  /* 4) micro-etiqueta techno: los títulos de sección llevan tick de acento */
  h2.seccion { position: relative; padding-left: 13px; }
  h2.seccion::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 15px; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(0,200,83,.25));
  }

  /* 5) CTA primario con gradiente de marca y glow al hover */
  @media (hover: hover) and (pointer: fine) {
    .ver-mas:hover { background:var(--p-surface-hover); border-color:var(--p-border); box-shadow:none; }
    .mp-activar:hover, .btn:hover { filter: brightness(1.06); }
  }

  /* 6) scrollbar fino coherente (WebKit) */
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px;
    border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(140,140,140,.4); background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }

  /* 7) admin: tabs sticky con blur (el panel gana navegación al scrollear) */
  body.modo-admin .adm-tabs {
    position: sticky; top: 0; z-index: 60; padding: 10px 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }

  /* 8) strip "Hoy" al patrón score-central (bench SCORELINE/BetRoom):
     escudos grandes ARRIBA de los nombres, hora protagonista al centro */
  .hoy-card { grid-template-columns: 1fr auto 1fr; align-items: start;
    padding: 14px 10px 12px; border-radius: 14px; }
  .hoy-eq { flex-direction: column; align-items: center; gap: 7px; }
  .hoy-eq.der { flex-direction: column-reverse; justify-content: flex-end; }
  .hoy-eq .bandera-sm { width: 42px; height: 29px; border-radius: 6px 6px 6px 0; }
  .hoy-eq .bandera-sm.crest { width: 38px; height: 38px; border-radius: 0; object-fit: contain; }
  .hoy-eq .nombre { white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hoy-centro { gap: 4px; padding-top: 2px; }
  .hoy-hora { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
  .hoy-score { font-size: 21px; font-variant-numeric: tabular-nums; }
  .hoy-estado { background: var(--card2); border: 1px solid var(--border-strong);
    border-radius: 999px; padding: 2px 9px; }
  .hoy-card.vivo .hoy-estado { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.35); }

  /* 9) franja de inteligencia con borde de gradiente (premium, sutil) */
  .intel-strip { border: 1px solid transparent;
    background: linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(120deg, rgba(0,200,83,.45), rgba(255,255,255,.07) 45%, rgba(0,200,83,.18)) border-box;
    border-radius: 12px; }

  /* El CTA de picks comparte los estados de acción de Pulso. */
  .picks-btn svg { color: inherit; }

  /* 11) tabbar: el tab activo vive en una pill (indicador moderno) */
  .tabbar .tab { border-radius: 12px; padding: 6px 0 5px;
    transition: background var(--m-fast) var(--e-standard), color var(--m-fast) var(--e-standard); }
  .tabbar .tab.on { background: var(--accent-dim); }

  /* 12) barra 1X2 del detalle: más presencia, crece al montar, y las etiquetas
     llevan el dot del color de su segmento (identidad = marca de color al lado
     del texto, nunca texto coloreado) */
  .probbar { height: 10px; gap: 2px; }
  .probbar div { animation: probIn .65s var(--e-decelerate) both; }
  
  @keyframes probIn { from { max-width: 0; } to { max-width: 100%; } }
  .problabels { font-size: 10.5px; }
  .problabels span { display: inline-flex; align-items: center; gap: 5px; }
  .problabels span::before { content: ""; width: 7px; height: 7px; border-radius: 1px; flex: 0 0 auto; }
  
  
  
  @media (prefers-reduced-motion: reduce) { .probbar div { animation: none; } }

  /* 13) chips de apuesta (1x2 / doble oportunidad): cuota tabular más grande
     y hover con intención (es un elemento accionable, que se sienta).
     El nombre va en su PROPIA línea: en 3 columnas de móvil "Valencia" quedaba
     truncado a "V…" — dos líneas dan aire sin perder la grilla */
  .fav-bet { flex-wrap: wrap; row-gap: 4px; }
  .fav-bet .n { flex: 1 1 100%; }
  .fav-bet .c { font-size: 13.5px; font-variant-numeric: tabular-nums; }
  @media (hover: hover) and (pointer: fine) {
    .fav-bet { transition: border-color var(--m-fast) var(--e-standard),
               transform var(--m-fast) var(--e-standard); }
    .fav-bet:hover { border-color: rgba(0,200,83,.35); transform: translateY(-1px); }
  }

  /* 14) hero del carrusel: rediseño protagonista (bench BetRoom/SCORELINE).
     Base con gradiente diagonal + arista superior de acento, escudos grandes
     con halo y la hora como dato dominante */
  .hero-slide {
    padding: 28px 24px 22px; border-radius: 16px;
    background:
      linear-gradient(155deg, rgba(0,200,83,.10), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 50%),
      var(--card);
    border-color: var(--border-strong);
  }
  .hero-slide::after {
    content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,200,83,.55), transparent);
  }
  .hs-flag { width: 72px; height: 48px; }
  .hs-flag.crest { width: 62px; height: 62px;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
  .hs-name { font-size: 13px; font-weight: 700; }
  .hs-hora { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
  .hs-torneo { letter-spacing: .6px; text-transform: uppercase; font-size: 11px; font-weight: 800; }

  /* 15) títulos de sección con más autoridad */
  h2.seccion { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
  @media (min-width: 1024px) { main.wrap h2.seccion { font-size: 20px; } }

  /* 17) TIPOGRAFÍA DISPLAY (Pulso): la palanca de personalidad.
     Va donde el dato manda — horas, cuotas, números clave y titulares.
     Una familia compartida, jerarquizada por tamaño y peso */
  :root { --font-display: var(--p-font-display); }
  h2.seccion, .hs-hora, .hoy-hora, .hoy-score, .fav-bet .c, .m-chip .c,
  .intel-strip b, .adm-kpi .v, .mp-precio, .pk-ring-n, .pk-star-min b,
  .hs-fecha .dia-pill, .cc-cuota, .stat .n {
    font-family: var(--font-display);
  }

  /* 18) header glass: translúcido con blur — el contenido pasa por debajo */
  header {
    background: color-mix(in srgb, var(--header) 78%, transparent);
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
  }
  :root[data-theme="light"] header {
    background: color-mix(in srgb, #ffffff 80%, transparent);
  }

  /* 19) pick destacado del día: pieza protagonista con anillo de probabilidad */
  .pk-star {
    position: relative; margin-bottom: 10px; padding: 14px 16px; cursor: pointer;
    border-radius: 16px; border: 1px solid transparent;
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(130deg, rgba(0,200,83,.55), rgba(255,255,255,.08) 45%, rgba(0,200,83,.2)) border-box;
    box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), 0 4px 24px -10px rgba(0,200,83,.18);
  }
  @media (hover: hover) and (pointer: fine) {
    .pk-star { transition: transform var(--m-fast) var(--e-standard), box-shadow var(--m-fast) var(--e-standard); }
    .pk-star:hover { transform: translateY(-2px);
      box-shadow: 0 14px 36px -14px rgba(0,0,0,.55), 0 6px 30px -8px rgba(0,200,83,.28); }
  }
  .pk-star-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
    font-weight: 800; letter-spacing: .8px; color: var(--accent); margin-bottom: 10px; }
  .pk-star-body { display: flex; align-items: center; gap: 16px; }
  .pk-ring { flex: 0 0 auto; }
  .pk-ring-n { font-size: 14px; font-weight: 700; fill: var(--text); }
  .pk-star-info { min-width: 0; }
  .pk-star-match { font-size: 12px; color: var(--muted); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-star-sel { font-size: 15.5px; font-weight: 800; margin: 3px 0 4px; line-height: 1.25; }
  .pk-star-min { font-size: 12px; color: var(--muted); }
  .pk-star-min b { font-size: 17px; color: var(--accent); margin-left: 2px; }

  /* 16) entrada en cascada: al entrar a una vista, las cards suben en oleada
     (60ms entre cada una, tope en la sexta — el resto entra junto) */
  .vista-entra .partido-card, .vista-entra .hoy-card, .vista-entra .hero-slide {
    animation: cardIn .5s var(--e-decelerate) both;
  }
  .vista-entra .partido-card:nth-child(2), .vista-entra .hoy-card:nth-child(2) { animation-delay: 60ms; }
  .vista-entra .partido-card:nth-child(3), .vista-entra .hoy-card:nth-child(3) { animation-delay: 120ms; }
  .vista-entra .partido-card:nth-child(4), .vista-entra .hoy-card:nth-child(4) { animation-delay: 180ms; }
  .vista-entra .partido-card:nth-child(5), .vista-entra .hoy-card:nth-child(5) { animation-delay: 240ms; }
  .vista-entra .partido-card:nth-child(n+6), .vista-entra .hoy-card:nth-child(n+6) { animation-delay: 300ms; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
  @media (prefers-reduced-motion: reduce) {
    .vista-entra .partido-card, .vista-entra .hoy-card, .vista-entra .hero-slide { animation: none; }
  }
  .adm-sec { font-size: 13px; font-weight: 800; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .4px; }
  .adm-tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  .adm-tabla { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); }
  .adm-tabla th { text-align: left; padding: 9px 12px; color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .adm-tabla td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .adm-tabla tr:last-child td { border-bottom: none; }
  .adm-tabla .adm-sort { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:4px 8px;
    margin-left:-8px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit;
    font-weight:700; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
  .adm-tabla .adm-sort:hover { background:var(--p-surface-hover); color:var(--p-text); }
  .adm-tabla .adm-sort:focus-visible { outline:3px solid var(--p-focus); outline-offset:2px; }
  .adm-tabla th[aria-sort="ascending"] .adm-sort,.adm-tabla th[aria-sort="descending"] .adm-sort { color:var(--p-brand); }
  .adm-sort [data-sort-arrow] { font-size:16px; line-height:1; }
  .adm-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
  
  
  
  .adm-btn { background: var(--card); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
  .adm-btn.acc { border-color: var(--accent); color: var(--accent); }
  .adm-btn.rojo { border-color: var(--red, #ff5252); color: var(--red, #ff5252); }
  .adm-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .adm-form input { background: var(--card); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 9px 12px; font-size: 14px; }
  .adm-form input[type="number"] { width: 90px; }
  .adm-nota { font-size: 12px; color: var(--muted); margin-top: 8px; }

  /* modo admin (/admin): experiencia standalone, sin chrome de consumidor
     (incluye el dock/cupón "Mis apuestas" y cualquier FAB flotante) */
  body.modo-admin #sidebar, body.modo-admin header, body.modo-admin #tabbar,
  body.modo-admin .cupon-modal, body.modo-admin .cupon-fab { display: none !important; }
  body.modo-admin main.wrap { margin: 0 auto; max-width: 1080px; padding-top: 20px; }
  #admGate { position: fixed; inset: 0; z-index: 400; background: var(--bg);
    display: flex; align-items: center; justify-content: center; padding: 20px; }
  .admg-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; padding: 32px 28px; text-align: center; }
  .admg-logo { font-size: 22px; font-weight: 900; }
  .admg-logo em { color: var(--accent); font-style: normal; }
  .admg-logo .tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800;
    letter-spacing: 1px; color: var(--muted); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 9px; vertical-align: 3px; }
  .admg-txt { font-size: 14px; color: var(--muted); margin: 14px 0 20px; }
  .admg-card .gbtn { display: flex; justify-content: center; }
  .admg-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; }
  .adm-bar { display: inline-block; height: 8px; background: var(--accent); border-radius: 4px; vertical-align: middle; }

  /* Live match reading: shared dark/green foundations, readable data states. */
  .vivo-match { margin-bottom:12px; border:1px solid var(--border-strong); border-radius:var(--r-md); overflow:hidden; background:var(--card); }
  .vivo-match .vivo-row { width:100%; margin:0; border:0; border-radius:0; color:var(--text); font-family:inherit; }
  .vr-reading { padding:0 12px 12px; color:var(--muted); font-size:12px; line-height:1.6; }
  .vr-reading strong { color:var(--gold); }
  .live-feed-status { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; line-height:1.6; color:var(--muted); margin:4px 0 14px; flex-wrap:wrap; }
  .live-feed-status button { color:var(--text); border:1px solid var(--border-strong); background:var(--bg2); border-radius:8px; padding:10px 14px; font:inherit; cursor:pointer; min-height:44px; }
  .live-pending { color:var(--gold); }
  .live-reading { padding:16px; background:var(--bg2); border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:12px; }
  .live-reading h4 { margin:0 0 10px; font-size:16px; }
  .live-reading ul { padding-left:19px; margin:0; font-size:14px; line-height:1.7; }
  .live-reading li + li { margin-top:5px; }
  .live-recent { font-size:13px; line-height:1.7; color:var(--muted); }
  .live-stat-grid { padding:4px 12px; border:1px solid var(--border-strong); border-radius:12px; }
  .live-stat-grid .vs-row { font-size:13px; padding:9px 0; gap:10px; grid-template-columns:minmax(0,1fr) minmax(90px,1.4fr) minmax(0,1fr); }
  .live-stat-grid .vs-row:first-child .v { font-size:11px; color:var(--muted); font-weight:500; }
  .live-stat-grid .vs-row .v { flex:1; overflow-wrap:anywhere; }
  .live-stat-grid .vs-row .k { flex:1; text-align:center; }
  .live-table-wrap { overflow-x:auto; }
  .live-projections { width:100%; border-collapse:collapse; font-size:13px; line-height:1.5; }
  .live-projections th,.live-projections td { padding:10px 8px; border-bottom:1px solid var(--border); text-align:right; }
  .live-projections th:first-child { text-align:left; }
  .live-projections thead { color:var(--muted); font-size:11px; }
  .live-projections tbody th { font-weight:500; }
  .live-opportunity { border:1px solid var(--border-strong); border-radius:12px; padding:16px; margin:10px 0; background:var(--bg2); }
  .live-opportunity-head { display:flex; gap:8px; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); flex-wrap:wrap; }
  .live-experimental { color:var(--gold); border:1px solid #806a3c; border-radius:5px; padding:3px 6px; }
  .live-opportunity h5 { font-size:19px; margin:10px 0 6px; }
  .live-opportunity p { font-size:13px; line-height:1.6; }
  .live-price { display:flex; gap:22px; align-items:center; margin:14px 0; }
  .live-price small { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
  .live-price b { font-size:26px; color:var(--accent); }
  .live-price strong { font-size:20px; }
  .live-price .addleg { margin-left:auto; min-width:44px; min-height:44px; }
  .live-empty { padding:15px; border-radius:10px; border:1px solid var(--border-strong); font-size:14px; line-height:1.7; color:var(--muted); }
  .live-comparisons { margin:14px 0; }
  .live-comparisons summary { cursor:pointer; padding:12px 0; min-height:44px; font-size:14px; font-weight:600; }
  .live-events { font-size:13px; line-height:1.9; padding-left:18px; }
  #vivoDetBody .vd-nota { font-size:12px; line-height:1.7; color:var(--muted); }
  #vivoDetX { min-width:44px; min-height:44px; align-items:center; justify-content:center; font-size:26px; }
  #vivoModal button:focus-visible, #vivoModal summary:focus-visible, .vivo-row:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
  @media(max-width:480px) { .live-projections th,.live-projections td {padding:9px 5px;} .live-price {gap:14px;} }