/* Clave de color de las capas (partida en PC y en movil, y Academia).
   Minimalista a proposito: titulo pequeno con el icono de la capa, una barra fina,
   los valores debajo y el credito de la fuente en letra minima. Mide unos 80 px;
   la anterior pasaba de 180 y obligaba al carril de capas a desplazarse.
   Va en el mismo vidrio oscuro que el carril. */
.eo-legend { box-sizing: border-box; position: relative; width: 100%; flex: none; padding: 8px 11px 8px; border: 1.5px solid rgba(247, 240, 223, 0.14); border-radius: 14px; color: var(--color-cream); background: var(--glass-hud); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); font: 600 10.5px/1.3 var(--font-body); }
.eo-legend-title { display: flex; align-items: center; gap: 7px; min-height: 20px; font-size: 12px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-legend-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 6px; }
.eo-legend-icon svg { width: 11px; height: 11px; }
.eo-legend-scale { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.eo-legend-bar { height: 7px; flex: none; border: 1px solid rgba(247, 240, 223, 0.24); border-radius: 99px; }
.eo-legend-ticks { position: relative; height: 13px; font: 600 9.5px/1.25 var(--font-mono); font-variant-numeric: tabular-nums; color: rgba(247, 240, 223, 0.86); }
.eo-legend-ticks > span { position: absolute; top: 1px; white-space: nowrap; }
/* Los extremos con palabras solo salen si no hay numeros en la escala. */
.eo-legend-extremes { display: flex; justify-content: space-between; gap: 8px; color: var(--color-glass-muted); font-size: 9.5px; }
.eo-legend-ticks + .eo-legend-extremes { display: none; }
.eo-legend-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 9.5px; }
.eo-legend-classes > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eo-legend-classes i { height: 7px; border: 1px solid rgba(247, 240, 223, 0.24); border-radius: 99px; }
.eo-legend-classes b { font: 600 9.5px/1.2 var(--font-mono); }
.eo-legend-classes b:empty { display: none; }
.eo-legend-classes span { line-height: 1.15; color: var(--color-glass-muted); }
.eo-legend-no-scale { margin: 0; color: var(--color-glass-muted); font-size: 11px; font-weight: 600; }
/* Credito de la fuente de la capa activa: lo exige la licencia. Letra minima. */
.eo-legend-credit { margin: 5px 0 0; color: rgba(247, 240, 223, 0.55); font: 500 8.5px/1.3 var(--font-mono); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }