/* ─── Vista COMPACTA de PASADOS / JUGADOS / HISTORIAL (Carlos, 2026-10-23, MANUAL 45 B) ──────────
   Va con fila-compacta.js. Copia IGUAL en trackbet/, trackbet-viewer/ y trackbet-web/ (el simulador avisa si difieren).
   Siempre oscura, como la tarjeta (tarjeta-cruce.css): usa sus mismas variables --crt-*. */

/* La lista deja de ser cuadrícula (TRACKBET .cr-grid, web-app de PC .cards-container) y pasa a una columna de filas */
.cf-lista { display: flex !important; flex-direction: column; gap: 3px; align-content: stretch; }

.cf-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 6px 10px 6px 8px; min-height: 30px;
           border: 1px solid color-mix(in srgb, var(--cf-c, #555) 22%, var(--crt-borde, #2a2a2a)); border-left: 3px solid var(--cf-c, #555);
           border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--cf-c, #555) 10%, transparent), transparent 45%), var(--crt-bg2, #141414);
           font-family: var(--crt-letra, 'Lexend', sans-serif); font-size: 11.5px; color: var(--crt-texto, #e0e0e0); cursor: pointer; user-select: none;
           transition: background .12s, border-color .12s; }
.cf-fila:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--cf-c, #555) 18%, transparent), transparent 45%), #181818;
                 border-color: color-mix(in srgb, var(--cf-c, #555) 40%, var(--crt-borde, #2a2a2a)); border-left-color: var(--cf-c, #555); }
.cf-fila.abierta { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cf-c, #555) 22%, transparent), transparent 45%), #191919; }
.cf-fila.pasado { opacity: .72; }
.cf-fila.pasado:hover, .cf-fila.pasado.abierta { opacity: 1; }
.cf-fila:focus-visible { outline: 1px solid var(--crt-acento, #00e5ff); outline-offset: 1px; }

/* Los números en letra fija (regla del proyecto: texto Lexend, números mono) */
.cf-flecha { width: 12px; color: var(--crt-texto2, #888); font-size: 11px; flex: none; }
.cf-hora   { font-family: var(--crt-fija, Consolas, monospace); font-size: 10.5px; color: var(--crt-texto2, #888); min-width: 58px; flex: none; }
.cf-liga   { font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--cf-lc, #9a9a9a); min-width: 54px; flex: none; }
.cf-nom    { font-weight: 700; letter-spacing: .3px; text-transform: uppercase; min-width: 150px; }
.cf-nom small { font-weight: 500; color: var(--crt-texto2, #888); text-transform: none; font-size: 10px; margin-left: 2px; }
.cf-tipo   { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--cf-c, #aaa); min-width: 60px; }
.cf-jug    { font-family: var(--crt-fija, Consolas, monospace); font-size: 11px; font-weight: 700; min-width: 86px; }
.cf-casas  { display: inline-flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.cf-casa   { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
             color: var(--cf-cc, #ccc); background: var(--crt-bg3, #1a1a1a); border: 1px solid color-mix(in srgb, var(--cf-cc, #888) 55%, transparent); }
.cf-odd    { font-family: var(--crt-fija, Consolas, monospace); font-size: 11px; font-weight: 700; margin-right: 4px; }
.cf-mas    { font-family: var(--crt-fija, Consolas, monospace); font-size: 10px; color: var(--crt-texto2, #888); }
.cf-est    { margin-left: auto; font-size: 10.5px; color: var(--crt-texto2, #888); white-space: nowrap; }
.cf-est.jug { color: #ffab40; }
.cf-est b  { font-family: var(--crt-fija, Consolas, monospace); font-weight: 700; }
.cf-fav    { color: #ffd740; font-size: 12px; }
.cf-fila .odd-pos { color: var(--crt-verde, #00e676); }
.cf-fila .odd-neg { color: var(--crt-rojo, #ff1744); }

/* La tarjeta completa debajo de la fila abierta: pegada a la fila, metida un poco, y no de lado a lado en la PC */
.cf-tarjeta { margin: 0 0 6px 14px; max-width: 540px; }
.cf-tarjeta > .cr-card { border-top-left-radius: 0; }

/* HISTORIAL por días: el separador de siempre (historial-fechas.css) con la flecha a la derecha; cerrado = sin sus filas */
.cf-lista .hf-sep.cf-dia { cursor: pointer; user-select: none; }
.cf-lista .hf-sep.cf-dia .cf-flecha { order: 5; width: auto; margin-left: 6px; color: var(--hf-azul, #5c9ee0); }
.cf-lista .hf-sep.cf-dia.cf-cerrado { opacity: .8; }
.cf-oculta { display: none !important; }

/* Pantalla angosta (teléfono, Viewer estrecho): el estado baja a su propia línea y los mínimos se sueltan */
@media (max-width: 560px) {
  .cf-fila { gap: 2px 8px; }
  .cf-nom, .cf-tipo, .cf-jug, .cf-liga { min-width: 0; }
  .cf-est { margin-left: 22px; flex-basis: 100%; white-space: normal; }
  .cf-tarjeta { margin-left: 0; max-width: none; }
}