/* ─── TRACKBET Viewer — historia del cruce (📈): estilos compartidos ──────────
   (2026-09-25, pedido de Carlos) Salieron de sidepanel-bpv.css para que los usen
   el banner del panel lateral y el banner GRANDE sobre la página (banner-bpv.js,
   dentro de una "cápsula" shadow DOM). Por eso las variables van en :root (panel)
   y en :host (cápsula): dentro de la cápsula :root no existe. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root, :host {
  --bg: #f5f5f0;
  --surface: #ffffff;
  --surface-2: #f0efe9;
  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.18);
  --text: #1a1a18;
  --text-2: #5a5a55;
  --text-3: #9a9a95;
  --accent: #1a6fd4;
  --accent-bg: #e8f1fb;
  --success: #1a7a4a;
  --success-bg: #e6f5ee;
  --warn: #8a5200;
  --warn-bg: #fef3dd;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --star: #e09000;
  --star-border: #d4940a;
  --radius: 8px;
  --radius-card: 12px;
}

@media (prefers-color-scheme: dark) {
  :root, :host {
    --bg: #1a1a18;
    --surface: #252523;
    --surface-2: #2e2e2b;
    --border: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.20);
    --text: #f0efe9;
    --text-2: #a8a8a0;
    --text-3: #686860;
    --accent: #5a9fe0;
    --accent-bg: #0d2a4a;
    --success: #4aae7a;
    --success-bg: #0a2a1a;
    --warn: #e0a030;
    --warn-bg: #2a1a00;
    --danger: #e05545;
    --danger-bg: #2a0a08;
    --star: #e0a030;
    --star-border: #c08820;
  }
}

/* (2026-09-25, Carlos) Lexend en la historia y los tooltips, como en los avisos
   del proyecto. El archivo va dentro de la extensión (fonts/), porque muchas
   páginas bloquean fuentes de Google. En el panel la carga esta regla; en el
   banner grande la carga banner-bpv.js (dentro de la cápsula @font-face no sirve).
   Solo trae letras latinas: símbolos como → ▲ los pone la letra de respaldo. */
@font-face { font-family: "TBV Lexend"; src: url("fonts/lexend-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
.evo-box { font-family: "TBV Lexend", "Lexend", "Segoe UI", sans-serif; }
.evo-box { font-variant-numeric: tabular-nums; }   /* horas y montos alineados */

/* (2026-09-25) Raíz del banner grande dentro de la cápsula. El contenedor lleva
   "all: initial" (para que la página no lo toque) y eso le ganaba a :host: la
   letra caía a la del navegador (con serifa) y el texto sin color propio salía
   NEGRO ("UNDER 6.5"). Letra, tamaño y color van aquí, en un elemento de adentro. */
.tbv-raiz { font-family: "TBV Lexend", "Lexend", "Segoe UI", sans-serif; font-size: 13px; line-height: 1.4; color: var(--text); }

/* ── (2026-09-24) Evolución del cruce: banner flotante (MANUAL 9.6) ──────────
   Calcado del de TRACKBET con la paleta de la extensión. El color del tipo
   (--cr-c) tiñe la cabecera; cada punto es una fila: hora, punto en la línea de
   tiempo, etiqueta del evento, chips "viejo → nuevo" y el ACCUM. Un clic en el
   punto despliega la tarjeta tal como estaba en ese momento. */
.evo-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9000;
             align-items: center; justify-content: center; padding: 10px; }
.evo-modal.show { display: flex; }
.evo-box { width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;
           background: var(--surface); border: 0.5px solid var(--border-strong); border-left: 3px solid var(--cr-c, #888);
           border-radius: var(--radius-card); box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; }
/* (Carlos, 2026-09-28, MANUAL 24.1) Cabecera en DOS líneas: arriba el cuadrito, el
   tipo y los botones; abajo el jugador entero ("CHI | ROME ODUNZE"), sin cortarse.
   En el celular y en el panel angosto el jugador salía recortado ("CHI | ROME OD…"). */
.evo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px 8px;
            background: color-mix(in srgb, var(--cr-c, #888) 10%, transparent);
            border-bottom: 0.5px solid color-mix(in srgb, var(--cr-c, #888) 35%, transparent); }
.evo-sq { width: 11px; height: 11px; border-radius: 2px; background: var(--cr-c, #888); flex: none; }
.evo-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-c, var(--text)); white-space: nowrap; }
/* (2026-09-26, MANUAL 17.5) Con 4 botones (📋 🖼 ⛶ ✕) en un panel angosto, un tipo
   largo ("LONGEST COMPLETION") empujaba el ✕ fuera de la caja: ahora el título
   también se achica con "…" (antes no podía achicarse) */
.evo-head .evo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* (2026-09-28, MANUAL 24.1) El jugador va solo en la segunda línea (order 1 = al
   final, ancho completo) y puede partirse en dos renglones si hace falta */
.evo-jug { font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; flex: 1 0 100%; order: 1; white-space: normal; overflow: visible; line-height: 1.25; }
.evo-jug .eq { color: var(--text-2); font-weight: 500; }
.evo-close { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 6px; border: 0.5px solid var(--border-strong);
             background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; font-family: inherit; }
.evo-close:hover { color: var(--text); border-color: var(--text-2); }
.evo-sub { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 11.5px; border-bottom: 0.5px solid var(--border); flex-wrap: wrap; }
.evo-sub .lado { font-weight: 700; letter-spacing: .04em; }
.evo-sub .odd { font-weight: 700; }
.evo-sub .casa, .evo-ca .casa { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px;
                                 border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }
/* (2026-09-25) Pastilla de la casa teñida con su color (fondo suave y borde) */
.evo-sub .casa[style*="--cc"], .evo-ca .casa[style*="--cc"] { background: color-mix(in srgb, var(--cc) 18%, transparent);
                                                             border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
/* (2026-09-25, Carlos: "RCK" / "ROCK" no se leían) En tema oscuro, los textos con
   el color de una casa se aclaran si ese color es oscuro (rojo de Rock sobre
   fondo oscuro). Solo sube la luminosidad hasta un mínimo; los colores claros
   quedan igual. !important porque el color de la casa se pone por código. */
@media (prefers-color-scheme: dark) {
  .evo-sub .casa[style*="--cc"], .evo-ca .casa[style*="--cc"], .evo-chip[style*="--cc"] .k,
  .evo-tbl td[style*="--cc"], .evo-pre .evo-tag[style*="--cc"] { color: oklch(from var(--cc) max(l, 0.72) c h) !important; }
}
.evo-sub .evo-resumen { margin-left: auto; font-size: 10px; color: var(--text-2); white-space: nowrap; }
.evo-list { overflow: auto; padding: 8px 12px 10px; }
.evo-list::-webkit-scrollbar { width: 4px; }
.evo-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.evo-row { display: grid; grid-template-columns: 44px 18px 1fr auto; column-gap: 8px; align-items: start; padding: 5px 4px; position: relative;
           border-radius: 4px; cursor: pointer; }
.evo-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.evo-row .evo-hora { font-size: 10px; color: var(--text-2); padding-top: 2px; white-space: nowrap; }
/* Línea de tiempo: un punto por fila y una raya vertical que los une */
.evo-row .evo-dot { position: relative; height: 100%; min-height: 18px; }
.evo-row .evo-dot::before { content: ''; position: absolute; left: 8px; top: -6px; bottom: -6px; width: 1px; background: var(--border-strong); }
.evo-item:first-of-type .evo-row .evo-dot::before { top: 8px; }
.evo-item:last-of-type  .evo-row .evo-dot::before { bottom: auto; height: 14px; }
.evo-row .evo-dot::after { content: ''; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%;
                           background: var(--ev-c, var(--text-2)); box-shadow: 0 0 0 3px var(--surface); }
.evo-item.open .evo-row .evo-dot::after { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--ev-c, #888) 45%, transparent); }
.evo-row.nace, .evo-item.nace       { --ev-c: #00c96a; }
.evo-row.cambio, .evo-item.cambio   { --ev-c: var(--accent); }
.evo-row.revive, .evo-item.revive   { --ev-c: #9b6fd0; }
.evo-row.termina, .evo-item.termina { --ev-c: #888; }
/* (2026-09-24, MANUAL 13.2) JUGADO (naranja) / DEVUELTO (morado); los JUGADO
   viejos atenuados, solo el último nítido */
.evo-row.jugado, .evo-item.jugado     { --ev-c: var(--warn); }
.evo-row.devuelto, .evo-item.devuelto { --ev-c: #9b6fd0; }
.evo-item.viejo .evo-row { opacity: .45; }
.evo-item.viejo.open .evo-row { opacity: .8; }
/* (2026-09-25, MANUAL 14.2) Bloque plegado "Antes del cruce": los hilos de previos
   en gris apagado; cerrado de entrada, clic en el renglón para abrir */
.evo-pre { margin: 0 0 4px; border: 0.5px dashed var(--border-strong); border-radius: 6px; padding: 0 6px; }
.evo-pre-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-2); padding: 5px 2px;
                user-select: none; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.evo-pre-head:hover { color: var(--text); }
.evo-pre-head .flecha { display: inline-block; transition: transform .12s; }
.evo-pre.open .evo-pre-head .flecha { transform: rotate(90deg); }
.evo-pre-list { display: none; opacity: .72; padding-bottom: 4px; }
.evo-pre.open .evo-pre-list { display: block; }
.evo-row.aparece, .evo-item.aparece       { --ev-c: var(--success); }
.evo-row.previo, .evo-item.previo         { --ev-c: #888; }
.evo-row.desaparece, .evo-item.desaparece { --ev-c: #666; }
.evo-pre .evo-tag[style*="--cc"] { --ev-c: var(--cc); }
.evo-pre .evo-foto { max-width: 300px; }
.evo-row .evo-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 10.5px; }
.evo-tag { font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--ev-c, #888);
           color: var(--ev-c, var(--text-2)); background: color-mix(in srgb, var(--ev-c, #888) 10%, transparent); }
.evo-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 1px 6px; border-radius: 3px;
            background: var(--surface-2); border: 0.5px solid var(--border-strong); color: var(--text); white-space: nowrap; }
/* La pastilla toma el color de su casa (--cc, puesto por código): fondo suave y borde a media intensidad */
.evo-chip[style*="--cc"] { background: color-mix(in srgb, var(--cc) 10%, transparent); border-color: color-mix(in srgb, var(--cc) 45%, transparent); }
.evo-chip .k { font-size: 9px; font-weight: 700; color: var(--cc, var(--text-2)); letter-spacing: .04em; }
.evo-chip .arr { color: var(--text-2); }
.evo-chip .mejor, .evo-chip .in { color: var(--success); }
.evo-chip .peor { color: var(--danger); }
.evo-chip .out { color: var(--danger); text-decoration: line-through; opacity: .8; }
/* (2026-09-26, MANUAL 15.8) Guía "lado contrario" a la que la casa NO le gana en ese momento: apagada */
.evo-chip.info { opacity: .5; }
.evo-motivo { font-size: 10px; color: var(--text-2); font-style: italic; }
.evo-row .evo-acum { font-size: 10px; color: #9b6fd0; font-weight: 700; white-space: nowrap; padding-top: 2px; }
.evo-row.termina .evo-acum { color: var(--text-2); font-weight: 400; }
.evo-sep { text-align: center; font-size: 9.5px; color: var(--text-2); letter-spacing: .05em; padding: 6px 0 2px; }
.evo-empty { padding: 26px 0; text-align: center; color: var(--text-2); font-size: 11.5px; }
/* Tarjeta de ese momento (se despliega con un clic; el último punto sale abierto) */
.evo-foto { display: none; margin: 2px 0 6px 74px; padding: 7px 10px 6px; background: var(--surface-2); border: 0.5px solid var(--border-strong);
            border-left: 2px solid var(--ev-c, #888); border-radius: 6px; font-size: 10.5px; max-width: 340px; }
.evo-item.open .evo-foto { display: block; }
.evo-ca { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11.5px; }
.evo-ca .lado { font-weight: 700; letter-spacing: .04em; }
.evo-ca .odd { font-weight: 700; }
.evo-tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.evo-tbl th { color: var(--text-2); font-weight: 600; font-size: 9px; letter-spacing: .06em; text-align: right; padding: 2px 6px 3px; border-bottom: 0.5px solid var(--border); }
.evo-tbl th.l, .evo-tbl td.l { text-align: left; }
.evo-tbl td { padding: 3px 6px; text-align: right; white-space: nowrap; color: var(--text); }
.evo-tbl td.dim { color: var(--text-2); }
.evo-tbl tr.big td { background: color-mix(in srgb, var(--text) 6%, transparent); }
.evo-tbl tr.acum td { color: #9b6fd0; font-weight: 700; border-top: 1px dashed var(--border-strong); padding-top: 5px; }
.evo-nada { color: var(--text-2); font-size: 10px; font-style: italic; padding: 2px 0; }
/* (Carlos, 2026-09-26) Minitarjeta con las marcas del cruce, en corto (como en
   TRACKBET): el verde suave de la tarjeta (tarjeta-cruce.css) en los niveles de
   Kalshi que cruzaban y su ACCUM; la fila de BOL… con • verde si la casa le ganaba
   y apagada si no. */
.evo-tbl tr.cruce td, .evo-tbl td.cruce { background: rgba(0,230,118,.035); }
.evo-tbl tr.cruce.big td { background: rgba(0,230,118,.06); }
.evo-tbl tr.gap td { padding: 0; height: 7px; }
.evo-tbl tr.bol td { border-top: 0.5px solid var(--border); padding-top: 5px; }
.evo-tbl tr.bol.apagada td { opacity: .5; }
.evo-nada + .evo-tbl { margin-top: 4px; }
.evo-pt { color: var(--success); font-weight: 700; margin-right: 4px; }
.odd-pos { color: var(--success); }
.odd-neg { color: var(--danger); }

/* (2026-09-25) Botones de la cabecera: ⛶ Ver grande / A− A+ y ✕, juntos a la derecha */
.evo-btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
.evo-btns .evo-close { margin-left: 0; }
/* (Carlos, 2026-09-26) 📋 copiar el historial como texto (MANUAL 17.5) en VERDE y
   🖼 como imagen (MANUAL 17) en ROSADO, con fondo teñido como los botones del pie de
   la tarjeta. Antes eran verde y turquesa (colores vecinos) y solo con el borde
   medio transparente: casi no se distinguían. */
#evo-txt, #evo-img { color: var(--bc); border-color: var(--bc); background: color-mix(in srgb, var(--bc) 12%, transparent); }
#evo-txt:hover, #evo-img:hover { color: var(--bc); border-color: var(--bc); background: color-mix(in srgb, var(--bc) 26%, transparent); }
#evo-txt { --bc: #28cc95; }   /* 📋 verde, como el 📋 de la tarjeta */
#evo-img { --bc: #f06292; }   /* 🖼 rosado, como el 🖼 de la tarjeta */
/* (Carlos, 2026-09-27) Aviso del banner GRANDE al copiar (📋 / 🖼): como el del
   panel (caja oscura, borde verde), con Lexend. Va fuera de .evo-modal para que
   el zoom (A− / A+) no lo cambie. */
.tbv-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); z-index: 3;
             background: #0b0b0b; border: 1px solid #28cc95; border-radius: 6px; padding: 8px 14px;
             font-family: "TBV Lexend", "Lexend", "Segoe UI", sans-serif; font-size: 12.5px; line-height: 1.5; color: #28cc95;
             white-space: pre; pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s; max-width: 92vw; }
.tbv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* (2026-09-25) Banner GRANDE sobre la página: centrado, casi toda la pantalla,
   página oscurecida detrás. La letra se agranda con zoom en .evo-modal. */
.evo-modal.grande { z-index: 1; padding: 3vh 3vw; background: rgba(0,0,0,.65); }
.evo-modal.grande .evo-box { max-width: 1150px; height: 100%; max-height: none; }
.evo-modal.grande .evo-list { flex: 1; overscroll-behavior: contain; }
.evo-modal.grande .evo-foto { max-width: 440px; }

/* Tooltip propio (nunca title nativo): caja oscura, título con color y filas */
.tip {
  position: fixed; z-index: 9999; width: 230px; background: #0b0b0b; border: 1px solid #262626;
  border-left: 3px solid var(--tip-c, #5a9fe0); border-radius: 4px; padding: 7px 9px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.7); pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .12s, transform .12s; font-family: "TBV Lexend", "Lexend", "Segoe UI", sans-serif;   /* (2026-09-25) Lexend */
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip .tt-title { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--tip-c, #5a9fe0); margin-bottom: 5px; }
.tip .tt-row { display: flex; gap: 7px; align-items: flex-start; margin-top: 3px; }
.tip .tt-key { flex: none; min-width: 30px; text-align: center; font-family: inherit; font-size: 9px; font-weight: 700;
               padding: 1px 5px; border-radius: 3px; border: 1px solid; }
.tip .tt-val { font-size: 10px; line-height: 1.35; color: #cfcfcf; }