/* Barra superior, saldo y menu. MOBILE-FIRST.

   Compartida por los tres juegos y la portada: antes cada uno tenia su propia
   barra y el jugador se encontraba con tres formas distintas de ver el saldo y
   de cerrar sesion segun donde estuviera. Las paginas cargan primero este
   archivo y despues el suyo, que solo agrega lo del juego.

   Va junto con js/barra.js, que arma este markup. Los colores salen de las
   variables de la pagina que la incluye (todas usan la misma paleta). */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/oswald.woff2') format('woff2');
}

:root {
  --br-fondo:       #081226;
  --br-panel:       #0d1b38;
  --br-borde:       #1c3564;
  --br-azul:        #2f9df0;
  --br-azul-brillo: #6cc4ff;
  --br-naranja:     #f7941d;
  --br-naranja-brillo: #ffb54d;
  --br-texto:       #eaf3ff;
  --br-texto-suave: #9fb4d8;
  --br-verde:       #4ad07a;
  --br-titulo: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --br-transicion: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* --- La barra ------------------------------------------------------------- */

/* Tres columnas: volver a la izquierda, el saldo SIEMPRE al centro exacto de la
   pantalla, y los botones a la derecha. Las columnas de los costados miden lo
   mismo justamente para que el saldo quede centrado de verdad y no corrido
   segun lo largo que sea el nombre de la marca. */
.barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(8, 18, 38, .92);
  border-bottom: 1px solid rgba(47, 157, 240, .25);
  position: sticky;
  top: 0;
  z-index: 20;
}

.barra__volver {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-width: 0;
  color: var(--br-texto-suave);
  text-decoration: none;
  transition: color var(--br-transicion);
}
.barra__volver:hover { color: var(--br-texto); }

.barra__logo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
  flex: none;
}

.barra__nombre {
  font-family: var(--br-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .5px;
  color: var(--br-azul-brillo);
  white-space: nowrap;
}
.barra__nombre em { font-style: normal; color: var(--br-naranja); }

.barra__botones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  justify-self: end;
}

.iconoBtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  color: var(--br-texto-suave);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--br-borde);
  border-radius: 11px;
  cursor: pointer;
  transition: color var(--br-transicion), border-color var(--br-transicion), background var(--br-transicion);
}
.iconoBtn:hover { color: var(--br-texto); border-color: var(--br-azul); }
.iconoBtn:active { transform: scale(.94); }

/* Estado silenciado: se apagan las ondas y aparece la cruz. */
.iconoBtn .icono__cruz { opacity: 0; }
.iconoBtn.silenciado { color: #6a80a8; }
.iconoBtn.silenciado .icono__ondas { opacity: 0; }
.iconoBtn.silenciado .icono__cruz { opacity: 1; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- El saldo ------------------------------------------------------------- */

/* Es un boton: se toca para ver el detalle y elegir con cual se juega. Va al
   centro porque es el dato que se mira mil veces por partida. */
.saldo {
  display: block;
  min-width: 118px;
  text-align: center;
  padding: 5px 16px;
  font-family: inherit;
  color: var(--br-texto);
  background: rgba(13, 27, 56, .9);
  border: 1px solid var(--br-borde);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--br-transicion), background var(--br-transicion);
}
.saldo:hover { border-color: var(--br-naranja); background: rgba(247, 148, 29, .1); }

.saldo__etiqueta {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--br-texto-suave);
}

/* Mientras se juega con el bono la etiqueta cambia de color y de texto. El
   jugador tiene que poder ver de que bolsa sale cada apuesta sin abrir ningun
   menu: enterarse recien al pedir un retiro es lo que genera el reclamo. */
.saldo__etiqueta--bono { color: var(--br-naranja); }

.saldo__valor {
  display: block;
  font-family: var(--br-titulo);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--br-naranja-brillo);
  font-variant-numeric: tabular-nums;
  transition: color var(--br-transicion);
}
.saldo__valor.sube { color: var(--br-verde); }

/* --- Modal ---------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* Sin esto el atributo `hidden` no oculta nada: el `display: grid` de arriba le
   gana al display:none del navegador, y el modal invisible queda tapando la
   pantalla e interceptando los clicks. */
.modal[hidden] { display: none; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 20, .78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.modal.abierto .modal__fondo { opacity: 1; }

.modal__caja {
  position: relative;
  width: min(430px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--br-panel) 0%, #0a1730 100%);
  border: 1px solid var(--br-borde);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.2, .8, .3, 1);
}
.modal.abierto .modal__caja { opacity: 1; transform: none; }

.modal__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 20px;
  border-bottom: 1px solid var(--br-borde);
}

.modal__titulo {
  margin: 0;
  font-family: var(--br-titulo);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--br-texto);
}

/* `overscroll-behavior: contain` corta el encadenamiento: al llegar al final de
   la ventana, el gesto NO se le pasa a la pagina de abajo. Sin esto, seguir
   deslizando mueve el fondo en vez del contenido. */
.modal__cuerpo {
  padding: 6px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal__nota {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--br-texto-suave);
}

/* --- Menú ----------------------------------------------------------------- */

.menu { display: grid; gap: 8px; padding-top: 12px; }

.menu__item {
  padding: 15px 17px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  color: var(--br-texto);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--br-borde);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--br-transicion);
}
.menu__item:hover { border-color: var(--br-azul); background: rgba(47, 157, 240, .1); }
.menu__item--suave { color: var(--br-texto-suave); font-weight: 500; font-size: 13.5px; }

/* Con que cuenta se esta jugando, arriba del menu. Es lo primero que hay que
   poder responder cuando alguien pide un deposito o un retiro. */
.menu__quien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--br-borde);
  border-radius: 12px;
}

.menu__quienEtiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--br-texto-suave);
}

.menu__quienValor {
  font-family: var(--br-titulo);
  font-size: 17px;
  font-weight: 600;
  color: var(--br-naranja-brillo);
}

/* Depositar: en el verde de WhatsApp y con su logo, porque es la accion que se
   busca cuando se acaba el saldo y tiene que encontrarse sin leer. */
.menu__item--whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #08301c;
  background: linear-gradient(180deg, #2ee06a, #1faa4f);
  border-color: #25bd59;
}
.menu__item--whatsapp:hover {
  background: linear-gradient(180deg, #45e97d, #23bd58);
  border-color: #45e97d;
}

/* Retirar comparte forma con depositar pero va delineado: las dos son
   importantes, y depositar es la que conviene que resalte. */
.menu__item--retirar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #35d16f;
  background: rgba(53, 209, 111, .1);
  border-color: rgba(53, 209, 111, .45);
}
.menu__item--retirar:hover {
  color: #5df093;
  background: rgba(53, 209, 111, .16);
  border-color: #35d16f;
}

/* --- Detalle del saldo (dentro del modal) --------------------------------- */

.saldoModal { display: grid; gap: 10px; }

.saldoModal__total {
  text-align: center;
  padding: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--br-borde);
  border-radius: 13px;
}

.saldoModal__etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--br-texto-suave);
}

.saldoModal__valor {
  display: block;
  margin-top: 3px;
  font-family: var(--br-titulo);
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--br-naranja-brillo);
}

.opcionSaldo {
  display: grid;
  gap: 5px;
  padding: 14px 15px;
  font-family: inherit;
  text-align: left;
  color: var(--br-texto);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--br-borde);
  border-radius: 13px;
  cursor: pointer;
  transition: all var(--br-transicion);
}
.opcionSaldo:hover:not(:disabled) { border-color: var(--br-azul); }
.opcionSaldo.activa { border-color: var(--br-naranja); background: rgba(247, 148, 29, .08); }
.opcionSaldo:disabled { opacity: .45; cursor: not-allowed; }
/* En la portada no se apuesta, asi que las bolsas se muestran pero no se
   eligen: sin esto parecerian botones muertos. */
.opcionSaldo--soloVer { cursor: default; }

.opcionSaldo__arriba {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.opcionSaldo__nombre { font-size: 14.5px; font-weight: 700; }

.opcionSaldo__monto {
  font-family: var(--br-titulo);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--br-naranja-brillo);
}

.opcionSaldo__detalle { font-size: 12.5px; line-height: 1.5; color: var(--br-texto-suave); }

.opcionSaldo__accion {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--br-azul-brillo);
}
.opcionSaldo.activa .opcionSaldo__accion { color: var(--br-verde); }
.opcionSaldo:disabled .opcionSaldo__accion { color: var(--br-texto-suave); font-weight: 600; }

/* Texto de ayuda dentro del modal (por que no podes retirar, como se juega). */
.ayuda { padding-top: 10px; }
.ayuda p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--br-texto-suave); }
.ayuda strong { color: var(--br-naranja-brillo); font-weight: 700; }
.ayuda__nota {
  padding-top: 10px;
  border-top: 1px solid var(--br-borde);
  font-size: 12.5px !important;
  opacity: .85;
}

/* --- Pantallas chicas ------------------------------------------------------ */

/* En los telefonos angostos la marca se come el lugar del saldo, que es el dato
   que se mira todo el tiempo. Queda la flecha sola: igual se entiende. */
@media (max-width: 430px) {
  .barra { padding: 8px; gap: 6px; }
  .barra__nombre { display: none; }
  .saldo { min-width: 104px; padding: 5px 12px; }
  .saldo__valor { font-size: 19px; }
  .iconoBtn { width: 38px; height: 38px; }
}

/* --- Escritorio: el header alineado a la columna de 560px ------------------
   Igual que la portada: el fondo de la barra va de punta a punta pero el
   contenido (volver, saldo, menu) se centra en los mismos 560px que el juego,
   asi el header no queda mas ancho que el resto. */
@media (min-width: 700px) {
  .barra { padding-inline: max(12px, calc((100% - 560px) / 2)); }
}