/* Predict deportivas, en el mundo de Tumiconta (sunat_pdf/DESIGN.md): negro Oxford recorrido en luz, oro Tumi
   solo como índice (la acción principal y dónde estás), cifras siempre en Plex Mono tabular. */

/* IBM Plex servida desde aquí (fonts/, licencia OFL): sin internet la web sigue siendo la misma */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --papel: #0C0F17;  --papel-raised: #12151F;  --papel-inset: #080A10;  --papel-pop: #171C28;
  --tinta: #E7ECF3;  --tinta-2: #AEBACA;  --tinta-3: #7F8D9F;  --tinta-mute: #586676;
  --regla: rgba(255,255,255,.09);  --regla-soft: rgba(255,255,255,.05);  --regla-fuerte: rgba(255,255,255,.16);
  --borde: #232C3A;  --borde-enfasis: #313B4C;  --borde-campo: rgba(255,255,255,.16);
  --acento-tumi: #D4B470;  --acento-tumi-dk: #C5A059;  --acento-tumi-deep: #B8934A;  --acento-tumi-md: #E8D4A6;
  --acento-tumi-tint: rgba(212,180,112,.14);  --acento-tumi-200: rgba(212,180,112,.40);
  --conforme: #2BC096;  --conforme-dk: #74E0BB;  --conforme-tint: rgba(43,192,150,.15);  --conforme-200: #2E7D63;
  --sello: #E7888A;  --sello-dk: #F2ABAD;  --sello-tint: rgba(231,136,138,.15);  --sello-200: #C97A7C;
  --aviso: #DDB95F;  --aviso-dk: #EDCE82;  --aviso-tint: rgba(221,185,95,.15);  --aviso-200: #B8954A;
  /* coral: sin dato del mercado (probabilidad solo del modelo). Borde y cifra, nunca relleno: el calor es la probabilidad */
  --coral: #F39A6B;  --coral-200: rgba(243,154,107,.45);
  /* cian: las celdas de la culebra rápida. Franja y cifra: no pisa el calor, el borde (coral) ni lo elegido (oro) */
  --top: #a95ce8;
  --nav-item: #98A6BC;
  --scroll-thumb: rgba(255,255,255,.14);  --scroll-thumb-hover: rgba(255,255,255,.24);
  --fg-on-gold: #0C0F17;  /* tinta sobre cualquier oro sólido (9.6:1); nunca --fg-on-dark */
  --fg-on-dark: #F8FAFC;
  --font: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --r-sm: 8px;  --r-md: 10px;  --r-lg: 16px;
  --sombra-flotante: 0 16px 40px rgba(0,0,0,.55);
  --t-color: 150ms ease-out;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--scroll-thumb) transparent; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; caret-color: var(--acento-tumi);
}
::selection { background: var(--acento-tumi-200); color: var(--tinta); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid transparent;
  background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--acento-tumi); outline-offset: 2px; }
a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--regla-fuerte); }
a:hover { text-decoration-color: var(--acento-tumi); }
h1 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.num { text-align: right; white-space: nowrap; }
.mute { color: var(--tinta-3); }
.cero { color: var(--tinta-mute); }
.coral { color: var(--coral); }
.leyenda { font-size: 11px; color: var(--tinta-3); }
.caption { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Layout: navegación flotante · contenido · cupón ----------------------------------------- */
/* solo escritorio: por debajo de ~1410px de ancho la página entera se desplaza en horizontal, la matriz no se comprime */
.app { display: grid; grid-template-columns: 196px minmax(840px, 1fr) 320px; gap: 16px; padding: 12px;
  min-height: 100vh; align-items: start; }
/* menú y cupón se ocultan del todo (las clases las pone base.html según la cookie). Con alguno oculto aparece arriba
   la barra .reabrir, fija, y --barra es su alto: lo que queda pegado arriba (cabecera de la matriz, índice) baja eso */
.app.sin-nav { grid-template-columns: minmax(840px, 1fr) 320px; }
.app.sin-cupon { grid-template-columns: 196px minmax(840px, 1fr); }
.app.sin-nav.sin-cupon { grid-template-columns: minmax(840px, 1fr); }
.sin-nav .nav, .sin-cupon .cupon { display: none; }
.app.sin-nav, .app.sin-cupon { --barra: 48px; }
.panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); border: 1px solid var(--regla);
  border-radius: var(--r-lg); }
.nav { background: var(--papel-pop); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  height: calc(100vh - 24px); }
/* la marca y, a su derecha, ocultar el menú (como sunat_pdf); el botón «Menú» de la barra de arriba lo trae */
.nav-cabeza { display: flex; align-items: center; gap: 4px; margin-right: -6px; padding-bottom: 14px; }
.nav-cabeza .marca { min-width: 0; font-size: 13px; letter-spacing: .1em; }  /* que quepa el botón a su lado */
.marca { display: block; padding: 4px 0 4px 12px; font-size: 14px; letter-spacing: .14em; color: var(--fg-on-dark);
  text-decoration: none; text-transform: uppercase; font-weight: 500; }
.marca b { text-transform: none; letter-spacing: 0; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--nav-item); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background-color var(--t-color), color var(--t-color); }
.nav-item svg { width: 16px; height: 16px; flex: none; }
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--tinta); }
.nav-item.activo { background: var(--acento-tumi-deep); color: var(--papel-pop); font-weight: 700; }
button.nav-item { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.nav-ocultar { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--tinta-3); cursor: pointer;
  transition: background-color var(--t-color), color var(--t-color); }
.nav-ocultar:hover { background: rgba(255,255,255,.045); color: var(--tinta); }
.nav-ocultar svg { width: 16px; height: 16px; }
.nav-pie { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--regla); display: grid; gap: 10px; }
.saldo-nav { display: grid; gap: 2px; }
.saldo-nav .mono { font-size: 18px; color: var(--tinta); }
.actualizar { display: grid; gap: 6px; }
.datos { margin: 0; font-size: 11px; line-height: 1.4; color: var(--tinta-3); }
.datos.error { color: var(--sello); }
.main { min-width: 0; padding: 6px 4px 48px; }
.reabrir { display: none; }
.sin-nav .reabrir, .sin-cupon .reabrir { position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; height: var(--barra); margin: -6px -4px 0; padding: 6px 4px; background: var(--papel); }
.reabrir [data-abrir] { display: none; }
.sin-nav [data-abrir="nav"], .sin-cupon [data-abrir="cupon"] { display: inline-flex; }
.reabrir [data-abrir="cupon"] { margin-left: auto; }
.reabrir .nueva { animation: destello 1600ms ease-out; }  /* la pata que sumaste con el cupón oculto: se nota que entró */
.cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0 18px; }
.cabecera p { margin: 4px 0 0; color: var(--tinta-3); font-size: 13px; }

/* --- Controles: sólidos y táctiles (36px) ---------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: var(--r-sm); border: 1.5px solid transparent; font: 600 12px/1 var(--font); letter-spacing: .3px;
  cursor: pointer; text-decoration: none; transition: background-color var(--t-color), border-color var(--t-color),
  color var(--t-color), transform 100ms ease-out; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--acento-tumi); color: var(--fg-on-gold); }
.btn-primario:hover { background: var(--acento-tumi-md); }
.btn-primario:active { background: var(--acento-tumi-dk); }
.btn-fantasma { background: transparent; border-color: var(--borde); color: var(--tinta-2); }
.btn-fantasma:hover { border-color: var(--borde-enfasis); color: var(--tinta); background: rgba(255,255,255,.03); }
.btn-oro { background: var(--acento-tumi-tint); border-color: var(--acento-tumi-200); color: var(--acento-tumi); }
.btn-oro:hover { background: rgba(212,180,112,.22); border-color: var(--acento-tumi); }
.btn-chico { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-bloque { width: 100%; }
.btn svg { width: 14px; height: 14px; flex: none; }
.icono { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: var(--r-sm); background: transparent; color: var(--tinta-3); cursor: pointer;
  transition: background-color var(--t-color), color var(--t-color); }
.icono:hover { background: var(--sello-tint); color: var(--sello); }
.icono svg { width: 14px; height: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--tinta-2); }
.ipt { height: 36px; width: 100%; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--borde-campo);
  background: var(--papel-inset); color: var(--tinta); font: 400 14px var(--font);
  transition: border-color var(--t-color), box-shadow var(--t-color); }
.ipt.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ipt::placeholder { color: var(--tinta-3); }
.ipt:focus { outline: none; border-color: var(--acento-tumi); box-shadow: 0 0 0 3px rgba(212,180,112,.10); }
.ipt:focus-visible { outline: none; }

/* --- Selección: una apuesta posible. En el cupón toma el tinte de oro (dónde estás) ---------- */
.sel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%;
  min-height: 36px; padding: 6px 28px 6px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--borde);
  background: var(--papel-raised); color: var(--tinta); font: 400 13px/1.35 var(--font); text-align: left;
  cursor: pointer; transition: background-color var(--t-color), border-color var(--t-color); }
.sel:hover { border-color: var(--borde-enfasis); background: color-mix(in srgb, var(--papel-raised) 94%, #fff 6%); }
.sel .p { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.sel .cuota { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-3);
  min-width: 3.6em; text-align: right; }
.sel .casa { display: block; margin-top: 2px; font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--tinta-3); }  /* la cuota de Apuesta Total y su valor con signo */
.sel.sm { border-color: var(--coral-200); }  /* sin dato del mercado; antes que .en: lo elegido manda en el borde */
.sel.sm:hover { border-color: var(--coral); }
.sel.sm .cuota { color: var(--coral); }
.sel.en { background: var(--acento-tumi-tint); border-color: var(--acento-tumi-200); }
.sel.en .cuota { color: var(--acento-tumi-md); }
.sel.baja .p { color: var(--tinta-3); }  /* paga menos de 1.20: casi no paga */
/* ⓘ arriba a la derecha de cada opción (selección y celda): cuándo se gana, en su title. Por él la selección deja 28px
   a la derecha, así la cuota no queda debajo; en la celda cabe junto a la probabilidad */
.sel, .celda { position: relative; }
.info { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 15px; height: 15px;
  border: 1px solid var(--borde-enfasis); border-radius: 50%; font: 600 10px/1 var(--font-mono); color: var(--tinta-3);
  transition: border-color var(--t-color), color var(--t-color); }
.info::before { content: "i"; }
.info:hover { border-color: var(--tinta-3); color: var(--tinta); }

/* --- Cupón: un boleto segmentado. Cada pata es un tramo numerado separado por una perforación, y el
   total es el talón, con sus muescas. La pata recién sumada entra con un sello y un destello de oro. --- */
.cupon { background: var(--papel-raised); display: flex; flex-direction: column; overflow: hidden; }
/* el formulario también es columna: así las patas se desplazan solas y el talón (total y Apostar) queda siempre a la vista */
.cupon > form { display: flex; flex-direction: column; min-height: 0; }
.cupon-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 12px;
  border-bottom: 1px solid var(--regla); }
.cupon-cab h2 { display: flex; align-items: baseline; gap: 8px; }
.cupon-acciones { display: flex; align-items: center; gap: 4px; }
.cupon-patas { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.pata { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px 56px; gap: 2px 8px; align-items: end;
  grid-template-areas: "n sel sel x" ". meta meta meta" ". cifras tu tu"; padding: 11px 12px 12px 16px; }
.pata-n { grid-area: n; align-self: start; }
.pata-sel { grid-area: sel; align-self: start; }
.pata-iconos { grid-area: x; display: flex; justify-content: flex-end; align-self: start; margin-block: -4px; }
.pata-meta { grid-area: meta; }
.pata-cifras { grid-area: cifras; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin: 6px 0 0;
  font-size: 12px; }
.pata-cifras dt { color: var(--tinta-3); }
.pata-cifras dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.pata-tu { grid-area: tu; display: grid; gap: 3px; }
.pata-tu .caption { text-align: right; }
.pata + .pata { border-top: 1px dashed var(--regla-fuerte); }
.pata.nueva { animation: sello 260ms cubic-bezier(.2, .8, .2, 1), destello 1600ms ease-out; }
@keyframes sello { from { opacity: 0; transform: translateY(-6px); } }
@keyframes destello { from { background-color: var(--acento-tumi-tint); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .pata.nueva, .reabrir .nueva { animation: none; } }
.pata-n { font: 500 11px/20px var(--font-mono); color: var(--tinta-3); }
.pata-sel { font-size: 13px; font-weight: 600; line-height: 1.35; padding-top: 1px; }
.pata-meta { font-size: 12px; color: var(--tinta-3); line-height: 1.4; }
.pata .ipt { height: 30px; padding: 0 8px; font-size: 13px; text-align: right; }
/* la simulación revelada: en vez de quitar y de tu cuota, cómo le fue a la pata y qué pasó en el partido */
.pata.revelada { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start;
  grid-template-areas: "n sel est" ". meta meta" ". real real" ". cifras cifras"; }
.pata.revelada .estado { grid-area: est; padding-top: 5px; }
.pata-real { grid-area: real; margin-top: 4px; font-size: 12px; color: var(--tinta-3); }
.pata-real b { margin-left: 4px; color: var(--tinta); font-weight: 600; }
.practica-saldo { margin: 0; text-align: center; font-size: 12px; color: var(--tinta-3); }
.practica-saldo .mono { color: var(--tinta-2); }
.cupon-vacio { padding: 28px 20px; color: var(--tinta-3); font-size: 13px; }
.cupon-vacio strong { display: block; color: var(--tinta); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.cupon-total { position: relative; padding: 16px 16px 16px; border-top: 1px dashed var(--regla-fuerte);
  background: var(--papel-pop); display: grid; gap: 12px; }
.cupon-total::before, .cupon-total::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--papel); border: 1px solid var(--regla); }
.cupon-total::before { left: -10px; }
.cupon-total::after { right: -10px; }
.cifras { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 13px; }
.cifras dt { color: var(--tinta-3); }
.cifras dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.cifras .fuerte { font-size: 16px; font-weight: 600; color: var(--tinta); }
.valor-pos { color: var(--conforme); }
.valor-neg { color: var(--sello); }
.stake { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.stake output { display: block; height: 36px; line-height: 36px; text-align: right; font: 600 16px var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--tinta); }
.stake .campo > span { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--tinta-2); text-align: right; }
/* lo mismo en palabras: cuántas veces se acierta y qué pasa a la larga; y lo que dicen tus reglas */
.veredicto { display: grid; gap: 4px; font-size: 12px; line-height: 1.45; color: var(--tinta-2); }
.veredicto p, .sugerido, .atencion { margin: 0; }
.sugerido { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-3); }
.sugerido .mono { color: var(--tinta); }
.sugerido .btn { margin-left: auto; }
.avisos-reglas { display: grid; gap: 4px; }
.avisos-reglas:empty { display: none; }
.atencion { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--aviso-dk); }
.atencion::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .45em; border-radius: 50%;
  background: var(--aviso); }  /* aviso: solo texto y punto, nunca relleno */
.atencion[hidden] { display: none; }

/* --- Avisos: la fila de resultado (tinte, borde 200, símbolo + texto) ----------------------- */
.aviso { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid; font-size: 13px; }
.aviso::before { margin-right: 8px; font-weight: 700; }
.aviso.ok { background: var(--conforme-tint); border-color: var(--conforme-200); color: var(--conforme-dk); }
.aviso.ok::before { content: "✓"; }
.aviso.error { background: var(--sello-tint); border-color: var(--sello-200); color: var(--sello-dk); }
.aviso.error::before { content: "✗"; }
.aviso.atencion { border-color: var(--aviso-200); color: var(--aviso-dk); }  /* por encima de tus reglas: sin relleno */
.aviso.atencion::before { content: "!"; }

/* --- Píldora de estado: punto de 6px + etiqueta mono en versalitas (sin fondo ni borde) ------- */
.estado { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.ganada, .estado.acierto { color: var(--conforme); }
.estado.perdida, .estado.fallo { color: var(--sello); }
.estado.pendiente { color: var(--aviso); }
.estado.anulada { color: var(--tinta-3); }

/* --- Entrar ----------------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #141a28 0%, var(--papel) 60%); }
.auth-card { width: 360px; padding: 32px 28px 28px; background: var(--papel-raised); border: 1px solid var(--regla);
  border-radius: var(--r-lg); display: grid; gap: 18px; }
.auth-card .marca { padding: 0 0 6px; text-align: center; font-size: 22px; }
.auth-card p { margin: 0; text-align: center; color: var(--tinta-3); font-size: 13px; }

/* --- Jornada: el mapa de calor (partidos × familias). El calor es luz sobre el mismo navy, no color --- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 12px; }
.segmento { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: var(--r-sm);
  border: 1px solid var(--regla); background: var(--papel-inset); }
.segmento .caption { padding: 0 8px 0 6px; }
.segmento a { display: inline-grid; place-items: center; height: 28px; padding: 0 9px; border-radius: 6px;
  border: 1px solid transparent; font: 500 12px var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--tinta-2); text-decoration: none; transition: background-color var(--t-color), color var(--t-color); }
.segmento a:hover { background: rgba(255,255,255,.05); color: var(--tinta); }
.segmento a.activo { background: var(--acento-tumi-tint); border-color: var(--acento-tumi-200); color: var(--acento-tumi); }
.segmento.texto a { display: inline-flex; gap: 6px; font-family: var(--font); }  /* palabras, con su cifra al lado */
.segmento.texto a .mono { font-size: 11px; color: var(--tinta-3); }
.segmento.texto a.activo .mono { color: inherit; }
.segmento select { height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--tinta); font: 500 12px var(--font); cursor: pointer;
  transition: background-color var(--t-color); }
.segmento select:hover { background: rgba(255,255,255,.05); }
select option { background: var(--papel-pop); color: var(--tinta); }  /* la lista nativa no hereda el fondo transparente */
.filtros { display: flex; align-items: center; gap: 12px; }
.buscar { position: relative; align-self: center; width: 260px; }
.buscar svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  color: var(--tinta-3); pointer-events: none; }
.buscar .ipt { padding-left: 34px; }
.cabecera p a, .vacio-grande a { color: var(--tinta); text-decoration-color: var(--regla-fuerte); }
.cabecera p a:hover, .vacio-grande a:hover { text-decoration-color: currentColor; }
/* una liga por bloque, cada una con su tabla y su cabecera fija; table-layout fixed las deja alineadas */
.liga-bloque + .liga-bloque { margin-top: 40px; }
/* el título solo sale al buscar, cuando hay varias ligas a la vez; 10px abajo: pertenece a su tabla */
.liga-bloque h2, .valor-real h2 { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 10px 2px; }
.liga-bloque h2 .mono, .valor-real h2 .mono { font-size: 12px; font-weight: 500; }
.valor-real { margin-bottom: 28px; }  /* la lista de valor real, sobre la barra de la jornada */
/* variante plana: en una pantalla de grilla la tarjeta sobra. clip y no auto: un contenedor con scroll mataría la
   cabecera fija */
.mapa-marco { overflow: clip; }
.mapa { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mapa .c-partido { width: 176px; }
.mapa thead th { position: sticky; top: var(--barra, 0px); z-index: 3; padding: 10px 10px; background: var(--papel-inset); text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  border-bottom: 1px solid var(--regla); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la cabecera de cada familia es un selector de su mercado, con el mismo aspecto que el título; lo elegido, en oro */
.mapa thead select { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-overflow: ellipsis; cursor: pointer; }
.mapa thead select:hover, .mapa thead select:focus-visible { color: var(--tinta); }
.mapa thead select.elegido { color: var(--acento-tumi); }
.mapa thead option { text-transform: none; letter-spacing: 0; }
.mapa thead th:first-child { border-top-left-radius: var(--r-sm); }
.mapa thead th:last-child { border-top-right-radius: var(--r-sm); }
.mapa .dia th { padding: 18px 12px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.mapa .dia th::first-letter { text-transform: uppercase; }
.mapa tbody th[scope=row] { padding: 9px 12px; text-align: left; font-weight: 400; vertical-align: top;
  border-top: 1px solid var(--regla-soft); border-radius: var(--r-sm); transition: background-color var(--t-color); }
.mapa tbody tr:hover th[scope=row] { background: rgba(255,255,255,.04); }
.mapa tr[id] { scroll-margin-top: calc(48px + var(--barra, 0px)); }  /* al volver de un clic, la cabecera fija no tapa la fila */
.hora { font: 600 12px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinta); margin-right: 8px; }
.sin-cuotas { font-size: 11px; color: var(--tinta-3); }
.equipos { display: block; margin-top: 3px; color: var(--tinta); font-weight: 600; font-size: 13px; line-height: 1.35;
  text-decoration: none; }
.equipos:hover { text-decoration: underline; text-decoration-color: var(--regla-fuerte); }
/* el puesto en la tabla y, junto al favorito, su probabilidad de ganar */
.equipos .pos { display: inline-block; min-width: 3ch; margin-right: 4px; font: 500 11px var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.equipos .fav { font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.todos { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--tinta-3); text-decoration: none; }
.todos:hover { color: var(--tinta-2); text-decoration: underline; }
.todos + .todos { display: table; margin-top: 2px; }  /* «Estadísticas» (Flashscore), en su línea bajo «N selecciones» */
/* height: 1px en la celda y 100 % en el botón: todas las celdas de una fila igual de altas, la cuota al pie */
.mapa td { height: 1px; padding: 3px; vertical-align: top; border-top: 1px solid var(--regla-soft); }
.mapa .dia + tr td, .mapa .dia + tr th[scope=row] { border-top-color: var(--regla); }
/* el calor es luz de la misma tinta navy (nunca un gris neutro): de la tarjeta a 19 % de tinta */
.h0 { --calor: transparent; } .h1 { --calor: color-mix(in srgb, var(--papel-raised) 96%, var(--tinta) 4%); }
.h2 { --calor: color-mix(in srgb, var(--papel-raised) 93%, var(--tinta) 7%); }
.h3 { --calor: color-mix(in srgb, var(--papel-raised) 89%, var(--tinta) 11%); }
.h4 { --calor: color-mix(in srgb, var(--papel-raised) 85%, var(--tinta) 15%); }
.h5 { --calor: color-mix(in srgb, var(--papel-raised) 81%, var(--tinta) 19%); }
.celda { display: grid; grid-template-rows: auto 1fr auto; gap: 2px; width: 100%; height: 100%; min-height: 86px; padding: 7px 8px;
  border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--calor); color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-color), background-color var(--t-color); }
.celda:hover { border-color: var(--borde-enfasis); }
.celda .p { font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.celda .lab { font-size: 11px; line-height: 1.3; color: var(--tinta-2); }  /* entera: la celda es la apuesta */
.celda .cuota { font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.celda.sm { border-color: var(--coral-200); }  /* sin dato del mercado: borde y cuota, el calor no se toca */
.celda.sm:hover { border-color: var(--coral); }
.celda.sm .cuota { color: var(--coral); }
.celda.en { background: var(--acento-tumi-tint); border-color: var(--acento-tumi-200); }
.celda.en .cuota { color: var(--acento-tumi); }
.celda.top { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--top) 75%, transparent),
  0 0 12px -2px color-mix(in srgb, var(--top) 45%, transparent); }
.celda.top .p { color: var(--top); }
.celda.top2 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--top) 35%, transparent); }
.celda.top2 .p { color: color-mix(in srgb, var(--top) 55%, var(--tinta)); }
/* la de más valor del partido: la que suma la culebra rápida, por eso en su morado. Etiqueta y no borde, así no se
   confunde con la segunda más probable (top2); en la celda, a la derecha de la cuota (si no cabe, baja de línea) */
.tag-valor { font: 600 10px var(--font-mono); color: var(--top); }
.celda .tag-valor { float: right; }
.nada { display: grid; place-items: center; min-height: 86px; color: var(--tinta-mute); font-family: var(--font-mono); }
/* Ctrl sobre un partido: su contexto sin entrar. Flota (con el menú del clic derecho), así que lleva la sombra
   flotante; no toma el mouse (pointer-events), así no tapa las celdas que tiene debajo */
.ctx-pop { position: fixed; z-index: 40; display: grid; gap: 8px; width: max-content;
  max-width: min(640px, calc(100vw - 16px)); padding: 12px 16px; background: var(--papel-pop);
  border: 1px solid var(--regla-fuerte); border-radius: var(--r-md); box-shadow: var(--sombra-flotante);
  pointer-events: none; font-size: 13px; }
.ctx-pop[hidden] { display: none; }
.ctx-pop p { margin: 0; }
.ctx-tit { font-weight: 600; }
.ctx-1x2 { font-size: 12px; color: var(--tinta-2); }
.ctx-pop .patas-tabla { font-size: 12px; }
/* la ventana mide lo que su contenido (max-content): sin holgura que reparta, cada celda lleva su aire a los dos lados */
.ctx-pop .patas-tabla :is(th, td) { padding-inline: 10px; }
.ctx-pop .patas-tabla :is(th, td):first-child { padding-left: 0; }
.ctx-pop .patas-tabla :is(th, td):last-child { padding-right: 0; }
/* clic derecho en una celda: sus cinco más probables, como filas de la vista de partido. Esta sí toma el mouse, y
   queda bajo la ventana de Ctrl si se cruzan (esa no toma el mouse: el menú sigue respondiendo) */
.cinco-pop { width: 320px; pointer-events: auto; z-index: 39; }
kbd { padding: 0 5px; border: 1px solid var(--borde-enfasis); border-radius: var(--r-sm); font: 500 10px/16px var(--font-mono);
  color: var(--tinta-2); }
.nota { margin: 12px 2px 0; max-width: 80ch; font-size: 12px; color: var(--tinta-3); }
.vacio-grande { padding: 80px 24px; text-align: center; }
.vacio-grande h2 { font-size: 18px; font-weight: 600; }
.vacio-grande p { margin: 8px auto 0; max-width: 56ch; color: var(--tinta-2); }
code { font: 500 12px var(--font-mono); color: var(--tinta); }

/* --- Partido: todos sus mercados ---------------------------------------------------------------- */
.tres { display: grid; grid-template-columns: repeat(3, 64px); gap: 0; margin: 0; border: 1px solid var(--regla);
  border-radius: var(--r-md); overflow: hidden; flex: none; }  /* con overflow, sin flex: none se encoge y se corta */
.tres div { padding: 8px 10px; text-align: center; background: var(--papel-raised); }
.tres div + div { border-left: 1px solid var(--regla); }
.tres dt { font-size: 11px; font-weight: 600; color: var(--tinta-3); }
.tres dd { margin: 2px 0 0; font: 600 16px var(--font-mono); font-variant-numeric: tabular-nums; }
.indice { position: sticky; top: var(--barra, 0px); z-index: 20; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 0;
  background: var(--papel); border-bottom: 1px solid var(--regla); font-size: 13px; }
.indice a { color: var(--tinta-2); text-decoration: none; }
.indice a:hover { color: var(--tinta); }
.familia { padding-top: 26px; scroll-margin-top: calc(48px + var(--barra, 0px)); }
/* cómo llega cada equipo: el favorito, su fila de la tabla y la tabla entera, plegada */
.contexto { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 20px; background: var(--papel-raised);
  border: 1px solid var(--regla); border-radius: var(--r-md); }
.contexto-fav { margin: 0; font-weight: 600; }
.contexto-fav .caption { margin-right: 6px; }
.contexto-fav .mute { font-weight: 400; font-size: 13px; }
.forma { font: 600 11px var(--font-mono); white-space: nowrap; }  /* en línea: al copiar sale «GGEPG» */
.forma span + span { margin-left: 3px; }
.forma .r-G { color: var(--conforme); }  /* la letra dice el resultado; el color solo lo repite */
.forma .r-E { color: var(--tinta-3); }
.forma .r-P { color: var(--sello); }
.tabla-liga summary { cursor: pointer; font-size: 13px; color: var(--tinta-2); }
.tabla-liga summary:hover { color: var(--tinta); }
.tabla-liga[open] summary { margin-bottom: 6px; }
.tabla-liga .suyo td { font-weight: 600; color: var(--tinta); }
.contexto .leyenda { margin: 0; }
.mercado { margin-top: 14px; }
.mercado h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.sels { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }

/* --- Mis apuestas ------------------------------------------------------------------------------- */
.estado-cuenta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0;
  background: var(--papel-raised); border: 1px solid var(--regla); border-radius: var(--r-md); }
.estado-cuenta div { padding: 14px 20px; }
.estado-cuenta div + div { border-left: 1px solid var(--regla); }
.estado-cuenta dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); }
.estado-cuenta dd { margin: 4px 0 0; font: 600 18px var(--font-mono); font-variant-numeric: tabular-nums; }
.estado-cuenta dd .mute { font-size: 13px; font-weight: 500; }
.curva { margin: 0 0 16px; padding: 14px 18px 8px; background: var(--papel-raised); border: 1px solid var(--regla);
  border-radius: var(--r-md); }
.curva figcaption { margin-top: 4px; }
.curva svg { max-height: 220px; }  /* el gráfico es de 480×210: a todo el ancho de la columna llenaba media pantalla */
.barra-lista { margin: 24px 0 12px; justify-content: flex-start; }
.barra-lista form { margin-left: auto; }
/* una fila por apuesta: cabecera y filas comparten columnas; al abrirla salen sus patas */
.apuestas-encabezado, .apuesta-fila { display: grid; align-items: center; gap: 0 12px;
  grid-template-columns: 14px 36px minmax(110px, 1.1fr) minmax(118px, 1fr) minmax(0, 1.3fr) 60px 60px 70px 84px 88px; }
/* los mínimos suman 780px: caben en la columna central más angosta (840px); con 910 la fila se salía de su tarjeta */
.apuestas-encabezado { padding: 0 17px 6px; }
.apuestas-encabezado span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); }
.apuesta { margin-top: 6px; background: var(--papel-raised); border: 1px solid var(--regla); border-radius: var(--r-md); }
.apuesta summary { display: block; list-style: none; cursor: pointer; border-radius: var(--r-md);
  transition: background-color var(--t-color); }
.apuesta summary::-webkit-details-marker { display: none; }
.apuesta summary:hover { background: rgba(255,255,255,.035); }
.apuesta[open] summary { border-bottom: 1px solid var(--regla); border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }
.apuesta-fila { padding: 9px 16px; font-size: 13px; }
.apuesta-fila > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apuesta-fila .tipo { font-weight: 600; }
.apuesta-fila .progreso { font-size: 12px; color: var(--tinta-2); white-space: normal; text-wrap: balance; }
.chev { width: 14px; height: 14px; color: var(--tinta-3); transition: transform 150ms ease-out; }
.apuesta[open] .chev { transform: rotate(90deg); }
.apuesta-detalle { padding: 10px 16px 14px; }
.patas-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.patas-tabla th { padding: 6px 12px 6px 0; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid var(--regla); white-space: nowrap; }
.patas-tabla td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--regla-soft); vertical-align: baseline; }
.patas-tabla tr:last-child td { border-bottom: 0; }
.patas-tabla .num { padding-right: 0; text-align: right; }
.patas-tabla .mono { font-size: 12px; }
.patas-tabla .mono, .patas-tabla .favorito { white-space: nowrap; }  /* la hora y el favorito en una línea; la selección es la que se parte */
.favorito .mono { color: var(--tinta-2); }
.apuesta-pie { margin: 8px 0 0; font-size: 12px; color: var(--tinta-3); }
.apuesta-pie .mono { color: var(--tinta-2); }
.vacio { margin: 0; padding: 18px 0; color: var(--tinta-3); }

/* --- Cómo jugar: tus números y nueve lecciones cortas -------------------------------------------- */
.guia-sub { margin: 18px 0 10px; }
.lecciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 28px; }
.leccion { padding: 14px 20px; background: var(--papel-raised); border: 1px solid var(--regla); border-radius: var(--r-md); }
.leccion h2 { font-size: 14px; margin-bottom: 6px; }
.leccion p { margin: 0; max-width: 80ch; font-size: 13px; color: var(--tinta-2); }
.leccion p + p { margin-top: 6px; }
.leccion.ancha { grid-column: 1 / -1; }  /* las largas, a todo el ancho: las seis cortas siguen llenando sus filas */
.leccion .mono { color: var(--tinta); }
.reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: 12px; }
#reglas { grid-column: 1 / -1; scroll-margin-top: calc(16px + var(--barra, 0px)); }
.leccion .nota { margin-top: 6px; }

/* --- Bloqueos: las tarjetas de Cómo jugar, una debajo de otra, cada una con su formulario y su lista ---------- */
.bloqueos { grid-template-columns: minmax(0, 1fr); }
.bloquear { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto;
  gap: 10px; align-items: end; max-width: 720px; margin-top: 12px; }
.bloqueos .patas-tabla { margin-top: 14px; }

/* --- Gráfico del saldo (report.line_chart) ----------------------------------------------------- */
svg { display: block; width: 100%; height: auto; }
svg text { fill: var(--tinta-3); font: 11px var(--font-mono); }
svg .gridline { stroke: var(--regla); stroke-width: 1; }
svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .s-home { stroke: var(--tinta-2); }
svg .hit { fill: transparent; }