/* Front del JUGADOR (la raiz del dominio), con la IDENTIDAD DEL
   OPERADOR (bingobingo): fondo azul-negro profundo, superficies
   purpura, acento fucsia con degradados a purpura, y el dorado
   reservado SOLO para montos y premios. Mobile primero.

   TODA la paleta vive en estas variables: cambiar el tema por
   operador es tocar este bloque, nada mas del CSS. */

:root {
  --fondo: #0a0518;            /* fondo profundo: azul muy oscuro */
  --panel: #1d0f38;            /* superficies: purpura oscuro */
  --panel-hundido: #140a2a;    /* inputs y fondos rebajados */
  --borde: #3a2264;            /* borde sutil purpura */
  --acento: #ee2a7b;           /* acento primario: fucsia / magenta */
  --acento-2: #8b3dff;         /* acento secundario: purpura medio */
  --sobre-acento: #ffffff;     /* texto sobre los degradados */
  --grad-boton: linear-gradient(90deg, var(--acento), var(--acento-2));
  --grad-hero:
    radial-gradient(ellipse 85% 90% at 50% -10%, rgba(238, 42, 123, .32), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 10%, rgba(139, 61, 255, .22), transparent 70%),
    linear-gradient(170deg, #24104a 0%, var(--fondo) 78%);
  --texto: #f7f4ff;
  --muted: #b6aad4;
  --dorado: #ffc93c;           /* SOLO montos y premios */
  --dorado-suave: #c99a2e;
  --verde: #35c46a;
  --rojo: #f87171;
  --ambar: #fbbf24;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.dorado { color: var(--dorado); } /* SOLO montos y premios */
.titulo-sec { color: var(--texto); }
.error { color: var(--rojo); font-size: 14px; margin: 8px 0 0; }
.ok-note { color: var(--verde); font-size: 14px; margin: 8px 0 0; }
.small-note { font-size: 12.5px; line-height: 1.45; }

.wrap { max-width: 560px; margin: 0 auto; padding: 10px 12px 40px; }

h1, h2, h3 { margin: 0; font-weight: 800; } /* titulos pesados */

/* logo del operador (configurable; default /img/logo.png, el mismo
   de los boletos impresos: proporcion 3:2) */
.logo-marca { height: 44px; display: block; }

/* --- tarjetas y botones (mismo lenguaje que /b) --- */
.card {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0;
}

.btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
}
.btn.primary {
  background: var(--grad-boton);
  border: none;
  color: var(--sobre-acento);
  font-weight: 800;
  padding: 10px 18px;
}
.btn.block { display: block; width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

label { display: block; margin: 10px 0; font-size: 14px; }
label > span { display: block; color: var(--muted); margin-bottom: 4px; font-size: 13px; }
input, select {
  width: 100%;
  background: var(--panel-hundido);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  padding: 10px 12px;
  font-size: 16px; /* 16px: que iOS no haga zoom al enfocar */
  font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--acento-2); }
input[type="file"] { padding: 8px; font-size: 14px; }

/* --- pantalla de entrada (login / registro) --- */
.auth-brand { text-align: center; padding: 26px 0 8px; }
.auth-brand .logo-marca { height: 90px; margin: 0 auto; }
.auth-brand p { margin: 4px 0 0; }

.tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.tab {
  flex: 1;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--muted);
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.tab.active { color: var(--acento); border-color: var(--acento); font-weight: 800; }

.ref-nota { margin: 2px 0 0; font-size: 13px; }
.ref-nota.ok { color: var(--verde); }
.ref-nota.mal { color: var(--ambar); }

/* --- barra del jugador --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 5, 24, .96);
  border-bottom: 1px solid var(--borde);
}
.topbar-fila {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 12px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .logo-marca { height: 38px; }
.topbar .spacer { flex: 1; }
.saldo {
  text-align: right;
  line-height: 1.15;
}
.saldo .etiqueta { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.saldo .monto { font-size: 16px; font-weight: 800; color: var(--dorado); font-variant-numeric: tabular-nums; }
.btn-salir { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px; font-family: inherit; }

/* accesos: fila horizontal scrolleable en el celular */
.nav-app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 12px 8px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.nav-app a {
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.nav-app a.active { color: var(--acento); border-color: var(--acento); font-weight: 800; }

/* --- navbar de juegos (se arma con los juegos que traen eventos) --- */
.juegos-nav { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.juego-chip {
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--muted);
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.juego-chip.active {
  background: var(--grad-boton);
  border-color: transparent;
  color: var(--sobre-acento);
  font-weight: 800;
}

/* --- cards de eventos --- */
.evento { display: flex; flex-direction: column; gap: 8px; }
.evento .cabeza { display: flex; align-items: center; gap: 10px; }
.evento .logo { max-height: 44px; max-width: 150px; }
.evento .titulo { font-size: 17px; color: var(--texto); font-weight: 800; }
.evento .subtitulo { margin: 1px 0 0; font-size: 13px; }
.evento .datos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  text-align: center;
}
.evento .dato {
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 7px 4px;
}
.evento .dato .v { font-size: 15px; font-weight: 800; color: var(--texto); font-variant-numeric: tabular-nums; }
.evento .dato .v.destacado { color: var(--dorado); }
.evento .dato .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }

.vacio { text-align: center; padding: 40px 10px; }
.vacio .icono { font-size: 42px; opacity: .8; }
.vacio h3 { color: var(--texto); margin: 8px 0 4px; }

/* --- listas (depositos, boletos): filas tipo tarjeta --- */
.fila-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--borde);
  padding: 9px 2px;
  font-size: 14px;
}
.fila-item:first-child { border-top: none; }
.fila-item .izq p { margin: 0; }
.fila-item .sec { color: var(--muted); font-size: 12.5px; }
.fila-item .monto { font-weight: 700; font-variant-numeric: tabular-nums; }

/* movimientos: extracto del jugador — monto con signo (verde entra,
   rojo sale) y el saldo despues abajo, alineados a la derecha */
.filters-mov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 8px; }
.filters-mov select, .filters-mov input[type="date"] { width: auto; }
.mov-montos { text-align: right; }
.mov-montos p { margin: 0; }
.mov-monto { font-weight: 700; font-variant-numeric: tabular-nums; }
.mov-monto.pos { color: var(--verde); }
.mov-monto.neg { color: var(--rojo); }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.pill.pendiente { background: rgba(251, 191, 36, .12); color: var(--ambar); }
.pill.aprobado, .pill.vendido, .pill.pagado { background: rgba(53, 196, 106, .12); color: var(--verde); }
.pill.rechazado, .pill.anulado { background: rgba(248, 113, 113, .12); color: var(--rojo); }
.pill.premiado { background: rgba(245, 197, 66, .15); color: var(--dorado); }

.cuenta-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin: 4px 0; }
.cuenta-row .k { color: var(--muted); }
.cuenta-row .v { text-align: right; word-break: break-all; }

.link-b { color: var(--acento); text-decoration: none; font-size: 13px; }

/* ================= pantalla de la serie (compra) ================= */

.serie-cab { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.serie-cab .logo { max-height: 44px; max-width: 150px; }
.serie-cab .titulo { font-size: 18px; color: var(--texto); font-weight: 800; }
.serie-cab .subtitulo { margin: 1px 0 0; font-size: 13px; }
.serie-datos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; text-align: center; margin: 8px 0; }
.serie-datos .dato { background: rgba(0, 0, 0, .45); border: 1px solid var(--borde); border-radius: 10px; padding: 7px 4px; }
.serie-datos .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.serie-datos .v.destacado { color: var(--dorado); }
.serie-datos .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }

.filters-serie { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; }
.filters-serie input[type="number"] { max-width: 130px; }
.filters-serie select { width: auto; }
.filters-serie .spacer { flex: 1; }

/* grilla de compra: TARJETAS de carton, no botones de un numero.
   Arriba el numero de carton (chico), abajo sus numeros en la grilla
   que dicte el motor (hoy 1x5), grandes y legibles — como el boleto
   impreso. Tres estados: disponible / seleccionado / vendido (el
   vendido no trae numeros), mas "mio". auto-fill mantiene el
   responsive: en celular entran una o dos por fila. */
.serie-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
}
.carton-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 10px;
  border-radius: 11px;
  border: 1px solid var(--borde);
  background: var(--panel-hundido);
  color: var(--texto);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.carton-num { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.carton-mini { display: grid; gap: 4px; }
.carton-mini span {
  background: rgba(255, 255, 255, .07);
  border-radius: 7px;
  padding: 7px 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.carton-mini .libre { color: var(--dorado); }
.carton-tomado { font-size: 13px; color: var(--muted); padding: 9px 0; }
.carton-btn.sel {
  border-color: var(--acento);
  background: rgba(238, 42, 123, .14);
  box-shadow: 0 0 0 1px var(--acento);
}
.carton-btn.sel .carton-num { color: var(--acento); font-weight: 700; }
.carton-btn.vendido { opacity: .45; cursor: default; }
.carton-btn.mio { border-color: var(--verde); cursor: default; }
.carton-btn.mio .carton-tomado { color: var(--verde); }
.carton-btn.hallado { outline: 2px solid var(--acento); }

.serie-paginacion { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }

/* panel de compra: fijo abajo en el celular, lateral en desktop */
.serie-layout { display: block; }
.serie-panel { position: sticky; bottom: 8px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .5); }
.serie-panel h3 { color: var(--texto); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.panel-numeros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 20px; }
.panel-num {
  background: rgba(238, 42, 123, .14);
  border: 1px solid var(--acento);
  color: var(--texto);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.serie-panel .btn { margin-top: 8px; }

/* carton comprado: mismos circulos que la pagina del boleto */
.carton-letras, .carton { display: grid; gap: 5px; justify-content: center; }
.carton-letras { margin: 8px 0 2px; }
.carton-letras .letra { width: 46px; text-align: center; font-size: 20px; font-weight: 800; color: var(--acento); }
.carton .celda {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fdfdf6;
  color: #10102e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.carton .celda.libre { background: var(--grad-boton); color: var(--sobre-acento); font-size: 20px; }
/* set visual LOTTO: casilla con numero blanca con borde del color del
   carton; la en blanco, spot relleno de ese color sin simbolo. El
   color viene congelado en el boleto (clase lc-*), tanto en el carton
   grande como en el mini de la grilla de compra. */
.lotto.lc-rojo { --lotto: #e53935; }
.lotto.lc-azul { --lotto: #1e88e5; }
.lotto.lc-verde { --lotto: #43a047; }
.lotto.lc-naranja { --lotto: #fb8c00; }
.carton.lotto .celda { background: #fff; color: #14123a; border: 2px solid var(--lotto); }
.carton.lotto .celda.libre { background: var(--lotto); }
/* grilla rectangular como el carton real (nada de circulos): celdas
   rect y angostas para que las 9 columnas entren tambien en celular */
.carton.lotto .celda { border-radius: 6px; width: 34px; height: 30px; font-size: 14px; }
.carton-mini.lotto span { background: #fff; color: #14123a; border: 1px solid var(--lotto); border-radius: 4px; padding: 5px 0; font-size: 12px; }
.carton-mini.lotto .libre { background: var(--lotto); color: transparent; }
/* compra web lotto: tarjetas mas anchas para que las 9 columnas no
   corten numeros — 2 por fila en desktop, 1 en celular */
.serie-grilla.lotto { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .serie-grilla.lotto { grid-template-columns: 1fr; }
}
.comprada-bono { text-align: center; margin: 8px 0 2px; font-size: 14px; }
.comprada-bono.gano { color: var(--verde); font-weight: 700; }

@media (min-width: 700px) {
  .serie-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
  .serie-panel { position: sticky; top: 110px; bottom: auto; box-shadow: none; }
}

/* ================= landing publica ================= */

.l-navbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 5, 24, .96);
  border-bottom: 1px solid var(--borde);
}
.l-navbar-fila {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.l-navbar .logo-marca { height: 44px; }
.l-navbar .spacer { flex: 1; }
.btn.small { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
/* selector de idioma con banderas */
.lang-picker { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.lang-btn img, .lang-menu img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 4px;
  z-index: 20;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--texto);
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
}
.lang-menu button:hover { background: var(--panel-hundido); }
/* topbar del jugador en celular: la fila carga logo + saldo + salir,
   asi que el picker queda solo con la bandera, sin el codigo */
@media (max-width: 480px) {
  .topbar .lang-code { display: none; }
  .topbar .lang-btn { padding: 5px 7px; }
}
.l-nav { display: flex; gap: 4px; margin-left: 8px; }
.l-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}
.l-nav a:hover { color: var(--acento); }

/* hero: el degradado es el fondo reservado para el banner futuro */
.hero {
  background: var(--grad-hero);
  border-bottom: 1px solid var(--borde);
  text-align: center;
  padding: 44px 16px 40px;
}
.hero-contenido { max-width: 560px; margin: 0 auto; }
.hero h1 {
  color: var(--texto);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.hero p { font-size: 15.5px; line-height: 1.5; margin: 0 0 18px; }
.hero .btn { font-size: 16px; padding: 12px 26px; }

.l-titulo {
  color: var(--texto);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  margin: 26px 0 10px;
}

/* acumulados: mismas tarjetas doradas que la pagina del boleto */
.l-acumulados { display: grid; gap: 8px; }
.l-acumulado {
  background: var(--panel);
  border: 2px solid var(--dorado-suave);
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 0 0 12px rgba(245, 197, 66, .18);
}
.l-acumulado .nombre {
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px;
}
.l-acumulado .monto {
  font-size: 26px;
  font-weight: 800;
  color: var(--dorado);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.l-acumulado .serie { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* como jugar */
.pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paso {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
}
.paso .icono { font-size: 30px; margin-bottom: 6px; }
.paso h3 { font-size: 15px; color: var(--acento); margin-bottom: 4px; }
.paso p { margin: 0; }

/* pie */
.l-pie { border-top: 1px solid var(--borde); margin-top: 30px; text-align: center; }
.l-pie .wrap { padding-bottom: 24px; }
.l-pie-links { display: flex; justify-content: center; gap: 18px; margin: 14px 0 10px; }
.l-pie-links a { color: var(--acento); text-decoration: none; font-size: 14px; }

#auth-volver { display: block; margin: 8px 0 -6px; }

@media (max-width: 699px) {
  /* en el celular el nav central se esconde: quedan logo, idioma y
     los dos botones (las secciones estan a un scroll de distancia) */
  .l-nav { display: none; }
}

@media (min-width: 700px) {
  .wrap { max-width: 900px; }
  .topbar-fila, .nav-app { max-width: 900px; }
  #eventos-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #eventos-lista .card { margin: 0; }
  .hero { padding: 70px 16px 60px; }
  .hero h1 { font-size: 40px; }
  .l-acumulados { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  #l-eventos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #l-eventos .card { margin: 0; }
  .pasos { grid-template-columns: repeat(4, 1fr); }
}

/* motor rifa: tarjeta solo-numero en la grilla de compra */
.carton-btn .rifa-num { display: block; font-size: 1.6em; font-weight: 800; padding: 10px 0; letter-spacing: 1px; }

/* lote R5: cards de rifa (foto y premio principal) y seccion Ganadores */
.evento .evento-foto { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.evento .evento-premio { margin: 2px 0 6px; font-weight: 700; color: var(--dorado, #e8c35a); }
.l-ganadores { display: grid; gap: 12px; }
.ganadores-card .gan-fila { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ganadores-card .gan-orden { font-weight: 700; min-width: 110px; }
.ganadores-card .gan-que { flex: 1; opacity: 0.85; }
.ganadores-card .gan-foto { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.ganadores-card .gan-chip { font-weight: 800; font-size: 1.1em; }
.ganadores-card .gan-chip.c-f { color: #35d07f; }
.ganadores-card .gan-chip.c-o { color: #4db8ff; }
.ganadores-card .gan-chip.nv { opacity: 0.45; }

/* compra de RIFA: grilla compacta de solo numeros — 8-10 por fila en
   desktop y 4-5 en celular, segun el ancho (100 por pagina) */
.serie-grilla.rifa-compacta { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.serie-grilla.rifa-compacta .carton-btn { padding: 10px 4px; font-size: 1.05em; font-weight: 700; text-align: center; }
@media (max-width: 700px) {
  .serie-grilla.rifa-compacta { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* LOTERIA (L5): armado de cartones en la compra web. Las cartas usan
   el modulo compartido (public/loteria/loteria.css); aca la paleta y
   el lugar en esta pantalla. */
#serie-loteria .lot-carton, #serie-loteria .lot-tablero, #compradas-lista .lot-carton {
  --lot-marca: var(--dorado, #f5c542); --lot-sel: var(--acento, #e040fb);
}
.lot-armado-titulo { margin: 0 0 8px; font-weight: 700; }
.lot-armado-carton .lot-carton { max-width: 380px; margin: 0 auto 10px; }
.lot-armado-tablero .lot-tablero { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
#compradas-lista .lot-carton { max-width: 360px; margin: 0 auto; }
@media (max-width: 600px) {
  .lot-armado-tablero .lot-tablero { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}

/* COLOR DEL JUEGO (sep 2026): borde y etiqueta de las cards de
   acumulados, eventos y ganadores. --c-juego / --c-juego-txt los pone
   app.js (aplicarColor) con el color del juego; sin color la card
   queda como siempre. */
.card.con-color { border: 2px solid var(--c-juego); }
.con-color .etq-juego {
  display: inline-block;
  background: var(--c-juego);
  color: var(--c-juego-txt);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}
.con-color .titulo { margin: 0; }
/* ganadores: logo y titulo en fila, al tamaño de las cards de eventos
   (antes el logo salia a su tamaño natural, encima del titulo) */
.ganadores-card .cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ganadores-card .logo { max-height: 44px; max-width: 150px; }
.ganadores-card .subtitulo { margin: 3px 0 0; font-size: 13px; }

/* acumulados POR SERIE: grupos por motor, una card por serie con sus
   pozos adentro (el monto sigue en dorado: es plata) */
.l-acumulados.por-serie { display: block; }
.acum-grupo {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.acum-grupo:first-child { margin-top: 0; }
.acum-grilla { display: grid; gap: 10px; }
.acum-serie { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.acum-serie .cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.acum-serie .logo { max-height: 36px; max-width: 120px; }
.acum-serie .subtitulo { margin: 3px 0 0; font-size: 12.5px; }
.acum-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.acum-fila .nombre { font-weight: 700; font-size: 14px; }
.acum-fila .monto { color: var(--dorado); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 700px) {
  .acum-grilla { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* SORTEOS ABIERTOS con series de solo impresos (sep 2026): etiqueta
   chica del tipo de venta y, en las que no se compran online, un
   aviso en lugar del boton */
.etq-venta {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
.evento .datos.dos { grid-template-columns: 1fr 1fr; }
.sin-compra-txt {
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--borde);
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}

/* MUSICA DE FONDO del juego (lote 2F): boton flotante para silenciar y
   reactivar; solo aparece en las pantallas de un juego con musica. En
   el celular sube para no tapar el panel de compra fijo de abajo. */
.musica-btn {
  position: fixed; left: 14px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.musica-btn.apagada { opacity: .7; }
@media (max-width: 720px) {
  .musica-btn { bottom: 118px; }
}

/* VERIFICAR MI CARTON (lote 2E) y tarjetas de ganadores que abren /r */
.verificar-card .btn { margin-top: 4px; }
.ver-resultado { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); }
.ver-resultado p { margin: 0 0 4px; }
.ver-resultado.gano { border-color: var(--dorado); }
.ver-resultado.gano p:first-child { color: var(--dorado); font-weight: 700; }
.ver-resultado a { color: var(--acento); font-weight: 600; }
a.ganadores-card { display: block; color: inherit; text-decoration: none; }
a.ganadores-card:hover { border-color: var(--acento-2); }
.ganadores-card .gan-ver { margin: 8px 0 0; font-size: 13px; color: var(--acento); font-weight: 600; }