/* ============================================================
   CLASIFICACIÓN — mismo lenguaje visual que el board de la portada.
   Nombre del modelo con flex-grow; nº en negrita; métricas centradas y
   espaciadas; visualizaciones (desvío / predicción-vs-real / carrera) de
   tamaño fijo, pegadas a la derecha, con pistas de fondo sutiles.
   ============================================================ */
.lg { padding: 0; }

.lg-head { padding: 20px 24px 4px; }
.lg-title { font-size: 1.6rem; font-weight: 600; letter-spacing: .2px; color: #f4f4f8; }
.lg-sub { font-size: .9rem; color: #82828f; margin-top: 3px; }
.lg-how { color: var(--text-tertiary); text-decoration: none; white-space: nowrap; }
.lg-how:hover { color: #b7b7c2; }

/* ── Controles: 3 botones separados + toggle al lado ── */
.lg-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 24px 6px; }
.lg-seg { display: inline-flex; gap: 8px; font-family: var(--mono); }
.lg-seg button {
    background: transparent; border: 1px solid #26282b; border-radius: 8px; color: #82828f;
    font-family: inherit; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase;
    padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.lg-seg button:hover { color: #cbcbd6; border-color: #3a3d40; }
.lg-seg button.on { background: rgba(255,255,255,.06); color: #f4f4f8; border-color: #3a3d40; }
.lg-toggle {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
    font-size: .72rem; color: #82828f; letter-spacing: .4px; cursor: pointer;
    text-transform: uppercase; user-select: none;
}
.lg-toggle input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* ── Leyenda ── */
.lg-legend {
    display: flex; flex-wrap: wrap; gap: 14px 16px; padding: 8px 24px;
    font-family: var(--mono); font-size: .7rem; color: #82828f; min-height: 20px;
}
.lg-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend .sw { width: 9px; height: 13px; display: inline-block; shape-rendering: crispEdges; border-radius: 1px; }
.lg-legend .swl { width: 14px; height: 3px; display: inline-block; border-radius: 1px; }

/* ── Filas ── */
.lg-rows { padding: 4px 24px 8px; }
.lg-rows[hidden] { display: none; }
.lg-row, .lg-hrow { display: flex; align-items: center; }
.lg-row { padding: 5px 0; }
.lg-row:hover { background: rgba(255,255,255,.02); }
.lg-hrow { padding: 2px 0 10px; }
/* Vs real: cada fila con su propia rejilla (0-line + fondo verde/rojo) y un hueco
   sutil de 2px entre filas para distinguirlas mejor. */
.lg-rows.pv-mode .lg-row { padding: 1px 0; }
.lg-rows.pv-mode .lg-row:hover { background: transparent; }

/* Nº de orden: negrita y con más aire hacia el nombre. */
.lg-rank { flex: 0 0 auto; min-width: 16px; text-align: right; font-family: var(--mono); font-size: .92rem; font-weight: 700; color: #55565f; margin-right: 16px; }

/* Nombre del modelo: crece y absorbe el espacio sobrante (empuja la viz a la derecha). */
.lg-model { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: #f4f4f8; }
.lg-retired .lg-model { color: #6a6b75; }
.lg-model .m-ico-slot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; }
.lg-model .m-ico { display: inline-block; flex-shrink: 0; max-width: 18px; max-height: 18px; fill: currentColor; }
.lg-model .m-name { font-family: var(--mono); font-size: .92rem; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ico-gpt{width:14px;height:14px}.ico-claude{width:15px;height:15px}.ico-gemini{width:14px;height:14px}
.ico-grok{width:16px;height:16px}.ico-deepseek{width:18px;height:18px}.ico-glm{width:16px;height:16px}.ico-kimi{width:14px;height:14px}

/* Métricas: centradas, mismo tamaño que el nombre, bien separadas. */
.lg-stats { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; margin: 0 26px; font-family: var(--mono); }
.lg-stat { min-width: 42px; text-align: center; font-size: .92rem; font-variant-numeric: tabular-nums; }
.lg-stat.s-score { color: #f4f4f8; font-weight: 700; }
.lg-stat.s-mae, .lg-stat.s-dir { color: #9a9aa6; }
.lg-hrow .lg-rank { color: #55565f; }
.lg-hrow .lg-model { color: #55565f; font-size: .56rem; text-transform: uppercase; letter-spacing: .5px; }
.lg-hrow .lg-stat { color: #55565f; font-size: .56rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }

/* Eje de fechas inteligente (ancho fijo = ancho de la viz). */
.lg-axis { position: relative; height: 12px; flex: 0 0 auto; }
.lg-axis .tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: .58rem; color: #55565f; white-space: nowrap; }
.lg-axis .tick.mon { color: #8a8a90; font-weight: 600; }

.lg-viz { flex: 0 0 auto; line-height: 0; }

/* Visualización 1 — Desvío: barras con pista/sombra de fondo muy sutil. */
.dv { display: flex; align-items: flex-end; gap: 6px; height: 30px; }
.dv-cell { width: 15px; flex: 0 0 auto; height: 100%; display: flex; align-items: flex-end; justify-content: center; background: rgba(255,255,255,.022); border-radius: 3px; overflow: hidden; }
.dv-bar { width: 100%; border-radius: 2px 2px 0 0; }

/* Visualización 2 — Predicción vs real: gráfica DUMBBELL sobre una rejilla técnica
   de 2 niveles CONTINUA en toda la tabla (las filas van pegadas). Rejilla menor de
   8px (sutil, estética) + rejilla mayor cada 32px que divide cada día; la línea del
   0 (positivo/negativo) es la horizontal central, en un color ligeramente distinto.
   Punto real = azul; punto de predicción + línea = verde/ámbar/rojo por acierto. */
.dumb {
    position: relative; width: 100%; height: 48px;
    background-image:
        linear-gradient(rgba(150,168,200,.22), rgba(150,168,200,.22)),        /* línea del 0 (centro), azulada */
        repeating-linear-gradient(to right, var(--bg-primary) 0 2px, transparent 2px 32px),   /* separación de días = hueco de fondo (2px) */
        repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(to right, rgba(255,255,255,.02) 0 1px, transparent 1px 8px),
        linear-gradient(to bottom, rgba(22,199,132,.08) 0 50%, rgba(234,57,67,.08) 50% 100%);  /* verde arriba / rojo abajo */
    background-size: 100% 1px, auto, auto, auto, 100% 100%;
    background-position: 0 50%, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
}
.dumb-svg { display: block; position: relative; }

/* Tooltip compartido. */
.lg-tip {
    position: fixed; z-index: 60; background: #111214; border: 1px solid #26282b;
    border-radius: 6px; padding: 6px 9px; font-family: var(--mono); font-size: .7rem;
    color: #cbcbd6; pointer-events: none; white-space: nowrap; opacity: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: opacity .1s;
}
.lg-tip b { color: #f4f4f8; font-weight: 600; }

/* ── Gráfico "carrera" ── */
.lg-chart-wrap { padding: 12px 24px 8px; position: relative; height: 380px; }
.lg-chart-wrap[hidden] { display: none; }

.lg-empty { padding: 40px 24px; text-align: center; color: var(--text-tertiary); font-family: var(--mono); }
.lg-note { padding: 6px 24px 26px; font-size: .78rem; line-height: 1.5; color: #82828f; max-width: 680px; }
.lg-note b { color: #b7b7c2; font-weight: 600; }

@media (max-width: 720px) {
    .lg-head, .lg-controls, .lg-legend, .lg-rows, .lg-chart-wrap, .lg-note { padding-left: 16px; padding-right: 16px; }
    .lg-model .m-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
    .lg-stats { gap: 12px; margin: 0 12px; }
    .lg-stat.s-mae, .lg-stat.s-dir { display: none; }   /* móvil: solo SCORE */
    .lg-chart-wrap { height: 300px; }
    .lg-seg button { padding: 7px 10px; }
}