/* Alto de la barra inferior (sin el área segura del iPhone) */
:root { --alto-nav: 53px; }
/* Estructura de la app y piezas de pantalla (sobre ffa.css). */
html, body { min-height: 100%; max-width: 100%; }
img, svg { max-width: 100%; }
.app { min-height: 100dvh; width: 100%; max-width: 480px; margin: 0 auto; overflow-x: clip; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.app > .pantalla { flex: 1; }
/* Barra inferior fija: no se mueve con el scroll ni con el rebote de iOS */
html, body { overscroll-behavior-y: none; }
.app > .nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 10; }
.app:has(> .nav) { padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom, 0px)); }
.nav__item { text-decoration: none; }
.pantalla--acceso { justify-content: center; max-width: 420px; width: 100%; margin: 0 auto; padding-block: var(--e8); }

a { color: inherit; }
.enlace { color: var(--t2); font: 600 12px/16px var(--fuente); text-decoration: none; }
.enlace-card { text-decoration: none; color: inherit; }
a.btn { text-decoration: none; }

/* Acceso */
.datos-liga { gap: var(--e4); color: var(--t2); font-size: 12px; }
.datos-liga .num { color: var(--t1); font-size: 14px; margin-right: 2px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.segmento .chip { justify-content: center; height: 40px; font-size: 13px; }
.campo--clave input { padding-right: 52px; }
.campo__accion { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--t3); cursor: pointer; }
.campo__accion svg { position: static; }

/* Listas */
.puesto { width: 20px; font-size: 14px; text-align: center; flex: none; }

/* Admin */
.barra { height: 6px; border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--amarillo); border-radius: var(--r-pill); transition: width var(--t-puntos) var(--curva); }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.datos > div { display: flex; flex-direction: column; gap: var(--e1); }
.corrida { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); }
.corrida + .corrida { border-top: 1px solid var(--borde); }
.corrida > .ico { margin-top: 2px; }

/* Aviso breve */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--alto-nav) + 12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(92vw, 420px); padding: var(--e3) var(--e4); z-index: 60;
  background: var(--s2); border: 1px solid var(--borde); border-radius: var(--r);
  font-size: 13px; line-height: 18px; color: var(--t1);
  animation: aparecer var(--t-modal) var(--curva);
}
.toast--error { border-color: var(--peligro); }

/* Logo (Manual §7: escudos en hero hasta 56 px) */
.logo-marca { display: block; align-self: flex-start; flex: none; width: auto; height: 56px; max-width: none; object-fit: contain; }

/* Admin · Jugadores */
.jugador--boton { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.jugador--boton:focus-visible { outline: 2px solid var(--t1); outline-offset: -2px; }
.jugador--inactivo .foto, .jugador--inactivo .jugador__nombre, .jugador--inactivo .jugador__meta { opacity: .55; }
.segmento--4 { grid-template-columns: repeat(4, 1fr); }
.segmento--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.lista-modal { max-height: 55vh; overflow-y: auto; }

/* Ficha: de dónde salen los puntos */
.modal--alto { max-height: 88vh; overflow-y: auto; }
.tabla--desglose th:first-child, .tabla--desglose td:first-child { width: auto; }
.tabla--desglose td.num, .tabla--desglose th:not(:first-child) { text-align: right; white-space: nowrap; }
.tabla--desglose td.num { font-size: 14px; font-weight: 600; }
.tabla--desglose td { padding-top: var(--e2); padding-bottom: var(--e2); }   /* una sola línea por concepto: filas más bajas */

/* Ligas */
.segmento--7 { grid-template-columns: repeat(7, 1fr); }
.segmento--7 .chip { padding: 0; }
.segmento--3i { grid-template-columns: repeat(3, 1fr); }

/* Draft: cabecera fija y lo que falta por posición */
.draft-cab--fija { position: sticky; top: calc(var(--alto-cab, 0px) + var(--e2)); z-index: 5; }
.cupos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.cupo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); min-width: 0;
  padding: var(--e2); background: var(--s2); border: 1px solid var(--borde); border-radius: var(--r);
  color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.cupo[aria-pressed="true"] { border-color: var(--amarillo); }
.cupo:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.cupo__num { font-size: 22px; }
.cupo__barra { display: flex; gap: 2px; width: 100%; }
.cupo__barra i { flex: 1; height: 4px; border-radius: 2px; background: var(--borde); }
.cupo__barra i.lleno { background: currentColor; }
.cupo--completo .cupo__num, .cupo--completo .pos { opacity: .5; }
.foto--libre { border-style: dashed; background: transparent; color: var(--t3); font-size: 10px; }
.jugador--mio { box-shadow: inset 2px 0 0 var(--amarillo); }
.reglas-plantel .num--l { font-size: 22px; }
.jugador--libre { min-height: 52px; padding-block: var(--e2); }
/* Mercado · lista de jugadores: fila más baja (mismo tamaño de foto, nombre, posición y escudo; solo menos aire arriba y abajo) */
.jugador--compacto { padding-block: var(--e2); }
.jugador--libre .foto { width: 32px; height: 32px; }

/* Mi equipo */
.ficha__estado--bloqueado { background: var(--s2); border: 1px solid var(--borde); }
.ficha__estado--bloqueado svg { stroke: var(--t2); }
.ficha__rival { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--t2); }

/* Cancha por franjas: una por línea, teñida con el color de su posición */
.cancha--franjas { display: flex; flex-direction: column; aspect-ratio: auto; }
.cancha__franja { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--e5) var(--e2) var(--e3); z-index: 1; }
.cancha__franja + .cancha__franja { border-top: 1px dashed var(--cancha-linea); }
.cancha__franja--DEL { background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--ok); }
.cancha__franja--MED { background: color-mix(in srgb, var(--amarillo) 8%, transparent); color: var(--amarillo); }
.cancha__franja--DEF { background: color-mix(in srgb, var(--peligro) 9%, transparent); color: var(--peligro); }
.cancha__franja--ARQ { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); }
.cancha__etiqueta { position: absolute; right: var(--e4); top: var(--e2); font: 700 9px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cancha__fila { display: flex; justify-content: space-evenly; align-items: flex-start; }
.cancha--franjas .ficha { width: 76px; position: relative; }
.cancha--franjas .ficha .foto { width: 52px; height: 52px; border-color: currentColor; }
.ficha__escudo { position: absolute; left: 6px; top: -4px; width: 22px; height: 22px; font-size: 7px; background: none; border: 0; border-radius: 0; }
.cancha--franjas .ficha__estado { right: 8px; top: -2px; width: 18px; height: 18px; }
.cancha--franjas .ficha__nombre { max-width: 76px; }
.ficha__nombre-pila { font-weight: 500; color: var(--t2); margin-bottom: -2px; }
.motivo .ico { margin-top: 1px; }
.tabla--liga tbody tr { cursor: pointer; }
.tabla--liga td:nth-child(2) { max-width: 0; width: 100%; }
.tabla--liga td.num, .tabla--liga th:nth-child(n+3) { text-align: right; white-space: nowrap; }

/* Tipo de liga (mismo formato que el badge de posición; un color por tipo) */
.tipo-liga { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--e2); border-radius: var(--r-chico);
  border: 1px solid currentColor; font: 700 11px/1 var(--fuente); white-space: nowrap; }
.tipo-liga--amigos { color: var(--info); }
.tipo-liga--oficial { color: var(--amarillo); }
.tipo-liga--general { color: var(--ok); }

/* Draft · Mi plantel en dos columnas */
.grilla-plantel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.mini-jugador { display: flex; align-items: center; gap: var(--e2); min-width: 0; min-height: 64px; padding: var(--e2);
  background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); }
.mini-jugador .foto { width: 40px; height: 40px; }
.mini-jugador__info { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.mini-jugador__nombre { font: 600 13px/16px var(--fuente); color: var(--t1); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-jugador .escudo { width: 20px; height: 20px; font-size: 7px; }
.mini-jugador--libre { background: none; border-style: dashed; }
.mini-jugador--libre .foto { width: 32px; height: 32px; font-size: 10px; }

/* Mercado de pases: anuncio destacado (borde amarillo, sin sombras ni gradientes) */
.mercado-card { display: flex; flex-direction: column; gap: var(--e4); border-color: var(--amarillo); }
.mercado-card__ico { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--amarillo); color: var(--bg);
  display: grid; place-items: center; }
.mercado-card__ico .ico { width: 22px; height: 22px; }
.btn-icono { flex: none; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--borde); background: var(--s2);
  color: var(--t2); display: grid; place-items: center; cursor: pointer; }
.btn-icono:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.horarios { background: var(--s2); border-radius: var(--r); padding: 0 var(--e3); }
.horarios__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); min-height: 44px; text-align: right; }
.horarios__fila > :first-child { flex: none; text-align: left; }
.horarios__fila + .horarios__fila { border-top: 1px solid var(--borde); }
.horarios__fila--mio .cuerpo { font-weight: 700; }
.pips { display: inline-flex; gap: var(--e1); }
.pip { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--amarillo); }
.pip--usado { background: var(--amarillo); }
.reglas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e4); }
.reglas__item { display: flex; gap: var(--e3); align-items: flex-start; }
.reglas__num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--amarillo); color: var(--bg);
  display: grid; place-items: center; font: 700 13px/1 var(--fuente); }

/* Pase como cartel de cambio: entra (verde) ⇄ sale (rojo) */
.cambio { background: var(--s2); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e3); }
.cambio--mio { border-color: var(--amarillo); }
.cambio__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); min-width: 0; }
.cambio__cuerpo { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: start; gap: var(--e1); }
.cambio__lado { display: flex; flex-direction: column; align-items: center; gap: var(--e1); min-width: 0; text-align: center; }
.cambio__foto { position: relative; margin-bottom: var(--e1); }
.cambio__foto .foto { width: 64px; height: 64px; border-width: 2px; }
.cambio__lado--entra .foto { border-color: var(--ok); }
.cambio__lado--sale .foto { border-color: var(--peligro); }
.cambio__lado--sale .foto img { filter: grayscale(1); opacity: .7; }
.cambio__flecha { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--s2); color: var(--bg); }
.cambio__lado--entra .cambio__flecha { background: var(--ok); }
.cambio__lado--sale .cambio__flecha { background: var(--peligro); }
.cambio__escudo { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; font-size: 7px; background: none; border: 0; border-radius: 0; }
.cambio__tipo { font: 700 10px/12px var(--fuente); letter-spacing: .06em; text-transform: uppercase; }
.cambio__lado--entra .cambio__tipo { color: var(--ok); }
.cambio__lado--sale .cambio__tipo { color: var(--peligro); }
.cambio__nombre { font: 600 14px/18px var(--fuente); color: var(--t1); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cambio__lado--sale .cambio__nombre { color: var(--t2); }
.cambio__lado .jugador__meta { max-width: 100%; }
.cambio__medio { align-self: center; margin-top: -24px; color: var(--amarillo); display: grid; place-items: center; }

/* Mercado: botón compacto para incorporar y etiquetas Entra / Sale */
.btn-mas { flex: none; width: 40px; min-height: 40px; height: 40px; padding: 0; }
.btn-mas .ico { width: 20px; height: 20px; }
.etiqueta-cambio { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--e1); height: 22px; padding: 0 var(--e2) 0 var(--e1);
  border-radius: var(--r-chico); color: var(--bg); font: 700 11px/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase; }
.etiqueta-cambio--entra { background: var(--ok); }
.etiqueta-cambio--sale { background: var(--peligro); }

/* Admin · partidos y carga manual */
.partido-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); min-height: 64px; }
.partido-fila + .partido-fila { border-top: 1px solid var(--borde); }
.partido-fila__equipos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); font: 600 14px/18px var(--fuente); }
.partido-fila__equipos .escudo { width: 20px; height: 20px; font-size: 7px; background: none; }
.partido-fila__equipos .num { margin-left: auto; }
.marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e3); }
.marcador__club { display: flex; flex-direction: column; align-items: center; gap: var(--e1); min-width: 0; text-align: center; }
.marcador__club .escudo { background: none; }
.marcador__goles { font-size: 32px; line-height: 36px; font-weight: 700; white-space: nowrap; }
.stepper { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); min-height: 44px; }
.stepper__ctrl { display: inline-flex; align-items: center; gap: var(--e1); flex: none; }
.stepper__btn { width: 36px; height: 36px; border-radius: var(--r-chico); border: 1px solid var(--borde); background: var(--s2); color: var(--t1);
  font: 600 18px/1 var(--fuente); cursor: pointer; }
.stepper__btn:active { border-color: var(--amarillo); }
.stepper__valor { width: 48px; height: 36px; text-align: center; border-radius: var(--r-chico); border: 1px solid var(--borde); background: var(--bg);
  color: var(--t1); font: 700 15px/1 var(--fuente); -moz-appearance: textfield; }
.stepper__valor::-webkit-inner-spin-button, .stepper__valor::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mas-stats { display: flex; flex-direction: column; gap: var(--e2); border-top: 1px solid var(--borde); padding-top: var(--e3); }
.mas-stats summary { cursor: pointer; list-style: none; color: var(--amarillo); }
.mas-stats summary::-webkit-details-marker { display: none; }
.mas-stats[open] summary { margin-bottom: var(--e2); }
.chip--mini { height: 20px; padding: 0 var(--e2); font-size: 11px; }
.chip--estatico.baja { color: var(--peligro); border-color: var(--peligro); }

/* P20 · Ficha de jugador */
.modal--ficha { gap: var(--e3); padding: var(--e4); }
.modal--ficha #f-cuerpo { gap: var(--e2) !important; }
.ficha-hero { display: flex; align-items: center; gap: var(--e4); }
.ficha-hero__foto { position: relative; flex: none; }
.ficha-hero__foto .foto { width: 72px; height: 72px; border: 2px solid var(--amarillo); }
.ficha-hero__escudo { position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; font-size: 8px; background: none; border-radius: 0; }
.ficha-liga { background: var(--s2); border-radius: var(--r-chico); padding: var(--e2) var(--e3); gap: var(--e3); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.tile { background: var(--s2); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tile--destacado { border-color: var(--amarillo); }
.pj-fila { display: flex; align-items: center; gap: var(--e2); width: 100%; padding: var(--e2) var(--e3); min-height: 52px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.pj-fila + .pj-detalle + .pj-fila, .pj-detalle + .pj-fila { border-top: 1px solid var(--borde); }
.pj-fila__fecha { width: 26px; flex: none; text-align: left; }
.pj-fila .escudo { width: 22px; height: 22px; font-size: 7px; background: none; }
.pj-detalle { padding: 0 var(--e3) var(--e3) 44px; display: flex; flex-direction: column; gap: var(--e1); }
.resultado { flex: none; font: 700 11px/1 var(--fuente); padding: 4px 6px; border-radius: var(--r-chico); border: 1px solid currentColor; }
/* Ficha, partido por partido: el marcador en texto con color (sin pastilla, para no confundirlo con una posición) */
.pj-fila .resultado { font-size: 13px; padding: 0; border: 0; border-radius: 0; font-variant-numeric: tabular-nums; }
.resultado--G { color: var(--ok); }
.resultado--E { color: var(--t3); }
.pj-fila .resultado--E { color: var(--t2); }
.resultado--P { color: var(--peligro); }
.ficha__pts--neg { color: var(--peligro); }
.pj-fila .ficha__pts { flex: none; min-width: 40px; text-align: center; }

/* P21 · Sistema de puntuación */
.boton-enlace { background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.goles-pos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.gol-pos { background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3) var(--e1); display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.gol-pos--ARQ { border-color: var(--info); } .gol-pos--DEF { border-color: var(--peligro); }
.gol-pos--MED { border-color: var(--amarillo); } .gol-pos--DEL { border-color: var(--ok); }
.regla-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); min-height: 52px; }
.regla-fila + .regla-fila { border-top: 1px solid var(--borde); }
.regla-fila__valor { flex: none; font-size: 18px; font-weight: 700; }
.ejemplo { background: var(--s2); border-radius: var(--r); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e1); }
[data-ficha] { cursor: pointer; }

/* Inicio · mis ligas */
.liga-card--viva { border-color: var(--amarillo); }
.liga-card__avisos { border-top: 1px solid var(--borde); padding-top: var(--e3); }
.tiles--inicio .tile { padding: var(--e2); }

/* Liga oficial: cruces cabeza a cabeza */
.cruce { background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.cruce--mio { border-color: var(--amarillo); }
.cruce__fila { display: flex; justify-content: space-between; gap: var(--e3); font: 600 15px/20px var(--fuente); color: var(--t2); }
.cruce__fila .num { font-size: 18px; }
.cruce__fila--gana { color: var(--t1); }
.cruce__fila--gana .num { color: var(--amarillo); }
.llave { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.llave .cruce:nth-child(n+3) { grid-column: span 1; }
.tabla--h2h td:nth-child(n+3), .tabla--h2h th:nth-child(n+3) { text-align: center; padding-inline: 4px; }
.tabla--h2h td:nth-child(2) { max-width: 0; width: 100%; }
.equipos-liga { display: flex; flex-wrap: wrap; gap: var(--e1); }
.equipos-liga .chip { height: 32px; font-size: 12px; }
.chip--humano { color: var(--t1); border-color: var(--t3); }

/* P21 · títulos de sección, grilla de reglas y potenciador destacado */
.titulo-seccion { margin: var(--e4) 0 0; font: 800 17px/22px var(--fuente); letter-spacing: .04em; text-transform: uppercase; color: var(--t1); }
.titulo-seccion--primero { margin-top: 0; }
.reglas-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.regla-card { background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3); min-width: 0;
  display: flex; flex-direction: column; gap: var(--e1); }
.regla-card__pos { display: flex; gap: var(--e1); margin-bottom: var(--e1); }
.pos--todos { color: var(--t2); border-color: var(--t3); }
.regla-card__nombre { font: 700 14px/18px var(--fuente); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Siempre dos líneas de alto (aunque el texto sea más corto): así todas las tarjetas miden lo mismo */
.regla-card__nota { font: 400 12px/16px var(--fuente); color: var(--t2); height: 32px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.regla-card__valor { margin-top: var(--e1); font-size: 24px; line-height: 28px; font-weight: 800; }
.potenciador .cuerpo { color: var(--t1); }
.potenciador__fila { display: flex; align-items: center; gap: var(--e3); }
.pos--grande { height: 26px; min-width: 48px; font-size: 12px; flex: none; }
.ejemplo { padding: var(--e4); gap: var(--e2); }
.ejemplo__texto { font-size: 15px; line-height: 22px; }
.ejemplo__texto b { font-weight: 700; }
.potenciador > .chico { color: var(--t2); }

/* P04 · Inicio: tarjeta de la fecha y carrusel de banners (3:2) */
.fecha-card__dato { color: var(--t1); font-weight: 700; }
.carrusel { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-grande); overflow: hidden; background: var(--s1); }
.carrusel--desliza { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrusel--desliza::-webkit-scrollbar { display: none; }
.carrusel--desliza > .banner { scroll-snap-align: start; scroll-snap-stop: always; }
.banner { flex: 0 0 100%; width: 100%; height: 100%; box-sizing: border-box; display: flex; text-decoration: none; color: var(--t1); font: inherit; text-align: left; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.banner--imagen { background: var(--bg); }
.banner--imagen img { pointer-events: none; }
.banner--imagen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carrusel__puntos { display: flex; justify-content: center; gap: 6px; margin-top: var(--e3); }
.carrusel__punto { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--borde); cursor: pointer; transition: width 200ms, background-color 200ms; }
.carrusel__punto[aria-current="true"] { width: 18px; background: var(--amarillo); }

/* Campana de notificaciones: arriba a la derecha en todas las solapas */
.app { position: relative; }
.campana { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--e4)); right: max(var(--e4), calc(50% - 240px + var(--e4))); z-index: 12;
  width: 44px; height: 44px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--borde); color: var(--t1);
  display: grid; place-items: center; padding: 0; cursor: pointer; }
.campana .ico { width: 22px; height: 22px; }
.campana__globo { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: var(--amarillo); color: var(--bg); border: 2px solid var(--bg); font: 800 10px/14px var(--fuente); text-align: center; }

.aviso-fila { display: flex; gap: var(--e3); align-items: center; width: 100%; padding: var(--e3) 0; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: var(--t1); }
.aviso-fila + .aviso-fila { border-top: 1px solid var(--borde); }
.aviso-fila__icono { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--borde); display: grid; place-items: center; color: var(--t1); }
.aviso-fila__icono .ico { width: 20px; height: 20px; }
.aviso-fila--acento .aviso-fila__icono { border-color: var(--amarillo); color: var(--amarillo); }
.aviso-fila--acento .aviso-fila__titulo { color: var(--amarillo); }
.aviso-fila__titulo { font: 700 14px/18px var(--fuente); }
.titulo-seccion--linea { font-size: 16px; letter-spacing: .02em; white-space: nowrap; }

/* App instalada: mantener apretado un link, botón o imagen no abre el menú del sistema (ni lleva fuera de la app) */
a, button, img { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; user-select: none; }

/* Header fijo en todas las solapas: el encabezado de cada pantalla queda arriba y solo se mueve el contenido.
   Ocupa también la zona de la barra de estado (con el fondo de la app) para que nada se vea pasar por detrás. */
.app:has(> .nav) .pantalla > header:first-child {
  position: sticky; top: 0; z-index: 11; background: var(--bg);
  margin: calc(-1 * (env(safe-area-inset-top, 0px) + var(--e4))) calc(-1 * var(--e4)) calc(-1 * var(--e2));
  padding: calc(env(safe-area-inset-top, 0px) + var(--e4)) calc(var(--e4) + 56px) var(--e2) var(--e4);
}
.app:has(> .nav) { padding-top: 0; }
.app:has(> .nav) > .pantalla { padding-top: calc(env(safe-area-inset-top, 0px) + var(--e4)); }

/* Inicio: la próxima fecha sin caja, y la mitad de separación entre fecha, banner y mejores promedios */
.fecha-card { background: none; border: 0; padding: 0; border-radius: 0; }
.inicio-banners, .inicio-mejores { margin-top: calc(-1 * var(--e6) / 2); }

/* Modales de cambio (Mi equipo): jugador principal destacado, acceso a la ficha y lista debajo, con más aire */
.modal--cambio { gap: var(--e5); }
.cambio-jugador { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }   /* el jugador no es tocable: sin caja */
.cambio-jugador__datos { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.cambio-jugador .foto { width: 56px; height: 56px; }

/* Ficha: pestañas Torneo / Partido por partido */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); }
.pestana { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--e3) 0; color: var(--t2); font: 600 14px/18px var(--fuente); cursor: pointer; }
.pestana[aria-selected="true"] { color: var(--amarillo); border-bottom-color: var(--amarillo); }

/* Ligas: dos zonas (Oficiales y Amigos) con títulos fuertes y más aire */
.zona { display: flex; flex-direction: column; gap: var(--e4); }
.zona + .zona { padding-top: var(--e2); }
.zona__cab { display: flex; flex-direction: column; gap: var(--e1); }
.zona__cab .chico { color: var(--t2); }
/* Oficiales: dos tarjetas altas lado a lado, cada una con su color de tipo */
.liga-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.liga-tile { min-height: 168px; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border-radius: var(--r-grande);
  background: var(--s2); border: 1px solid var(--borde); color: var(--t1); text-decoration: none; min-width: 0; }
.liga-tile.esqueleto { border: 0; }
.liga-tile--oficial { border-top: 3px solid var(--amarillo); }
.liga-tile--general { border-top: 3px solid var(--ok); }
.liga-tile__nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liga-tile__dato { display: flex; flex-direction: column; gap: 2px; }
.liga-tile__dato .num { font-size: 32px; font-weight: 800; line-height: 1; }
/* Amigos: filas compactas con inicial */
.liga-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r); background: var(--s1); border: 1px solid var(--borde); color: var(--t1); }
.liga-fila__inicial { flex: none; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--s2); color: var(--info); font: 800 17px/1 var(--fuente); }

/* Detalle de liga: mi partido destacado */
.partido-card { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border-radius: var(--r-grande); background: var(--s2); }
.partido-card__equipo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font: 700 17px/22px var(--fuente); color: var(--t2); }
.partido-card__equipo .num { font-size: 24px; font-weight: 800; }
.partido-card__equipo--yo { color: var(--t1); }
.partido-card__equipo--gana .num { color: var(--amarillo); }
/* Tabla cabeza a cabeza: cada equipo en su propia fila separada, la mía bien marcada */
.tabla-filas .tabla--h2h { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
.tabla-filas .tabla--h2h th { padding-bottom: 0; }
.tabla-filas .tabla--h2h td { background: var(--s1); border-top: 0; padding-top: var(--e3); padding-bottom: var(--e3); }
.tabla-filas .tabla--h2h td:first-child { border-radius: var(--r) 0 0 var(--r); }
.tabla-filas .tabla--h2h td:last-child { border-radius: 0 var(--r) var(--r) 0; padding-right: var(--e3); }
.tabla-filas .tabla--h2h th:last-child { padding-right: var(--e3); }
.tabla-filas .tabla--h2h tr.yo td { background: var(--s2); }
.tabla-filas .tabla--h2h tr.yo td:first-child { box-shadow: inset 3px 0 0 var(--amarillo); }
.tabla-filas .tabla--h2h tr.yo .h3 { color: var(--amarillo); }
/* Modal de puntuación de la tabla */
.puntos-h2h { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.puntos-h2h__pieza { display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e4) var(--e3); border-radius: var(--r); background: var(--s2); text-align: center; }
.puntos-h2h__valor { font-size: 40px; font-weight: 800; line-height: 1; }
.puntos-h2h__desempate { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r); background: var(--s2); }
.puntos-h2h__ico { flex: none; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; border: 1px solid var(--borde); color: var(--t1); }

/* Detalle de liga (07/10): jerarquía título principal > título de sección > tarjeta > fila */
.titulo-principal { margin: 0; font: 800 22px/28px var(--fuente); letter-spacing: .04em; text-transform: uppercase; color: var(--amarillo); }
.partidos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.partido-mini { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e3); border-radius: var(--r-grande); background: var(--s2); min-width: 0; }
.partido-mini__titulo { font: 700 11px/14px var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--amarillo); }
.partido-mini__equipo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); font: 600 14px/18px var(--fuente); color: var(--t2); min-width: 0; }
.partido-mini__equipo .num { flex: none; font-size: 18px; font-weight: 800; color: var(--t1); }
.partido-mini__equipo .num.acento { color: var(--amarillo); }
.partido-mini__equipo--yo { color: var(--t1); font-weight: 700; }
/* Tus partidos: lista con borde y sin fondo (distinta de las filas de la tabla) */
.mis-partidos { border: 1px solid var(--borde); border-radius: var(--r-grande); padding: 0 var(--e4); }
.mis-partidos__fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; min-height: 28px; }
.mis-partidos__fila + .mis-partidos__fila { border-top: 1px solid var(--borde); }
.mis-partidos__fecha { flex: none; width: 32px; font: 700 13px/1 var(--fuente); color: var(--amarillo); font-variant-numeric: tabular-nums; }
.mis-partidos__rival { flex: 1; min-width: 0; font: 600 14px/18px var(--fuente); color: var(--t1); }
.mis-partidos__estado { flex: none; padding-left: var(--e3); font: 500 12px/16px var(--fuente); color: var(--t2); }
.mis-partidos__resultado { flex: none; padding-left: var(--e3); font: 800 15px/1 var(--fuente); color: var(--t1); font-variant-numeric: tabular-nums; }
/* Crear liga: instructivo antes de confirmar */
.instructivo { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e3); border-radius: var(--r); background: var(--s2); color: var(--t2); }
.instructivo .ico { margin-top: 2px; flex: none; }
.mis-partidos__resultado.acento { color: var(--amarillo); }

/* Acceso al cuadro de playoffs desde la liga oficial (siempre visible) */
.acceso-playoffs { display: flex; align-items: center; gap: var(--e3); padding: 14px var(--e4); border-radius: var(--r-grande); border: 1px solid var(--amarillo); background: var(--s1); color: var(--t1); text-decoration: none; }
.acceso-playoffs__ico { flex: none; width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--s2); color: var(--amarillo); }
.acceso-playoffs__ico .ico { width: 24px; height: 24px; }

/* Cuadro de playoffs: una etapa por vez */
.cuadro-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e1); padding: var(--e1); border-radius: 12px; background: var(--s1); }
.cuadro-etapa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; border: 0; border-radius: 9px; background: transparent; color: var(--t2); cursor: pointer;
  font: 700 13px/16px var(--fuente); letter-spacing: .06em; text-transform: uppercase; }
.cuadro-etapa span { font: 500 11px/14px var(--fuente); letter-spacing: 0; text-transform: none; color: var(--t3); }
.cuadro-etapa[aria-selected="true"] { background: var(--amarillo); color: var(--bg); }
.cuadro-etapa[aria-selected="true"] span { color: var(--bg); }
.cuadro-cruce { display: flex; flex-direction: column; gap: var(--e3); padding: 14px var(--e4); border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--borde); min-width: 0; }
.cuadro-cruce--final { background: var(--s2); }
.cuadro-cruce--mio { border-color: var(--amarillo); }
.cuadro-cruce__titulo { font: 700 10px/12px var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.cuadro-equipo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cuadro-equipo__siembra { flex: none; width: 16px; font: 700 12px/1 var(--fuente); color: var(--t3); }
.cuadro-equipo__nombre { flex: 1; min-width: 0; font: 700 15px/20px var(--fuente); color: var(--t1); }
.cuadro-equipo__pts { flex: none; font: 800 18px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--t1); }
.cuadro-equipo--yo .cuadro-equipo__nombre { color: var(--amarillo); }
.cuadro-equipo--gana .cuadro-equipo__pts { color: var(--amarillo); }
.cuadro-equipo--pierde .cuadro-equipo__nombre, .cuadro-equipo--pierde .cuadro-equipo__pts { color: var(--t3); }
.cuadro-equipo--vacio .cuadro-equipo__nombre { font-weight: 500; color: var(--t3); }
.cuadro-semis { position: relative; display: flex; flex-direction: column; gap: var(--e4); padding-right: 56px; }
.cuadro-semis__llave { position: absolute; right: 44px; top: 25%; height: 50%; width: 12px; box-sizing: border-box; border: 2px solid var(--borde); border-left: 0; border-radius: 0 8px 8px 0; }
.cuadro-flecha { position: absolute; width: 40px; height: 40px; padding: 0; border-radius: var(--r); border: 1px solid var(--borde); background: var(--s2); color: var(--t1); display: grid; place-items: center; cursor: pointer; }
.cuadro-flecha--der { right: 0; top: calc(50% - 20px); }
.cuadro-flecha--izq { left: 0; top: calc(50% - 20px); }
.cuadro-final { position: relative; padding-left: 56px; }
.cuadro-final__linea { position: absolute; left: 40px; top: calc(50% - 1px); width: 16px; height: 2px; background: var(--borde); }
.cuadro-campeon { display: flex; align-items: center; gap: var(--e4); padding: var(--e4); border-radius: var(--r-grande); background: var(--s2); }
.cuadro-campeon__copa { flex: none; width: 56px; height: 56px; border-radius: var(--r-grande); display: grid; place-items: center; background: var(--bg); color: var(--amarillo); }
.cuadro-campeon__copa .ico { width: 30px; height: 30px; }
.cuadro-campeon__nombre { font: 800 20px/26px var(--fuente); }

/* Mercado: card de mercado cerrado sin período (no apagada) y buscador con el estilo de las cards */
.mercado-cerrado { border-color: var(--amarillo); }
.mercado-cerrado__titulo { color: var(--t1); }
.mercado-cerrado__info { flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; background: none; color: var(--t1); display: grid; place-items: center; cursor: pointer; }
.mercado-cerrado__info .ico { width: 26px; height: 26px; }
.buscador input { -webkit-appearance: none; appearance: none; background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); }
.buscador svg { color: var(--amarillo); }

/* P21b · Cómo se juega (reglas generales del juego) */
/* El índice va dentro de la cabecera fija: siempre visible, de borde a borde (la cabecera deja 56 px para la campana) */
.cj-indice { margin: var(--e1) calc(-1 * (var(--e4) + 56px)) 0 calc(-1 * var(--e4)); padding-bottom: var(--e1); scroll-behavior: smooth; }
.cj-seccion[hidden] { display: none; }
.cj-siguiente { margin-top: var(--e3); }
.cj-seccion { scroll-margin-top: calc(var(--alto-cab, 0px) + var(--e2)); }
.cj-fuerte { color: var(--t1); font-weight: 700; }
.cj-gris { color: var(--t2); }
.cj-pasos { display: flex; flex-direction: column; gap: var(--e2); }
.cj-paso { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); }
.cj-paso__num { flex: none; width: 28px; font: 800 24px/1 var(--fuente); color: var(--amarillo); font-variant-numeric: tabular-nums; }
.cj-paso__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cj-paso__titulo { font: 700 14px/18px var(--fuente); color: var(--t1); }
.cj-intro { margin: 0; font-size: 14px; line-height: 20px; color: var(--t2); }
.cj-intro b { color: var(--t1); font-weight: 700; }

/* Un equipo, todas las ligas */
.cj-arbol { display: flex; flex-direction: column; gap: var(--e3); }
.cj-arbol__raiz { display: flex; align-items: center; gap: var(--e3); }
.cj-arbol__ico { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--s2); color: var(--amarillo); display: grid; place-items: center; }
.cj-arbol__ramas { display: flex; flex-direction: column; gap: var(--e2); margin-left: 19px; padding-left: var(--e4); border-left: 1px solid var(--borde); }
.cj-arbol__rama { display: flex; align-items: center; gap: var(--e2); position: relative; }
.cj-arbol__rama::before { content: ""; position: absolute; left: calc(var(--e4) * -1); top: 50%; width: 10px; border-top: 1px solid var(--borde); }

/* Datos en tres columnas */
.cj-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
.cj-dato { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); min-width: 0; }
.cj-dato__num { font: 800 24px/28px var(--fuente); color: var(--t1); font-variant-numeric: tabular-nums; }
.cj-dato__num--acento { color: var(--amarillo); }

/* Draft: orden de elección (fijo en todas las rondas) */
.cj-orden { display: grid; grid-template-columns: 52px repeat(8, minmax(0, 1fr)); gap: 4px; align-items: center; }
.cj-orden__cab { font: 700 10px/1 var(--fuente); color: var(--t3); text-align: center; letter-spacing: .04em; }
.cj-orden__cab--yo { color: var(--amarillo); }
.cj-orden__ronda { font: 600 11px/1 var(--fuente); color: var(--t2); }
.cj-orden__pick { height: 28px; border-radius: var(--r-chico); background: var(--s2); color: var(--t2); display: grid; place-items: center; font: 700 12px/1 var(--fuente); font-variant-numeric: tabular-nums; }
.cj-orden__pick--yo { background: var(--amarillo); color: var(--bg); }
.cj-orden__mas { grid-column: 2 / -1; padding-top: var(--e1); font: 500 11px/14px var(--fuente); color: var(--t3); }

.cj-sistemas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.cj-sistema { height: 40px; border-radius: var(--r); border: 1px solid var(--borde); background: var(--s1); display: grid; place-items: center; font: 700 15px/1 var(--fuente); color: var(--t1); font-variant-numeric: tabular-nums; }

/* Plantel: 18 = 11 + 7 */
.cj-suma { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--e2); text-align: center; }
.cj-suma__op { font: 700 20px/1 var(--fuente); color: var(--t3); }
.cj-suma .num { font-size: 32px; font-weight: 800; }
.cj-suma__item { display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.cj-tabla { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.cj-tabla th { padding: 0 0 var(--e1); font-weight: 400; text-align: center; }
.cj-tabla th:first-child { text-align: left; }
.cj-tabla td { padding: 10px 0; background: var(--s2); text-align: center; font: 700 15px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--t1); }
.cj-tabla td:first-child { text-align: left; padding-left: var(--e3); border-radius: var(--r-chico) 0 0 var(--r-chico); }
.cj-tabla td:last-child { border-radius: 0 var(--r-chico) var(--r-chico) 0; color: var(--t2); }
.cj-banco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.cj-banco__item { display: inline-flex; align-items: center; gap: var(--e1); font: 700 13px/1 var(--fuente); color: var(--t1); }

/* Clubes */
.cj-limites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
.cj-limite { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); min-width: 0; }
.cj-limite__num { font: 800 32px/36px var(--fuente); color: var(--amarillo); font-variant-numeric: tabular-nums; }
.cj-limite__txt { font: 600 12px/16px var(--fuente); color: var(--t1); }
.cj-clubes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e3) var(--e2); }
.cj-club { display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.cj-club__marcas { display: flex; gap: 3px; }
.cj-club__marcas i { width: 6px; height: 6px; border-radius: 50%; background: var(--t1); }
.cj-club--uno .cj-club__marcas i { background: var(--t3); }
.cj-ejemplos { display: flex; flex-direction: column; padding-block: var(--e1); }
.cj-ejemplo { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) 0; }
.cj-ejemplo + .cj-ejemplo { border-top: 1px solid var(--borde); }
.cj-ejemplo__ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; }
.cj-ejemplo__ico .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cj-ejemplo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.cj-ejemplo__titulo { font: 600 14px/18px var(--fuente); color: var(--t1); }

/* Alineación: cierre por partido */
.cj-cierres { display: flex; flex-direction: column; gap: var(--e2); }
.cj-cierre { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); }
.cj-cierre__hora { flex: none; width: 100px; display: flex; flex-direction: column; gap: 2px; }
.cj-cierre__dia { white-space: nowrap; font: 700 12px/16px var(--fuente); color: var(--t1); }
.cj-cierre__jug { flex: 1; display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.cj-cierre__estado { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 600 11px/14px var(--fuente); }
.cj-cierre__estado .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cj-cierre--bloqueado .cj-cierre__jug { opacity: .55; }
.cj-cierre--bloqueado .cj-cierre__estado { color: var(--t3); }
.cj-cierre--abierto .cj-cierre__estado { color: var(--ok); }

.cj-lista { display: flex; flex-direction: column; gap: var(--e2); }
.cj-lista span { font-size: 13px; line-height: 18px; color: var(--t2); padding-left: var(--e3); position: relative; }
.cj-lista span::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--t3); }
.cj-lista b { color: var(--t1); font-weight: 600; }

/* Mercado */
.cj-turnos { display: flex; flex-direction: column; gap: 4px; }
.cj-turno { display: flex; align-items: center; gap: var(--e3); padding: 10px var(--e3); background: var(--s2); border-radius: var(--r-chico); }
.cj-turno__n { flex: none; width: 24px; font: 800 14px/1 var(--fuente); color: var(--t2); font-variant-numeric: tabular-nums; }
.cj-turno__nombre { flex: 1; min-width: 0; font: 600 13px/16px var(--fuente); color: var(--t1); }
.cj-turno__pts { font: 700 13px/1 var(--fuente); color: var(--t2); font-variant-numeric: tabular-nums; }
.cj-turno--primero .cj-turno__n { color: var(--amarillo); }
.cj-turnos__puntos { text-align: center; color: var(--t3); font: 700 12px/12px var(--fuente); letter-spacing: .2em; }
.cj-pase { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--e2); }
.cj-pase__lado { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r); min-width: 0; }
.cj-pase__nombre { font: 700 14px/18px var(--fuente); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-pase__flecha { color: var(--t3); }
.cj-pase__flecha .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Ligas */
.cj-liga { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); background: var(--s1); border: 1px solid var(--borde); border-radius: var(--r-grande); }
.cj-liga__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.cj-liga__titulo { font: 800 18px/22px var(--fuente); color: var(--t1); margin: 0; }
.cj-liga__txt { margin: 0; font-size: 13px; line-height: 18px; color: var(--t2); }
.cj-liga__txt b { color: var(--t1); font-weight: 600; }
.cj-liga__sub { margin-top: var(--e2); }
.cj-h2h { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--e3); padding: var(--e3); background: var(--s2); border-radius: var(--r); }
.cj-h2h__eq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cj-h2h__eq--der { text-align: right; }
.cj-h2h__nombre { font: 600 13px/16px var(--fuente); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-h2h__pts { font: 800 22px/26px var(--fuente); font-variant-numeric: tabular-nums; }
.cj-h2h__vs { font: 700 11px/1 var(--fuente); color: var(--t3); }
.cj-resultados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.cj-resultado { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--e2) 0; border-radius: var(--r-chico); background: var(--s2); }
.cj-resultado .num { font-size: 20px; font-weight: 800; }
.cj-llave { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; }
.cj-llave__semis { display: flex; flex-direction: column; gap: var(--e2); }
.cj-llave__cruce { display: flex; flex-direction: column; gap: 2px; padding: var(--e2) var(--e3); border-radius: var(--r-chico); background: var(--s2); font: 600 12px/16px var(--fuente); color: var(--t1); }
.cj-llave__cruce .caption { font-size: 10px; }
.cj-llave__union { align-self: stretch; margin: 26px 0; border: 1px solid var(--borde); border-left: 0; border-radius: 0 var(--r-chico) var(--r-chico) 0; position: relative; }
.cj-llave__union::after { content: ""; position: absolute; left: 100%; top: 50%; width: 10px; border-top: 1px solid var(--borde); }
.cj-llave__final { margin-left: 10px; padding: var(--e3); border-radius: var(--r-chico); border: 1px solid var(--amarillo); background: var(--s2); display: flex; flex-direction: column; gap: 2px; }

/* Puntos */
.cj-goles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.cj-gol { display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e2) 0; background: var(--s2); border-radius: var(--r-chico); }
.cj-gol .num { font-size: 18px; font-weight: 800; color: var(--t1); }
.cj-arbol__ico .ico { width: 22px; height: 22px; }

/* P17 · Perfil: la figurita del DT, accesos a las reglas y cuenta */
.figurita { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e3); border-radius: var(--r-grande); border: 1px solid var(--amarillo); background: var(--s1); }
.figurita__cab { display: flex; justify-content: space-between; align-items: center; }
.figurita__marca { font: 700 10px/12px var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.figurita__dt { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--e2); border-radius: var(--r-chico); background: var(--amarillo); color: var(--bg); font: 800 11px/1 var(--fuente); letter-spacing: .06em; }
.figurita__cuerpo { display: flex; gap: var(--e3); }
.figurita__foto { flex: none; width: 112px; height: 132px; border-radius: var(--r); background: var(--s2); display: grid; place-items: center; font: 800 44px/1 var(--fuente); letter-spacing: -.02em; color: var(--t1); }
.figurita__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--e1) 0; }
.figurita__nombre { font: 800 26px/30px var(--fuente); color: var(--t1); }
.figurita__club { font: 700 15px/20px var(--fuente); color: var(--t1); }
.figurita__sistema { align-self: flex-start; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-chico); border: 1px solid var(--borde); font: 700 11px/1 var(--fuente); color: var(--t2); }
.figurita__datos { display: grid; border-top: 1px solid var(--borde); padding-top: var(--e3); }
.figurita__datos.esqueleto { border-top: 0; }
.figurita__dato { display: flex; flex-direction: column; align-items: center; gap: var(--e1); }
.figurita__dato + .figurita__dato { border-left: 1px solid var(--borde); }
.figurita__num { font: 800 22px/26px var(--fuente); color: var(--t1); font-variant-numeric: tabular-nums; }
.figurita__sin { display: block; border-top: 1px solid var(--borde); padding-top: var(--e3); }
.perfil-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.perfil-tile { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--borde); }
.perfil-tile__titulo { font: 700 15px/20px var(--fuente); color: var(--t1); }
.perfil-ico { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--s2); color: var(--amarillo); display: grid; place-items: center; }
.perfil-ico .ico { width: 20px; height: 20px; }
.perfil-ico--neutro { color: var(--t1); }
.perfil-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--borde); }
.perfil-salir { background: transparent; border-color: var(--borde); color: var(--peligro); }
.figurita__num.acento { color: var(--amarillo); }

/* Liga oficial: zona de playoffs en la tabla (puestos 1 a 4 marcados + referencia) y bloque en el modal de Puntuación */
.puesto-playoffs { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-chico); border: 1px solid var(--ok); color: var(--ok); font: 700 12px/1 var(--fuente); }
.referencia-playoffs { display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e1); }
.referencia-playoffs .puesto-playoffs { flex: none; }
.campeon-playoffs { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r); background: var(--s2); border: 1px solid var(--amarillo); }
.campeon-playoffs__ico { flex: none; width: 36px; height: 36px; border-radius: var(--r); background: var(--s1); color: var(--amarillo); display: grid; place-items: center; }
.campeon-playoffs__texto { font-size: 13px; line-height: 18px; color: var(--t2); }
.campeon-playoffs__texto b { color: var(--t1); font-weight: 600; }
.campeon-playoffs__link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--e1); font: 600 13px/18px var(--fuente); color: var(--amarillo); text-decoration: none; }

/* P01 · Acceso (opción A aprobada por Daniel el 07/10/2026): marca con escudo, tres puntos del juego y selector en caja */
.acceso-marca__nombre { font: 800 22px/24px var(--fuente); color: var(--t1); }
.acceso-marca__bajada { font: 700 11px/14px var(--fuente); letter-spacing: .2em; text-transform: uppercase; color: var(--t2); }
.acceso-punto { display: flex; align-items: center; gap: var(--e2); font: 500 13px/18px var(--fuente); color: var(--t2); }
.acceso-punto .ico { width: 16px; height: 16px; color: var(--amarillo); stroke-width: 2; }
.segmento-caja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e1); padding: var(--e1); border-radius: var(--r); background: var(--s1); border: 1px solid var(--borde); }
.segmento-caja button { height: 40px; border-radius: var(--r-chico); border: 0; background: transparent; color: var(--t2); font: 600 14px/1 var(--fuente); cursor: pointer; }
.segmento-caja button[aria-pressed="true"] { background: var(--amarillo); color: var(--bg); font-weight: 700; }

/* P02 · Elegir nombre: progreso del registro y vista previa en una tabla */
.pasos-registro { display: flex; gap: 6px; }
.pasos-registro span { flex: 1; height: 4px; border-radius: 2px; background: var(--amarillo); }
.nombre-titulo { font-size: 26px; line-height: 30px; font-weight: 800; }
.vista-dt { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--r); background: var(--s1); border: 1px solid var(--borde); }
.vista-dt__puesto { width: 16px; font: 700 14px/1 var(--fuente); color: var(--t3); }
.vista-dt__foto { width: 36px; height: 36px; font-size: 12px; color: var(--t1); }

/* P02b · Bienvenida después del registro */
.bienvenida-titulo { margin: 0; font: 800 30px/34px var(--fuente); letter-spacing: -.01em; color: var(--t1); overflow-wrap: anywhere; }
.paso-inicio { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--borde); color: var(--t3); }
.paso-inicio--destacado { background: var(--s2); border-color: var(--amarillo); color: var(--amarillo); }
.paso-inicio__num { flex: none; width: 28px; font: 800 24px/1 var(--fuente); color: var(--amarillo); }
.paso-inicio__titulo { font: 700 15px/20px var(--fuente); color: var(--t1); }

/* P06 · Crear liga: formato en dos tarjetas, contador de equipos y cuándo empieza */
.formatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.formato { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e3); border-radius: var(--r); border: 1px solid var(--borde); background: var(--s2); color: var(--t1); text-align: left; cursor: pointer; font: inherit; }
.formato[aria-pressed="true"] { border-color: var(--amarillo); }
.formato__titulo { font: 700 14px/18px var(--fuente); }
.formato__ico { color: var(--t2); display: grid; }
.formato__ico .ico { width: 22px; height: 22px; }
.formato[aria-pressed="true"] .formato__ico { color: var(--amarillo); }
.formato__vs { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--r-chico); background: var(--amarillo); color: var(--bg); font: 800 11px/1 var(--fuente); letter-spacing: .04em; flex: none; }
.contador { display: inline-flex; align-items: center; gap: var(--e1); padding: var(--e1); border-radius: var(--r); border: 1px solid var(--borde); background: var(--s2); }
.contador button { width: 40px; height: 40px; border-radius: var(--r-chico); border: 0; background: var(--s1); color: var(--t1); font: 700 20px/1 var(--fuente); cursor: pointer; }
.contador button:disabled { color: var(--t3); cursor: default; }
.contador__n { width: 44px; text-align: center; font: 800 22px/1 var(--fuente); font-variant-numeric: tabular-nums; }
.aviso-inicio { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3); border-radius: var(--r); background: var(--s2); }
.aviso-inicio > .ico { flex: none; color: var(--amarillo); margin-top: 1px; }

/* P07 · Código en 6 casilleros (para escribirlo y para mostrarlo) y liga encontrada */
.codigo-casillas { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.codigo-casillas input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; padding: 0; z-index: 1; caret-color: transparent; }
.codigo-casillas__c { height: 52px; border-radius: var(--r); border: 1px solid var(--borde); background: var(--s2); display: grid; place-items: center; font: 800 24px/1 var(--fuente); color: var(--t1); }
.codigo-casillas__c--activa { border-color: var(--amarillo); }
.codigo-casillas--fijo .codigo-casillas__c { border-color: transparent; }
.liga-encontrada { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r); background: var(--s2); border: 1px solid var(--amarillo); }
.liga-encontrada--no { border-color: var(--borde); }
.liga-encontrada > .fila .ico { color: var(--ok); }
.liga-encontrada--no > .fila .ico { color: var(--t2); }
.liga-encontrada__nombre { font: 800 20px/24px var(--fuente); color: var(--t1); }
.liga-encontrada__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.liga-encontrada__datos > span { display: flex; flex-direction: column; gap: 2px; padding: var(--e2) var(--e3); border-radius: var(--r-chico); background: var(--s1); }
.liga-encontrada__datos b { font: 800 18px/22px var(--fuente); color: var(--t1); }
.liga-encontrada__equipo { color: var(--t1); font-weight: 600; }

/* Liga de amigos antes de arrancar: invitar, cuándo empieza y equipos */
.invitar { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4); border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--amarillo); }
.invitar__botones { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e2); }
.invitar__botones .btn { min-height: 44px; }
.sala-equipo { display: flex; align-items: center; gap: var(--e3); padding: 10px var(--e3); border-radius: var(--r); background: var(--s1); }
.sala-equipo--yo { background: var(--s2); }
.sala-equipo__foto { width: 32px; height: 32px; font-size: 11px; color: var(--t1); }
.sala-equipo--yo .sala-equipo__foto { border-color: var(--amarillo); }
.sala-equipo__nombre { font: 600 14px/18px var(--fuente); color: var(--t1); }
.sala-equipo--yo .sala-equipo__nombre { color: var(--amarillo); }
.sala-libres { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.sala-libres span { height: 40px; border-radius: var(--r); border: 1px dashed var(--borde); }

/* P07b · Link de invitación */
.invitacion__titulo { margin: 0; font: 800 34px/38px var(--fuente); letter-spacing: -.01em; color: var(--t1); overflow-wrap: anywhere; }
.invitacion__datos { display: flex; flex-direction: column; border-radius: var(--r-grande); background: var(--s1); border: 1px solid var(--borde); }
.invitacion__fila { display: flex; align-items: center; gap: var(--e3); padding: 14px var(--e4); }
.invitacion__fila + .invitacion__fila { border-top: 1px solid var(--borde); }
.invitacion__ico { flex: none; width: 28px; display: grid; place-items: center; color: var(--t2); }
.invitacion__ico .ico { width: 22px; height: 22px; }
.invitacion__fila .formato__vs { width: 28px; justify-content: center; padding: 0; }
.btn--grande { min-height: 52px; font-size: 16px; }
.btn--terciario.baja { color: var(--peligro); }

/* Nombre de equipo fijo del DT (se muestra, no se elige) */
.tu-equipo { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); border-radius: var(--r); background: var(--s2); }
.tu-equipo__nombre { font: 700 16px/20px var(--fuente); color: var(--t1); }

/* Liga oficial: inscripción confirmada (estado, no texto secundario) */
.inscripto { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--r); background: var(--s2); }
.inscripto__ico { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ok); color: var(--ok); display: grid; place-items: center; }
.inscripto__ico .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.inscripto__titulo { font: 700 15px/20px var(--fuente); color: var(--t1); }
.inscripto__equipo { color: var(--amarillo); font-weight: 700; }

/* Admin · inscriptos a la liga oficial (conteo, usuario, correo y equipo) */
.admin-inscriptos { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border-radius: var(--r); background: var(--s2); }
.admin-inscriptos__lista { display: flex; flex-direction: column; margin-top: var(--e2); }
.admin-inscripto { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0; }
.admin-inscripto + .admin-inscripto { border-top: 1px solid var(--borde); }
.admin-inscripto__n { width: 20px; font: 700 12px/18px var(--fuente); color: var(--t3); }

/* Guía para instalar la app: ícono al lado de la campana, aviso de la primera vez y modal */
.campana--instalar { right: calc(max(var(--e4), calc(50% - 240px + var(--e4))) + 44px + var(--e2)); }
.con-instalar .app:has(> .nav) .pantalla > header:first-child { padding-right: calc(var(--e4) + 108px); }
.con-instalar .cj-indice { margin-right: calc(-1 * (var(--e4) + 108px)); }
.aviso-instalar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-nav) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 13;
  width: min(calc(100vw - 2 * var(--e4)), 448px); box-sizing: border-box; display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0 var(--e3) var(--e3); background: var(--s2); border: 1px solid var(--borde); border-radius: var(--r-grande);
  animation: aparecer var(--t-modal) var(--curva); }
.aviso-instalar__icono { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--amarillo); color: var(--amarillo); display: grid; place-items: center; }
.aviso-instalar__icono .ico { width: 20px; height: 20px; }
.aviso-instalar__titulo { font: 700 14px/18px var(--fuente); color: var(--t1); }
.aviso-instalar #aviso-ver { color: var(--amarillo); padding: 0 var(--e1); white-space: nowrap; }
.aviso-instalar .modal__cerrar { margin: 0; flex: none; }
.instalar .cj-paso { background: var(--s2); align-items: flex-start; }
.instalar .cj-paso__num { line-height: 20px; font-size: 20px; }
.instalar .cj-paso__titulo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.instalar__tecla { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-chico); background: var(--bg); border: 1px solid var(--borde); color: var(--t1); }
.instalar__tecla .ico { width: 16px; height: 16px; }
.instalar #ins-instalar { gap: var(--e2); }