/* ════════════════════════════════════════════════════════════════════
   COP · LA ESCALERA DE DIVISIONES (extraída de `rangos.html`, 22/08)
   ────────────────────────────────────────────────────────────────────
   La usan DOS pantallas:
     · `rangos.html`   → la escalera de trofeos de la app
     · `futbol11.html` → la pestaña «Divisiones», la vertical propia
                          del modo (Franco: "replicando misma ui de la
                          página de divisiones")

   ⚠ ES EL MISMO TEXTO QUE ESTABA ADENTRO DE `rangos.html`, movido sin
   tocar una regla. El comentario original ya avisaba que era una copia
   esperando extracción; con una segunda pantalla usándolo, dejar dos
   copias garantizaba que en dos semanas una escalera se viera distinta
   de la otra.

   ⚠ DEPENDE DE DOS ARCHIVOS QUE HAY QUE CARGAR ANTES:
     · `cop-ui-partido.css` → `.cop-partidos`, `--cop-pt-aire`
     · `cop-iconos.css`     → `.cop-div` (la insignia de la división)
   Sin ellos la escalera se dibuja sin riel y sin insignias.
   ════════════════════════════════════════════════════════════════════ */

/* la lista deja de ser una columna al lado de un riel aparte: el riel
   ahora vive DENTRO de la fila, cruzando las insignias */
.levels{display:block}

/* ── la fila de división ───────────────────────────────────────────── */
.lvl-card{
  position:relative;
  background:none;border:0;border-radius:0;padding:0;margin:0;
  cursor:pointer;transition:none;
}
.lvl-card:focus-visible{outline:2px solid var(--comp-c,var(--primary));outline-offset:-3px}
.cop-partidos > .lvl-card.actual::before{
  content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;
  border-radius:0 3px 3px 0;background:var(--comp-c,var(--primary));
}
.lvl-fila{display:flex;align-items:center;gap:var(--lvl-gap);width:100%;--lvl-gap:.85rem}
.lvl-insignia{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
/* la insignia manda el alto de la fila; `--cop-div` es el token que ya
   usa `cop-iconos.css`, así que no se toca el aspecto del hexágono */
.lvl-insignia .cop-div{--cop-div:74px;height:74px}
.lvl-textos{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.lvl-titulo{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;
  font-size:var(--fs-2xl, 1.5rem);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lvl-sub{
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-md, .88rem);line-height:1.1;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ⚠ el indicador NO se achica para hacerle lugar a la flecha: el que
   cede ancho es la columna de textos, que ya corta con puntos
   suspensivos */
.lvl-fila > .lvl-state{flex:0 0 auto}
.lvl-state{
  font-family:'Inter',sans-serif;font-size:var(--fs-xs, .72rem);font-weight:700;
  padding:.18rem .5rem;border-radius:6px;white-space:nowrap;
}
.lvl-state.ok{background:rgba(124,252,0,.12);color:var(--accent-green)}
.lvl-state.actual{background:rgba(255,194,51,.14);color:var(--gold)}
.lvl-state.lock{background:rgba(255,255,255,.05);color:var(--text-dim)}

/* ── la flecha del desplegable ─────────────────────────────────────
   Va DESPUÉS del indicador, así que lo empuja a la izquierda sola:
   `.lvl-textos` es el único con `flex:1`. Cerrada apunta al costado
   ("esto se abre") y abierta hacia abajo ("esto se cierra"). */
.lvl-exp{
  flex:0 0 auto;width:26px;height:30px;
  margin-left:0;margin-right:-6px;
  display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--text-dim);
  transform:rotate(-90deg);
  transition:transform .18s ease,color .18s ease;
}
.lvl-exp svg{width:18px;height:18px}
.lvl-exp[aria-expanded="true"]{transform:none;color:var(--comp-c,var(--primary))}
.lvl-exp:focus-visible{outline:2px solid var(--comp-c,var(--primary));outline-offset:2px;border-radius:var(--r-card, 14px)}

/* ── el riel de progreso, entre las insignias ──────────────────────
   Tramos dibujados con pseudos de `.lvl-fila` anclados a `.lvl-card`
   (el ::before de la tarjeta ya lo usa la marca de "estás acá").
   `--rail-x` es el centro medido de la insignia. */
.cop-partidos.con-rail{position:relative}
/* ⚠ ACÁ NO VA LÍNEA DIVISORIA: lo que separa una división de la
   siguiente es el RIEL que cruza las insignias, y una raya encima sería
   decir dos veces lo mismo. Se apagaba con `border-bottom:0`; desde el
   22/08 la línea del componente es un `::after`, así que hay que apagar
   LAS DOS o la escalera se llena de rayas que nadie pidió. */
.cop-partidos.con-rail > .lvl-card{border-bottom:0}
.cop-partidos.con-rail > .lvl-card::after{display:none}
.cop-partidos.con-rail > .lvl-card .lvl-fila::before,
.cop-partidos.con-rail > .lvl-card .lvl-fila::after{
  content:"";position:absolute;width:6px;
  left:calc(var(--cop-pt-aire,22px) + var(--rail-x,27px));
  transform:translateX(-50%);background:var(--card-border);z-index:0;
}
.cop-partidos.con-rail > .lvl-card .lvl-fila::before{top:0;height:calc(50% - 37px)}
.cop-partidos.con-rail > .lvl-card .lvl-fila::after{bottom:0;height:calc(50% - 37px)}
.cop-partidos.con-rail > .lvl-card.rail-arriba-lleno .lvl-fila::before,
.cop-partidos.con-rail > .lvl-card.rail-abajo-lleno .lvl-fila::after{
  background:linear-gradient(180deg,var(--primary),var(--secondary));
}
/* ⚠ `-of-type` y no `-child`: la lista intercala los bloques de niveles
   (`<div>`) entre las filas (`<article>`), así que "el último hijo" ya
   no es "la última división" */
.cop-partidos.con-rail > .lvl-card:first-of-type .lvl-fila::before,
.cop-partidos.con-rail > .lvl-card:last-of-type .lvl-fila::after{display:none}
/* la insignia va POR ENCIMA del riel, y su ancho es 2 × --rail-x para
   que su centro caiga donde pasa el riel por construcción */
.cop-partidos.con-rail > .lvl-card .lvl-insignia{
  position:relative;z-index:1;width:calc(var(--rail-x,27px) * 2);
}

/* ── el bloque de los 3 niveles ─────────────────────────────────────
   Va como HERMANO de la fila y ARRIBA de ella: los niveles de una
   división están por encima de su piso, no por debajo. Alto total = el
   de UNA fila (`--cop-pt-alto`), repartido en tres. */
.lvl-niveles{position:relative}
.lvl-niveles[hidden]{display:none}      /* flex/relative no le ganan a `hidden` */
.lvl-nivel{
  --lvl-gap:.85rem;
  position:relative;box-sizing:border-box;
  display:flex;align-items:center;gap:var(--lvl-gap);
  min-height:calc(var(--cop-pt-alto,154px) / 3);
  padding:0 var(--cop-pt-aire,22px);
}
.lvl-nivel-hueco{flex:0 0 auto;width:calc(var(--rail-x,27px) * 2)}
.lvl-nivel-txt{
  flex:1 1 auto;min-width:0;
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-md, .88rem);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lvl-nivel-tro{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-sm, .8rem);
  color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.lvl-nivel > .lvl-state{flex:0 0 auto}
/* la línea divisoria arranca donde arranca el TEXTO, o sea bien a la
   derecha del riel, y va solo ENTRE niveles */
.lvl-nivel + .lvl-nivel::before{
  content:"";position:absolute;top:0;height:1px;
  left:calc(var(--cop-pt-aire,22px) + var(--rail-x,27px) * 2 + var(--lvl-gap,.85rem));
  right:var(--cop-pt-aire,22px);
  background:var(--card-border);
}
/* el riel cruza el bloque entero para que no quede cortado al abrirlo */
.cop-partidos.con-rail > .lvl-niveles::after{
  content:"";position:absolute;top:0;bottom:0;width:6px;
  left:calc(var(--cop-pt-aire,22px) + var(--rail-x,27px));
  transform:translateX(-50%);background:var(--card-border);z-index:0;
}
.cop-partidos.con-rail > .lvl-niveles.rail-lleno::after{
  background:linear-gradient(180deg,var(--primary),var(--secondary));
}
/* arriba de la División 1 no hay más escalera: no se dibuja riel */
.cop-partidos.con-rail > .lvl-niveles:first-of-type::after{display:none}

/* ── EL BOTÓN DE RECLAMAR, DENTRO DE LA FILA DEL NIVEL ──────────────
   ⚠ ES LO ÚNICO QUE ESTA PANTALLA AGREGA AL DISEÑO DE RIVALS, y no es
   estética: es la única puerta a `reclamar_nivel()` de la fase 11. Va
   en el lugar del chip de estado porque contestan la MISMA pregunta —
   "¿qué pasa con este nivel?"— y dos cosas diciendo lo mismo, una al
   lado de la otra, es peor que una. Cuando hay algo que reclamar manda
   el botón; si no, manda el chip.
   Es el botón del sistema (var(--s2, #161b25) · borde 1.5 · Inter 600 · radio 14). */
.lvl-claim{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-sm, .8rem);
  color:#fff;background:var(--s2, #161b25);
  border:1.5px solid var(--accent-green,#7cfc00);border-radius:14px;
  padding:var(--gap-xs, .3rem) .7rem;white-space:nowrap;cursor:pointer;
  transition:background .2s;
}
.lvl-claim:hover{background:#1d2118}
.lvl-claim:disabled{opacity:.45;cursor:not-allowed;border-color:var(--card-border)}

/* ── la pastilla de trofeos sobre el riel ──────────────────────────
   Se para en el HUECO que sigue a tu división, no en la posición
   proporcional: acá el riel pasa POR DENTRO de las insignias y una
   pastilla continua les caería encima. La posición dice en qué
   división estás; el texto, cuántos trofeos tenés. */
.rw-railnum{
  position:absolute;z-index:3;
  left:calc(var(--cop-pt-aire,22px) + var(--rail-x,27px));
  transform:translate(-50%,-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:.05rem;
  /* ⚠⚠ SIN BORDE Y SIN FONDO (Franco, 30/08/2026): *«la chip con el
     trofeo y la cantidad no tiene que tener ni ese borde celeste, ni
     tiene que tener atrás otro color de fondo; tiene que estar apoyada
     sobre la página de fondo, encima del riel»*.
     El `#0b0d11` era un negro azulado propio —ni siquiera el fondo de
     la app— y el borde celeste la hacía leer como un botón que se puede
     tocar, cuando no hace nada: dice en qué división estás y nada más.
     ⚠ EL `padding` SE QUEDA, y no es un resto: sin caja que lo
     justifique sigue haciendo falta para que el número no toque el
     riel que pasa por detrás.
     ⚠ Y LA SOMBRA DEL TEXTO ENTRA EN SU LUGAR: sacado el fondo, el
     número queda sobre el riel y sobre la imagen del banner, y sin
     sombra hay tramos donde no se lee. */
  background:none;border:none;
  padding:.28rem .3rem;white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
  font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-xs, .72rem);color:#fff;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.rw-railnum .rt{font-size:var(--fs-md, .88rem);line-height:1}

@media(max-width:380px){
  .lvl-fila,.lvl-nivel{--lvl-gap:.6rem}
  .cop-partidos.con-rail{--rail-x:24px}
  .lvl-exp{width:22px;margin-right:-8px}
  .lvl-state{padding:.18rem var(--gap-sm, .5rem)}
  .lvl-nivel > .lvl-state{font-size:var(--fs-xs, .72rem);padding:.14rem var(--gap-xs, .3rem)}
  .lvl-nivel-tro{font-size:var(--fs-sm, .8rem)}
  .lvl-claim{font-size:var(--fs-xs, .72rem);padding:.3rem var(--gap-sm, .5rem)}
}
@media(max-width:359px){
  .lvl-insignia .cop-div{--cop-div:62px;height:62px}
}