/* Instrumento — hoja única.
   Dos temas en variables; el resto hereda.
   Celular hasta 900px; sidebar + contenido desde ahí. */

/* Paleta "Césped neón": negro con un toque verde + verde lima eléctrico
 * (antes "Grafito", negro neutro + ámbar). El lima es el color que más
 * resalta sobre fondo oscuro y va con el fútbol; los avisos siguen en
 * amarillo y lo negativo/en vivo en rojo, para que no se confundan. Oscuro por defecto, :root; claro en
 * body[data-tema="claro"] -- mismo mecanismo que antes (ver app.js,
 * que ya guarda la preferencia en localStorage y setea data-tema).
 *
 * Los nombres viejos (--ink, --dim, --suave, --acc-suave, --alerta,
 * --mal...) quedan como ALIAS de los nuevos: todo el CSS y los estilos
 * inline de vistas.js/vistas2.js/panel.js/onboarding.js que todavía
 * los usan siguen andando, ya con los colores nuevos, mientras cada
 * pantalla se pasa a los nombres nuevos en las siguientes etapas. */
:root {
  /* Tokens del rediseño (design_handoff_instrumento_rediseno/tokens.css).
   * El oscuro sigue en :root y no en body[data-tema="oscuro"]:
   * compartir.js lee los colores desde document.documentElement para
   * dibujar la imagen del pick. */
  --bg: #080D0A;  --card: #0F1612;  --soft: #161F19;  --line: #212C24;
  --line2: #2C3A31;  --sep: #1A231D;
  --tx: #EEF2EC;  --tx2: #C5CDC7;  --mut: #9AA59D;  --mut2: #6E7A72;
  --strong: #111A14;  --onstrong: #F2F5F0;
  --strong2: #18231C;  --onstrong2: #A6B1A9;  --strongline: #26322A;
  --hi: #C6F432;  --onhi: #0B1400;
  --acc: #D4FF5A;
  --ok: #D4FF5A;  --ok-bg: #1C2A0A;
  --warn: #F0C060;  --warn-bg: #2E2612;
  --neg: #FF8076;  --neg-bg: #331A18;
  --live: #FF5A52;  --live-bg: #2E1614;
  --visita: #8C9DFF;
  --pitch: #121A15;
  /* Tarjeta elegida (Partidos en PC) */
  --sel-bg: #131D16;  --sel-line: rgba(198,244,50,.6);

  /* Alias de compatibilidad -- ver nota arriba */
  --accbg: var(--ok-bg); --warnbg: var(--warn-bg); --negbg: var(--neg-bg);
  --ink: var(--tx); --dim: var(--mut); --suave: var(--soft);
  --acc-suave: var(--accbg); --acc-ink: var(--onhi);
  --alerta: var(--warn); --mal: var(--neg); --borde: var(--line2);

  /* Radios: solo estos (más 28px arriba en las hojas inferiores) */
  --r-chip: 8px; --r-input: 12px; --r-card: 18px; --r-hoja: 24px; --r-pill: 999px;
  --rad: var(--r-input); --rad2: var(--r-chip); --rad-chip: var(--r-pill);

  /* Espaciado base 4 y margen lateral (14 ≤374px, 28 tablet, 32 PC) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --margen: 16px;

  /* Alturas de control */
  --h-btn: 48px; --h-btn-lg: 52px; --h-btn-sm: 40px; --h-chip: 36px; --h-input: 50px;

  /* Elevación: la jerarquía la llevan borde y fondo; sombra solo en lo
   * que flota (tab bar, hojas, toast) */
  --sombra: none;
  --sombra-flota: 0 14px 34px -12px rgba(0,0,0,.6);
  --sombra-alta: var(--sombra-flota);

  /* Área táctil mínima en controles redondos chicos */
  --toque: 44px;

  --dur: 160ms; --ease: cubic-bezier(.2,.7,.2,1);
}

body[data-tema="claro"] {
  --bg: #F4F6F1;  --card: #FFFFFF;  --soft: #EEF1EA;  --line: #DDE3D9;
  --line2: #CBD3C6;  --sep: #EEF1EA;
  --tx: #121712;  --tx2: #3A433D;  --mut: #56615A;  --mut2: #8A948D;
  /* el bloque fuerte sigue oscuro en claro */
  --strong: #121A15;  --onstrong: #F1F4EE;
  --strong2: #18231C;  --onstrong2: #AAB4AD;  --strongline: #26322A;
  /* --hi SOLO como relleno con texto oscuro; como texto va --acc */
  --hi: #C6F432;  --onhi: #0B1400;
  --acc: #3F6B00;
  --ok: #2F5200;  --ok-bg: #E9F6C8;
  --warn: #7A4E00;  --warn-bg: #FBEFD2;
  --neg: #B3261E;  --neg-bg: #FBE3E0;
  --live: #D93A31;  --live-bg: #FBE3E0;
  --visita: #4F5FD6;
  --pitch: #16201A;
  --sel-bg: #F5FBE3;  --sel-line: rgba(63,107,0,.55);

  /* Alias de compatibilidad, DE NUEVO acá -- ver la nota de arriba.
   * Una var() dentro de una custom property se resuelve al valor
   * COMPUTADO donde esa property queda declarada (acá, en :root), y ESE
   * valor ya resuelto es lo que se hereda -- no una referencia viva que
   * seguiría el --tx de cada elemento. Sin repetir el alias acá, todo
   * lo que todavía usa el nombre viejo (--ink, --dim...) se quedaba
   * pegado al color oscuro de :root aunque el tema claro sí cambiara
   * --tx/--mut/etc. */
  --accbg: var(--ok-bg); --warnbg: var(--warn-bg); --negbg: var(--neg-bg);
  --ink: var(--tx); --dim: var(--mut); --suave: var(--soft);
  --acc-suave: var(--accbg); --acc-ink: var(--onhi);
  --alerta: var(--warn); --mal: var(--neg); --borde: var(--line2);

  --sombra-flota: 0 10px 30px -12px rgba(18,23,18,.18);
  --sombra-alta: var(--sombra-flota);
}

/* Controles nativos (casillas, selects, barras de scroll) en el tono del tema */
:root { color-scheme: dark; }
body[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5;
  /* Un solo tipo (Manrope) reemplaza Inter + IBM Plex Mono: las cifras
   * se alinean por ancho tabular en vez de necesitar una fuente
   * monoespaciada aparte -- ver handoff, "Tipografía". */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

/* Cambio de tema: un solo barrido, no uno por elemento.
 *
 * Antes cada bloque (body, .tarjeta, header, #tabs, inputs...) traía su
 * propia transition de color con su propia duración (.15s a .2s según
 * el elemento) para sus PROPIOS hover/estados -- al cambiar el tema,
 * las variables de :root cambian todas a la vez pero cada elemento
 * corre su transición por separado, así que no se ve como un solo
 * barrido parejo sino como algo desparejo. Esta clase, puesta en <body>
 * solo durante el cambio (ver app.js), fuerza una duración única en
 * TODO con !important sin tocar las transiciones normales del resto
 * del tiempo (hover, :active, aria-pressed, etc.).
 */
body.tema-cambiando * {
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, fill .2s ease, stroke .2s ease
              !important;
}

#app { min-height: 100vh; }
.oculto { display: none !important; }

a { color: var(--acc); }
a:hover { color: var(--ink); }

/* Foco propio: el anillo azul del navegador no pertenece a la paleta.
 * :focus-visible solo aparece con teclado, no al tocar en el celular. */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* flex:none de fábrica, igual que .chip/.punto/.pildora/.escudo: sin
 * esto, un .num o .mono suelto al lado de un .crece con texto largo se
 * achica o envuelve en vez de quedarse fijo. Un .mono que SÍ necesita
 * achicarse (combinado con .crece) sigue funcionando: esa regla está
 * declarada después y gana. */
.mono, .num {
  /* Manrope + font-variant-numeric: tabular-nums (ver body) reemplaza
   * IBM Plex Mono: las cifras siguen alineadas sin cambiar de tipo. */
  flex: none; white-space: nowrap;
}
.apagado { color: var(--dim); }
.chico { font-size: 13px; }
.error { color: var(--mal); font-size: 13px; }

/* Iconos Phosphor: bloque, para que no arrastren line-height del texto */
i[class^="ph"], i[class*=" ph"] { line-height: 1; display: block; }

/* --- Marca / logo --- */
.marca { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; }
.marca-icono { width: 21px; height: 21px; color: var(--acc); flex: none; }
/* El ícono instalado (favicon.svg) trae su propio fondo lima y radio:
 * un <img>, no la mira de línea -- una sola marca en toda la app. */
.marca .marca-icono-app { width: 26px; height: 26px; display: block; }

/* --- Firma del autor ("by WualterS") ---
 * La W y la S en el color de acento: se lee "WS" y "WualterS" a la vez.
 * En el tema claro el lima de --hi no llega a 4.5:1 sobre blanco, así
 * que ahí baja a --acc (#3F6B00). */
.firma { color: var(--mut); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.firma b { color: var(--tx); font-weight: 800; }
.firma em { font-style: normal; color: var(--acc); }
body[data-tema="claro"] .firma em { color: var(--acc); }
/* Sello compacto junto al logo del header del celular */
.sello-ws {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border: 1.5px solid var(--hi); border-radius: var(--rad-chip);
  color: var(--acc); font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
body[data-tema="claro"] .sello-ws { color: var(--acc); border-color: var(--acc); }

/* --- Cabecera y tabs (celular: barra fija abajo) --- */
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) var(--margen) 10px; max-width: 430px; margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease, border-color .2s ease;
}

/* Barra fina bajo el header mientras hay un pedido en vuelo -- más
 * discreta que el esqueleto, así que no espera los 200ms de
 * cargandoDiferido() en app.js: se prende apenas arranca el pedido. */
.barra-carga {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; opacity: 0; transition: opacity .15s ease;
}
.barra-carga.visible { opacity: 1; }
.barra-carga::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  background-size: 300% 100%; animation: shimmer 1.3s linear infinite;
}

/* Progreso de una ingesta corriendo: el servidor no da un % real (solo
 * la fase en la que está), así que esto es a propósito INDETERMINADO
 * -- una barra rellena a un % inventado mentiría sobre cuánto falta. */
.barra-progreso-indeterminada {
  height: 4px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--line); margin-top: 10px; position: relative;
}
.barra-progreso-indeterminada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  background-size: 300% 100%; animation: shimmer 1.3s linear infinite;
}

/* Tab bar flotante (celular): pastilla que flota 14/16px de los bordes,
 * no una barra pegada al fondo -- ver handoff, "Layout/responsive". */
#tabs {
  position: fixed; left: var(--margen); right: var(--margen);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5;
  max-width: 430px; margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px;
  background: var(--strong); border-radius: var(--r-pill); padding: 6px;
  border: 1px solid var(--strongline);
  box-shadow: var(--sombra-flota);
  transition: background-color .2s ease;
}

#tabs button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: 0; border-radius: var(--r-pill); cursor: pointer;
  color: var(--onstrong2); font: inherit; font-size: 10px; font-weight: 800;
  padding: 8px 0; min-height: var(--toque);
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
#tabs button i { font-size: 19px; }
#tabs button[aria-current="true"] {
  color: var(--tx); background: var(--bg);
}
/* El ícono de la pestaña activa en el acento: se ubica de un vistazo
 * sin leer la etiqueta. --hi, no --acc: la barra es --strong en los dos
 * temas, así que el lima siempre tiene contraste. */
#tabs button[aria-current="true"] i { color: var(--acc); }
/* En claro la pestaña activa es una pastilla --bg (casi blanca): el
 * lima de --hi no llega a contraste ahí; --acc (#3F6B00) sí. */
body[data-tema="claro"] #tabs button[aria-current="true"] i { color: #3F6B00; }
#tabs button:active { transform: scale(0.94); }

/* Badge de cantidad: en vivo (rojo) y en Combinar (ámbar) -- ver
 * actualizarBadges() en app.js. Se repite en la tab bar y en el
 * sidebar de PC (.pildora-nav .badge-nav). */
.badge-nav {
  position: absolute; top: 2px; right: calc(50% - 21px);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--r-pill); color: #FFFFFF; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.badge-vivo { background: var(--live); }
.badge-combinar { background: var(--hi); color: var(--onhi); }
.pildora-nav .badge-nav {
  position: static; margin-left: -2px;
}

/* --- Sidebar de PC (>=1100px): oculto por completo en celular --- */
#sidebar { display: none; }

main { max-width: 430px; margin: 0 auto; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* --- Bloques --- */
.titulo { padding: 20px var(--margen) 4px; }
.titulo h2 {
  margin: 6px 0 0; font-size: 28px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em;
}
.sobretitulo {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut);
}

/* Borde de 1px en todas las tarjetas: en oscuro --card y --bg casi no
 * se distinguían. La sombra queda solo para lo que flota (tab bar,
 * hojas, toast). */
.tarjeta {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .16s ease;
  animation: aparecer .3s ease both;
}

/* Bloque destacado (cabecera del partido, avisos, veredictos): fondo
 * --strong con --onstrong encima, más redondeado que una tarjeta
 * normal. Reutilizable en cualquier pantalla -- ver el handoff,
 * "Uso" de --strong/--onstrong/--strong2/--onstrong2. */
/* En el tema claro, --acc/--warn/--neg se oscurecen para leerse sobre
 * fondo blanco -- pero .bloque-fuerte sigue siendo casi negro en los dos
 * temas, y adentro quedaban marrón sobre negro ("Validado · 412 obs."
 * en Consultar, avisos, chips). Dentro del bloque se vuelve a los tonos
 * del tema oscuro. */
/* Lo mismo vale para todo lo que va sobre --strong o la cancha en los
 * dos temas (cabecera del análisis, tab bar, panel de marca del login,
 * consejos): ahí --acc vuelve al lima del tema oscuro. */
body[data-tema="claro"] :is(.bloque-fuerte, .analisis-cab, #tabs, .login-marca, .consejo,
  .onboarding-icono, .cancha) {
  --acc: #D4FF5A; --ok: #D4FF5A; --ok-bg: #1C2A0A; --accbg: var(--ok-bg);
  --warn: #F0C060; --warn-bg: #2E2612; --warnbg: var(--warn-bg);
  --neg: #FF8076; --neg-bg: #331A18; --negbg: var(--neg-bg);
  --live: #FF5A52; --live-bg: #2E1614; --visita: #8C9DFF;
  --alerta: var(--warn); --mal: var(--neg); --acc-suave: var(--accbg);
}
.bloque-fuerte {
  background: var(--strong); color: var(--onstrong);
  border-radius: var(--r-hoja); padding: 14px 16px;
}
.bloque-fuerte-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; border-top: 1px solid var(--strong2); background: none;
  color: inherit; text-align: left; padding: 8px 0; font: inherit;
  cursor: pointer; min-height: 0;
}
.bloque-fuerte-fila:first-child { border-top: 0; }
.bloque-fuerte-sub { background: var(--strong2); border-radius: var(--r-input); padding: 12px 14px; }
/* --strong2 queda cerca de --strong: los rellenos --strong2 dentro de un
 * bloque fuerte llevan un filo --strongline para no perderse */
.bloque-fuerte-sub, .btn-cab-volver, .btn-seguir, .analisis-vs, .analisis-x12 > div:not(.top),
.analisis-equipo .escudo, .combi-cuota, .combi-aviso, .consulta-porque, .ya-pague, .ya-pague-estado {
  box-shadow: inset 0 0 0 1px var(--strongline);
}
/* Sin esto, cada repintado (tipear en el buscador, tocar un filtro)
 * vuelve a disparar la entrada de las diez tarjetas juntas, porque se
 * reconstruyen con innerHTML y la animación arranca de nuevo con cada
 * nodo nuevo. Puesta por JS solo cuando la lista YA se mostró una vez
 * para este mismo día/búsqueda -- ver verPartidos() en vistas.js. */
.tarjeta.sin-entrada { animation: none; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lista { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--margen) 0; }

/* Envoltorio de sección suelto dentro de una vista (un bloque --strong,
 * una tarjeta, un input) -- incluye su propio padding lateral, así el
 * ancho de columna (celular/tablet/PC, ver @media abajo) se controla
 * en un solo lugar. El margen superior varía por pantalla, así que
 * queda en --pt (custom property, puesta inline) en vez de una clase
 * por cada valor. Reemplaza a los antiguos selectores
 * main > div[style*="padding:...")], que dependían de que el inline
 * style de cada vista calzara letra por letra con lo que este archivo
 * esperaba -- un cambio de un espacio en cualquier vista los rompía
 * en silencio. */
.cont { padding: var(--pt, 0) var(--margen) 0; }

.fila { display: flex; align-items: center; gap: 11px; }
.crece { flex: 1; min-width: 0; }

.recorte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Partido ya jugado: equipo | marcador | equipo, en una fila de tres
 * columnas (el marcador no empuja los nombres, ver minmax(0,1fr)). */
.fila-marcador {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 10px; align-items: center; font-size: 16px;
}
.fila-marcador .num { font-size: 24px; }

/* Estrella de favorito en la tarjeta de partido: sin fondo ni borde,
 * solo el ícono -- distinto de .redondo (que sí lleva círculo),
 * porque acá compite con el chip de señal al lado. Lleva .redondo
 * igual (ver estilo.css más abajo) para el área táctil de 44px. */
.btn-favorito {
  border: 0; background: none; width: 40px; height: 40px; flex: none; border-radius: 50%;
  margin: -8px -10px -8px 0; padding: 0; color: var(--mut); font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Circular con iniciales por defecto (ver iniciales()/escudo() en
 * app.js); la imagen real, cuando la hay, la reemplaza sin el
 * monograma. */
.escudo {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--soft); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
}
img.escudo {
  background: var(--card); object-fit: contain; padding: 3px;
}
/* Bandera de una selección: rectángulo redondeado 4:3, no círculo. En
 * círculo se recortaba el 50% del medio y se perdía lo que distingue a
 * varias banderas (el escudo de Eslovenia está a la izquierda: quedaba
 * blanco-azul-rojo, igual que Rusia). */
img.escudo.bandera, .analisis-equipo img.escudo.bandera {
  object-fit: cover; padding: 0; border-radius: 5px;
  height: auto; aspect-ratio: 4 / 3; align-self: center;
  box-shadow: 0 0 0 1px var(--line);
}
.analisis-equipo img.escudo.bandera { border-radius: var(--r-chip); margin-top: 7px; margin-bottom: 7px; }

.estrellas {
  font-size: 12px;
  color: var(--acc); letter-spacing: 0.06em; white-space: nowrap;
}

.pie {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}

/* --- Controles --- */
.btn {
  /* inline-flex: el ícono (Phosphor es display:block) queda al lado
   * del texto y no en una línea aparte -- ver "Guardar «línea»". */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0 18px; border-radius: var(--r-pill);
  /* Sin variante = secundario: fondo --soft con borde --line2 */
  border: 1px solid var(--line2); background: var(--soft); color: var(--tx);
  font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  margin-top: 10px; min-height: var(--h-btn);
  transition: transform .1s ease, background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn i { font-size: 17px; }
/* Tamaños: principal 52 (Entrar, Crear cuenta, Empezar), chico 40 */
.btn.grande { min-height: var(--h-btn-lg); font-size: 15px; }
.btn.chico { min-height: var(--h-btn-sm); font-size: 13.5px; padding: 0 14px; }
/* Jerarquía (ver el README del rediseño, "Componentes"):
 *  .btn.hi        = PRIMARIO del diseño (relleno lima): una sola acción
 *                   principal por pantalla o bloque.
 *  .btn.primario  = "FUERTE" del diseño (relleno --tx): Guardar dentro de
 *                   tarjetas. Se mantiene el nombre de clase de siempre
 *                   para no tocar el JS; .btn.fuerte es el mismo estilo.
 *  .btn / .btn.secundario = secundario · .btn.fantasma · .btn.destructivo */
.btn.primario, .btn.fuerte { background: var(--tx); color: var(--bg); border-color: transparent; }
.btn.primario:active { opacity: .85; }
/* Lo primero que hace alguien en la app (entrar o crear la cuenta) va
 * en el color de acento: es el botón que más tiene que llamar la
 * atención. El resto de los .primario siguen neutros para que el lima
 * no pierda fuerza de tanto repetirse. */
#f-login .btn.primario, #f-registro .btn.primario, #f-pedir-token .btn.primario {
  background: var(--hi); color: var(--onhi); border-color: transparent;
}
/* Acento relleno: para la acción destacada DENTRO de un bloque --strong
 * (ej. "Guardar combinada en Registro"), donde .primario (--tx/--bg)
 * se mezclaría con el fondo oscuro del bloque -- ver Combinar. */
.btn.hi { background: var(--hi); color: var(--onhi); border-color: transparent; }
.btn.hi:active { opacity: .85; }
.btn:active { transform: scale(0.985); }

/* Ghost: texto apagado sin fondo, para acciones secundarias como
 * "Tengo una invitación" / "Ya tengo cuenta" -- no compiten en peso
 * visual con el botón primario del formulario. */
.btn.secundario { background: var(--soft); color: var(--tx); border-color: var(--line2); }
.btn.fantasma {
  width: auto; border: 0; background: none; color: var(--mut);
  padding: 6px 10px; margin-top: 10px; font-weight: 800; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque);
}
.btn.fantasma:active { background: var(--soft); transform: none; }
/* Destructivo: Borrar, Cerrar sesión, Vaciar. .btn.peligro es el nombre
 * que ya usa el JS (confirmar borrar la cuenta). */
.btn.destructivo, .btn.peligro { background: var(--neg-bg); color: var(--neg); border-color: transparent; }
/* Deshabilitado: sin relleno de color ni sombra, se lee como apagado */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--card); color: var(--mut2); border-color: var(--line);
  box-shadow: none; cursor: default; transform: none; opacity: 1;
}

/* Sin selección: fondo --soft. Seleccionada: invierte a --tx/--bg --
 * el mismo patrón que tarjeta/chip seleccionados en todos lados (ver
 * handoff, "Interactions": "invierte colores (fondo --tx, texto --bg)"). */
.pildora {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 14px; min-height: var(--h-chip); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--soft); color: var(--tx2);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .1s ease;
}
.pildora:active { transform: scale(0.95); }
.pildora[aria-pressed="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.pildora-icono { font-size: 13px; line-height: 1; }
/* Tira de días: el nombre ARRIBA del número, no al lado. .pildora es
 * una fila (inline-flex), y con siete días en 390px "Mié 23" quedaba
 * pegado a los bordes de cada pastilla. */
.pildora-dia {
  flex: 1; min-width: 0; flex-direction: column; gap: 1px;
  padding: 8px 0; border-radius: var(--r-input); line-height: 1.15; min-height: 0;
}
.pildora-dia-nom { font-size: 10.5px; opacity: .7; }
.pildora-dia-num { font-size: 16px; font-weight: 800; }
.pildora-peligro { background: var(--neg-bg); color: var(--neg); border-color: transparent; }

/* --- Ajustes: switch y segmentado --- */
.switch {
  position: relative; width: 46px; height: 28px; border-radius: var(--r-pill);
  background: var(--line); flex: none; transition: background-color var(--dur) var(--ease);
}
.switch > i {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--mut);
  transition: left var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch[data-on="true"] { background: var(--hi); }
.switch[data-on="true"] > i { left: 21px; background: var(--onhi); }

.segmentado {
  display: flex; gap: 4px; background: var(--soft); border-radius: var(--rad-chip);
  padding: 4px; margin-top: 10px;
}
.segmentado > button {
  flex: 1; border: 0; border-radius: var(--rad-chip); padding: 10px;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 800;
  color: var(--mut); display: flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; min-height: 0;
}
.segmentado > button[aria-pressed="true"] { background: var(--card); color: var(--tx); }

/* Botones redondos chicos (+, ×, ★ de favorito): el círculo visible
 * queda en 26-36px pero el área que responde al dedo llega a 44px con
 * un pseudo-elemento, sin mover el layout. Antes esto también
 * matcheaba por [style*="border-radius:50%"] -- una comparación de
 * texto contra el atributo style, que se rompe en silencio si el
 * inline style se escribe distinto (con espacio, con otro orden).
 * Ahora todo botón redondo lleva la clase .redondo en el HTML, sin
 * depender de cómo quede escrito el estilo.
 *
 * Antes este selector pedía .pildora.redondo -- pero .btn-combi
 * (sumar/quitar de Combinar, borrar predicción, dejar de seguir un
 * equipo), .btn-favorito y .borrar-busqueda usan .redondo SOLOS, sin
 * .pildora: la regla nunca llegaba a aplicarse en ninguno de los
 * lugares reales donde se usa. */
.redondo { position: relative; }
.redondo::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--toque); height: var(--toque);
  transform: translate(-50%, -50%);
}

/* .pildora no es redonda: su ancho visible ya suele superar los 44px
 * (un chip de texto como "Solo señal alta"), solo la ALTURA queda
 * corta (~35px). El pseudo-elemento de acá solo estira la zona táctil
 * en alto, sin agrandar el chip ni angostar los que ya son anchos
 * (ancho 100%, no un cuadrado de --toque como en .redondo). */
.pildora { position: relative; }
.pildora::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: var(--toque);
  transform: translate(-50%, -50%);
}

/* --- Cuenta: avatar del header abre una hoja inferior (celular) --- */
.avatar-boton {
  border: 0; background: none; padding: 0; border-radius: 50%; flex: none;
  min-height: 0; margin: 0;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tx); border: 0;
  font-size: 13px; font-weight: 800;
  color: var(--bg);
}

.fondo-menu {
  position: fixed; inset: 0; z-index: 6; background: rgba(0,0,0,.55);
  animation: fondo-menu .16s ease both;
}
@keyframes fondo-menu { from { opacity: 0 } to { opacity: 1 } }

.hoja-menu {
  position: fixed; left: 10px; right: 10px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 7;
  max-width: 410px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--strongline); border-radius: 28px;
  padding: 22px 16px 16px;
  box-shadow: var(--sombra-flota);
  display: flex; flex-direction: column;
  animation: subir .22s var(--ease) both;
}
body[data-tema="claro"] .hoja-menu { border-color: var(--line); }
/* Asa de la hoja */
.hoja-menu::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line2);
}
@keyframes subir { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.hoja-menu-cab { display: flex; align-items: center; gap: 12px; padding: 0 4px 14px; }
.hoja-menu-cab .avatar { width: 44px; height: 44px; font-size: 16px; }

.pildora-hoja {
  display: flex; align-items: center; gap: 12px; border: 0; text-align: left;
  background: var(--soft); border-radius: var(--r-input); padding: 14px 16px;
  font-size: 14.5px; font-weight: 800; color: var(--tx);
  margin-top: 6px; min-height: var(--toque);
}
.pildora-hoja i { font-size: 19px; }
/* Hoja de cuenta: Ajustes / Panel / Tema en un grupo con borde */
.hoja-grupo { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: 4px; background: var(--soft); }
.hoja-grupo .pildora-hoja { width: 100%; margin: 0; border-radius: 0; background: none; }
.hoja-grupo .pildora-hoja + .pildora-hoja { border-top: 1px solid var(--line); }
.hoja-flecha { margin-left: auto; color: var(--mut); font-size: 16px !important; }
.hoja-menu .pildora-hoja-peligro { margin-top: 10px; border-radius: var(--r-card); }
/* Seguir equipo: el que se sigue se marca con borde lima */
.hoja-seguir-fila { border: 1px solid transparent; border-radius: var(--r-card); }
.hoja-seguir-fila[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-line); }
.pildora-hoja-peligro { background: var(--negbg); color: var(--neg); }
.hoja-seguir { z-index: 9; }
#fondo-seguir { z-index: 8; }
.hoja-seguir-fila { align-items: center; }
.hoja-seguir-fila .escudo { width: 30px; height: 30px; }
.hoja-seguir-estado {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 800; color: var(--mut);
}
.hoja-seguir-estado i { font-size: 16px; }
.hoja-seguir-estado.on { color: var(--acc); }
body[data-tema="claro"] .hoja-seguir-estado.on { color: var(--acc); }
.hoja-firma {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 0 2px;
}
.hoja-firma .marca-icono-app { width: 16px; height: 16px; }
.sidebar-firma { display: none; }

/* Desvanece el borde derecho: la única pista de que hay más chips para
 * el lado (ligas del día, secciones de Panel) era el corte seco del
 * viewport -- entra igual con contenido corto (ahí el degradé cae
 * sobre hueco vacío después del último chip, no se nota). Sin
 * degradé a la izquierda: ahí arranca siempre en scrollLeft 0, así que
 * atenuar el primer chip sería, al revés, ocultar algo que SÍ está
 * completo a la vista. */
.tira {
  display: flex; gap: 6px; overflow-x: auto; padding: 14px var(--margen) 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Sin esto el snap alinea la primera pastilla al borde de la tira
   * (x=0) e ignora el padding: quedaba pegada al costado de la pantalla. */
  scroll-padding-inline: var(--margen);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}
.tira::-webkit-scrollbar { display: none; }
.tira-sep { width: 1px; flex: none; align-self: stretch; margin: 6px 4px; background: var(--line); }
.filtros-partidos .pildora i { font-size: 14px; }

/* Estrella rellena ("siguiendo"): el set de íconos solo trae la
 * variante de línea (static/phosphor/style.css no tiene ph-fill), así
 * que <i class="ph-fill ph-star"> no dibujaba nada y la estrella de un
 * equipo seguido desaparecía. Máscara con la misma silueta, rellena. */
.estrella-llena {
  display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29 114.85l-45 38.83L203 211.75a16.4 16.4 0 0 1-24.5 17.82L128 198.49l-50.53 31.08A16.4 16.4 0 0 1 53 211.75l13.76-58.07-45-38.83A16.46 16.46 0 0 1 31.08 86l59-4.76 22.76-55.08a16.36 16.36 0 0 1 30.27 0l22.75 55.08 59 4.76a16.46 16.46 0 0 1 9.37 28.86Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29 114.85l-45 38.83L203 211.75a16.4 16.4 0 0 1-24.5 17.82L128 198.49l-50.53 31.08A16.4 16.4 0 0 1 53 211.75l13.76-58.07-45-38.83A16.46 16.46 0 0 1 31.08 86l59-4.76 22.76-55.08a16.36 16.36 0 0 1 30.27 0l22.75 55.08 59 4.76a16.46 16.46 0 0 1 9.37 28.86Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-favorito[aria-pressed="true"] { color: var(--acc); }
body[data-tema="claro"] .btn-favorito[aria-pressed="true"] { color: var(--acc); }

/* "Hay partidos jugándose ahora": era un <button class="tarjeta"> sin
 * color propio y el texto salía con el negro del navegador sobre --card. */
.aviso-vivo {
  width: 100%; text-align: left; cursor: pointer; margin-top: 10px;
  font: inherit; color: var(--tx); border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
}
/* --- Partidos (rediseño 2c) --- */
.titulo-fecha { font-size: 13px; font-weight: 700; color: var(--mut); }
/* Tira de días: contenedor con borde y siete columnas iguales */
.tira-dias-cont { padding: 14px var(--margen) 4px; }
.tira-dias {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  padding: 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
}
.tira-dias .pildora-dia { border: 0; background: none; color: var(--tx2); min-height: 52px; }
.tira-dias .pildora-dia[aria-pressed="true"] { background: var(--tx); color: var(--bg); }
.tira-dias .pildora-dia.dia-pro { color: var(--mut2); }
.tira-dias .pildora-dia.dia-pro .pildora-dia-nom { opacity: 1; }
.buscador input { min-height: var(--h-btn); }
.aviso-vivo { background: color-mix(in srgb, var(--live) 7%, var(--card)); }
/* Tarjeta de partido: la hora primero, en 15/800 */
.tarjeta-partido-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 28px; }
.tarjeta-partido-hora { font-size: 15px; font-weight: 800; }
.tarjeta-partido-liga { font-size: 12.5px; font-weight: 700; color: var(--mut); }
.tarjeta-partido-cuerpo {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%;
}
.tarjeta-partido-cuerpo:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: var(--r-input); }
.tarjeta-partido-equipo + .tarjeta-partido-equipo { margin-top: 8px; }
.tarjeta-partido-equipo b.crece { font-size: 16px; font-weight: 800; }
.tarjeta-partido-pct { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.tarjeta-partido-pct.apagado { color: var(--mut); }
.tarjeta-partido .vivo-tiempo { margin-top: 12px; }
.tarjeta-partido-pie {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--sep); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--tx2);
}
.tarjeta-partido-pie i { color: var(--mut); font-size: 15px; flex: none; }
/* "Ya jugados" plegado: una fila con borde punteado */
.grupo-partidos.plegado .grupo-partidos-cab {
  width: calc(100% - 2 * var(--margen)); margin: 14px var(--margen) 0; padding: 0 14px; min-height: 52px;
  border: 1px dashed var(--line2); border-radius: var(--r-card);
}

/* Partidos agrupados: En juego / Por jugar / Ya jugados */
.grupos-partidos { display: flex; flex-direction: column; gap: 4px; }
.grupo-partidos-cab {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  border: 0; background: none; color: var(--tx); font: inherit; text-align: left;
  padding: 18px calc(var(--margen) + 2px) 0; font-size: 15px; font-weight: 800; cursor: pointer; min-height: var(--toque);
}
.grupo-partidos-cab:disabled { cursor: default; opacity: 1; }
.grupo-partidos-cab i { font-size: 17px; color: var(--mut); }
.grupo-partidos-n {
  font-size: 12px; font-weight: 800; color: var(--mut); background: var(--soft);
  border-radius: var(--r-pill); padding: 2px 9px;
}
.grupo-partidos .lista { padding-top: 8px; }
.chip.final { background: var(--soft); color: var(--tx); }
.tira1x2-leyenda {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--mut);
}
.tira > * { scroll-snap-align: start; }

/* type="number" sumado acá: le faltaba enterito (usaba el estilo crudo
 * del navegador, ni el padding ni los colores del resto), y con menos
 * de 16px de letra Safari en iPhone hace zoom automático apenas tocás
 * el campo -- el zoom entrando y saliendo de golpe es lo que se ve como
 * "el teclado se abre y se cierra solo". 16px (en vez de los 14px de
 * antes) evita el zoom; visualmente casi no se nota la diferencia. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"] {
  width: 100%; min-height: var(--h-input); padding: 12px 16px; border-radius: var(--r-input);
  border: 1px solid var(--line2); background: var(--card);
  color: var(--tx); font: inherit; font-size: 16px; font-weight: 600; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--mut2); opacity: 1; }
/* Foco del campo: borde lima y anillo suave (el outline global de
 * :focus-visible no aplica: el campo ya lleva su propio anillo) */
input:focus, select:focus, textarea:focus { border-color: var(--hi); box-shadow: 0 0 0 3px var(--ok-bg); outline: none; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg); color: var(--mut2); border-color: var(--line); cursor: not-allowed;
}

/* Sin esto un <select> (ej. "1 · Partido" en Consultar) quedaba con el
 * estilo crudo del navegador -- ni un input más. */
select {
  width: 100%; min-height: var(--h-input); padding: 12px 14px; border-radius: var(--r-input);
  border: 1px solid var(--line2); background: var(--card);
  color: var(--tx); font: inherit; font-size: 16px; font-weight: 700; outline: none;
}

input[type="range"] { width: 100%; accent-color: var(--acc); }

.buscador { position: relative; }
.buscador input { padding-left: 42px; padding-right: 40px; }
.buscador-icono {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--mut); font-size: 18px; pointer-events: none;
}
.borrar-busqueda {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: none; color: var(--dim);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 15px; min-height: auto;
}
.borrar-busqueda:active { background: var(--acc-suave); color: var(--acc); }

@media (hover: hover) {
  .btn:not(.primario):not(.fuerte):not(.fantasma):not(.hi):not(.destructivo):not(.peligro):not(:disabled):hover { background: var(--line); }
  .btn.destructivo:not(:disabled):hover, .btn.peligro:not(:disabled):hover { background: color-mix(in srgb, var(--neg) 18%, var(--neg-bg)); }
  .btn.primario:not(:disabled):hover, .btn.fuerte:not(:disabled):hover { opacity: .9; }
  .btn.hi:not(:disabled):hover { opacity: .9; }
  .btn.fantasma:hover { background: var(--soft); color: var(--ink); }
  .pildora:not([aria-pressed="true"]):not(:disabled):hover { border-color: var(--line2); background: var(--line); }
  .pildora-hoja:hover { background: var(--line); }
  .pildora-hoja-peligro:hover { background: color-mix(in srgb, var(--neg) 18%, var(--negbg)); }
  .pildora-nav:hover { background: var(--strong2); }
  .pildora-peligro:hover { border-color: var(--mal); color: var(--mal); }
  .tarjeta:hover { border-color: var(--line2); }
  #tabs button:not([aria-current="true"]):hover { color: var(--ink); }
}

/* --- Barras de probabilidad --- */
.barra {
  height: 4px; border-radius: var(--r-pill); background: var(--suave);
  overflow: hidden; margin-top: 7px;
}
.barra > i {
  display: block; height: 100%; border-radius: var(--r-pill); background: var(--dim);
  transform-origin: left; animation: crecer .45s cubic-bezier(.2,.7,.3,1) both;
}
.barra > i.fuerte { background: var(--acc); }
/* Progreso del partido en la tarjeta de En vivo: minuto/90, siempre en
 * --live -- no reutiliza .fuerte (--acc) porque no es una señal fuerte,
 * es el reloj del partido. */
.barra > i.vivo { background: var(--live); }
@keyframes crecer { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Real vs esperado en el detalle de En vivo: la barra de "real" (--tx)
 * más una marca vertical (--live) en el punto "esperado a este
 * minuto" -- por eso NO tiene overflow:hidden como .barra, la marca
 * necesita sobresalir un poco arriba y abajo de la barra. */
.barra-vivo { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--suave); margin-top: 10px; }
.barra-vivo > i.real {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--tx);
  transform-origin: left; animation: crecer .45s cubic-bezier(.2,.7,.3,1) both;
}
.barra-vivo > i.marca { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--live); }

/* Barra 1X2 de la tarjeta de partido: local | empate | visita.
 *
 * Antes tenía `transition: flex`, pero las vistas se repintan enteras
 * con innerHTML: el elemento nace de nuevo en cada render con su
 * ancho final ya puesto, sin ningún "antes" desde el que transicionar
 * -- la transition nunca llegaba a verse. Una animation SÍ funciona,
 * porque se dispara sola cada vez que el elemento se inserta en el
 * DOM (igual que .barra > i con @keyframes crecer, un poco más abajo).
 */
.tira1x2 {
  display: flex; gap: 3px; height: 6px; margin-top: 10px;
  transform-origin: left; animation: crecer1x2 .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes crecer1x2 { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.tira1x2 > i {
  display: block; border-radius: var(--r-pill);
  transition: background-color .2s ease;
}
/* Local (más fuerte) / empate (de fondo) / visita (medio) -- no por
 * color de equipo, monocromo como el resto de la escala de --tx a
 * --mut (ver el handoff). */
.tira1x2 > i:first-child { background: var(--tx); }
.tira1x2 > i.medio { background: var(--soft); }
.tira1x2 > i:last-child { background: var(--mut); }

/* --- Análisis: cabecera --strong (liga/hora, Seguir, escudos, forma,
 * trio 1X2 o resultado final) --- */
/* Partido en juego: la cabecera con borde rojo suave (5l) */
.analisis-cab-vivo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 45%, transparent); }
.cab-final { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--acc); }
.analisis-cab {
  background: var(--strong); color: var(--onstrong);
  padding: 14px 16px 18px; border-radius: 0 0 var(--r-hoja) var(--r-hoja);
}
.btn-cab-volver {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none;
  background: var(--strong2); color: var(--onstrong); margin: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.btn-seguir {
  flex: none; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px; border-radius: var(--rad-chip); border: 0;
  background: var(--strong2); color: var(--onstrong); min-height: 0;
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.btn-seguir i { font-size: 17px; }
.analisis-equipos {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px; align-items: start; text-align: center; margin-top: 4px;
}
.analisis-equipo { min-width: 0; }
/* Sobre --strong el monograma (--soft) casi no se distinguía del fondo */
.analisis-equipo .escudo {
  width: 58px; height: 58px; font-size: 16px; margin: 0 auto;
  background: var(--strong2); color: var(--onstrong);
}
.analisis-vs {
  margin-top: 16px; padding: 4px 10px; border-radius: var(--rad-chip);
  background: var(--strong2); color: var(--onstrong2);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.analisis-equipo img.escudo { padding: 5px; }
.analisis-forma { display: flex; gap: 3px; justify-content: center; margin-top: 6px; }
.analisis-forma i {
  width: 18px; height: 18px; border-radius: 5px; flex: none; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.analisis-forma i.g { background: var(--hi); color: var(--onhi); }
.analisis-forma i.p { background: var(--live); color: #FFFFFF; }
.analisis-forma i.e { background: var(--strong2); color: var(--onstrong); }
.analisis-x12 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin-top: 16px; text-align: center;
}
.analisis-x12 > div { background: var(--strong2); color: var(--onstrong); border-radius: var(--r-input); padding: 10px 4px; min-width: 0; }
.analisis-x12 > div.top { background: var(--hi); color: var(--onhi); }
.analisis-x12 .pct { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.analisis-x12 .nom {
  font-size: 11px; font-weight: 800; opacity: .8; padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tarjeta de lectura del análisis: en celular es transparente (las
 * tiles quedan sobre el fondo de la página, --tile-bg cae al --card de
 * siempre); en PC (ver el media query de más abajo) se envuelve en una
 * tarjeta --card ancha y las tiles pasan a --bg para distinguirse de
 * ese fondo -- ver el handoff, "El análisis en PC es una tarjeta --card". */
.analisis-cuerpo { padding: 16px 16px 0; }
.tile { background: var(--tile-bg, var(--card)); border: 1px solid var(--line); border-radius: var(--r-card); }
.tile-boton {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  border: 0; background: none; color: inherit; text-align: left; font: inherit;
  padding: 14px 16px; cursor: pointer; min-height: 0;
}
.tile-icono {
  width: 40px; height: 40px; border-radius: var(--r-input); background: var(--soft);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}
.seccion-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 22px 2px 10px;
}
.seccion-cuenta {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--rad-chip);
  background: var(--accbg); color: var(--acc); letter-spacing: 0;
}

/* Lo más destacable */
.destacado { border-radius: var(--r-card); padding: 18px; }
.destacado-texto {
  margin: 8px 0 0; font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.32; text-wrap: pretty;
}
.medidor-conf {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 700;
}
.medidor-seg { display: flex; gap: 3px; }
.medidor-seg i { width: 14px; height: 6px; border-radius: var(--r-pill); background: var(--soft); }
.medidor-seg i.on { background: var(--hi); }
.medidor-seg i.mal { background: var(--neg); opacity: .7; }
.jugado-resumen { border-radius: var(--r-card); padding: 18px; display: flex; align-items: center; gap: 14px; }
.jugado-pct { font-size: 40px; font-weight: 800; letter-spacing: -.04em; flex: none; }

/* Dónde mirar: diferencia en puntos contra el promedio de la liga */
.donde-dif {
  flex: none; width: 50px; height: 50px; border-radius: var(--r-input);
  background: var(--accbg); color: var(--acc);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; line-height: 1;
}
.donde-dif small { font-size: 10px; font-weight: 800; opacity: .8; margin-top: 2px; }

/* La lista de temas ya está dentro del padding de .analisis-cuerpo: sin
 * esto sumaba el suyo propio (18/24px) y quedaba corrida respecto de
 * "Lo más destacable" y "Dónde mirar". */
#temas-cont .lista { padding: 0; gap: 8px; }
/* Tema (rediseño 2d): chip "Señal" con ícono; al abrirlo, líneas y
 * explicación, y abajo las acciones: Guardar a lo ancho y una fila de
 * tres (¿Cuánto? · Compartir · El cálculo) */
.tema { overflow: hidden; }
.tema.abierto { border-color: var(--line2); }
.tema-nombre { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.tema-senal { padding: 2px 7px; font-size: 11.5px; }
.tema-signo { font-size: 13px; font-weight: 800; color: var(--mut); }
.tema-detalle { padding: 0 10px 14px; }
.tema-porque { margin: 12px 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--tx2); }
.tema-acciones { display: flex; flex-direction: column; gap: 8px; margin: 14px 4px 0; }
.tema-guardar { margin: 0; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.tema-acciones-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tema-acciones-fila > .pildora {
  min-width: 0; padding: 0 8px; min-height: var(--h-btn-sm); background: none; border-color: transparent;
  color: var(--mut); font-size: 13px;
}
.tema-acciones-fila > .pildora[aria-expanded="true"] { background: var(--soft); color: var(--tx); }
.tema-acciones-fila > .pildora i { font-size: 16px; }
.btn-combi:focus-visible, .linea-radio:focus-visible { outline-offset: 3px; }

/* --- Combinar --- */
.combi-layout { display: flex; flex-direction: column; gap: 14px; }
/* En el celular el resultado va PRIMERO: es lo que se viene a mirar;
 * la lista queda abajo para revisar o quitar líneas. */
.combi-resumen { order: -1; border-radius: var(--r-hoja); padding: 18px; }
.combi-lineas { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.btn-vaciar {
  display: flex; align-items: center; gap: 6px; border: 0; background: none;
  color: var(--neg); font: inherit; font-size: 13px; font-weight: 800;
  padding: 0 4px; min-height: var(--toque); cursor: pointer;
}
.btn-vaciar i { font-size: 16px; }
.combi-grupo { border-radius: var(--r-card); padding: 6px 6px 8px; }
.combi-partido {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px;
  font-size: 12.5px; font-weight: 800; color: var(--mut);
}
.combi-partido i { font-size: 15px; flex: none; }
.combi-linea { display: flex; align-items: center; gap: 12px; padding: 8px 4px 4px 10px; }
.combi-linea .barra { margin-top: 7px; }
.combi-pct { font-size: 60px; font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.combi-cuota {
  margin-bottom: 4px; padding: 7px 12px; border-radius: var(--r-input);
  background: var(--strong2); font-size: 11px; font-weight: 800; color: var(--onstrong2);
}
.combi-cuota .num { display: block; font-size: 20px; color: var(--onstrong); letter-spacing: -.02em; }
.combi-cascada { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.combi-paso {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 38px; gap: 8px; align-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--onstrong2);
}
.combi-paso .num { text-align: right; color: var(--onstrong); }
.combi-paso i { display: block; height: 6px; border-radius: var(--r-pill); background: var(--strong2); overflow: hidden; }
.combi-paso b {
  display: block; height: 100%; border-radius: var(--r-pill); background: var(--onstrong2);
  transform-origin: left; animation: crecer .45s cubic-bezier(.2,.7,.3,1) both;
}
.combi-paso:last-child b { background: var(--hi); }
.combi-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  background: var(--strong2); border-radius: var(--r-input); padding: 11px 12px;
  font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--onstrong);
}
.combi-aviso i { color: var(--acc); font-size: 18px; flex: none; margin-top: 1px; }
/* Análisis de un partido que ya empezó */
.aviso-en-juego { padding: 14px 16px; border-radius: var(--r-card); margin-bottom: 8px; border: 1px solid var(--live); }
.aviso-en-juego.terminado { border-color: var(--line); }

/* En vivo: lo esperado del partido completo */
.vivo-predicho { padding: 11px 0; gap: 10px; }
.vivo-predicho .chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.vivo-predicho .chip i { font-size: 14px; }
.vivo-final { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; color: var(--mut); font-weight: 600; }
.vivo-final b { color: var(--tx); }

/* Panel → Uso */
.uso-tile { padding: 16px; border-radius: var(--r-card); margin-top: 12px; }
.uso-dias { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 14px 0 6px; }
.uso-dias i { flex: 1; min-width: 2px; background: var(--hi); border-radius: 3px 3px 1px 1px; opacity: .85; }

/* Combinada sugerida (Análisis) */
.sugerida-linea { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sugerida-linea:first-child { padding-top: 0; }
.sugerida-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sugerida-chip { font-size: 12px; font-weight: 700; }
.sugerida-chip b { color: var(--acc); }
.sugerida-total { gap: 12px; align-items: flex-end; margin-top: 12px; }

/* Líneas del mismo partido que no pueden salir juntas (0%) */
.combi-aviso.imposible { background: var(--negbg); }
.combi-aviso.imposible i { color: var(--neg); }

/* --- En vivo (rediseño 3a/3b/5i) --- */
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.vivo-actualizar.tile { padding: 12px 12px 12px 14px; }
.vivo-actualizar-icono { font-size: 17px; color: var(--mut); flex: none; }
.vivo-actualizar .chico b { font-weight: 800; }
.vivo-gol.pierde { color: var(--mut); }
.vivo-cab-fila { gap: 8px; margin-bottom: 12px; }
.vivo-cab-liga { text-align: center; font-weight: 800; color: var(--onstrong2); }
.vivo-cab-equipo { margin-top: 7px; font-weight: 800; font-size: 14.5px; }
.vivo-veredicto { margin-top: 14px; }
.vivo-veredicto .chico { display: flex; align-items: center; gap: 6px; }
.vivo-veredicto-texto { font-size: 15.5px; font-weight: 800; line-height: 1.4; margin-top: 4px; }
.vivo-seccion { margin: 22px calc(var(--margen) + 2px) 0; }
/* "Ver el análisis de antes del partido": botón punteado a lo ancho */
.btn-punteado {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--h-btn); margin-top: 10px; padding: 0 16px; cursor: pointer;
  border: 1.5px dashed var(--line2); border-radius: var(--r-pill); background: none;
  color: var(--acc); font: inherit; font-size: 14px; font-weight: 800;
}
.btn-punteado i { font-size: 17px; }
.vivo-actualizar { gap: 10px; }
.vivo-actualizar .pildora { flex: none; }
.vivo-actualizar .pildora i { font-size: 15px; }
.vivo-tarjeta {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-radius: var(--r-card); width: 100%;
}
.vivo-min {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px 4px 8px; border-radius: var(--r-chip);
  background: var(--live-bg); color: var(--live);
  font-size: 12.5px; font-weight: 800;
}
.vivo-min.fin { background: var(--soft); color: var(--mut); padding-left: 10px; }
.vivo-equipos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vivo-equipos b.crece { font-size: 16px; }
.vivo-gol { font-size: 24px; font-weight: 800; color: var(--mut); min-width: 20px; text-align: right; }
.vivo-gol.gana { color: var(--tx); }
/* Tiempo jugado: la muesca del medio marca el entretiempo */
.vivo-tiempo {
  position: relative; height: 4px; border-radius: var(--r-pill); background: var(--soft); margin-top: 14px;
}
.vivo-tiempo::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px;
  background: var(--card); border-radius: 2px;
}
.vivo-tiempo > i {
  display: block; height: 100%; border-radius: var(--r-pill); background: var(--live);
  transform-origin: left; animation: crecer .45s cubic-bezier(.2,.7,.3,1) both;
}
.vivo-tiempo.fin > i { background: var(--mut); }
.vivo-cab { border-radius: var(--r-hoja); padding: 16px 16px 18px; }
.vivo-min { line-height: 1.3; }
.vivo-cab .vivo-tiempo { background: var(--strong2); }
.vivo-cab .vivo-tiempo::after { background: var(--strong); }
.vivo-cab .vivo-min.fin { background: var(--strong2); color: var(--onstrong2); }
.vivo-marcador {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px; align-items: center; text-align: center; margin-top: 14px;
}
/* Marcador 42/800 en una sola línea: la raya es un trazo, no texto */
.vivo-marcador-num {
  font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
  display: flex; align-items: center;
}
.vivo-marcador-num > span[aria-hidden] {
  display: inline-block; width: 26px; height: 4px; margin: 0 10px; border-radius: var(--r-pill);
  background: var(--onstrong2); opacity: .6;
}
.vivo-por-equipo {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
}
.vivo-leyenda { display: flex; align-items: center; gap: 8px; margin: 10px 20px 0; }
.marca-muestra { width: 2px; height: 14px; background: var(--live); flex: none; border-radius: 2px; }

/* --- Ajustes --- */
.ajustes-layout { display: flex; flex-direction: column; gap: 10px; }
.ajustes-col { display: contents; }
.ajustes-perfil { border-radius: var(--r-card); padding: 16px; display: flex; align-items: center; gap: 14px; }
.ajustes-seccion {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mut); margin: 12px 4px 0;
}
.ajustes-grupo { border-radius: var(--r-card); padding: 4px; display: flex; flex-direction: column; }
.ajustes-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  padding: 12px; min-height: 64px; cursor: pointer;
}
.ajustes-fila + .ajustes-fila { border-top: 1px solid var(--line); }
.ajustes-fila-tit { font-size: 15px; font-weight: 800; }
.ajustes-seg { margin-top: 0; flex: none; }
.ajustes-seg > button { padding: 7px 12px; }
/* El ícono de la fila ya dice sol/luna: sin el de cada botón entra
 * "Apariencia" completo en un celular de 390px. */
.ajustes-seg > button i { display: none; }
.ajustes-fila-tit.crece { min-width: 0; }
.ajustes-app-icono { width: 40px; height: 40px; flex: none; display: block; }
.ajustes-equipo { background: var(--bg); border-radius: var(--r-input); padding: 8px 8px 8px 10px; }
.ajustes-salir {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-card); padding: 14px; min-height: var(--toque); margin-top: 6px;
  background: var(--negbg); color: var(--neg); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.ajustes-salir i { font-size: 18px; }

/* --- Panel --- */
.panel-datos { display: flex; flex-direction: column; gap: 10px; }
.panel-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-grupo-tit {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mut); padding: 12px 12px 2px;
}
.panel-grupo-tit + .ajustes-fila { border-top: 0; }
.panel-correr { flex: none; }
.panel-correr i { font-size: 13px; }
.panel-enlace { text-decoration: none; }
.panel-error { padding: 14px; }
.panel-error.resuelto { opacity: .6; }
.panel-error-detalle {
  margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; word-break: break-word;
}
.tira .pildora i { font-size: 15px; }
.panel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.panel-stat { border-radius: var(--r-card); padding: 14px 16px; font-size: 12.5px; font-weight: 700; color: var(--mut); line-height: 1.35; }
.panel-stat .num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--tx); margin-bottom: 2px; }
.panel-banda { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.panel-banda:first-of-type { border-top: 0; }
.panel-banda .combi-paso { grid-template-columns: 36px minmax(0, 1fr) 38px; color: var(--mut); }
.panel-banda .combi-paso i { background: var(--soft); }
.panel-banda .combi-paso b { background: var(--mut); }
.panel-banda .combi-paso .num { color: var(--tx); }
.panel-mercado + .panel-mercado { margin-top: 14px; }
.panel-liga { border-radius: var(--r-card); padding: 14px 16px; }
.panel-liga.apagada { opacity: .65; }
.panel-o { text-align: center; font-size: 12px; font-weight: 800; color: var(--mut); }
/* Panel → Ligas: clubes/selecciones y país arriba de la lista */
.ligas-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 4px; }
.ligas-filtros .segmentado { flex: 1 1 260px; }
.ligas-filtros select { flex: 1 1 160px; width: auto; min-width: 0; }
.panel-usuarios { display: flex; flex-direction: column; gap: 10px; }
.panel-deshecho { opacity: .6; }

/* --- Plan gratis / Pro --- */
.chip-pro {
  display: inline-flex; align-items: center; flex: none;
  gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 3px 8px; border-radius: var(--r-chip);
  background: var(--hi); color: var(--onhi);
}
/* Fila "bloqueada": lleva a Planes. Mismo alto y aire que una tile normal. */
.fila-pro {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  border: 0; border-radius: var(--r-card); padding: 14px 16px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--tx);
}
.fila-pro > i { font-size: 17px; color: var(--mut); flex: none; }
.tema-pro { border-radius: var(--r-card); }
/* .tile-boton y .ajustes-fila traen background:none: sin esto los
 * candados y la fila de Suscripción salían sin fondo de tarjeta. */
.tile.fila-pro, .tile.tema-pro, .tile.ajustes-plan { background: var(--tile-bg, var(--card)); }
/* .tile-boton/.fila-pro/.ajustes-fila traen border:0 (son botones): la
 * tarjeta igual lleva su borde. */
.tile.tile-boton, .tile.fila-pro, .tile.ajustes-fila { border: 1px solid var(--line); }
.tile.ajustes-salir { border: 0; }
.fila-pro-oscura {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  color: var(--onstrong); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
}
.fila-pro-oscura > i { color: var(--onstrong2); font-size: 16px; }
.pildora-pro { opacity: .8; border-style: dashed; border-color: var(--line2); background: none; }
.pildora-pro i { font-size: 13px; }
.pildora-dia.dia-pro .pildora-dia-nom i { font-size: 11px; display: inline-block; }
.bloque-pro { text-align: center; }
.bloque-pro .tile-icono { margin: 0 auto; color: var(--acc); }
.ajustes-plan { border-radius: var(--r-card); padding: 14px 16px; }

/* Planes */
.planes-tabla { border-radius: var(--r-card); padding: 6px 16px; }
/* Tabla Gratis / Pro (4b): dos columnas; a la izquierda qué es y lo que
 * trae gratis, a la derecha lo que trae Pro */
.planes-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  padding: 12px 0; border-top: 1px solid var(--sep); font-size: 13px; line-height: 1.4; align-items: stretch;
}
.planes-fila > span:first-child { padding-right: 12px; }
.planes-fila > span:last-child { padding-left: 12px; border-left: 1px solid var(--line); }
.planes-fila b { display: block; font-size: 14px; font-weight: 800; }
.planes-fila .apagado { display: block; margin-top: 2px; }
.planes-pro-txt { font-weight: 600; }
.planes-fila:first-child { border-top: 0; }
.planes-cab { font-size: 12px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }
.planes-pro-cab { color: var(--acc); display: flex; align-items: center; gap: 5px; }
.planes-pago { border-radius: var(--r-hoja); padding: 20px; }
/* Pasos de pago numerados en un círculo */
.planes-pasos { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 12px;
  font-size: 14px; line-height: 1.5; color: var(--onstrong); }
.planes-pasos li { counter-increment: paso; position: relative; padding-left: 36px; }
.planes-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hi); color: var(--onhi); font-size: 12.5px; font-weight: 800;
}
.planes-numero {
  display: inline-block; font-size: 17px; font-weight: 800; letter-spacing: .02em;
  background: var(--strong2); border-radius: var(--r-chip); padding: 2px 10px; margin: 0 2px;
}

/* Panel -> Suscripción */
.panel-form { border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
/* Casilla con forma de interruptor (46x28), mismo aspecto que .switch */
.interruptor {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 46px; height: 28px; border-radius: var(--r-pill); background: var(--line);
  transition: background-color var(--dur) var(--ease);
}
.interruptor::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mut); transition: left var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.interruptor:checked { background: var(--hi); }
.interruptor:checked::before { left: 21px; background: var(--onhi); }
/* Contador de la pestaña Errores del Panel */
.pildora-contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--neg-bg); color: var(--neg); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.panel-error-abierto { border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
textarea {
  width: 100%; box-sizing: border-box; border-radius: var(--r-input); border: 1px solid var(--line2);
  background: var(--card); color: var(--tx); font: inherit; font-size: 16px; padding: 12px 14px; resize: vertical;
}

/* --- Registro --- */
.reg-layout { display: flex; flex-direction: column; gap: 18px; }
.reg-resumen, .reg-preds { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.reg-hero { border-radius: var(--r-hoja); padding: 18px; }
.reg-calib {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--strong2);
}
.reg-calib .combi-paso b { background: var(--onstrong2); }
.reg-calib .combi-paso { grid-template-columns: 48px minmax(0, 1fr) 38px; }
.reg-aviso {
  display: flex; gap: 10px; align-items: flex-start; background: var(--warnbg); color: var(--warn);
  border-radius: var(--r-input); padding: 10px 12px; font-size: 13px; font-weight: 700; line-height: 1.45;
}
.reg-aviso i { font-size: 17px; flex: none; margin-top: 1px; }
.reg-temas { border-radius: var(--r-card); padding: 16px; }
.reg-filtros { flex-wrap: wrap; gap: 6px; }
.reg-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.reg-pick { border-radius: var(--r-card); padding: 12px 12px 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.reg-estado {
  width: 32px; height: 32px; border-radius: 50%; flex: none; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--mut); font-size: 16px;
}
.reg-estado.bien { background: var(--accbg); color: var(--acc); }
.reg-estado.mal { background: var(--negbg); color: var(--neg); }
.reg-estado.ojo { background: var(--warnbg); color: var(--warn); }

/* --- Consultar --- */
.consulta-layout { display: flex; flex-direction: column; gap: 12px; }
.consulta-pasos { border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.consulta-pasos-resto { display: flex; flex-direction: column; gap: 20px; }
.consulta-pasos-resto:empty { display: none; }
.consulta-paso { display: flex; flex-direction: column; gap: 10px; }
.paso-tit { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.paso-num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--mut); font-size: 12px; font-weight: 800;
}
.paso-num.hecho { background: var(--hi); color: var(--onhi); }
.paso-num i { font-size: 13px; }
#consultar-partido {
  -webkit-appearance: none; appearance: none; font-size: 14.5px;
  padding-right: 40px; text-overflow: ellipsis;
  background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9CA1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
  border-color: var(--line2); font-weight: 800;
}
/* Botón secundario dentro de un bloque fuerte (Combinar en Consultar) */
.btn-sobre-fuerte {
  display: flex; align-items: center; gap: 6px; min-height: var(--h-btn); padding: 0 18px; cursor: pointer;
  border: 1px solid var(--strongline); border-radius: var(--r-pill); background: var(--strong2);
  color: var(--onstrong); font: inherit; font-size: 14px; font-weight: 800;
}
.btn-sobre-fuerte[aria-pressed="true"] { border-color: var(--hi); }
.pildora-prob { opacity: .6; font-weight: 800; }
.pildora[aria-pressed="true"] .pildora-prob { opacity: .75; }
.consulta-vacia { border-radius: var(--r-card); padding: 24px 22px; }
.consulta-porque {
  margin-top: 14px; background: var(--strong2); border-radius: var(--r-input); padding: 11px 13px;
  font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--onstrong);
}

/* Contexto del partido: desplegable dentro de Análisis (ver
 * ctxBlock()/toggleContexto() en vistas.js) -- ya no es una pantalla
 * aparte. */
.contexto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.contexto-tile { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-input); padding: 10px 12px; }

/* Radio de selección de línea dentro de un tema (ver lineasTema() en
 * vistas.js): elige cuál línea guarda "Guardar «línea»" -- el botón +
 * de al lado es independiente, siempre suma esa línea a Combinar. */
.linea-fila { display: flex; align-items: center; gap: 10px; border-radius: var(--r-input); padding: 9px 8px 9px 10px; }
.linea-fila.activa { background: var(--soft); }
.linea-radio {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line);
  background: none; padding: 0; display: flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer; min-height: 0;
}
.linea-radio i { display: block; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.linea-radio.activo { border-color: var(--tx); }
.linea-radio.activo i { background: var(--tx); }
.linea-texto { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 0; cursor: pointer; color: inherit; font: inherit; min-height: 0; }
.btn-combi {
  width: 36px; height: 36px; border-radius: 50%; border: 0; flex: none; padding: 0; min-height: 0;
  background: var(--soft); color: var(--tx); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-combi[aria-pressed="true"] { background: var(--tx); color: var(--bg); }

/* Tarjeta con las líneas del jugador tocado en la cancha (ver
 * pintarCancha()/cargarLineasJugador() en vistas.js). */
.jugador-card { background: var(--card); border: 1px solid var(--sel-line); border-radius: var(--r-card); padding: 14px;
  margin-top: 10px; animation: aparecer .22s ease both; }
.jug-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--hi); color: var(--onhi); font-size: 13px; font-weight: 800;
}

/* Minutos esperados bajo cada jugador de la cancha: siempre blanco --
 * la cancha (--pitch) queda oscura en los dos temas, ver .cancha. */
.jug-min {
  font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); color: #FFFFFF;
}

/* --- Chips de estado --- */
/* Chips de estado: ícono + texto, no solo color (ver 2e) */
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; line-height: 1.3; padding: 4px 9px;
  border-radius: var(--r-chip); white-space: nowrap; border: 0;
  background: var(--soft); color: var(--tx2);
}
.chip > i { font-size: 13px; }
.chip.baja { background: transparent; color: var(--mut); box-shadow: inset 0 0 0 1px var(--line2); }
.chip.vivo { background: var(--live-bg); color: var(--live); }
.chip.vivo .punto { background: var(--live); animation: latido 2s ease-out infinite; }
.chip.pro { background: var(--hi); color: var(--onhi); }
/* No usa .oculto (display:none !important): así el fade se puede
 * transicionar en vez de aparecer/desaparecer de golpe. */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(6px);
  display: flex; align-items: center; gap: 8px;
  background: var(--tx); color: var(--bg);
  box-shadow: var(--sombra-flota); border-radius: var(--r-pill);
  padding: 11px 20px 11px 16px; font-size: 13.5px; font-weight: 800;
  max-width: calc(100% - 36px); text-align: center; z-index: 50;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast { width: max-content; }
.toast > i { font-size: 18px; flex: none; }
.toast > span { text-align: left; }
.chip.bien { background: var(--ok-bg); color: var(--ok); }
.chip.ojo  { background: var(--warn-bg); color: var(--warn); }
.chip.mal  { background: var(--neg-bg); color: var(--neg); }

.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.punto.bien { background: var(--acc); }
.punto.ojo  { background: var(--alerta); }
.punto.mal  { background: var(--mal); }

/* Punto de "en vivo": late para distinguirse de un estado cualquiera */
.punto.vivo { background: var(--live); animation: latido 2s ease-out infinite; }

/* Forma reciente (últimos 5): una letra por partido, más viejo a la
 * izquierda. Mismos colores que .punto/.chip (bien = acc, mal = mal),
 * empate se queda en el gris neutro de --suave. */
.forma-letra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; flex: none;
  font-size: 10px; font-weight: 700; color: var(--dim); background: var(--suave);
}
.forma-letra.bien { color: var(--acc-ink); background: var(--acc); }
.forma-letra.mal  { color: #fff; background: var(--mal); }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Onboarding (recorrido inicial + selector de favoritos) --- */
#p-onboarding {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.onboarding-paso {
  max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; flex: 1;
  display: flex; flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
}
.onboarding-cab { display: flex; align-items: center; gap: 12px; }
.onboarding-saltar { width: auto; margin: 0; padding: 8px 4px; min-height: var(--toque); flex: none; }
.onboarding-progreso { display: flex; gap: 5px; flex: 1; }
.onboarding-progreso > i {
  height: 5px; flex: 1; border-radius: var(--r-pill); background: var(--soft);
}
.onboarding-progreso > i.hecho { background: var(--hi); }
/* El contenido de cada paso centrado en el alto que sobra; los botones
 * quedan fijos al pie (.onboarding-nav). */
.onboarding-cuerpo {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0; animation: aparecer .3s ease both;
}
.onboarding-cuerpo-arriba { justify-content: flex-start; }
.onboarding-app { width: 72px; height: 72px; display: block; margin-bottom: 22px; }
.onboarding-icono {
  width: 60px; height: 60px; border-radius: var(--r-card); background: var(--strong);
  border: 0; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px; font-size: 28px; color: var(--acc);
}
.onboarding-nav { display: flex; gap: 8px; }
.onboarding-nav .btn { margin-top: 0; }
.onboarding-atras { width: 52px; min-height: var(--h-btn-lg); flex: none; padding: 0; border-radius: 50%; }
.onboarding-progreso > i { height: 4px; }
/* Equipos elegidos: borde lima con la estrella, no invertidos */
[data-onboarding-equipo][aria-pressed="true"] { background: var(--sel-bg); color: var(--tx); border-color: var(--sel-line); }
[data-onboarding-equipo][aria-pressed="true"] .estrella-llena { color: var(--acc); }
.onboarding-nav .btn:disabled { cursor: default; transform: none; }
.onboarding-cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-right: 2px;
  background: var(--bg); color: var(--tx); font-size: 12px; font-weight: 800;
}
.onboarding-resumen { text-align: center; margin: 0 0 10px; font-weight: 700; }
.onboarding-liga-equipos .pildora .estrella-llena { color: var(--acc); font-size: 13px; }
.onboarding-liga-equipos { margin-top: 12px; padding: 14px; border-radius: var(--r-card); animation: aparecer .25s ease both; }

/* --- Login --- */
#p-login {
  display: flex; flex-direction: column; min-height: 100vh;
  /* 100vh no cuenta la barra de direcciones del celular: cuando
     aparece/desaparece al scrollear, el alto "salta". 100dvh sigue el
     viewport visible de verdad; se declara DESPUÉS como progressive
     enhancement -- el navegador que no la entiende se queda con la
     regla de arriba. */
  min-height: 100dvh;
}
.login-marca { display: none; }
/* Celular: el ícono de la app grande arriba del título, como al abrirla
 * desde el cajón de apps -- sin el nombre al lado (ya está en el ícono
 * instalado y en la barra de estado). */
.marca-movil { margin-bottom: 6px; flex-direction: column; align-items: flex-start; gap: 0; font-size: 0; }
.marca-movil .marca-icono-app { width: 56px; height: 56px; }
/* En columna para que la firma quede al pie, en el flujo normal: con
 * position:absolute podía pisar los últimos botones del formulario en
 * un celular bajo. .login (flex:1) sigue centrando el formulario. */
.login-lado.login-form { flex: 1; display: flex; flex-direction: column; }
.login-firma {
  text-align: center; font-size: 13px;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
}
.login { padding: 26px 22px 30px; display: flex; flex-direction: column;
         justify-content: center; flex: 1; max-width: 430px; margin: 0 auto;
         width: 100%; gap: 14px; animation: aparecer .4s ease both; }
.login h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
            line-height: 1.15; margin: 0; }
#login-sub { font-size: 14px; color: var(--mut); margin: 6px 0 0; line-height: 1.45; }
.login form { display: flex; flex-direction: column; gap: 10px; }
/* Etiqueta visible arriba de cada campo: con solo placeholder, el
 * nombre del campo desaparecía apenas se empezaba a escribir. */
/* Label 13/800 en --tx (antes gris 12.5: poco contraste) */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; color: var(--tx); }
.campo-ayuda { font-size: 12.5px; font-weight: 600; color: var(--mut); }
/* Monto con el símbolo de la moneda adelante (Mi bank) */
.campo-prefijo { position: relative; display: block; }
.campo-prefijo > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 700; color: var(--mut); pointer-events: none; }
.campo-prefijo input { padding-left: calc(24px + var(--pref, 2) * 10px); }
.campo-prefijo.sin-prefijo input { padding-left: 16px; }
.campo-fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.campo-fila-nombre { white-space: nowrap; }
.campo-fila .campo-valor { margin-left: auto; text-align: right; }
.campo-valor { color: var(--acc); font-weight: 800; }
.campo-escala { display: flex; justify-content: space-between; margin-top: -2px;
  font-size: 12px; font-weight: 700; color: var(--mut); }
.campo-obligatorio { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--mut); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--neg); }
.campo-error { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--neg); }
.campo-error i { font-size: 15px; flex: none; }
/* Mostrar contraseña: botón de 44x44 dentro del campo */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 52px; }
.ver-clave {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--mut); border-radius: var(--r-input); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.ver-clave:hover { color: var(--tx); }
/* Error de formulario en caja, con ícono */
.error-caja {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  background: var(--neg-bg); color: var(--neg); border-radius: var(--r-input);
  padding: 11px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.error-caja::before { content: "\e4e2"; font-family: Phosphor; font-size: 17px; line-height: 1.1; font-weight: 400; flex: none; }
.login .btn.hi.grande, .login .btn.secundario { margin-top: 4px; }
/* "¿Te invitaron?" entre dos líneas; se va junto con su botón */
.login-sep {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--mut);
}
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-sep:has(+ #b-tengo-invitacion.oculto) { display: none; }
#b-tengo-invitacion { margin-top: 0; }
.reg-valida { display: none; }
.login:has(#f-registro:not(.oculto)) .reg-valida { display: inline-flex; margin-bottom: 12px; }
/* "Ya tengo cuenta" arriba, como volver */
#b-ya-tengo-cuenta { order: -1; align-self: flex-start; margin: 0 0 -6px -10px; }
.reg-falta { margin: -2px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--tx2); margin-top: 2px; cursor: pointer; }
.acepto input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--hi); }
.login-legal { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--mut); }
.login-legal a { color: var(--mut); }
.aviso-legal {
  display: flex; gap: 8px; align-items: flex-start; margin: 22px 4px 0;
  font-size: 12px; line-height: 1.5; color: var(--mut);
}
.aviso-legal i { font-size: 14px; flex: none; margin-top: 2px; }
.aviso-legal a { color: var(--mut); }
.ajustes-borrar-cuenta {
  border: 0; background: none; color: var(--neg); font: inherit; font-size: 13.5px; font-weight: 800;
  padding: 10px; min-height: var(--toque); cursor: pointer; align-self: center;
}
.ajustes-confirmar-borrado { border-radius: var(--r-card); padding: 16px; box-shadow: inset 0 0 0 1.5px var(--negbg); }
/* Texto oscuro sobre el coral del tema oscuro (blanco no llegaba a
 * contraste); en claro --neg es un rojo profundo y ahí sí va blanco. */
.requisitos {
  list-style: none; margin: 2px 0 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--card);
}
.requisitos li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mut); }
.requisitos li i { font-size: 16px; }
.requisitos li.ok { color: var(--tx); }
.requisitos li.ok i { color: var(--acc); }

/* Entrando: el botón muestra progreso en vez de quedarse mudo.
 * El codepoint de acá abajo era adivinado y no existe en el font real
 * (static/phosphor/style.css): se veía como un cuadrado en vez de un
 * círculo girando. "\eb44" es el de .ph-circle-notch de verdad. */
/* opacity, no un color fijo: .btn.primario ahora es una pastilla
 * rellena (--tx/--bg) y un --acc encima perdería contraste; sin
 * .primario (fondo --soft) igual se lee bien apagado. */
.btn[data-cargando="true"] { opacity: .6; pointer-events: none; }
.btn[data-cargando="true"]::before {
  content: "\eb44"; font-family: Phosphor; margin-right: 8px;
  display: inline-block; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg) } }

/* Panel izquierdo (--strong): logo chico arriba, mensaje al medio,
 * franja de tags abajo (solo PC) -- sin el degradé ni el ícono grande
 * con anillos de antes, que el handoff no trae. */
.login-marca-cont {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.login-marca-logo { display: flex; align-items: center; gap: 10px; }
/* El mismo ícono que se instala en el celular (static/favicon.svg), no
 * una versión aparte: antes era la mira ámbar sobre un cuadrado ámbar
 * (.marca-icono fija su propio color), y casi no se veía. */
.login-marca-logo .marca-icono-app { width: 40px; height: 40px; flex: none; display: block; }
.login-marca-logo b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.login-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--acc);
}
.login-titulo {
  font-size: 36px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.02; margin: 10px 0 0; text-wrap: balance;
}
.login-frase {
  margin: 14px 0 0; font-size: 15px; line-height: 1.5;
  color: var(--onstrong2); max-width: 430px;
}
.login-tags { display: none; }

/* --- Cancha ---
 * Siempre oscura (--pitch en los dos temas, ver el handoff): por eso
 * las líneas del campo y el texto de cada jugador van en blanco fijo,
 * no en variables que cambiarían con el tema claro. */
.cancha {
  position: relative; border: 1px solid var(--strongline); border-radius: var(--r-card); overflow: hidden;
  /* Franjas de césped apenas marcadas sobre --pitch */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 44px, transparent 44px 88px),
    var(--pitch);
  padding: 34px 6px 46px; display: flex; flex-direction: column-reverse; gap: 16px;
}
/* Media cancha: la mitad (con el semicírculo central) arriba y el
 * área propia abajo. Antes la línea de mitad y el círculo iban al 50%
 * del alto y cruzaban por encima de los mediocampistas. */
.cancha::before {
  content: ""; position: absolute; left: 50%; top: -42px; pointer-events: none;
  width: 84px; height: 84px; transform: translateX(-50%);
  border: 1.5px solid rgba(255,255,255,.14); border-radius: 50%;
}
.cancha::after {
  content: ""; position: absolute; left: 50%; bottom: 0; pointer-events: none;
  width: 46%; height: 34px; transform: translateX(-50%);
  border: 1.5px solid rgba(255,255,255,.14); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.cancha .linea { position: relative; display: flex; justify-content: space-around; gap: 4px; }
.jug {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px;
  background: none; border: 0; cursor: pointer; color: #FFFFFF;
  font: inherit; font-size: 11px; font-weight: 800; padding: 2px 4px;
  transition: transform .1s ease;
}
.jug:active { transform: scale(0.93); }
.jug .recorte { max-width: 66px; }
.jug b {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; border: 0;
  background: #FFFFFF; color: #16181D;
  transition: all .18s ease;
}
.jug[aria-pressed="true"] .recorte { color: var(--acc); }
.jug[aria-pressed="true"] b {
  background: var(--hi); color: var(--onhi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 45%, transparent);
}

/* --- Vacíos y carga --- */
.vacio {
  margin: 20px var(--margen) 0; padding: 24px 18px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.vacio .btn { width: auto; margin: 0; padding: 0 20px; }
/* dentro de .cont el margen lateral ya lo pone el contenedor */
.cont > .vacio, .cont .vacio { margin-left: 0; margin-right: 0; }
.vacio-icono {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: var(--r-input);
  background: var(--soft); color: var(--tx2);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.vacio-error .vacio-icono { background: var(--neg-bg); color: var(--neg); }
.vacio-titulo { font-size: 14.5px; font-weight: 800; }
.vacio-texto { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.vacio-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Cargando: esqueleto con la forma de la tarjeta real (líneas y
 * círculos), no bloques sin forma */
.cargando { padding: 18px var(--margen); display: flex; flex-direction: column; gap: 10px; }
.esqueleto {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.esq-fila { display: flex; align-items: center; gap: 10px; }
.esq-linea, .esq-circulo {
  display: block; height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--line) 33%, var(--line2) 50%, var(--line) 67%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
.esq-circulo { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.esqueleto:nth-child(2) :is(.esq-linea, .esq-circulo) { animation-delay: .15s; }
.esqueleto:nth-child(3) :is(.esq-linea, .esq-circulo) { animation-delay: .3s; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Cruce entre pantallas: del esqueleto al contenido real, y de la
 * lista al detalle de un partido. Antes era un reemplazo de innerHTML
 * a secas -- de golpe. #vista es SIEMPRE el contenedor que se
 * reescribe (ver vista() en app.js): un observer (ver app.js) le pone
 * esta clase cada vez que cambia su contenido, así que cubre todas las
 * pantallas sin tener que tocar cada función que pinta una vista. */
#vista.entrando { animation: crossfade .18s ease both; }
@keyframes crossfade { from { opacity: 0 } to { opacity: 1 } }

/* Acordeón de mercados (ver tema() en vistas.js): abre de golpe porque
 * el contenido no tiene una altura fija de la que partir (no se puede
 * transicionar "height: auto" en CSS puro). Una entrada con fade +
 * slide corto, igual que .tarjeta, disimula el salto sin necesitar
 * medir el alto real. */
.tema-detalle { animation: aparecer .22s ease both; }

@media (prefers-reduced-motion: reduce) {
  .esq-linea, .esq-circulo, .tarjeta, .login, .anillo, .barra > i, .hoja-menu, .fondo-menu, .chip.vivo .punto,
  .tira1x2, #vista.entrando, .tema-detalle, .barra-carga::after,
  .punto.vivo, .barra-progreso-indeterminada::after, .combi-paso b, .vivo-tiempo > i,
  .onboarding-cuerpo, .jugador-card { animation: none; }
  .anillo { opacity: 0; }
  /* duración mínima y no "none": las animaciones con retraso de
   * body.arrancando (mostrar el login a los 4 s) tienen que terminar */
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  }
}

/* ===========================================================
   Tablet (>=600px, celular todavía -- el sidebar recién entra a los
   1100px de abajo): la columna angosta de 430px centrada desperdicia
   media pantalla en un iPad de pie. El contenido pasa a ocupar todo
   el ancho, con el mismo margen lateral de 24px que ya usa PC.
   =========================================================== */
/* Botón de cuenta de la barra de íconos: solo en tablet (ver abajo) */
.rail-cuenta { display: none; }

/* Con el teclado abierto (un campo de texto con foco) la tab bar se
 * esconde: si no, tapa el campo y la acción principal en celulares
 * chicos. Vuelve con 0.3s de demora: al tocar un botón con el teclado
 * abierto (ej. "Calcular"), el campo pierde el foco en ese mismo toque
 * y la barra no debe aparecer bajo el dedo antes de que llegue el clic.
 * En tablet y PC la tab bar ya no se muestra. */
#tabs { transition: background-color .2s ease, visibility 0s linear .3s; }
body:has(:is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit]), textarea):focus) #tabs {
  visibility: hidden; transition: none;
}

/* ≤374 px (Android chico, 360): margen 14, la tira de días queda solo
 * con número y candado (sin el nombre del día; "Hoy" se mantiene) y los
 * % de la tarjeta bajan a 18px. */
@media (max-width: 374px) {
  :root { --margen: 14px; }
  .tira-dias .pildora-dia-nom:not(.es-hoy, .con-candado) { display: none; }
  .tira-dias .pildora-dia { min-height: 46px; justify-content: center; }
  .tarjeta-partido-pct { font-size: 18px; }
}
@media (min-width: 600px) {
  :root { --margen: 28px; }
  main { max-width: none; }
}

/* ===========================================================
   Tablet (600–1099 px, 5g): barra lateral de íconos de 76px en vez del
   header y la tab bar flotante. Los mismos 5 destinos y, abajo, el
   avatar que abre la hoja de cuenta (Ajustes, Panel, tema, salir).
   Partidos en dos columnas; el análisis a pantalla completa con ancho
   máximo 720.
   =========================================================== */
@media (min-width: 600px) and (max-width: 1099px) {
  #principal { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }
  header, #tabs { display: none; }
  #sidebar {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top)) 8px calc(18px + env(safe-area-inset-bottom));
    padding-left: calc(8px + env(safe-area-inset-left));
    border-right: 1px solid var(--soft); box-sizing: border-box;
  }
  /* Solo el ícono de la marca, sin el nombre */
  .sidebar-marca { font-size: 0; gap: 0; padding: 0 0 18px; }
  .sidebar-marca .marca-icono-app { width: 32px; height: 32px; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; width: 100%; }
  .sidebar-nav .sidebar-sep, .sidebar-nav [data-tab="ajustes"], .sidebar-nav [data-tab="panel"],
  .sidebar-registro, .sidebar-usuario, .sidebar-firma { display: none; }
  .pildora-nav {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; min-height: 58px; padding: 9px 2px; border: 0; border-radius: var(--r-input);
    background: none; color: var(--mut); font: inherit; font-size: 10.5px; font-weight: 800;
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
  }
  .pildora-nav i { font-size: 21px; }
  .pildora-nav[aria-current="true"] { background: var(--sel-bg); color: var(--tx); }
  .pildora-nav[aria-current="true"] i { color: var(--acc); }
  .pildora-nav .badge-nav { position: absolute; top: 4px; right: calc(50% - 22px); margin: 0; }
  .rail-cuenta { display: flex; margin-top: 12px; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .rail-cuenta .avatar { width: 38px; height: 38px; font-size: 14px; }

  main { min-width: 0; margin: 0; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* Partidos: fecha y título a la izquierda, buscador a la derecha en la
   * misma fila; la tira de días y los filtros ocupan todo el ancho. */
  main:has(> .partidos-buscador) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); align-content: start;
  }
  main:has(> .partidos-buscador) > * { grid-column: 1 / -1; min-width: 0; }
  main:has(> .partidos-buscador) > .titulo { grid-column: 1; grid-row: 1; }
  main:has(> .partidos-buscador) > .partidos-buscador { grid-column: 2; grid-row: 1; align-self: end; padding-left: 0; }
  main:has(> .partidos-buscador) > .tira-dias-cont { grid-row: 2; }

  /* Tarjetas en dos columnas (Partidos, En vivo, Combinar...). El
   * análisis sigue en una columna: es una lectura. */
  .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  #temas-cont .lista, .analisis-lectura .lista { grid-template-columns: minmax(0, 1fr); }
  main:has(.analisis-lectura) > * { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* ===========================================================
   Escritorio: de una columna angosta a sidebar + contenido.
   =========================================================== */
@media (min-width: 1100px) {
  :root { --margen: 32px; }
  .titulo h2 { font-size: 30px; }
  #p-login { flex-direction: row; }
  .login-lado { flex: 1; display: flex; align-items: center; }
  .login-lado.login-marca { flex: 1.1; align-items: stretch; }
  .login-marca {
    display: flex; background: var(--strong); color: var(--onstrong);
    padding: 44px 48px; position: relative; overflow: hidden;
  }
  .login-titulo { font-size: 58px; }
  /* Mira de la marca, enorme y apenas visible en la esquina: le da
   * textura al panel sin competir con el título. */
  .login-marca::after {
    content: ""; position: absolute; right: -200px; bottom: -200px;
    width: 640px; height: 640px; pointer-events: none; opacity: .08;
    background: var(--hi);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.5'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.2v3.2M12 18.6v3.2M2.2 12h3.2M18.6 12h3.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.5'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.2v3.2M12 18.6v3.2M2.2 12h3.2M18.6 12h3.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .login-firma { font-size: 13px; padding-bottom: 28px; }
  .login-frase { max-width: 430px; }
  .login-tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .login-tags span {
    padding: 9px 14px; border-radius: var(--rad-chip);
    background: none; border: 1px solid var(--strongline); font-size: 13px; font-weight: 800;
  }
  .login-form { justify-content: center; }
  .login { max-width: 444px; }
  .marca-movil { display: none; }

  /* Sidebar reemplaza al header y a la tab bar flotante: los dos
   * quedan ocultos, así que ni ocupan lugar en el grid (display:none
   * no reserva pista) ni hace falta grid-template-areas. */
  #principal {
    display: grid; min-height: 100vh; max-width: 1440px; margin: 0 auto;
    grid-template-columns: 220px minmax(0, 1fr);
  }
  header, #tabs, #fondo-menu, #hoja-menu { display: none; }

  #sidebar {
    display: flex; flex-direction: column; gap: 4px; min-height: 0;
    padding: 22px 14px; overflow-y: auto;
    /* Pegado al alto de la ventana: la firma y el usuario quedan
     * siempre a la vista aunque la lista de partidos scrollee. */
    position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--soft);
  }
  .sidebar-firma {
    display: block; margin-top: 12px; padding: 14px 8px 0; white-space: nowrap;
    border-top: 1px solid var(--soft);
  }
  .sidebar-marca { padding: 0 8px 20px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
  .sidebar-marca .marca-icono-app { width: 28px; height: 28px; }
  .sidebar-marca { gap: 10px; }
  /* flex:1 empuja registro/usuario/firma al pie aunque la tarjeta de
   * registro (que traía el margin-top:auto) esté oculta. */
  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .sidebar-sep { height: 1px; background: var(--line); margin: 8px 10px; }
  /* En vivo en PC (5i): lista de 380 y el partido elegido, cada uno con
   * su scroll */
  main:has(.vivo-pantalla) { padding-bottom: 0; }
  .vivo-pantalla {
    display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px;
    height: 100vh; height: 100dvh; padding: 0 var(--margen);
  }
  .vivo-lista-col, .vivo-detalle-col {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 32px;
    scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .vivo-lista-col .titulo { padding: 24px 2px 4px; }
  .vivo-lista-col .lista { grid-template-columns: minmax(0, 1fr); padding: 14px 2px 0; }
  .vivo-tarjeta.seleccionada { background: var(--sel-bg); border-color: var(--sel-line); box-shadow: 0 0 0 .5px var(--sel-line); }
  .vivo-detalle-col { padding-top: 24px; }
  .vivo-detalle-col .cont, .vivo-detalle-col .lista { padding-left: 0; padding-right: 0; }
  .vivo-detalle-col .vivo-seccion { margin-left: 2px; margin-right: 2px; }
  .vivo-detalle-col .vivo-leyenda { margin-left: 2px; margin-right: 2px; }
  .vivo-det {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start;
  }
  .vivo-bloque-cab, .vivo-bloque-acciones { grid-column: 1 / -1; }
  .vivo-bloque-cab { padding-top: 0 !important; }
  .vivo-bloque-acciones { display: flex; align-items: center; gap: 10px; }
  .vivo-bloque-acciones .vivo-actualizar { flex: 1; }
  .vivo-bloque-acciones .btn-punteado { width: auto; margin: 0; }
  /* cabecera en una fila: escudo + nombre | marcador | nombre + escudo */
  .vivo-detalle-col .vivo-marcador { margin-top: 4px; }
  .vivo-detalle-col .analisis-equipo { display: flex; align-items: center; gap: 12px; text-align: left; }
  .vivo-detalle-col .analisis-equipo:last-child { flex-direction: row-reverse; text-align: right; }
  .vivo-detalle-col .analisis-equipo .escudo { margin: 0; width: 52px; height: 52px; }
  .vivo-detalle-col .vivo-cab-equipo { margin: 0; font-size: 17px; }
  .vivo-detalle-col .vivo-marcador-num { font-size: 48px; }

  .pildora-nav {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 11px 14px; border: 0; border-radius: var(--r-pill); background: none;
    color: var(--mut); font: inherit; font-size: 14px; font-weight: 800;
    min-height: 0; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .pildora-nav i { font-size: 19px; }
  .pildora-nav[aria-current="true"] { background: var(--tx); color: var(--bg); }
  .sidebar-registro {
    margin-top: auto; border: 1px solid var(--line); text-align: left; background: var(--card); color: var(--tx);
    font: inherit; border-radius: var(--r-card); padding: 14px 16px; min-height: 0; cursor: pointer;
  }
  .sidebar-registro-pct {
    font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; color: var(--acc);
  }
  .sidebar-usuario { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; }
  .sidebar-usuario .avatar { width: 32px; height: 32px; font-size: 13px; }
  .btn-tema {
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft);
    display: flex; align-items: center; justify-content: center; flex: none; min-height: 0;
  }

  main { max-width: none; margin: 0; padding: 0 0 48px; }

  .toast { bottom: 28px; }
  .hoja-seguir::before { display: none; }
  /* La hoja "Seguir equipo" en PC: centrada, no pegada abajo */
  .hoja-seguir { top: 50%; bottom: auto; transform: translateY(-50%); animation: none; }

  /* Lista de partidos en dos columnas: la columna única de 720px dejaba
   * media pantalla vacía y obligaba a scrollear por tarjetas de 150px.
   * El padding lateral (24px) ya lo pone el @media (min-width: 600px)
   * de más arriba, compartido con tablet -- acá solo cambian el top y
   * el layout en grilla. */
  /* Tira de días: en un monitor ancho las 7 pastillas se estiraban a
   * 160px cada una; con tope quedan como botones, no como franjas. */
  .tira-dias-cont { max-width: 620px; }
  .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
           gap: 12px; padding-top: 16px; align-items: start; }
  .titulo { padding-top: 22px; padding-bottom: 4px; }
  .tira { padding-top: 14px; padding-bottom: 6px; }
  /* Sin este límite, un estado vacío (nada en Combinar, "no hay
   * partidos ese día") se estira de punta a punta del panel, con el
   * texto centrado perdido en el medio de una tarjeta enorme -- se ve
   * desproporcionado en un monitor ancho. Queda alineado a la
   * izquierda con el resto del contenido, como el título de arriba. */
  .vacio { margin-top: 20px; max-width: 640px; }
  .cargando { padding-top: 18px; padding-bottom: 18px; }

  /* Dos columnas en PC (Combinar: lista de líneas + bloque --strong con
   * el % conjunto; Consultar: pasos 1-2-3 + resultado), en vez de una
   * columna abajo de la otra -- ver el handoff, "split". */
  .dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; }
  .dos-col .bloque-fuerte { margin-top: 0 !important; }
  /* Combinar en PC: lista a la izquierda, resumen fijo a la derecha
   * mientras se scrollea una combinada larga. */
  .combi-layout { display: grid; align-items: start; }
  #consultar-partido { max-width: 520px; }
  .combi-resumen { order: 0; position: sticky; top: 16px; }
  .consulta-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; max-width: 1180px; }
  #consultar-resultado { position: sticky; top: 16px; }
  /* Registro en PC: resumen a la izquierda (fijo), lista a la derecha */
  .reg-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  /* Registro en PC (3f): bank y los 3 números en una fila; picks en dos
   * columnas, agrupados por día */
  .cont.reg-cabecera { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 12px; align-items: stretch; }
  .reg-cabecera > .tile { margin: 0; }
  .reg-kpis { gap: 12px; }
  .reg-kpi { padding: 16px; }
  .reg-kpi-valor { font-size: 28px; }
  .reg-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .reg-lista > .reg-dia { grid-column: 1 / -1; }
  .reg-resumen { position: sticky; top: 16px; }
  .ajustes-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .panel-datos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .panel-seccion-der { margin-top: 0; }
  .planes-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
  .planes-pago { position: sticky; top: 16px; }
  .panel-usuarios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .panel-usuarios > .bloque-fuerte { grid-column: 1 / -1; max-width: 720px; }
  .panel-cambios { max-width: 900px; }
  .ajustes-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1080px; align-items: start; }
  /* En PC las dos columnas arrancan alineadas: el primer rótulo de la
   * derecha no necesita el margen de arriba que separa secciones. */
  .ajustes-seccion-primera { margin-top: 0; }

  /* El análisis es una lectura, no una grilla: se mantiene angosto para
   * que la línea de texto no pase de ~75 caracteres. */
  #temas-cont .lista { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  /* La cancha no necesita más de ~520px: estirada a todo el ancho del
   * análisis los jugadores quedaban lejísimos entre sí. */
  .cancha, #cancha-cont > .fila, #jugador-datos { max-width: 520px; margin-left: auto; margin-right: auto; }

  /* Envuelve el análisis en una tarjeta --card ancha (ver el handoff:
   * "El análisis en PC es una tarjeta --card de radio 28px"); las
   * tiles de adentro pasan a --bg para distinguirse de ese fondo --ver
   * --tile-bg en .tile más arriba. La cabecera --strong achica su
   * radio a 22px porque ahora queda inset, no pegada al borde. */
  .analisis-lectura {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-hoja); padding: 14px 14px 18px;
    max-width: 900px; margin: 14px 24px 14px 0; --tile-bg: var(--bg);
  }
  .analisis-cab { border-radius: var(--r-card); padding: 16px 18px 18px; border: 1px solid var(--strongline); }
  /* Tema abierto en PC: líneas a la izquierda y acciones a la derecha */
  .tema-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
  .tema-acciones { margin-top: 4px; }
  .tema-acciones-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tema-acciones-fila > .pildora[data-cuanto], .tema-acciones-fila > .pildora-pro { grid-column: 1 / -1; background: var(--soft); border-color: var(--line); color: var(--tx); }
  .analisis-cuerpo { padding: 16px 4px 0; }

  /* Partidos: sidebar (220px, fuera de acá) + lista + análisis --
   * ver el handoff, "≥1100px (PC): grid 220px | minmax(320px,400px) |
   * minmax(460px,1fr) en Partidos". Las otras dos columnas se arman
   * DENTRO de #vista, así que no hace falta tocar #principal. */
  /* PC (2f): la pantalla de Partidos ocupa el alto de la ventana y la
   * lista y el análisis scrollean cada uno por su lado. */
  main:has(.partidos-pantalla) { padding-bottom: 0; }
  .partidos-pantalla { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .partidos-cab {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding: 24px var(--margen) 0;
  }
  .partidos-cab .titulo { padding: 0; }
  .partidos-cab .tira-dias-cont { padding: 0; width: 520px; max-width: 520px; flex: none; }
  /* Buscador + filtros + "en vivo" en una sola fila */
  .partidos-barra { display: flex; align-items: center; gap: 10px; padding: 16px var(--margen) 0; }
  .partidos-barra .cont { padding: 0; }
  .partidos-barra .partidos-buscador { width: 340px; flex: none; }
  .partidos-barra .buscador { max-width: none; }
  .partidos-barra .tira { padding: 0; flex: 1; min-width: 0; scroll-padding-inline: 0; }
  .partidos-barra .partidos-vivo { flex: none; }
  .partidos-barra .partidos-vivo:empty { display: none; }
  .partidos-barra .aviso-vivo { margin: 0; width: auto; min-height: var(--h-chip); padding: 0 14px; border-radius: var(--r-pill); gap: 8px; }
  .partidos-barra .aviso-vivo b.crece, .partidos-barra .aviso-vivo .ph-caret-right { display: none; }
  .partidos-split {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(460px, 1fr);
    gap: 20px; padding: 14px var(--margen) 0;
  }
  .partidos-lista-col, .partidos-analisis-col {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 32px;
    scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .partidos-lista-col .lista { grid-template-columns: minmax(0, 1fr); padding: 8px 2px 0; }
  .partidos-lista-col .grupo-partidos-cab { padding-left: 2px; padding-right: 2px; }
  .partidos-lista-col .grupo-partidos.plegado .grupo-partidos-cab { margin-left: 2px; margin-right: 2px; width: calc(100% - 4px); }
  .partidos-lista-col .cont, .partidos-lista-col .vacio { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .partidos-lista-col > .grupos-partidos > .grupo-partidos:first-child .grupo-partidos-cab { padding-top: 4px; }
  .partidos-analisis-col .analisis-lectura { margin: 0; max-width: none; }

  /* Tarjeta elegida: invierte a --strong (ver el handoff, "Partidos") --
   * distinto del resto de selecciones de la app (fondo --tx, texto
   * --bg): acá compite con los propios colores de señal del partido
   * (chip, escudo), que ya traen su fondo -- invertir a --tx los
   * taparía. .apagado se resuelve aparte porque fija su color con una
   * variable propia, no hereda del padre como el resto del texto. */
  /* Tarjeta elegida: fondo apenas verde y borde lima de 1.5px (ver el
   * README del rediseño, "Tarjeta"). El borde de 1px pasa a 1.5 con un
   * box-shadow para no mover el contenido. */
  .tarjeta-partido.seleccionada {
    background: var(--sel-bg); border-color: var(--sel-line);
    box-shadow: 0 0 0 .5px var(--sel-line);
  }

  /* El volver de Análisis (pill "‹ Partidos" y la flecha de la
   * cabecera) no hace falta con la lista al lado. */
  [data-volver] { display: none; }
  .volver-siempre [data-volver] { display: inline-flex; }
}

/* PC 1366×768 (5h): la cabecera de Partidos en una sola fila -- título,
 * días, buscador y "en vivo" --; los filtros abajo. Con 768 de alto,
 * cada fila que se ahorra es lista y análisis a la vista. Los
 * contenedores de la cabecera y la barra se "disuelven"
 * (display: contents) para que sus piezas entren en una misma grilla;
 * el HTML es el mismo de siempre. Filas: cabecera, hasta dos avisos,
 * filtros y la lista+análisis con el resto del alto. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .partidos-pantalla {
    display: grid; column-gap: 16px; align-items: end; padding: 0 var(--margen);
    grid-template-columns: auto minmax(300px, 430px) minmax(180px, 1fr) auto;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }
  .partidos-pantalla > .partidos-cab, .partidos-pantalla > .partidos-barra { display: contents; }
  .partidos-pantalla > :not(.partidos-cab, .partidos-barra) { grid-column: 1 / -1; margin-left: calc(-1 * var(--margen)); margin-right: calc(-1 * var(--margen)); }
  .partidos-cab .titulo { grid-row: 1; grid-column: 1; padding-top: 22px; }
  .partidos-cab .tira-dias-cont { grid-row: 1; grid-column: 2; width: auto; max-width: none; }
  .partidos-barra .partidos-buscador { grid-row: 1; grid-column: 3; width: auto; }
  .partidos-barra .partidos-vivo { grid-row: 1; grid-column: 4; }
  .partidos-barra .filtros-partidos { grid-row: 4; grid-column: 1 / -1; padding-top: 12px !important; }
  .partidos-pantalla > .partidos-split { grid-row: 5; align-self: stretch; }
}

/* Pantallas anchas: el buscador y los filtros no necesitan más de 520px */
/* Barra lateral de 240 en pantallas grandes (220 en 1366) */
@media (min-width: 1400px) {
  #principal { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .cont > input { max-width: 520px; }
  .buscador { max-width: 520px; }
}

/* Repintado de la MISMA pantalla (ver pintar() en app.js): sin
 * animaciones de entrada, para que tocar un filtro, una estrella o una
 * sección no se vea como si la app se recargara. */
#vista.quieta .tarjeta,
#vista.quieta .barra > i,
#vista.quieta .tira1x2,
#vista.quieta .tema-detalle,
#vista.quieta .combi-paso b,
#vista.quieta .vivo-tiempo > i { animation: none; }

/* Partido en juego: el marcador manda, el 1X2 de antes queda chico y
 * apagado (ya no es la probabilidad de nada) */
.cab-en-juego { text-align: center; margin-top: 14px; }
.cab-en-juego .punto { display: inline-block; vertical-align: 1px; margin-right: 4px; }
.analisis-x12.previo { margin-top: 6px; opacity: .6; }
.analisis-x12.previo > div { padding: 6px 4px; border-radius: var(--r-input); }
.analisis-x12.previo > div.top { background: var(--strong2); color: var(--onstrong); outline: 1px solid var(--hi); }
.analisis-x12.previo .pct { font-size: 17px; }

/* Recarga con sesión: en vez de mostrar el login unos milisegundos, el
 * logo al centro hasta que app.js confirma la sesión. Si el JS no
 * llegara a cargar, el login aparece solo a los 4 s (no queda en blanco). */
body.arrancando #p-login { visibility: hidden; animation: mostrar-login 0s 4s forwards; }
/* la app ya entró pero todavía carga su pantalla: se sigue viendo el logo */
body.arrancando #principal { visibility: hidden; animation: mostrar-login 0s 10s forwards; }
body.arrancando::after {
  content: ""; position: fixed; inset: 0; margin: auto; width: 64px; height: 64px;
  background: url("/static/favicon.svg") center / contain no-repeat;
  animation: latido 1.2s ease-in-out infinite, ocultar-logo 0s 10s forwards;
}
@keyframes mostrar-login { to { visibility: visible; } }
@keyframes ocultar-logo { to { visibility: hidden; } }
@keyframes latido { 50% { opacity: .55; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { body.arrancando::after { animation: ocultar-logo 0s 10s forwards; } }

/* Registro: el pick abre su partido */
.reg-abrir { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.reg-abrir:focus-visible { outline: 2px solid var(--hi); outline-offset: 4px; border-radius: 8px; }
.reg-ver { color: var(--acc); font-weight: 800; white-space: nowrap; }
.reg-ver .ph { vertical-align: -1px; }

/* --- Bank (ver bank.js) --- */
.bank-ajustes { padding: 16px; border-radius: var(--r-card); }
.bank-ajustes input[type=range] { width: 100%; accent-color: var(--hi); margin-top: 8px; }
.bank-ajustes .campo { margin-bottom: 12px; }
.bank-pausa { gap: 10px; margin: 2px 2px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bank-pausa input { width: 22px; height: 22px; flex: none; accent-color: var(--hi); margin: 0; }
.bank-riesgo {
  display: flex; gap: 10px; align-items: flex-start; background: var(--warnbg); color: var(--warn);
  border-radius: var(--r-input); padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; margin: 0 0 12px;
}
.bank-riesgo > i { font-size: 18px; flex: none; margin-top: 1px; }
.bank-riesgo input { margin-top: 3px; flex: none; accent-color: var(--warn); }
.bank-tarjeta { padding: 14px 16px; border-radius: var(--r-card); }
.bank-vacio { border-radius: var(--r-card); }
.bank-spark { display: block; width: 100%; height: 44px; margin-top: 10px; }
.cuanto-panel { margin: 12px 4px 0; padding: 12px; border-radius: var(--r-input); background: var(--soft); }
.cuanto-res { display: flex; gap: 10px; margin-top: 10px; padding: 12px; border-radius: var(--r-input); }
.cuanto-res.si { display: block; background: var(--card); }
.cuanto-res.no { background: var(--warnbg); color: var(--warn); }
.cuanto-res.no > i { font-size: 20px; flex: none; }

/* --- Ya pagué (Planes) y pagos por revisar (Panel) --- */
.ya-pague { margin-top: 14px; padding: 12px; border-radius: var(--r-input); background: var(--strong2); }
.ya-pague select, .ya-pague input[type=text] { background: var(--card); }
.ya-pague input[type=file] { color: var(--onstrong2); font-size: 13px; }
/* Zona de subida de la captura */
.ya-pague-subir {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px; cursor: pointer;
  border: 1.5px dashed var(--strongline); border-radius: var(--r-input); color: var(--onstrong);
}
.ya-pague-subir:hover, .ya-pague-subir:focus-within { border-color: var(--hi); }
.ya-pague-subir > i { font-size: 24px; color: var(--hi); flex: none; }
.ya-pague-subir b { display: block; font-size: 14px; word-break: break-all; }
.ya-pague-subir .chico { color: var(--onstrong2); }
.ya-pague-estado { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border-radius: var(--r-input);
  background: var(--strong2); color: var(--onstrong); line-height: 1.45; }
.ya-pague-estado > i { font-size: 20px; flex: none; color: var(--acc); }
.ya-pague-estado.mal > i { color: var(--warn); }
.comprobante { padding: 14px 16px; border-radius: var(--r-card); margin-bottom: 8px; }
.comprobante-img { display: block; width: 100%; max-height: 420px; object-fit: contain; margin-top: 10px;
  border-radius: var(--r-input); background: var(--soft); }

/* En vivo: probabilidades para el final del partido, con el ritmo que lleva */
.vivo-queda { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-input); background: var(--soft); }
.vivo-queda-lineas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13.5px; }
.vivo-queda-lineas b { color: var(--acc); }

/* --- Presión del partido (En vivo, ver presion.py) --- */
.presion { padding: 14px 16px; border-radius: var(--r-card); }
.presion-vacia { padding: 12px 16px; border-radius: var(--r-card); display: flex; gap: 8px; align-items: center; }
.presion-equipos { display: flex; justify-content: space-between; margin-top: 6px; font-weight: 800; }
.presion-equipos .p-l-txt { color: var(--acc); }
.presion-equipos .p-v-txt { color: var(--visita); }
.presion-svg { display: block; width: 100%; height: 120px; margin-top: 6px; }
.presion-svg .p-l { fill: var(--hi); }
.presion-svg .p-v { fill: var(--visita); }
.presion-svg .parcial { opacity: .45; }
.presion-svg .p-eje { stroke: var(--line); stroke-width: .4; vector-effect: non-scaling-stroke; }
.presion-svg .p-medio { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.presion-svg .p-gol { fill: var(--tx); }
.presion-svg .p-amarilla { fill: #F5C542; }
.presion-svg .p-roja { fill: var(--neg); }
.presion-svg .p-tick { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.presion-svg .p-ahora { stroke: var(--live); stroke-width: 1.5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.presion-svg .p-l.parcial { fill: url(#rayado-l); opacity: .9; }
.presion-svg .p-v.parcial { fill: url(#rayado-v); opacity: .9; }
.presion-resumen { margin-top: 8px; font-size: 13.5px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.presion-resumen .ph { color: var(--acc); }
.presion-regla { display: flex; justify-content: space-between; }

/* Estadísticas lado a lado (En vivo) */
.comparacion { padding: 12px 16px 14px; border-radius: var(--r-card); }
.comp-fila { padding: 8px 0; }
.comp-fila + .comp-fila { border-top: 1px solid var(--line); }
.comp-nums { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.comp-nums span { flex: 1; text-align: center; color: var(--mut); font-weight: 700; font-size: 13px; }
.comp-nums b { min-width: 44px; font-weight: 800; }
.comp-nums b:last-child { text-align: right; }
.comp-nums b.gana { color: var(--acc); }
.comp-nums b.gana.v { color: var(--visita); }
.comp-barras { display: flex; gap: 4px; margin-top: 6px; }
.comp-barras i { height: 6px; border-radius: 3px; background: var(--soft); }
.comp-barras i.l { background: color-mix(in srgb, var(--hi) 35%, var(--soft)); }
.comp-barras i.v { background: color-mix(in srgb, var(--visita) 35%, var(--soft)); }
.comp-barras i.l.fuerte { background: var(--hi); }
.comp-barras i.v.fuerte { background: var(--visita); }

/* Registro: "Tu rendimiento" (ver tarjetaRendimiento en vistas2.js) */
.rend { border-radius: var(--r-card); padding: 16px; }
.rend-total { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.rend-total.sube { color: var(--acc); }
.rend-total.baja { color: var(--mal, #e5484d); }
.rend-curva { margin-top: 10px; }
.rend-curva svg { width: 100%; height: 96px; display: block; overflow: visible; }
.rend-linea { fill: none; stroke: var(--hi); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rend-area { fill: var(--hi); opacity: .12; }
.rend-ref { stroke: currentColor; opacity: .25; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.rend-eje { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.rend-tip { font-weight: 800; color: var(--txt, inherit); }
.rend-rachas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.rend-rachas i { margin-right: 4px; color: var(--acc); }
.rend-insight { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; line-height: 1.45; }
.rend-insight i { font-size: 16px; margin-top: 1px; }
.rend-insight.bien i { color: var(--acc); }
.rend-insight.mal i { color: var(--warn, #f5a524); }
.rend-grupo { margin-top: 14px; }
.rend-fila { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 800; }
.rend-fila .num { min-width: 42px; text-align: right; }

/* Invita y gana Pro (Ajustes) y prueba gratis (Planes) */
.ref-bloque { border-radius: var(--r-card); padding: 16px; }
.ref-icono, .planes-prueba .tile-icono, .planes-ref .tile-icono { color: var(--acc); }
.ref-codigo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px;
  padding: 10px 14px; border-radius: var(--r-input); border: 1.5px dashed var(--borde, rgba(127,127,127,.35)); }
.ref-codigo b { font-size: 22px; font-weight: 800; letter-spacing: .12em; }
.planes-prueba { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-card); padding: 16px;
  border: 1.5px solid var(--hi); }
.planes-ref { border-radius: var(--r-card); margin-top: 10px; }

/* número de partidos que deja cada filtro rápido */
.pildora-n { margin-left: 6px; font-size: 11.5px; font-weight: 800; opacity: .6; }
.pildora:disabled { opacity: .45; }

/* Consejos en contexto (ver consejos.js) */
.consejo { position: fixed; left: 50%; transform: translateX(-50%); top: 30%; z-index: 90;
  width: min(420px, calc(100vw - 32px)); padding: 16px; border-radius: var(--r-card);
  background: var(--strong, #111); color: var(--onstrong, #fff);
  box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: consejo-entra .25s ease-out; }
.consejo-icono { font-size: 22px; color: var(--acc); margin-top: 1px; }
.consejo-titulo { font-weight: 800; font-size: 15.5px; }
.consejo-texto { font-size: 13.5px; line-height: 1.5; margin-top: 3px; color: var(--onstrong2, rgba(255,255,255,.75)); }
.consejo .btn { margin: 0; width: auto; padding: 10px 16px; min-height: 0; }
.consejo .consejo-saltar { color: var(--onstrong2, rgba(255,255,255,.7)); padding-left: 4px; }
.consejo-foco { outline: 3px solid var(--hi) !important; outline-offset: 4px; border-radius: var(--r-input);
  animation: consejo-pulso 1.6s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes consejo-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes consejo-pulso { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .consejo, .consejo-foco { animation: none; } }

/* Plan gratis: análisis del día agotados y contador (ver pantallaLimite en app.js) */
.limite-pro { border-radius: var(--r-card); padding: 24px 20px; text-align: center; }
.limite-pro .limite-icono { width: 56px; height: 56px; border-radius: var(--r-card); font-size: 26px; }
.limite-icono { margin: 0 auto; color: var(--acc); }
.limite-titulo { font-size: 18px; font-weight: 800; margin-top: 10px; }
.limite-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.limite-botones .btn { margin: 0; }
.limite-vistos { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde, rgba(127,127,127,.25)); }
.limite-vistos .pildora { margin: 3px; }
.cupo-chip { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--card); color: inherit;
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-align: left; }
.cupo-chip i { color: var(--tx); font-size: 16px; }
.cupo-chip span { margin-left: auto; color: var(--acc); font-weight: 800; }
.cupo-chip.agotado i { color: var(--warn, #f5a524); }

/* "Tu Pro vence…" (5n): franja ámbar */
.banner-vence { display: flex; align-items: center; gap: 10px; width: 100%; border-radius: var(--r-card); padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-bg); color: var(--tx);
  font: inherit; font-size: 13.5px; line-height: 1.4; text-align: left; cursor: pointer; }
.banner-vence b { color: var(--warn); }
.tile.banner-vence { background: var(--warn-bg); }
.banner-vence > i { font-size: 20px; color: var(--warn, #f5a524); }
.planes-prueba-social { display: flex; align-items: center; gap: 12px; border-radius: var(--r-card); padding: 12px 16px;
  color: inherit; text-decoration: none; font-size: 13px; line-height: 1.45; }
.planes-prueba-social b { font-size: 28px; font-weight: 800; color: var(--acc); letter-spacing: -.02em; }

/* Plan gratis: confirmar antes de gastar un análisis */
.confirmar-analisis { border-radius: var(--r-card); padding: 20px; }
/* Cupo gratis: un segmento por análisis del día */
.cupo-barra { display: flex; gap: 6px; margin-top: 16px; }
.cupo-barra i { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); }
.cupo-barra i.on { background: var(--hi); }
.cupo-barra i.prox { background: color-mix(in srgb, var(--hi) 45%, var(--line)); }
.confirmar-equipos { font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; }
.confirmar-fila { display: flex; gap: 8px; margin-top: 14px; }
.confirmar-pct { flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--r-input); background: var(--soft, rgba(127,127,127,.12)); }
.confirmar-pct b { display: block; font-size: 20px; font-weight: 800; }
.confirmar-pct span { font-size: 12px; font-weight: 700; opacity: .7; }
.confirmar-analisis .btn { width: 100%; }

/* ¿Cuánto meter?: sin valor, pero "apostar igual" con poco */
.cuanto-res.casi { background: var(--soft, rgba(127,127,127,.12)); color: inherit; }
.cuanto-igual { margin-top: 12px; padding-top: 10px; border-top: 1px solid currentColor; border-top-color: rgba(127,127,127,.3); }
.cuanto-igual .btn { width: 100%; }

/* Cuotas de referencia (ver cuotas.py) */
.cuanto-ref { margin-top: 10px; }
.cuanto-ref-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cuanto-ref-casa { display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: var(--r-input);
  border: 1.5px solid var(--borde, rgba(127,127,127,.3)); background: transparent; color: inherit;
  font: inherit; font-size: 13px; cursor: pointer; }
.cuanto-ref-casa b { font-size: 15px; font-weight: 800; }
.cuanto-ref-casa em { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--acc); }
.cuanto-ref-casa.elegida { border-color: var(--hi); background: var(--hi); color: var(--onhi, #0B1400); }
.cuanto-ref-casa.elegida em { color: inherit; opacity: .75; }
.cuanto-ref-casa i { font-size: 16px; align-self: center; }
.cuanto-casas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cuanto-casas .pildora { text-decoration: none; }

/* Línea de tiempo de goles y tarjetas (partidos sin estadísticas) */
.linea-eventos { margin-top: 14px; color: var(--tx, inherit); }
.linea-eventos-pista { position: relative; height: 64px; margin-top: 6px; }
.linea-eventos-pista::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--borde, rgba(127,127,127,.3)); }
.linea-eventos-pista .ev { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; font-size: 15px; line-height: 1; }
.linea-eventos-pista .ev small { font-size: 10px; font-weight: 800; opacity: .7; margin-top: 2px; }
.linea-eventos-pista .ev.l { top: 0; }
.linea-eventos-pista .ev.v { bottom: 0; flex-direction: column-reverse; }
.linea-eventos-pista .ev.v small { margin: 0 0 2px; }
.linea-eventos-pista .ahora { position: absolute; top: 8px; bottom: 8px; width: 2px; background: var(--neg, #e5484d); }

/* --- Registro (rediseño): 3 números arriba, pestañas en celular y
 * tarjetas de pick con franja de color por estado --- */
.reg-cabecera { display: flex; flex-direction: column; gap: 10px; }
.reg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reg-kpi { border-radius: var(--r-card); padding: 12px 12px 10px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.reg-kpi-valor { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.reg-kpi.sube .reg-kpi-valor { color: var(--acc); }
.reg-kpi.baja .reg-kpi-valor { color: var(--neg, #e5484d); }
.reg-kpi-etiqueta { font-size: 12.5px; font-weight: 800; margin-top: 4px; }
.reg-kpi-sub { font-size: 11.5px; color: var(--mut); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-tabs { display: flex; width: 100%; }
.reg-tabs > button { flex: 1; justify-content: center; }
.reg-tabs .pildora-n { margin-left: 6px; }
.reg-panel { display: flex; flex-direction: column; gap: 10px; }
.reg-acciones { gap: 8px; }
.reg-acciones .btn { margin: 0; }
.reg-acciones .btn.primario { flex: 1; }
.reg-acciones .reg-csv { width: auto; padding: 13px 16px; }
.reg-calib-tile { border-radius: var(--r-card); padding: 16px; }
.reg-calib-tile .combi-paso { grid-template-columns: 52px minmax(0, 1fr) 38px; margin-top: 10px; }
.reg-dia { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; font-size: 13px; font-weight: 800;
  color: var(--mut); text-transform: capitalize; }
.reg-dia span { font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--soft); }
.reg-dia:first-child { margin-top: 0; }
.reg-lista .reg-pick { display: block; position: relative; overflow: hidden; padding: 12px 14px 10px 18px; }
.reg-pick::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--strong2); }
.reg-pick.bien::before { background: var(--acc); }
.reg-pick.mal::before { background: var(--neg); }
.reg-pick.ojo::before { background: var(--warn); }
.reg-pick-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--mut); }
.reg-pick-cab .recorte { flex: 1; min-width: 0; }
.reg-pick-estado { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; flex: none; }
.reg-pick-estado.bien { color: var(--acc); }
.reg-pick-estado.mal { color: var(--neg); }
.reg-pick-estado.ojo { color: var(--warn); }
.reg-pick-linea { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.reg-pick-linea span { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
.reg-pick-linea b { font-size: 18px; font-weight: 800; }
.reg-pick-partido { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700;
  color: var(--tx); margin-top: 3px; opacity: .85; min-width: 0; }
.reg-pick-partido .recorte { min-width: 0; }
.reg-pick-partido em { font-style: normal; color: var(--mut); font-weight: 600; }
.reg-pick-partido i { color: var(--acc); flex: none; }
.reg-pick-pie { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* Combinada de varios partidos: un botón por partido para abrirlo */
.reg-combi-partidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reg-combi-partidos .pildora { max-width: 100%; min-width: 0; }
.reg-combi-partidos .pildora i { color: var(--acc); flex: none; }
.reg-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.reg-chip { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--r-pill); background: var(--soft); }
.reg-chip.sube { color: var(--acc); }
.reg-chip.baja { color: var(--neg); }
.reg-accion { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--tx);
  display: grid; place-items: center; font-size: 16px; cursor: pointer; flex: none; }

/* --- Combinar (rediseño): un boleto con las líneas arriba y el total abajo --- */
.combi-boleto { max-width: 720px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.combi-boleto-lineas { padding: 14px 14px 10px; }
.combi-boleto-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin: 0 2px 8px; }
.combi-boleto-cab i { color: var(--acc); margin-right: 6px; vertical-align: -2px; font-size: 17px; }
.combi-boleto-partido { border-radius: var(--r-input); background: var(--soft); padding: 8px 6px 4px; margin-top: 8px; }
.combi-boleto-partido .combi-partido { padding: 2px 8px 4px; }
.combi-boleto-linea { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 10px;
  border-top: 1px solid var(--borde, rgba(127,127,127,.18)); font-size: 15px; font-weight: 800; }
.combi-boleto-linea:first-of-type { border-top: 0; }
.combi-boleto-prob { font-size: 16px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); background: var(--card); }
.combi-quitar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--mut);
  display: grid; place-items: center; cursor: pointer; font-size: 16px; flex: none; margin: -4px -2px -4px 0; }
.combi-quitar:hover { background: var(--line); color: var(--tx); }
/* "¿Cuánto meter?" de la combinada: secundario a lo ancho */
.combi-cuanto { margin-top: 10px; }
.combi-cuanto > .pildora { width: 100%; min-height: var(--h-btn); font-size: 14.5px; color: var(--tx); border-color: var(--line2); }
.combi-sumar { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px;
  padding: 10px; border-radius: var(--r-input); border: 1.5px dashed var(--borde, rgba(127,127,127,.35)); background: transparent;
  color: var(--mut); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
/* el "corte" del boleto: línea punteada con dos muescas */
.combi-corte { position: relative; height: 22px; }
.combi-corte::before { content: ''; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 2px dashed var(--borde, rgba(127,127,127,.35)); }
.combi-corte::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 0 50%, var(--bg) 11px, transparent 12px),
  radial-gradient(circle at 100% 50%, var(--bg) 11px, transparent 12px); }
.combi-boleto-total { padding: 6px 18px 18px; }
/* El total va sobre --card (no sobre un bloque fuerte): el aviso usa
 * los colores de la tarjeta */
.combi-boleto-total .combi-aviso { background: var(--soft); color: var(--tx); box-shadow: none; }
.combi-boleto-total .combi-aviso i { color: var(--acc); }
.combi-boleto-total .combi-aviso.imposible { background: var(--neg-bg); }
.combi-boleto-total .combi-aviso.imposible i { color: var(--neg); }
.combi-boleto-total .combi-pct { color: var(--tx); }
.combi-cuota-justa { text-align: right; font-size: 12px; font-weight: 700; color: var(--mut); padding-bottom: 6px; }
.combi-cuota-justa .num { font-size: 26px; font-weight: 800; color: var(--tx); letter-spacing: -.02em; }
.combi-boleto-total .combi-paso i { background: var(--soft); }
.combi-boleto-total .combi-paso .num { color: var(--tx); }
.combi-mejor { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-input);
  background: var(--soft); font-size: 13.5px; }
.combi-mejor i { font-size: 18px; color: var(--mut); }
.combi-mejor.valor { background: var(--accbg); }
.combi-mejor.valor i { color: var(--acc); }
/* Combinar en PC (5j): las líneas a la izquierda y el total como
 * tarjeta fija de 440 a la derecha */
@media (min-width: 1100px) {
  .combi-boleto {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start;
    max-width: 1180px; background: none; border: 0; overflow: visible;
  }
  .combi-boleto-lineas { padding: 0; }
  .combi-boleto-partido { background: var(--card); border: 1px solid var(--line); }
  .combi-corte { display: none; }
  .combi-boleto-total {
    position: sticky; top: 16px; padding: 20px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  }
}
.combi-boleto-cab span.crece { display: flex; align-items: center; }

.cuanto-aprox { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; line-height: 1.45; color: var(--mut); }
.cuanto-aprox i { color: var(--warn, #f5a524); margin-top: 2px; }