/* =========================================================
   Mini app · ¿Y si el futbol se jugara con Elo?
   (/la-lente/liga-elo/ y /en/la-lente/elo-league/)
   Va encima de remontadas.css: solo lo que esta pagina agrega.
========================================================= */
.le-tabla .sube { color: var(--purple-deep); font-weight: 600; }
.le-tabla .baja { color: var(--burgundy); font-weight: 600; }
.le-tabla .igual { color: var(--ink-faint); }
/* Las zonas: una linea debajo del 4.º y otra encima del primero de los 3 ultimos */
.le-tabla tbody tr.z-arriba td { border-bottom: 2px solid var(--purple); }
.le-tabla tbody tr.z-abajo td { border-top: 2px solid var(--burgundy); }

.le-curva { display: block; width: 100%; height: 150px; margin: 6px 0 4px; }
.le-curva .linea { fill: none; stroke: var(--purple); stroke-width: 2; vector-effect: non-scaling-stroke; }
.le-curva .base { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.le-ejes { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px;
           letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 14px; }
.le-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.le-cols h4 { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 4px; }
.rm-detalle .le-cols li { grid-template-columns: 1fr auto; }
.le-mov { font-family: var(--font-display); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.le-mov.mas { color: var(--purple-deep); }
.le-mov.menos { color: var(--burgundy); }

@media (max-width: 760px) {
  .le-cols { grid-template-columns: 1fr; }
  .le-tabla th:nth-child(6), .le-tabla td:nth-child(6) { display: none; }
}
.rm-detalle .le-cols li .res { grid-column: 1 / -1; }
.rm-detalle .le-cols li .le-mov { text-align: right; }

/* La ayuda de cada control: una linea y un "¿Que es esto?" desplegable, bajo los botones */
.rm-campo .le-ayuda { grid-column: 2; margin: -2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.rm-campo .le-mas { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.rm-checks .le-mas { grid-column: 1; margin-left: 27px; }
.le-mas summary { cursor: pointer; color: var(--purple-deep); font-size: 13px; width: max-content; }
.le-mas summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.le-mas p { margin: 6px 0 0; max-width: 560px; }
.rm-campo.apagado .le-mas { pointer-events: none; }
@media (max-width: 760px) {
  .rm-campo .le-ayuda, .rm-campo .le-mas { grid-column: 1; }
}