/* ============================================================
   HISTÓRICO — tabla de días con el mismo lenguaje visual que el
   board: mono, mayúsculas, colores dinámicos por acierto.
   La 1ª columna agrupa por mes con una etiqueta y una guía vertical.
   ============================================================ */
.hs { padding: 0; }

.hs-head { padding: 20px 24px 4px; }
.hs-title { font-size: 1.7rem; font-weight: 800; letter-spacing: .2px; color: #f4f4f8; text-transform: uppercase; }
.hs-sub { font-size: .9rem; color: #82828f; margin-top: 3px; }

.hs-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 24px 28px; }

/* table-layout fijo: las columnas de modelos reparten a partes iguales el
   espacio sobrante, así la tabla ocupa SIEMPRE el 100% del ancho. */
.hs-tbl {
    width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
    font-family: var(--mono); text-transform: uppercase;
}

/* ── Cabecera ── */
.hs-tbl thead th {
    padding: 0 8px 10px; font-size: .56rem; font-weight: 500; letter-spacing: .6px;
    color: #55565f; text-align: center; vertical-align: bottom; white-space: nowrap;
}
.hs-tbl thead th.h-day, .hs-tbl thead th.h-real { text-align: left; padding-left: 10px; }
/* Icono del modelo en la cabecera: mismo mecanismo y tamaños que el board. */
.hs-ico-slot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.hs-ico { display: inline-block; max-width: 18px; max-height: 18px; fill: currentColor; color: #b7b7c2; }
.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}.ico-px-more{width:16px;height:16px}

/* ── Filas ── */
.hs-tbl tbody tr { transition: background .15s; cursor: pointer; }
.hs-tbl tbody tr:hover { background: rgba(255,255,255,.03); }
.hs-tbl tbody td {
    padding: 7px 8px; font-size: .84rem; text-align: center; white-space: nowrap;
    vertical-align: middle; font-variant-numeric: tabular-nums;
    color: var(--text-secondary); border-bottom: 1px solid rgba(27,28,29,.55);
}

/* ── Columna del día, con canalón de mes ── */
.hs-tbl td.d-day { padding: 0; text-align: left; }
.d-in { display: flex; align-items: stretch; min-height: 30px; }
/* Canalón: la etiqueta del mes al empezar el grupo y una guía vertical debajo
   que recorre visualmente los días de ese mes. */
.d-gutter { width: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; position: relative; }
.d-mo {
    font-size: .58rem; font-weight: 700; letter-spacing: 1px; color: var(--accent);
}
/* La guía se pinta como FONDO de la celda (que sí ocupa toda la altura de la
   fila), así encadena sin cortes de una fila a la siguiente. El primer día de
   cada mes no la lleva: ahí va la etiqueta y la guía arranca justo debajo,
   dando el efecto de "rama" que agrupa los días de ese mes. */
.hs-tbl td.d-day.has-line {
    background-image: linear-gradient(rgba(255,255,255,.11), rgba(255,255,255,.11));
    background-size: 1px 100%;
    background-position: 21px 0;      /* centro del canalón (42px) */
    background-repeat: no-repeat;
}
.d-num { display: flex; align-items: center; padding-left: 12px; font-size: .84rem; font-weight: 600; color: #cbcbd6; }
.hs-tbl tbody tr:hover .d-num { color: #f4f4f8; }

/* ── Movimiento real de BTC ── */
.hs-tbl td.d-real { text-align: left; padding-left: 10px; }
.d-word { font-weight: 700; letter-spacing: .4px; margin-right: 6px; }
.d-pct { color: #9a9aa6; }

/* ── Celdas de pronóstico (color = acierto, igual que el board) ── */
.c-green { color: #16c784 !important; }
.c-amber { color: #ffa116 !important; }
.c-red   { color: #ea3943 !important; }
.c-gray  { color: #3a3b42 !important; }
.dir-sube { color: var(--green); }
.dir-baja { color: var(--red); }
.dir-lateral { color: var(--blue); }

/* ── Columna "más modelos" ── */
.d-old-yes { color: #b7b7c2; }
.d-old-no  { color: #3a3b42; }

/* Enlace real (accesible) dentro de la celda del día. */
.d-link { color: inherit; text-decoration: none; display: block; }

.hs-empty { padding: 40px 24px; text-align: center; color: var(--text-tertiary); font-family: var(--mono); }

@media (max-width: 860px) {
    .hs-head, .hs-scroll { padding-left: 16px; padding-right: 16px; }
    .hs-tbl { table-layout: auto; min-width: 720px; }   /* en móvil, scroll horizontal */
    .hs-tbl tbody td { font-size: .76rem; padding: 6px 6px; }
    .d-gutter { width: 34px; flex-basis: 34px; }
    .hs-tbl td.d-day.has-line { background-position: 17px 0; }
    .d-num { padding-left: 8px; }
}