/* LEW26 — gráfico de evolución de posiciones por jornada (w29, Ignacio 17/09).
   Solo lo usa Competición > Clasificación; va aparte porque competition.css lo comparten media
   docena de pantallas. Lo pide la pantalla con 'css' => [… 'evolucion'].

   Ni una línea de JavaScript: el realce lo hacen los radios de la leyenda (:checked) y :has().
   Sin :has() el gráfico se ve completo y los <title> de cada punto siguen respondiendo — lo que
   se pierde es apagar el resto, no la información. */

.l26e { --l26e-dim: .13; display: grid; gap: 12px; }

/* ─── Leyenda: también es el mando (en táctil no hay hover) ─────────────────────────────── */
.l26e-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 2px 10px; }
.l26e-chip { display: grid; grid-template-columns: 10px 18px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 30px; padding: 3px 6px; border-radius: var(--l26-radius-sm); font-size: 12px; line-height: 1.2; cursor: pointer; }
.l26e-chip:hover { background: var(--l26-soft); }
.l26e-chip:focus-within { outline: 2px solid var(--l26-s2); outline-offset: 1px; }
/* El radio manda, pero no se ve: el chip entero es la diana y el foco se pinta con :focus-within. */
.l26e-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.l26e-chip__c { width: 10px; height: 10px; border-radius: 3px; background: var(--tc, var(--l26-c6)); }
.l26e-chip img { width: 18px; height: 18px; object-fit: contain; }
.l26e-chip__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--l26-text); }
.l26e-nshort { display: none; }
.l26e-chip b { color: var(--l26-ink); font-weight: 700; }
.l26e-chip em { font-style: normal; font-size: 11px; min-width: 24px; text-align: right; color: var(--l26-muted); }
.l26e-d--up { color: var(--l26-win); }
.l26e-d--down { color: var(--l26-loss); }
.l26e-chip--all { grid-template-columns: 1fr; justify-items: start; font-weight: 700; color: var(--l26-ink); }
.l26e-chip--all span { border: 1px solid var(--l26-line-strong); border-radius: 999px; padding: 3px 12px; }
.l26e-legend:has(.l26e-chip--all input:checked) .l26e-chip--all span { border-color: var(--l26-accent); color: var(--l26-accent); }

/* ─── Gráfico ──────────────────────────────────────────────────────────────────────────── */
/* Nunca por debajo de su tamaño natural: 22 jornadas encogidas a 358 px dejan las etiquetas a
   4 px y las doce filas a 1,6 px de separación. Antes que eso, que se deslice. */
.l26e-plot { overflow-x: auto; overscroll-behavior-x: contain; }
/* Ni encoge ni se hincha: el ancho natural es el suelo y 1,35x el techo. Sin ese techo, la vista
   de una jornada 3 (tres columnas, 204 px) se estiraba a 932 y salía con letras de 45 px. */
.l26e-plot .l26-chart { min-width: var(--l26e-w, 640px); max-width: calc(var(--l26e-w, 640px) * 1.35); margin-inline: auto; }
.l26e-band { fill: var(--l26-soft); }
.l26e-ax { font-size: 10px; fill: var(--l26-muted); }
.l26e-t { --w: 2; --do: 0; transition: opacity .15s ease; }
.l26e-ln { fill: none; stroke: var(--tc, var(--l26-c6)); stroke-width: calc(var(--w) * 1px); stroke-linejoin: round; stroke-linecap: round; }
/* Trazo ancho e invisible: una línea de 2 px es imposible de apuntar con el ratón. */
.l26e-hit { fill: none; stroke: #000; stroke-opacity: 0; stroke-width: 14; pointer-events: stroke; }
/* Puntos: tramos de longitud cero con el extremo redondo. Un <path> por equipo, no 22 círculos. */
.l26e-dots { fill: none; stroke: var(--tc, var(--l26-c6)); stroke-width: 5.2; stroke-linecap: round; opacity: var(--do); }
/* Los círculos que llevan el <title> de cada jornada: invisibles pero sí reciben el ratón. */
.l26e-hot { fill: #000; fill-opacity: 0; }
.l26e-end { font-size: 10px; font-weight: 700; fill: var(--tc, var(--l26-c6)); }
.l26e-endp { font-size: 10px; fill: var(--l26-muted); }

.l26e-hint { font-size: 12px; color: var(--l26-muted); }
.l26e-hint__m { display: none; }

/* ─── Realce ───────────────────────────────────────────────────────────────────────────── */
/* Orden y especificidad: apagar va primero y destacar después, porque empatan a (0,5,0) y decide
   quién está más abajo. Si hay un equipo elegido en la leyenda y el ratón pasa por otra línea se
   quedan los dos encendidos: comparar dos trayectorias es justo lo que se quiere ahí. */
.l26e-legend:has(.l26e-chip--t:hover) ~ .l26e-plot .l26e-t,
.l26e-legend:has(.l26e-chip--t input:checked) ~ .l26e-plot .l26e-t { opacity: var(--l26e-dim); }
.l26e-plot:has(.l26e-t:hover) .l26e-t { opacity: var(--l26e-dim); }

.l26e-legend:has(.l26e-k1:hover) ~ .l26e-plot .l26e-t1,
.l26e-legend:has(.l26e-k1 input:checked) ~ .l26e-plot .l26e-t1 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k2:hover) ~ .l26e-plot .l26e-t2,
.l26e-legend:has(.l26e-k2 input:checked) ~ .l26e-plot .l26e-t2 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k3:hover) ~ .l26e-plot .l26e-t3,
.l26e-legend:has(.l26e-k3 input:checked) ~ .l26e-plot .l26e-t3 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k4:hover) ~ .l26e-plot .l26e-t4,
.l26e-legend:has(.l26e-k4 input:checked) ~ .l26e-plot .l26e-t4 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k5:hover) ~ .l26e-plot .l26e-t5,
.l26e-legend:has(.l26e-k5 input:checked) ~ .l26e-plot .l26e-t5 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k6:hover) ~ .l26e-plot .l26e-t6,
.l26e-legend:has(.l26e-k6 input:checked) ~ .l26e-plot .l26e-t6 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k7:hover) ~ .l26e-plot .l26e-t7,
.l26e-legend:has(.l26e-k7 input:checked) ~ .l26e-plot .l26e-t7 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k8:hover) ~ .l26e-plot .l26e-t8,
.l26e-legend:has(.l26e-k8 input:checked) ~ .l26e-plot .l26e-t8 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k9:hover) ~ .l26e-plot .l26e-t9,
.l26e-legend:has(.l26e-k9 input:checked) ~ .l26e-plot .l26e-t9 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k10:hover) ~ .l26e-plot .l26e-t10,
.l26e-legend:has(.l26e-k10 input:checked) ~ .l26e-plot .l26e-t10 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k11:hover) ~ .l26e-plot .l26e-t11,
.l26e-legend:has(.l26e-k11 input:checked) ~ .l26e-plot .l26e-t11 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k12:hover) ~ .l26e-plot .l26e-t12,
.l26e-legend:has(.l26e-k12 input:checked) ~ .l26e-plot .l26e-t12 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k13:hover) ~ .l26e-plot .l26e-t13,
.l26e-legend:has(.l26e-k13 input:checked) ~ .l26e-plot .l26e-t13 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k14:hover) ~ .l26e-plot .l26e-t14,
.l26e-legend:has(.l26e-k14 input:checked) ~ .l26e-plot .l26e-t14 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k15:hover) ~ .l26e-plot .l26e-t15,
.l26e-legend:has(.l26e-k15 input:checked) ~ .l26e-plot .l26e-t15 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k16:hover) ~ .l26e-plot .l26e-t16,
.l26e-legend:has(.l26e-k16 input:checked) ~ .l26e-plot .l26e-t16 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k17:hover) ~ .l26e-plot .l26e-t17,
.l26e-legend:has(.l26e-k17 input:checked) ~ .l26e-plot .l26e-t17 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k18:hover) ~ .l26e-plot .l26e-t18,
.l26e-legend:has(.l26e-k18 input:checked) ~ .l26e-plot .l26e-t18 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k19:hover) ~ .l26e-plot .l26e-t19,
.l26e-legend:has(.l26e-k19 input:checked) ~ .l26e-plot .l26e-t19 { opacity: 1; --w: 3.4; --do: 1; }
.l26e-legend:has(.l26e-k20:hover) ~ .l26e-plot .l26e-t20,
.l26e-legend:has(.l26e-k20 input:checked) ~ .l26e-plot .l26e-t20 { opacity: 1; --w: 3.4; --do: 1; }

.l26e-plot:has(.l26e-t:hover) .l26e-t:hover { opacity: 1; --w: 3.4; --do: 1; }

/* ─── Móvil ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .l26e-hint__m { display: inline; }
}
@media (max-width: 640px) {
  .l26e-legend { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
  .l26e-chip { min-height: 34px; grid-template-columns: 10px 16px minmax(0, 1fr) auto auto; gap: 6px; }
  .l26e-chip img { width: 16px; height: 16px; }
  .l26e-chip em { min-width: 20px; }
  /* El nombre largo no se quita, se esconde: sigue siendo el nombre accesible del chip. */
  .l26e-nfull { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .l26e-nshort { display: inline; font-weight: 700; }
}