/* Yasta · identidad tomada del logo: azul marino, amarillo y las bolas de colores.
   La app va en claro porque el logo vive sobre blanco: sobre fondo oscuro su "ta"
   blanca y el carton del dibujo se pierden. */

:root {
  --marino: #12276B;
  --marino-2: #1B378F;
  --marino-3: #0C1B4D;
  --amarillo: #FFC107;
  --amarillo-2: #FF9E00;
  --papel: #EEF2FA;
  --blanco: #FFFFFF;
  --tinta: #14204A;
  --tinta-2: #5A6790;
  --linea: #DBE3F2;
  --verde: #1F9D55;
  --rojo: #E63329;
  --azul: #1E7FE0;
  --morado: #8B3FBF;
  --naranja: #FF8A1E;

  --sombra: 0 2px 0 rgba(18, 39, 107, .06), 0 8px 22px rgba(18, 39, 107, .09);
  --sombra-alta: 0 4px 0 rgba(18, 39, 107, .10), 0 14px 34px rgba(18, 39, 107, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

.oculto { display: none !important; }
.vacio { color: var(--tinta-2); font-size: 13px; margin: 4px 0; }
.nota { color: var(--tinta-2); font-size: 12.5px; margin: 0; }
.nota.centrada { text-align: center; }

.epigrafe {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 9px;
}
.fila-epigrafe { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

/* ---------------------------------------------------------- entrar */

.pantalla { display: none; }
.entrar.activa {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background:
    radial-gradient(120% 60% at 50% 0%, #FFFFFF 0%, transparent 60%),
    linear-gradient(170deg, #E7EEFC, var(--papel));
}
.tarjeta {
  width: min(400px, 100%);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: 26px 24px 24px;
  text-align: center;
  box-shadow: var(--sombra-alta);
}
.logo-entrar { width: min(240px, 72%); height: auto; display: block; margin: 0 auto 6px; }
.lema { color: var(--tinta-2); font-size: 14px; margin: 4px 0 22px; }

.tarjeta label {
  display: block;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  margin: 0 0 5px;
}
.tarjeta input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 13px;
  border: 2px solid var(--linea);
  background: #FBFCFF;
  color: var(--tinta);
  font-size: 16px;              /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
  font-weight: 600;
  margin-bottom: 14px;
}
.tarjeta input:focus { outline: none; border-color: var(--amarillo); background: #fff; }
.aviso {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--tinta-2);
  border-top: 1px solid var(--linea);
  padding-top: 14px;
}

/* ---------------------------------------------------------- botones */

.btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  color: var(--marino-3);
  background: linear-gradient(180deg, #FFD34D, var(--amarillo-2));
  box-shadow: 0 3px 0 #D97C00;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #D97C00; }
.btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn.marino { background: linear-gradient(180deg, var(--marino-2), var(--marino)); color: #fff; box-shadow: 0 3px 0 var(--marino-3); }
.btn.fantasma { background: transparent; border: 2px solid var(--linea); color: var(--tinta-2); box-shadow: none; }

.mensaje { min-height: 18px; font-size: 12.5px; margin: 10px 0 0; text-align: center; font-weight: 600; }
.mensaje.error { color: var(--rojo); }
.mensaje.ok { color: var(--verde); }

/* ---------------------------------------------------------- armazon */

.app { display: flex; flex-direction: column; height: 100svh; }

.cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.volver {
  width: 34px; height: 34px;
  border-radius: 11px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--marino);
  display: grid; place-items: center;
  cursor: pointer; padding: 0; flex: none;
}
.logo-cabecera { height: 36px; width: auto; flex: none; }
.titulo {
  font-family: "Bricolage Grotesque", Georgia, serif;
  font-weight: 800;
  font-size: 16.5px;
  color: var(--marino);
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saldo {
  font-family: "Bricolage Grotesque", serif;
  font-weight: 800;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--marino-3);
  background: linear-gradient(180deg, #FFE79A, var(--amarillo));
  border-radius: 999px;
  padding: 5px 12px;
  flex: none;
}

.lienzo { flex: 1; position: relative; overflow: hidden; }
.vista {
  position: absolute; inset: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vista.activa { display: block; }
.cuerpo { padding: 16px; display: grid; gap: 18px; align-content: start; }
.cuerpo > * { min-width: 0; }

.pestanas {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linea);
  background: var(--blanco);
  padding: 7px 6px max(6px, env(safe-area-inset-bottom));
}
.pestana {
  background: none; border: 0;
  color: var(--tinta-2);
  display: grid; justify-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; padding: 4px 0;
  border-radius: 12px;
}
.pestana.on { color: var(--marino); }
.pestana.on.rifas { color: var(--rojo); }

/* ---------------------------------------------------------- modos */

.lista-modos { display: grid; gap: 12px; }
.modo {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 13px;
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 13px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  box-shadow: var(--sombra);
}
.modo:active { transform: translateY(1px); }

/* Ficha con aspecto de bola de bingo, que es el objeto de esta app. */
.ficha {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", serif;
  font-weight: 800; font-size: 17px;
  color: #fff;
  flex: none;
  position: relative;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.22), 0 2px 5px rgba(18,39,107,.25);
}
.ficha::after {
  content: "";
  position: absolute; top: 14%; left: 22%;
  width: 34%; height: 26%;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  filter: blur(2px);
}
.ficha.c-azul { background: radial-gradient(circle at 34% 28%, #6FB4FF, var(--azul) 62%, #12539B); }
.ficha.c-rojo { background: radial-gradient(circle at 34% 28%, #FF8A82, var(--rojo) 62%, #9B1E17); }
.ficha.c-verde { background: radial-gradient(circle at 34% 28%, #74D89B, var(--verde) 62%, #12673A); }
.ficha.c-amarillo { background: radial-gradient(circle at 34% 28%, #FFE79A, var(--amarillo) 62%, #C98A00); color: var(--marino-3); }
.ficha.c-morado { background: radial-gradient(circle at 34% 28%, #C88FEA, var(--morado) 62%, #5C2680); }

.modo .nom { display: grid; gap: 2px; min-width: 0; }
.modo .nom b {
  font-family: "Bricolage Grotesque", serif;
  font-size: 16.5px;
  color: var(--marino);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modo .nom span { font-size: 12.5px; color: var(--tinta-2); }
.modo .der { text-align: right; display: grid; gap: 3px; }
.modo .der .p { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--marino); }
.modo .der .e { font-size: 10.5px; color: var(--tinta-2); font-weight: 600; }
.modo .der .e.vivo { color: var(--rojo); }

/* ---------------------------------------------------------- bombo */

.bombo {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(160deg, var(--marino-2), var(--marino));
  border-radius: 22px;
  padding: 15px;
  color: #fff;
  box-shadow: var(--sombra-alta);
}
/* Bola de bingo de verdad, como las del logo: esfera de color con un circulo blanco
   dentro donde vive el numero. El brillo entra arriba a la izquierda, igual que en el
   dibujo. El color lo pone el rango del numero, como las columnas B-I-N-G-O. */
.bola {
  width: 84px; height: 84px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  background: radial-gradient(circle at 33% 26%, #B9C6DE, #6C7B99 55%, #3D4A66);
  box-shadow:
    inset 0 -7px 14px rgba(0, 0, 0, .28),
    inset 0 3px 6px rgba(255, 255, 255, .3),
    0 5px 12px rgba(0, 0, 0, .32);
}
.bola::after {
  content: "";
  position: absolute; top: 9%; left: 17%;
  width: 30%; height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  filter: blur(2.5px);
  pointer-events: none;
}
.bola .n {
  width: 64%; height: 64%;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #EFF3FA);
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", serif;
  font-size: 27px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--marino-3);
  box-shadow: inset 0 2px 5px rgba(18, 39, 107, .18);
  position: relative;
  z-index: 1;
}
.bola.sin-bola .n { color: var(--tinta-2); font-size: 24px; }

.bola.b-azul     { background: radial-gradient(circle at 33% 26%, #7CBCFF, var(--azul) 55%, #0F4C90); }
.bola.b-rojo     { background: radial-gradient(circle at 33% 26%, #FF9188, var(--rojo) 55%, #97170F); }
.bola.b-verde    { background: radial-gradient(circle at 33% 26%, #79DCA0, var(--verde) 55%, #0F5F35); }
.bola.b-amarillo { background: radial-gradient(circle at 33% 26%, #FFE08A, var(--amarillo-2) 55%, #B96F00); }
.bola.b-morado   { background: radial-gradient(circle at 33% 26%, #CE9BEE, var(--morado) 55%, #55217A); }

.bola.nueva { animation: rebote .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rebote {
  0%   { transform: scale(.55) rotate(-18deg); opacity: .55; }
  60%  { transform: scale(1.12) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bombo-info { flex: 1; min-width: 0; display: grid; gap: 9px; }
.anteriores { display: flex; gap: 6px; flex-wrap: wrap; }
/* Las bolas ya cantadas: las mismas, en pequeno. */
.anteriores span {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 33% 26%, #B9C6DE, #6C7B99 60%, #3D4A66);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
}
.anteriores span i {
  width: 68%; height: 68%;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  font-style: normal;
  font-size: 12.5px; font-weight: 800;
  color: var(--marino-3);
  font-variant-numeric: tabular-nums;
}
.anteriores span.b-azul     { background: radial-gradient(circle at 33% 26%, #7CBCFF, var(--azul) 60%, #0F4C90); }
.anteriores span.b-rojo     { background: radial-gradient(circle at 33% 26%, #FF9188, var(--rojo) 60%, #97170F); }
.anteriores span.b-verde    { background: radial-gradient(circle at 33% 26%, #79DCA0, var(--verde) 60%, #0F5F35); }
.anteriores span.b-amarillo { background: radial-gradient(circle at 33% 26%, #FFE08A, var(--amarillo-2) 60%, #B96F00); }
.anteriores span.b-morado   { background: radial-gradient(circle at 33% 26%, #CE9BEE, var(--morado) 60%, #55217A); }
.progreso-bolas { font-size: 12.5px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.progreso-bolas b { color: #fff; font-size: 16px; }

/* ---------------------------------------------------------- bote */

.panel-bote {
  background: linear-gradient(160deg, #FFF6DC, #FFE9AE);
  border: 1px solid #F3D274;
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--sombra);
}
.bote {
  font-family: "Bricolage Grotesque", serif;
  font-size: 31px; font-weight: 800;
  color: var(--marino);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 11px;
}
.premios { display: grid; gap: 6px; font-size: 12.5px; }
.premios div { display: flex; justify-content: space-between; gap: 10px; }
.premios span { color: #7A6320; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.premios b { font-variant-numeric: tabular-nums; color: var(--marino); flex: none; }
.premios div.pagado span, .premios div.pagado b { opacity: .45; text-decoration: line-through; }
.pie-bote {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #7A6320; font-weight: 600;
  border-top: 1px solid #F0CE72;
  margin-top: 11px; padding-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- compra */

.panel-compra {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--sombra);
}
.reloj {
  font-family: "Bricolage Grotesque", serif;
  font-size: 25px; font-weight: 800;
  text-align: center;
  color: var(--marino);
  font-variant-numeric: tabular-nums;
}
.reloj.urgente { color: var(--rojo); }
.panel-compra .nota { margin: 3px 0 12px; }
.botones-compra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.botones-compra button {
  padding: 12px 0;
  border: 2px solid var(--linea);
  background: var(--papel);
  color: var(--marino);
  border-radius: 12px;
  font-size: 16px; font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.botones-compra button:not(:disabled):active { background: var(--amarillo); border-color: var(--amarillo-2); }
.botones-compra button:disabled { opacity: .3; }

/* ---------------------------------------------------------- cartones */

.cartones { display: grid; gap: 12px; }
/* Sin tope, en pantalla ancha las celdas crecian hasta 180px y el carton dejaba de
   parecer un carton. Cada formato tiene su ancho natural y va centrado. */
.carton.carton-c3 { max-width: 320px; }
.carton.carton-c5 { max-width: 420px; }
.carton.carton-c9 { max-width: 450px; }

.carton {
  max-width: 430px;
  margin-inline: auto;
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--sombra);
}
.carton.cerca { border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(255,193,7,.28), var(--sombra); }

/* Cabecera B-I-N-G-O del carton de 75, con los colores de las bolas del logo. */
.carton-cabecera { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.carton-cabecera span {
  padding: 5px 0;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: "Bricolage Grotesque", serif;
  font-weight: 800; font-size: 15px;
  color: #fff;
}
.carton-cabecera span:nth-child(1) { background: var(--azul); }
.carton-cabecera span:nth-child(2) { background: var(--rojo); }
.carton-cabecera span:nth-child(3) { background: var(--verde); }
.carton-cabecera span:nth-child(4) { background: var(--amarillo-2); }
.carton-cabecera span:nth-child(5) { background: var(--morado); }

.rejilla { display: grid; gap: 5px; width: 100%; }
.rejilla span {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--papel);
  border: 1px solid var(--linea);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--marino);
}
.rejilla.c9 span { font-size: 11px; border-radius: 5px; }
.rejilla.c5 span { font-size: 15px; }

/* Un hueco no es un fallo de pintado: es una celda sin numero. Con rayas suaves se
   lee como parte del carton y no como que falta algo. */
.rejilla span.hueco {
  background: repeating-linear-gradient(45deg, #F4F7FD, #F4F7FD 5px, #E9EEF9 5px, #E9EEF9 10px);
  border-color: #E4EAF6;
  box-shadow: none;
}

/* El centro del carton de 75: el logo, siempre cubierto. */
.rejilla span.logo {
  background: #fff center/86% no-repeat url('/img/logo-cuadro.png');
  border-color: var(--amarillo);
  box-shadow: inset 0 0 0 2px rgba(255,193,7,.5);
}
.rejilla span.marcada {
  background: linear-gradient(170deg, #FFD34D, var(--amarillo-2));
  border-color: var(--amarillo-2);
  color: var(--marino-3);
  animation: sello .28s cubic-bezier(.2,1.5,.4,1);
}
@keyframes sello { from { transform: scale(.5) rotate(-12deg); } to { transform: scale(1) rotate(0); } }

.pie-carton {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--tinta-2); font-weight: 600;
  margin-top: 9px;
}
.pie-carton .falta { color: var(--amarillo-2); font-weight: 800; }

/* ---------------------------------------------------------- ganadores */

.ganadores { display: grid; gap: 8px; }
.ganador {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 13px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}
.ganador.tuyo { background: linear-gradient(180deg, #FFF6DC, #FFECBE); border-color: var(--amarillo); }
.ganador .q { min-width: 0; }
.ganador .premio {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-2); display: block; font-weight: 800;
}
.ganador b { color: var(--verde); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- rifas */

.rejilla-rifas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjeta-rifa {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  padding: 0;
  display: grid;
  align-content: start;
  box-shadow: var(--sombra);
}
.tarjeta-rifa:active { transform: translateY(1px); }
.rifa-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  display: block;
  padding: 6px;
}
.tarjeta-rifa .txt { padding: 4px 11px 12px; display: grid; gap: 7px; }
.tarjeta-rifa .txt b { font-size: 13.5px; line-height: 1.25; color: var(--marino); }
.boleto-precio {
  font-family: "Bricolage Grotesque", serif;
  font-size: 15px; font-weight: 800;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}
.restan { font-size: 10.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; font-weight: 600; }

.barra { height: 7px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF6B5E, var(--rojo)); }
.barra.casi i { background: linear-gradient(90deg, #FFD34D, var(--amarillo-2)); }

/* detalle */
.detalle-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 10px;
  box-shadow: var(--sombra);
}
.titulo-rifa {
  font-family: "Bricolage Grotesque", serif;
  font-size: 22px; font-weight: 800;
  color: var(--marino);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.dos-datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dato {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 15px;
  padding: 12px;
  box-shadow: var(--sombra);
}
.dato .et { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); font-weight: 800; }
.dato .vl {
  font-family: "Bricolage Grotesque", serif;
  font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--marino);
  letter-spacing: -.02em;
}
.dato .vl.rojo { color: var(--rojo); }

.contador {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 15px;
  padding: 11px 12px;
  box-shadow: var(--sombra);
}
.contador .mm { display: flex; align-items: center; gap: 12px; }
.contador button {
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 2px solid var(--linea);
  background: var(--papel);
  color: var(--marino);
  font-size: 19px; font-weight: 800;
  cursor: pointer; line-height: 1;
  font-family: inherit;
}
.contador .cant {
  font-family: "Bricolage Grotesque", serif;
  font-size: 21px; font-weight: 800;
  min-width: 40px; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--marino);
}

.mis-boletos { display: flex; flex-wrap: wrap; gap: 5px; }
.mis-boletos span {
  background: var(--marino);
  color: #fff;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.justo {
  background: #E7F6EE;
  border: 1px solid #B9E3CC;
  border-radius: 14px;
  padding: 12px 14px;
}
.justo summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: #12673A; }
.justo .nota { margin: 10px 0; color: #2C6E4C; }
.justo dl { margin: 0; display: grid; gap: 8px; }
.justo dt { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #4C8567; font-weight: 800; }
.justo dd { margin: 2px 0 0; font-family: Consolas, monospace; font-size: 10.5px; word-break: break-all; color: #14402A; }

/* ---------------------------------------------------------- cartera */

.tarjeta-saldo {
  border-radius: 22px;
  padding: 20px;
  background: linear-gradient(160deg, var(--marino-2), var(--marino));
  color: #fff;
  box-shadow: var(--sombra-alta);
}
.tarjeta-saldo .epigrafe { color: rgba(255,255,255,.7); }
.saldo-grande {
  font-family: "Bricolage Grotesque", serif;
  font-size: 36px; font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--amarillo);
}
.tarjeta-saldo .nota { color: rgba(255,255,255,.72); margin-top: 4px; }

.movimientos { display: grid; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 4px 14px; box-shadow: var(--sombra); }
.movimiento {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}
.movimiento:last-child { border-bottom: 0; }
.movimiento .q { display: grid; gap: 1px; min-width: 0; }
.movimiento .q b { font-size: 13.5px; color: var(--marino); }
.movimiento .q span { font-size: 11px; color: var(--tinta-2); }
.movimiento .m { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13.5px; flex: none; }
.movimiento .m.pos { color: var(--verde); }
.movimiento .m.neg { color: var(--tinta-2); }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- recargar y retirar */

.par-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.paso {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--sombra);
}
.paso .num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFD34D, var(--amarillo-2));
  color: var(--marino-3);
  font-family: "Bricolage Grotesque", serif;
  font-weight: 800;
}
.paso b { color: var(--marino); font-size: 15px; }
.paso .nota { margin-top: 2px; }

.datos-cobro { margin: 12px 0 0; display: grid; gap: 8px; }
.datos-cobro div {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--papel);
  border-radius: 10px;
  padding: 9px 11px;
}
.datos-cobro dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); font-weight: 800; }
.datos-cobro dd {
  margin: 0;
  font-weight: 800; font-size: 14px;
  color: var(--marino);
  font-variant-numeric: tabular-nums;
}
.copiar {
  border: 0; background: none; cursor: pointer;
  color: var(--azul); font-weight: 800; font-size: 11.5px;
  font-family: inherit; padding: 2px 4px;
}

.formulario { display: grid; gap: 0; }
.formulario label {
  font-size: 12.5px; font-weight: 700; color: var(--tinta-2);
  margin-bottom: 5px;
}
.formulario input, .formulario select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 13px;
  border: 2px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  margin-bottom: 14px;
}
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--amarillo); }

.solicitud {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--tinta-2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.solicitud.pendiente { border-left-color: var(--amarillo-2); }
.solicitud.confirmada { border-left-color: var(--verde); }
.solicitud.rechazada { border-left-color: var(--rojo); }
.solicitud .q { display: grid; gap: 1px; min-width: 0; }
.solicitud .q b { color: var(--marino); }
.solicitud .q span { font-size: 11px; color: var(--tinta-2); }
.solicitud .m { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; color: var(--marino); }
.etiqueta-estado {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--tinta-2);
}

/* ---------------------------------------------------------- cartón: bordes de color

   Cada columna hereda el color de su letra B-I-N-G-O, igual que las bolas. Antes las
   celdas eran todas del mismo gris azulado y el cartón se veía plano y sin marca. */

.carton {
  border-width: 3px;
  border-color: var(--marino);
  background: linear-gradient(180deg, #FFFFFF, #F7F9FE);
}

.carton-cabecera { gap: 5px; margin-bottom: 5px; }
.carton-cabecera span {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  letter-spacing: .06em;
}

/* El color se aplica por posición de columna. La rejilla siempre tiene 5 columnas,
   así que nth-child(5n+k) toca siempre la misma columna en todas las filas. */
.rejilla.c5 span:nth-child(5n + 1) { border-color: #A8D2FF; background: #F2F8FF; color: #0F4C90; }
.rejilla.c5 span:nth-child(5n + 2) { border-color: #FFC0BB; background: #FFF5F4; color: #97170F; }
.rejilla.c5 span:nth-child(5n + 3) { border-color: #A9E6C4; background: #F2FCF7; color: #0F5F35; }
.rejilla.c5 span:nth-child(5n + 4) { border-color: #FFDFA0; background: #FFFAEF; color: #8A5200; }
.rejilla.c5 span:nth-child(5n + 5) { border-color: #DDBBF2; background: #FBF5FF; color: #55217A; }

.rejilla span { border-width: 2px; font-weight: 800; }

/* La marcada gana a cualquier color de columna. */
.rejilla span.marcada {
  background: linear-gradient(170deg, #FFD34D, var(--amarillo-2)) !important;
  border-color: #D97C00 !important;
  color: var(--marino-3) !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.rejilla span.logo {
  border-color: var(--amarillo) !important;
  background: #fff center/86% no-repeat url('/img/logo-cuadro.png') !important;
}

/* Ya no existen huecos: todos los cartones van llenos. Se deja la regla por si
   alguna ronda vieja guardada los tuviera. */
.rejilla span.hueco { background: #F4F7FD; border-color: #E4EAF6; }

/* ---------------------------------------------------------- monedero y VIP */

.tarjeta-saldo .desglose {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 4px;
  background: rgba(255, 255, 255, .08);
  border-radius: 14px;
  overflow: hidden;
}
.desglose th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  font-weight: 800;
  padding: 9px 12px 6px;
}
.desglose th:last-child, .desglose td:last-child { text-align: right; }
.desglose td {
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.desglose td .sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}
.desglose .punto {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.desglose .punto.real { background: var(--verde); }
.desglose .punto.demo { background: var(--amarillo); }

.tarjeta-saldo .par-botones { margin-top: 14px; }
.btn.claro {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .28);
}

/* ---- progreso VIP ---- */

.tarjeta-vip {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--sombra);
  display: grid;
  gap: 10px;
}
.vip-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vip-cabecera .q { display: grid; gap: 1px; min-width: 0; }
.vip-cabecera b { font-family: "Bricolage Grotesque", serif; font-size: 17px; color: var(--marino); }

.insignia {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--marino-3);
  background: linear-gradient(180deg, #FFE79A, var(--amarillo));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.insignia.n-bronce   { background: linear-gradient(180deg, #E7B98A, #C0803F); }
.insignia.n-plata    { background: linear-gradient(180deg, #E8EDF5, #A9B6C9); }
.insignia.n-oro      { background: linear-gradient(180deg, #FFE79A, var(--amarillo)); }
.insignia.n-platino  { background: linear-gradient(180deg, #D9E6F5, #8FA8C4); }
.insignia.n-diamante { background: linear-gradient(180deg, #BFEEFF, #57C4E8); }

.vip-barra-fila { display: flex; justify-content: space-between; align-items: baseline; }
.vip-barra-fila .epigrafe { margin: 0; }
.vip-barra-fila b { font-family: "Bricolage Grotesque", serif; font-size: 15px; color: var(--marino); font-variant-numeric: tabular-nums; }

.barra.oro { height: 9px; }
.barra.oro i { background: linear-gradient(90deg, #FFD34D, var(--amarillo-2)); }

.vip-extremos {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-2);
}

.rejilla-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla-datos .vl { font-size: 21px; }

/* ---------------------------------------------------------- ajuste fino en teléfono

   El teléfono es donde se juega de verdad. Aquí se aprieta el margen lateral, se
   reduce el alto de las tarjetas y se hace que el cartón use el ancho disponible,
   que con 5 columnas y 7 filas es lo que decide si se ve bien o no. */

@media (max-width: 480px) {
  .cuerpo { padding: 12px; gap: 14px; }

  /* Que el cartón aproveche el ancho: en un teléfono no sobra ni un píxel. */
  .carton.carton-c3,
  .carton.carton-c5,
  .carton.carton-c9 { max-width: 100%; }
  .carton { padding: 8px; border-width: 2px; border-radius: 14px; }
  .rejilla { gap: 4px; }
  .rejilla span { border-width: 1.5px; border-radius: 7px; font-size: 14px; }
  .carton-cabecera { gap: 4px; margin-bottom: 4px; }
  .carton-cabecera span { font-size: 13px; padding: 4px 0; border-radius: 6px; }
  .pie-carton { font-size: 11px; margin-top: 7px; }

  /* El bombo ocupaba casi media pantalla antes de ver un cartón. */
  .bombo { padding: 12px; gap: 12px; border-radius: 18px; }
  .bola { width: 68px; height: 68px; }
  .bola .n { font-size: 23px; }
  .anteriores span { width: 30px; height: 30px; }
  .anteriores span i { font-size: 11.5px; }

  .panel-bote, .panel-compra { padding: 13px; border-radius: 18px; }
  .bote { font-size: 26px; }
  .reloj { font-size: 22px; }
  .botones-compra { gap: 6px; }
  .botones-compra button { padding: 11px 0; font-size: 15px; }

  .tarjeta-saldo, .tarjeta-vip { padding: 14px; border-radius: 18px; }
  .saldo-grande { font-size: 30px; }
  .rejilla-datos { gap: 8px; }
  .rejilla-datos .vl { font-size: 18px; }

  .modo { grid-template-columns: 46px 1fr auto; padding: 11px; gap: 11px; }
  .ficha { width: 46px; height: 46px; font-size: 15px; }
  .modo .nom b { font-size: 15px; }

  .rejilla-rifas { gap: 9px; }
  .logo-cabecera { height: 32px; }
  .saldo { font-size: 13.5px; padding: 5px 10px; }
}

/* Teléfonos estrechos: el cartón de 7 filas necesita que el número quepa. */
@media (max-width: 370px) {
  .cuerpo { padding: 10px; }
  .rejilla span { font-size: 12.5px; border-radius: 6px; }
  .carton-cabecera span { font-size: 11.5px; }
  .bola { width: 60px; height: 60px; }
  .bola .n { font-size: 20px; }
}

/* ---------------------------------------------------------- cartón: nada se sale

   Las columnas de la cabecera y de la rejilla se declaran con minmax(0, 1fr) y no
   con 1fr a secas: con 1fr una celda cuyo contenido pida más ancho del que hay
   ensancha su columna y empuja el resto fuera de la tarjeta. Esa fue la causa de
   que la O apareciera flotando por fuera del borde.

   El overflow del cartón es el seguro final: si algún día algo vuelve a pedir más
   ancho del que hay, se recorta dentro y no rompe la pantalla. */

.carton { overflow: hidden; }

.carton-cabecera { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.carton-cabecera span {
  aspect-ratio: auto !important;
  min-width: 0;
  padding: 5px 0;
  line-height: 1.15;
}

.rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.rejilla span { min-width: 0; }

/* ---------------------------------------------------------- la presentadora */

.escenario {
  position: relative;
  height: 168px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(165deg, #2A1E4A, #12184A);
  display: grid;
  align-content: space-between;
  padding: 12px;
  box-shadow: var(--sombra-alta);
}
.escenario .aura {
  position: absolute; inset: 0;
  background: radial-gradient(52% 62% at 50% 44%, rgba(255, 193, 7, .3), transparent 68%);
}
/* Marcador de posición de Valentina. Aquí va el vídeo cuando exista la biblioteca
   de clips; la silueta mantiene la composición para no rediseñar después. */
.escenario .silueta {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 116px; height: 112px;
  border-radius: 58px 58px 0 0;
  background: linear-gradient(180deg, rgba(255, 193, 7, .6), rgba(138, 46, 107, .25) 65%, transparent);
}
.escenario .silueta::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFE1A8, #E08A46);
}
.escenario .fila-sup {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}

.badge-vivo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rojo);
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  padding: 4px 9px;
  border-radius: 999px;
}
.badge-vivo .pulso {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: latir 1.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.btn-voz {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px; font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.btn-voz.encendida { background: var(--amarillo); border-color: var(--amarillo-2); color: var(--marino-3); }

.subtitulo {
  position: relative;
  background: rgba(6, 9, 20, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; gap: 9px;
  min-height: 38px;
}
.onda { display: flex; gap: 2px; align-items: flex-end; height: 15px; flex: none; opacity: .25; }
.onda.hablando { opacity: 1; }
.onda i { width: 2.5px; background: var(--amarillo); border-radius: 2px; height: 5px; }
.onda.hablando i { animation: hablar 1s ease-in-out infinite; }
.onda i:nth-child(2) { height: 12px; animation-delay: .15s; }
.onda i:nth-child(3) { height: 8px;  animation-delay: .3s; }
.onda i:nth-child(4) { height: 14px; animation-delay: .45s; }
@keyframes hablar { 0%, 100% { transform: scaleY(.4) } 50% { transform: scaleY(1) } }

@media (max-width: 480px) {
  .escenario { height: 146px; border-radius: 18px; }
  .escenario .silueta { width: 100px; height: 96px; }
}