/* ============================================================
   PREDICTIONS BOARD — grid técnico (rediseño jul 2026, inspirado
   en el mockup BTC ARENA, adaptado a los tokens de BitcoinMinds).
   Sistema de 2 líneas por celda (.l1 dato / .l2 secundario) alineadas.
   Señales: sig-up (alcista) / sig-down (bajista) / sig-flat (lateral).
   ============================================================ */
.board {
    --up: #3dd68c;
    --down: #ea3943;
    --flat: #ffa116;
    --up-dim: rgba(22, 199, 132, .14);
    --down-dim: rgba(234, 57, 67, .14);
    --flat-dim: rgba(255, 161, 22, .14);
    --mut: var(--text-secondary);
    --b-line: rgba(255, 255, 255, .055);
    --b-line2: rgba(255, 255, 255, .10);
    --b-panel: rgba(255, 255, 255, .018);
    /* Azul único del board: bloques de convicción, línea de spot y extremo
       "más cerca" del gradiente de la columna Vs actual. */
    --b-spot: #82a9ff;
    margin: 0 0 8px;
    /* Adaptamos las columnas por ancho del PANEL, no del viewport (en portada hay
       una columna lateral derecha que le resta anchura). */
    container: board / inline-size;
}

/* ── Cabecera de contexto (minúsculas, gris claro) ── */
.board-head { padding: 24px 24px 14px; }
.board-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.board-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.2px; color: var(--text-primary); }
.board-title-date { color: var(--mut); font-weight: 500; white-space: nowrap; font-size: .95rem; }
.board-sub { font-weight: 400; margin-top: 3px; font-size: .9rem; line-height: 1.6; color: var(--mut); }
.board-date { color: var(--text-primary); font-weight: 500; }
.board-live {
    display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--mono); font-size: .72rem; font-weight: 500;
    color: var(--mut); letter-spacing: .3px; white-space: nowrap; padding-top: 5px;
}
.board-live #bsClock { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.board-live-static { color: var(--mut); text-transform: uppercase; }
.live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--up); box-shadow: 0 0 8px var(--up);
    animation: boardpulse 1.9s infinite; flex-shrink: 0;
}
@keyframes boardpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Panel (tarjeta) ── */
.board-panel {

}

/* ── Barra de sesión ── */
.session { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--b-line); padding: 20px 20px 40px; }
.session .stat { margin-left: 40px; flex: 0 0 auto; }
.session .stat:last-child { border-right: none; }
.session .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); font-weight: 500; margin-bottom: 3px; }
.session .v { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.session .v small { font-size: .72rem; font-weight: 500; margin-left: 6px; }
/* El color direccional debe ganar al color base de .session .v (misma especificidad). */
.session .v.sig-up, .session .v .sig-up { color: var(--up); }
.session .v.sig-down, .session .v .sig-down { color: var(--down); }
.session .v.sig-flat, .session .v .sig-flat { color: var(--flat); }

/* ── Rejilla de columnas ── */
.dhead, .drow {
    display: grid;
    grid-template-columns: 26px 190px 80px 150px 1fr 84px 92px;
    align-items: center;
    padding: 20px 30px 20px 50px;
    column-gap: 14px;
}
.dhead {
    border-bottom: 1px solid var(--b-line);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--mut); font-weight: 500;     padding: 10px 60px;
}
.drow { min-height: 58px; border-bottom: 1px solid var(--b-line); transition: background .12s; }
.drow:last-child { border-bottom: none; }
.drow:hover { background: var(--b-panel); }

/* ── Clasificación en vivo ──
   Las filas se reordenan por cercanía al spot en cada tick. El movimiento se anima
   con FLIP desde el JS (transform), y el número parpadea al cambiar de puesto. */
.drows { position: relative; }
.c-pos { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; }
.drow .c-pos { text-align: center; }
.drow:first-child .c-pos .pos-n { color: var(--text-primary); }
.pos-n { display: inline-block; transition: color .3s; }
.pos-n.bump { animation: posbump .6s ease; }
@keyframes posbump {
    0% { transform: scale(1); color: var(--b-spot); }
    35% { transform: scale(1.45); color: var(--b-spot); }
    100% { transform: scale(1); }
}

/* Sistema de 2 líneas alineadas */
.c2 { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.l1 { height: 19px; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .84rem; font-weight: 600; white-space: nowrap; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.l2 { height: 14px; display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--mut); font-family: var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dim { color: var(--mut); opacity: .8; }

/* Modelo — icono centrado verticalmente entre las dos líneas (leve subida) */
.c-model { display: flex; align-items: center; gap: 14px; min-width: 0; }
.c-model .m-txt { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.c-model .l1 { font-family: var(--font); font-size: .9rem; }
.c-model .l2 { font-family: var(--font); }
.m-ico-slot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; background: #181b1d; border-radius: 3px;}
.m-ico { display: inline-block; max-width: 20px; max-height: 20px; fill: currentColor; color: var(--text-primary); }
.m-name { overflow: hidden; text-overflow: ellipsis; }
.ico-bitcoin { width: 16px; height: 16px; }
.ico-gpt { width: 15px; height: 15px; }
.ico-claude { width: 16px; height: 16px; }
.ico-gemini { width: 15px; height: 15px; }
.ico-grok { width: 17px; height: 17px; }
.ico-deepseek { width: 20px; height: 20px; }
.ico-glm { width: 17px; height: 17px; }
.ico-kimi { width: 15px; height: 15px; }

/* Señal */
.chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: .7rem; font-weight: 600; border-radius: 5px; padding: 2px 8px; letter-spacing: .4px; line-height: 1.5; }
.chip::before { font-size: .8em; }
.chip.sig-up { color: var(--up); background: var(--up-dim); }
.chip.sig-down { color: var(--down); background: var(--down-dim); }
.chip.sig-flat { color: var(--flat); background: var(--flat-dim); }
.chip.sig-up::before { content: '▲'; }
.chip.sig-down::before { content: '▼'; }
.chip.sig-flat::before { content: '►'; }

/* Vs actual — distancia del pronóstico al precio en directo. Escala azul→lila
   (el color lo calcula el servidor/JS inline) para no invadir el semáforo direccional. */
.c-dev .dev-abs { font-weight: 600; }
.c-dev .dev-pct { }

/* Pronóstico 24h — señal + objetivo arriba, rango + variación vs apertura abajo,
   en dos columnas alineadas. */
.c-fc {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-content: center;
    column-gap: 10px; row-gap: 3px;
    min-width: 0;
}
.c-fc .l1, .c-fc .l2 { gap: 0; }
.c-fc .fc-range { letter-spacing: -.2px; }

/* Mini-track: eje compartido con apertura, spot, banda de rango y rombo objetivo */
.trackcell { padding: 0 8px; height: 100%; display: flex; align-items: center; }
.track { position: relative; width: 100%; height: 30px; }
.track .base { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--b-line2); }
.band { position: absolute; top: 50%; height: 7px; transform: translateY(-50%); border-radius: 2px; }
.band.sig-up { background: rgba(22, 199, 132, .22); }
.band.sig-down { background: rgba(234, 57, 67, .22); }
.band.sig-flat { background: rgba(255, 161, 22, .22); }
.openline { position: absolute; top: 3px; bottom: 3px; width: 1px; background: var(--mut); opacity: .35; z-index: 1; }
.spotline { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2;
    background: repeating-linear-gradient(to bottom, var(--b-spot) 0 3px, transparent 3px 6px); opacity: .75; }
.target { position: absolute; top: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%) rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2.5px var(--bg-elevated); z-index: 3; }
.drow:hover .target { box-shadow: 0 0 0 2.5px var(--b-panel); }
.target.sig-up { background: var(--up); }
.target.sig-down { background: var(--down); }
.target.sig-flat { background: var(--flat); }
/* Antes de que el JS posicione (board en vivo) ocultamos las marcas sin left. */
.band:not([style]), .target:not([style]), .openline:not([style]), .spotline:not([style]) { display: none; }

/* Cabecera del track: escala + apertura/spot */
.axis { position: relative; height: 100%; padding: 0 14px; text-transform: none; letter-spacing: 0;
    container: axiscol / inline-size; }
.axis .ax-lbl { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--mut); }
.axis .ax-lo { left: 14px; }
.axis .ax-hi { right: 14px; }
.axis .ax-mid { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--mono); color: var(--mut); white-space: nowrap; }
/* Si la columna del track se estrecha, "apertura → spot" se comería las cifras
   de los extremos: se retira antes de que lleguen a tocarse. */
@container axiscol (max-width: 215px) { .axis .ax-mid { display: none; } }

/* Convicción */
.blocks { display: flex; gap: 3px; }
.blk { width: 12px; height: 5px; border-radius: 2px; background: var(--b-line2); }
.blk.on { background: var(--b-spot); }
.conv-str { }

/* Objetivo 7d */
.arr::before { font-size: .8em; margin-right: 2px; }
.arr.sig-up::before { content: '▲'; color: var(--up); }
.arr.sig-down::before { content: '▼'; color: var(--down); }
.arr.sig-flat::before { content: '►'; color: var(--flat); }

/* Colores de señal reutilizables (texto) */
.sig-up { color: var(--up); }
.sig-down { color: var(--down); }
.sig-flat { color: var(--flat); }

/* ── Responsive (por ancho del panel vía container queries) ── */
@container board (max-width:1000px) {
    .dhead, .drow { grid-template-columns: 24px 180px 74px 142px 1fr 78px 88px; padding: 20px; column-gap: 10px; }
    .dhead { padding: 10px 20px; }
}
@container board (max-width:880px) {
    .dhead, .drow { grid-template-columns: 24px 168px 70px 138px 1fr 72px 84px; }
    .m-ico-slot { width: 26px; height: 26px; }
    .c-model { gap: 10px; }
}
@container board (max-width:600px) {
    .board-head { padding: 16px 16px 12px; }
    .dhead { display: none; }
    .drow {
        grid-template-columns: 22px 1fr 1fr;
        grid-auto-rows: auto; gap: 12px 8px; padding: 14px 16px;
        min-height: 0;
    }
    .c-pos { grid-column: 1 / 2; grid-row: 1; align-self: center; }
    .c-model { grid-column: 2 / 3; }
    .c-dev { grid-column: 3 / 4; justify-self: end; }
    .c-dev .l1, .c-dev .l2 { justify-content: flex-end; }
    .c-fc { grid-column: 2 / 4; }
    .c-conv { grid-column: 3 / 4; justify-self: end; }
    .c-conv .l1, .c-conv .l2 { justify-content: flex-end; }
    .trackcell { grid-column: 1 / 4; padding: 0; }
    .c-7d { grid-column: 2 / 4; }
    .col7d { display: flex; }
    .session { padding: 16px 16px 20px; row-gap: 16px; }
    .session .stat { min-width: 0; margin-left: 0; flex: 1 1 40%; padding: 0 14px 0 0; }
}