/* ─── Tarjeta de cruce en pantalla (TRACKBET y Viewer) — 2026-09-26 ──────────
   (Carlos, 2026-09-26) La misma tarjeta en los dos programas: estos estilos van
   con tarjeta-cruce.js. El Viewer lleva una copia IGUAL de los dos archivos (el
   simulador avisa si difieren). Salieron de index.html de TRACKBET tal cual, con
   dos cambios para que se vean igual en el Viewer:
     - colores y letras propios de la tarjeta (--crt-*), en vez de los de cada
       programa (el Viewer tiene otra paleta y además modo claro);
     - las reglas generales de TRACKBET que tocaban la tarjeta (tabla fija, letra
       de la primera celda, botones, etiqueta de casa, verde / rojo de los odds)
       van aquí, solo para la tarjeta.
   La tarjeta es siempre oscura, como en TRACKBET. */
:root {
  --crt-bg2:    #141414;
  --crt-bg3:    #1a1a1a;
  --crt-borde:  #2a2a2a;
  --crt-texto:  #e0e0e0;
  --crt-texto2: #888;
  --crt-verde:  #00e676;
  --crt-rojo:   #ff1744;
  --crt-acento: #00e5ff;
  --crt-letra:  'Lexend', 'TBV Lexend', 'Segoe UI', system-ui, sans-serif;
  --crt-fija:   'Consolas', 'JetBrains Mono', monospace;
}

/* (Carlos, 2026-09-27, MANUAL 19) Fondo con el color del tipo: un degradado suave
   desde el pie hacia arriba (15 % abajo, se apaga al 70 % del recorrido) sobre el
   fondo oscuro, y el borde un poco teñido (25 %). Al pasar el mouse sube a 22 % (en
   vez del gris de antes). Como lo tenía el Viewer antes de la sección 16 (desde la
   esquina, 27 %), pero más suave y desde el pie: eligió la "B" del simulador. La
   franja izquierda de 3 px sigue igual. La imagen 🖼 lo dibuja igual. */
.cr-card { background: linear-gradient(to top, color-mix(in srgb, var(--cr-c, #555) 15%, transparent) 0%, transparent 70%), var(--crt-bg2);
           border: 1px solid color-mix(in srgb, var(--cr-c, #555) 25%, var(--crt-borde)); border-left: 3px solid var(--cr-c, #555);
           border-radius: 6px; padding: 10px 12px 9px; font-family: var(--crt-fija); font-size: 11.5px;
           line-height: normal; color: var(--crt-texto); text-align: left;
           transition: border-color .15s, background .15s;
           display: flex; flex-direction: column;   /* (Carlos) la franja del pie se pega abajo del todo */
           position: relative; overflow: clip; isolation: isolate; }   /* (MANUAL 20) el sello se recorta en el borde */
/* (2026-09-27) overflow: CLIP y no hidden: con hidden la tarjeta pasaba a ser una caja
   con desplazamiento propio y, en la lista del Viewer (columna flex de alto fijo),
   las tarjetas se aplastaban hasta caber y la lista dejaba de desplazarse (lo
   encontró la revisión con agentes). clip recorta igual, sin ese efecto. */
/* (Carlos, 2026-09-27, MANUAL 20) Todo el contenido va ENCIMA del sello de la liga */
.cr-card > :not(.cr-sello) { position: relative; z-index: 1; }
.cr-card > .cr-foot { margin-top: auto; }
.cr-card > .cr-tbl { margin-bottom: 9px; }
.cr-card:hover { background: linear-gradient(to top, color-mix(in srgb, var(--cr-c, #555) 22%, transparent) 0%, transparent 70%), #171717;
                 border-color: color-mix(in srgb, var(--cr-c, #555) 40%, var(--crt-borde)); border-left-color: var(--cr-c, #555); }
/* (Carlos, 2026-09-27) Favorita: borde dorado fino (arriba, derecha y abajo; la
   franja izquierda sigue con el color del tipo) y un halo muy suave. Va primera en
   su lista en vez de en un bloque FAVORITOS aparte. */
.cr-card.fav-oro, .cr-card.fav-oro:hover { border-color: rgba(255,215,64,.75); border-left-color: var(--cr-c, #555);
                                           box-shadow: 0 0 0 1px rgba(255,215,64,.18), 0 0 10px rgba(255,215,64,.10); }
.cr-card.pasado { opacity: .6; }
.cr-card.pasado:hover { opacity: 1; }
/* (El puntero de los botones lo pone cada programa: TRACKBET tiene su pack de
   punteros propio y no hay que pisarlo.) */
.cr-card button { font-family: var(--crt-letra); }
/* Verde / rojo de los odds y etiqueta de la casa (en TRACKBET eran reglas generales) */
.cr-card .odd-pos { color: var(--crt-verde) !important; }
.cr-card .odd-neg { color: var(--crt-rojo)  !important; }
.cr-card .tag-casa { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
                     letter-spacing: 1px; background: var(--crt-bg3); border: 1px solid var(--crt-borde); }
.cr-head { display: flex; align-items: center; gap: 8px; font-family: var(--crt-letra); font-size: 11px;
           font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--cr-c, var(--crt-texto)); }
.cr-sq { width: 11px; height: 11px; border-radius: 2px; background: var(--cr-c, #555); flex: none; }
/* (2026-09-24, MANUAL 13.1) Estrella de favorito, pegada a la derecha. Un clic la cambia.
   (Carlos, 2026-09-27, MANUAL 20) Antes iba junto al tagsito de la liga y era gris
   apagada: sobre el sello "era como si no existiera". Ahora va sobre una pastilla
   redonda oscura con borde claro, más grande y más clara (amarilla si es favorita),
   encima del sello. */
.cr-star { flex: none; margin-left: auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
           border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(12,12,12,.8); color: #d6d6d6;
           box-shadow: 0 0 0 3px rgba(12,12,12,.35), 0 1px 4px rgba(0,0,0,.6);
           font-size: 15px; line-height: 1; font-family: var(--crt-letra); padding: 0; transition: color .12s, background .12s, border-color .12s; }
.cr-star:hover { color: #ffd740; background: rgba(40,32,0,.88); border-color: rgba(255,215,64,.6); }
.cr-star[data-fav="1"] { color: #ffd740; border-color: rgba(255,215,64,.55); }
/* (Carlos, 2026-09-27, MANUAL 20) SELLO DE LA LIGA (el "A+B" del simulador): la
   estampilla del A (rectángulo relleno del color de la liga, borde perforado, marco
   fino y letras huecas) puesta como el caucho del B (girada, saliéndose por la
   esquina superior derecha, la palabra entera antes de la estrella y creciendo
   hacia la izquierda si el nombre es largo). Reemplaza al tagsito de la liga.
   - Es una IMAGEN (img.cr-sello) que dibuja selloDibujo() de tarjeta-cruce.js, una
     vez por liga y color: el relleno del color de la liga aclarado un 15 %, el
     perforado, el marco fino, las letras huecas, la presión (más débil hacia la
     derecha) y la tinta gastada ya vienen en el dibujo. Primero fue CSS con filtros
     SVG en vivo, pero se recalculaban en cada tarjeta en cada repintado y TRACKBET
     se trababa: una imagen fija no cuesta nada.
   - Aquí solo se pone: pegada a la esquina superior derecha, con su lado derecho
     8 px fuera de la tarjeta y su centro 16 px bajo el borde de arriba (top -8),
     girada -16° sobre ese centro, recortada por la tarjeta, por DEBAJO de todo
     (z-index 0), sin mouse, y como marca de agua (27 %). Ancho y alto los pone
     colorear() (width / height de la imagen, según el largo del nombre).
   - La imagen 🖼 pega el mismo dibujo con los mismos números (imagen-cruce.js). */
.cr-card > .cr-sello { position: absolute; top: -8px; right: -8px; z-index: 0; pointer-events: none; user-select: none;
  transform: rotate(-16deg); transform-origin: 100% 50%; opacity: .27; max-width: none; }
/* Sin dibujo todavía (sin src): no se ve el icono de imagen rota */
.cr-card > .cr-sello:not([src]) { visibility: hidden; }
/* Cinta de estado en vivo de un favorito, debajo de la franja del pie:
   ACTIVO (verde) / TERMINÓ hace… · motivo (gris) / REVIVIÓ hace… (morado). */
.cr-card.fav > .cr-foot { margin-bottom: 0; border-radius: 0; }
.cr-cinta { margin: 0 -12px -9px; padding: 5px 12px; border-radius: 0 0 5px 5px; font-family: var(--crt-letra); font-size: 10.5px;
            font-weight: 600; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden;
            border-top: 1px solid var(--crt-borde); color: var(--ci-c, var(--crt-texto2)); background: color-mix(in srgb, var(--ci-c, #888) 12%, transparent); }
.cr-cinta .mot { font-weight: 400; color: var(--crt-texto2); font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.cr-cinta.activo { --ci-c: #00e676; }
.cr-cinta.fin    { --ci-c: #888; }
.cr-cinta.revive { --ci-c: #b57bee; }
.cr-jug { font-family: var(--crt-letra); font-size: 14px; font-weight: 600; margin: 7px 0 3px; color: var(--crt-texto);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-jug .eq { color: var(--crt-texto2); font-weight: 500; }
.cr-ca { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.cr-ca .lado { font-family: var(--crt-letra); font-weight: 700; letter-spacing: .5px; }
.cr-ca .odd { font-weight: 700; }
/* (Carlos, 2026-09-27, MANUAL 18) Fila de la cuota JUGADA, debajo de la viva: igual
   que ella, pegada un poco más arriba, y con la etiqueta verde JUGADO / PLAYED */
.cr-ca.jugada { margin-top: -3px; }
.cr-card .tag-jug { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
                    letter-spacing: 1px; background: #28cc95; border: 1px solid #28cc95; color: rgba(0,0,0,0.85); }
/* Tabla: columnas repartidas en partes iguales (table-layout fixed, como la regla
   general de TRACKBET) y celdas en letra fija; la primera celda de cada fila en
   Lexend (ACCUM, OBP, ✔), salvo la de sigla y línea (c1, más abajo). */
.cr-tbl { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; border-top: 1px solid var(--crt-borde); }
.cr-tbl tr { border-bottom: 1px solid #1e1e1e; }   /* raya fina entre filas (en TRACKBET venía de la regla general de tablas) */
.cr-tbl th { color: var(--crt-texto2); font-weight: 600; font-size: 9.5px; letter-spacing: .6px; text-align: right;
             padding: 5px 6px 3px; border-bottom: 1px solid #1e1e1e; }
.cr-tbl th.l, .cr-tbl td.l { text-align: left; }
.cr-tbl td { padding: 3px 6px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             color: var(--crt-texto); font-family: var(--crt-fija); }
.cr-tbl td:first-child { font-family: var(--crt-letra); }
.cr-tbl td.dim { color: var(--crt-texto2); }
/* Nivel con liquidez individual ≥ 1000: fondo sutil, sin manito ni marcas (pedido de Carlos) */
.cr-tbl tr.big td { background: rgba(255,255,255,.055); }
.cr-tbl tr.big td:first-child { border-radius: 3px 0 0 3px; }
.cr-tbl tr.big td:last-child  { border-radius: 0 3px 3px 0; }
.cr-tbl tr.acum td { color: #b57bee; font-weight: 700; border-top: 1px dashed #2a2a2a; padding-top: 5px; }
.cr-tbl tr.gap td { padding: 0; height: 7px; }
/* (Carlos, 2026-09-26) Separación entre las guías (Kalshi y BOL) y OBP: raya
   gruesa gris, más clara que las finas, con un poco más de aire arriba. Con las
   rayas juntas de la tabla, la más gruesa es la que se ve. En Telegram es la ▬. */
.cr-tbl tr.gap.fin-guias td { height: 10px; border-bottom: 2px solid #4a4a4a; }
.cr-tbl tr.info td { color: var(--crt-texto2); border-top: 1px solid #1e1e1e; padding-top: 5px; }
/* (2026-09-26, MANUAL 16.2) Otro lado con varios niveles: la raya solo arriba del
   primero; su ACCUM en gris (es información, no el cruce). OBP debajo. */
.cr-tbl tr.info.cont td { border-top: none; padding-top: 3px; }
.cr-tbl tr.acum.otro td { color: var(--crt-texto2); font-weight: 600; }
/* (Carlos, 2026-09-26) Títulos de las dos partes de la tabla: GUIDE PAGES (las
   guías, arriba) y OTHER BET PAGES (antes "OBP"). Cada uno con un fondo de color
   con transparencia (llama la atención, pero no tanto) y su texto del mismo tono:
   azul para las guías y naranja para las otras casas. */
.cr-tbl tr.tit-pag td { font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-align: left;
                        padding: 4px 8px 3px; border-radius: 3px; }
.cr-tbl tr.tit-pag.guias td { color: #8ab4ff; background: rgba(68,138,255,.15); }
.cr-tbl tr.tit-pag.otras td { color: #ffb74d; background: rgba(255,145,0,.13); }
.cr-tbl tr.otra td { color: var(--crt-texto2); }
/* (2026-09-26, MANUAL 16.2) Parte BOL (guía "lado vs lado contrario"): la fila de
   BOL con OV · UN (raya arriba, como el otro lado). */
.cr-tbl tr.bol td { border-top: 1px solid #1e1e1e; padding-top: 5px; }
/* (Carlos, 2026-09-26) Con quién cruza, siempre abajo en cada parte: FONDO VERDE
   suave (primero fue un recuadro y luego un trazo debajo del primer odd). Primero
   fue 0.30 y Carlos lo vio "muy potente"; luego 0.12, "aún muy fuerte"; luego
   0.06, "aún invasivo": quedó en 0.035 para que sea sutil. En Kalshi, el BLOQUE entero del cruce: las filas desde el primer
   nivel hasta el ACCUM de la última casa que cruza, con las filas ACCUM
   (tr.cruce). En BOL y OTHER BET PAGES, la celda del lado contra el que cruzan
   (td.cruce). Los niveles fuertes (≥ $1,000) dentro del bloque, un verde un poco
   más fuerte para que se sigan distinguiendo. Sin esquinas redondeadas dentro
   del bloque, para que se vea de una pieza. */
.cr-tbl tr.cruce td, .cr-tbl td.cruce { background: rgba(0,230,118,.035); }
.cr-tbl tr.cruce.big td { background: rgba(0,230,118,.06); }
.cr-tbl tr.cruce td:first-child, .cr-tbl tr.cruce td:last-child { border-radius: 0; }
/* Sin la raya fina oscura entre filas dentro del bloque (lo cortaba en tiras); las
   rayas punteadas de los ACCUM siguen marcando dónde corta cada casa. */
.cr-tbl tr.cruce { border-bottom: none; }
/* ✔ de las casas que le ganan a BOL o a una casa de OBP: todas en una fila,
   pegadas a la derecha; si no caben, bajan a la siguiente, también a la derecha.
   El ✔ se dibuja con CSS (dos bordes girados): como letra, Edge a veces lo
   pintaba como un emoji gris. */
.cr-tbl tr.gana td { padding-top: 2px; padding-bottom: 5px; }
.cr-tbl .cr-ganan { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 14px; }
.cr-tbl .cr-gana { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cr-tbl .cr-ok { display: inline-block; width: 5px; height: 9px; margin-top: -2px; border: solid #00e676;
                 border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* (2026-09-26, MANUAL 16.2) Tarjeta con varias casas: el ACCUM de cada casa corta
   la tabla donde termina su parte (raya abajo también) y lleva su sigla en color. */
.cr-tbl tr.acum.corte td { border-bottom: 1px dashed #2a2a2a; padding-bottom: 5px; }
.cr-tbl tr.acum .cr-sig { font-weight: 700; }
/* Siglas de casa en su color; si el color es oscuro (el rojo de ROCK), se aclara
   solo para el texto, para que se lea sobre el fondo oscuro. Los colores claros
   no cambian. El color llega en data-cc y lo pone colorear() (tarjeta-cruce.js). */
.cr-tbl .cr-sig[data-cc], .cr-tbl td.sig[data-cc] { color: oklch(from var(--cc) max(l, 0.72) c h); }
/* (Carlos, 2026-09-26) Primera columna: sigla a la izquierda y línea a la derecha,
   cuadradas con espacios. Va en letra fija (como ODD y LIQ IND; la regla de la
   primera celda la pondría en Lexend, que no cuadra) y "pre" para que los espacios
   no se junten. Así todas las líneas quedan en una misma columna, sin raya. Tiene
   que ir DESPUÉS de ".cr-tbl td:first-child" (pesan igual; gana la última). */
.cr-tbl td.c1 { white-space: pre; font-family: var(--crt-fija); }

/* Pie como franja (elegido por Carlos entre tres opciones, 2026-09-22): teñida con
   el color del tipo en todas las zonas, una línea, botones solo con icono.
   (2026-09-25, Carlos) flex-wrap: wrap: solo si no cabe (con zoom, en JUGADOS e
   HISTORIAL), los botones bajan a una segunda línea, pegados a la derecha. */
.cr-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
           margin: 9px -12px -9px; padding: 7px 12px; border-radius: 0 0 5px 5px; gap: 6px 10px;
           border-top: 1px solid color-mix(in srgb, var(--cr-c, #555) 35%, transparent);
           background: color-mix(in srgb, var(--cr-c, #555) 9%, transparent);
           font-family: var(--crt-letra); font-size: 10.5px; color: var(--crt-texto2); }
.cr-when { font-family: var(--crt-fija); white-space: nowrap; color: var(--crt-texto2); }
.cr-estado { white-space: nowrap; font-size: 10px; margin-right: auto; }
.cr-estado.jug { color: var(--cr-c, var(--crt-texto)); font-weight: 600; }
.cr-estado.fin { color: var(--crt-texto2); }
/* Botones del pie (Carlos): cada uno con su color, sutil, y relleno al pasar el mouse */
.cr-acts { display: flex; align-items: center; gap: 5px; margin-left: auto; flex: none; }
.cr-acts .tb-btn, .cr-acts .tb-link { height: 22px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
                                      padding: 0 7px; white-space: nowrap; margin: 0; line-height: 20px; border-radius: 4px;
                                      border: 1px solid var(--bc, var(--crt-borde)); color: var(--bc, var(--crt-texto2));
                                      background: color-mix(in srgb, var(--bc, #444) 8%, transparent); transition: background .12s; }
/* Al pasar el mouse solo se rellena: borde y letra siguen con su color (TRACKBET
   tiene una regla general que los pondría celestes) */
.cr-acts .tb-btn:hover, .cr-acts .tb-link:hover { background: color-mix(in srgb, var(--bc, #444) 22%, transparent);
                                                  border-color: var(--bc, var(--crt-borde)); color: var(--bc, var(--crt-texto2)); }
.cr-acts .tb-link { --bc: #5c9ee0; }
.cr-acts .cr-jugar[data-jugado="1"] { --bc: #ffab40; }
.cr-acts .cr-jugar[data-jugado="0"] { --bc: #b57bee; }
.cr-acts .cr-copy { --bc: #28cc95; }
/* (2026-09-26) 🖼 copiar como imagen. ROSADO (Carlos): antes turquesa, casi igual
   al verde del 📋 de al lado y se confundían. El rosado no lo usa otro botón. */
.cr-acts .cr-img  { --bc: #f06292; }
.cr-acts .cr-evo  { --bc: #5c9ee0; }
.cr-acts .cr-arch { --bc: #5c9ee0; }
.cr-card.cr-flash { background: rgba(40,204,149,.12); border-color: #28cc95; }

/* (Carlos, 2026-09-26) Selector de idioma ES | EN de las tarjetas y del historial
   (idioma.js): pastilla con las dos opciones y un fondo celeste que se desliza a la
   elegida ("lo más bonito y actual"). Colores con transparencia para que quede bien
   en la barra oscura de TRACKBET y en la del Viewer (que también tiene modo claro).
   El puntero lo pone cada programa (TRACKBET tiene su pack propio). */
.tb-idioma { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; flex: none;
             padding: 2px; border-radius: 999px; background: rgba(127,127,127,.13); border: 1px solid rgba(127,127,127,.30);
             font-family: var(--crt-letra); user-select: none; }
.tb-idioma::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px;
                     background: linear-gradient(135deg, #3ee9ff, #00b8d4); box-shadow: 0 1px 8px rgba(0,229,255,.35);
                     transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.tb-idioma[data-lang="en"]::before { transform: translateX(100%); }
.tb-idioma button { position: relative; z-index: 1; margin: 0; padding: 3px 11px; min-width: 34px; border: 0; border-radius: 999px;
                    background: transparent; font: 700 10px/1.3 var(--crt-letra); letter-spacing: .9px; color: rgba(150,150,150,.95);
                    transition: color .2s; }
.tb-idioma button:hover { color: rgba(200,200,200,1); background: transparent; }
.tb-idioma button.on, .tb-idioma button.on:hover { color: #04232b; }