/* Lo que NO está en el prototipo y se agregó a pedido, en un archivo propio.

   Va acá y no en miniapp.css porque miniapp.css es copia byte a byte del <style> del
   prototipo y una suite lo afirma: cualquier regla que se cuele ahí rompe esa igualdad.
   Va acá y no en cascaron.css porque cascaron.css es sólo layout del teléfono.

   Separado así, "qué se agregó por encima del prototipo" es un archivo que se lee
   entero en veinte segundos, en vez de un diff contra 13750 bytes.

   Todo lo de acá usa las variables del prototipo. Ni un color nuevo. */

/* El botón de sonido. El prototipo lo tiene en la .soundbar del documento, que es
   andamio y no se porta; adentro del teléfono no había ninguno, y el sonido terminó
   colgado del interruptor de movimiento. Son dos molestias distintas: quien apaga las
   animaciones porque lo marean no está pidiendo silencio. */
.derecha{display:inline-flex;align-items:center;gap:8px;}

.son{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;cursor:pointer;line-height:1;font-size:13px;
  border:1px solid var(--line);border-radius:99px;background:var(--paper);
  color:var(--muted);
}
.son[aria-pressed="true"]{
  color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);
}
.son:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* La fila de Cerrar, al pie de la pantalla del cierre. Es la única pieza que el
   prototipo no dibuja: ahí la Mini App no termina nunca porque es un documento.

   No trae ni un color ni un tamaño propio. Es una fila .pay —su fondo, su padding y
   sus 13.5px ya vienen de ahí— a lo ancho y centrada. Lo único que se agrega es
   deshacer lo que el navegador le hace a un <button>: su propia tipografía y su
   propio color de texto, que no son los de la app. */
.pay.cerrar{
  width:100%;justify-content:center;cursor:pointer;
  font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
}
.pay.cerrar:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Un patrón COMPLETO que no cobró.

   El dorado significa premio y se queda con .cell.win. Lo completo que llegó segundo
   se marca igual —es cierto que está completo— pero no con el color del premio: la
   celda sigue siendo .cell.hit, con su violeta, y esto le agrega el aro interior.

   Ni un color ni un tamaño nuevo. El aro de 2px por dentro es el recurso que el
   prototipo ya usa en .cell.need, con el mismo grosor, y el #fff es el color de texto
   que .cell.hit y .cell.win ya traen de ahí.

   No se confunde con .cell.need aunque compartan el recurso: .need es fondo durazno
   con aro naranja sobre un número que TODAVÍA NO salió; esto es violeta sólido con aro
   blanco sobre uno que sí. Y nunca coinciden en la misma celda: la que falta no puede
   estar en un grupo completo. */
.cell.hecho{box-shadow:inset 0 0 0 2px #fff;}

/* ============================================================================
   EL FESTEJO, portado de prototipo/festejo.html.

   Los números —tamaños, duraciones, curvas— son los del prototipo. Los COLORES son
   los de esta app: el prototipo trae su propia paleta porque es un documento aparte,
   y --ambar #B4690E / #FDF0DC son, hasta el matiz, los --warn / --warn-soft que
   miniapp.css ya tiene. Ni un color nuevo.
   ========================================================================= */

/* La capa donde cruzan los emoticones. Hermana de .app y no hija: repintar la
   pantalla borra .app entera, y los bichos que estuvieran a mitad de camino se irían
   con ella. .phone ya recorta con overflow:hidden, así que ninguno se escapa. */
.phone{position:relative;}
.capa{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:30;}
.bicho{
  position:absolute;top:0;left:0;width:88px;height:88px;
  will-change:transform,opacity;transform-origin:50% 50%;
  filter:drop-shadow(0 4px 8px rgba(26,21,32,.28));
}

/* El 🙏 de los demás: chico, abajo, cruzando. Sin nombre y sin número porque lo único
   que llega del servidor es que alguien está cerca. */
.rezo{
  position:absolute;left:0;bottom:14px;font-size:19px;line-height:1;
  opacity:.75;pointer-events:none;z-index:29;
  animation:rezo-cruza 5.2s linear;
}
@keyframes rezo-cruza{
  from{transform:translateX(-40px);}
  to{transform:translateX(calc(100% + 40px));}
}

/* La espera. El reloj late y se pone ámbar en los últimos diez segundos. */
.clock{transition:color .3s;}
.wait.apura{background:var(--warn-soft);}
.wait.apura .clock{color:var(--warn);animation:latido .6s ease-in-out infinite;}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* Y el número de anotados pega un golpe cuando entra alguien. */
.fact-v.golpe{animation:golpe .5s cubic-bezier(.3,1.6,.4,1);color:var(--accent);}
@keyframes golpe{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

/* 🔴 El marco de "falta uno" es VIOLETA, nunca dorado. El dorado significa premio
   cobrado en todo el sistema —el pozo, la copa, el renglón de lo que se pagó— y
   pintar de premio a un cartón que todavía no ganó nada sería prometerle uno. */
.grid90.caliente,
.carton.caliente{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(109,40,168,.13);
  animation:latir 1.15s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{box-shadow:0 0 0 4px rgba(109,40,168,.13)}
  50%{box-shadow:0 0 0 10px rgba(109,40,168,.05)}
}

/* El banner de la línea: dos segundos y se va. */
.banner{
  position:absolute;left:14px;right:14px;top:132px;z-index:35;
  background:linear-gradient(135deg,var(--accent),#8E45C9);color:#fff;
  border-radius:14px;padding:14px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:23px;
  box-shadow:0 12px 30px rgba(74,24,116,.4);
  animation:entrar .45s cubic-bezier(.2,1.5,.4,1);
}
.banner small{display:block;font-family:var(--body);font-weight:600;font-size:13px;opacity:.9;margin-top:3px;}
@keyframes entrar{from{transform:scale(.7) translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* La pantalla entera del bingo: FELICITACIONES letra por letra, copa, premio grande. */
.festejo{
  position:absolute;inset:0;z-index:38;
  background:radial-gradient(circle at 50% 34%,#FFFCF2,#F6EDFB 55%,#EADCF5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px;text-align:center;cursor:pointer;overflow:hidden;
}
.rayos{
  position:absolute;width:560px;height:560px;top:50%;left:50%;margin:-280px 0 0 -280px;
  background:repeating-conic-gradient(from 0deg,rgba(154,123,16,.13) 0deg 9deg,transparent 9deg 18deg);
  animation:girar 14s linear infinite;pointer-events:none;
}
@keyframes girar{to{transform:rotate(360deg)}}
.festejo .copa{width:96px;height:96px;position:relative;z-index:2;animation:saltar .9s cubic-bezier(.2,1.5,.4,1);}
@keyframes saltar{0%{transform:scale(.2) rotate(-25deg);opacity:0}60%{transform:scale(1.16) rotate(6deg);opacity:1}100%{transform:none}}
.felicitaciones{
  z-index:2;font-family:var(--display);font-weight:800;font-size:31px;line-height:1;
  background:linear-gradient(180deg,#C9A227,#7A5F06);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;flex-wrap:wrap;justify-content:center;
}
.felicitaciones span{display:inline-block;animation:letra .5s cubic-bezier(.2,1.7,.4,1) backwards;}
@keyframes letra{from{transform:translateY(22px) scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.festejo .quien2{z-index:2;font-size:16px;font-weight:600;color:#4A1874;}
.festejo .premio{z-index:2;font-family:var(--display);font-weight:800;font-size:40px;color:var(--gold);}
.festejo .toque{z-index:2;position:absolute;bottom:18px;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em;}

/* Con el movimiento apagado no se mueve NADA de esto. Los emoticones siguen
   apareciendo —quietos y desvaneciéndose, que es lo que hace el prototipo— y todo lo
   que late, gira o cruza se queda donde está. */
.sin-movimiento .wait.apura .clock,
.sin-movimiento .fact-v.golpe,
.sin-movimiento .grid90.caliente,
.sin-movimiento .carton.caliente,
.sin-movimiento .banner,
.sin-movimiento .rayos,
.sin-movimiento .festejo .copa,
.sin-movimiento .felicitaciones span,
.sin-movimiento .rezo{animation:none;}
.sin-movimiento .rezo{left:50%;transform:translateX(-50%);}

/* ============================================================================
   LA HOJA DE AJUSTES, y el ⚙ que la abre.

   Los siete interruptores del prototipo están portados desde el primer día y se
   respetan, pero en el teléfono sólo se podía tocar el 🔊: los otros seis vivían
   detrás de la consola del navegador. festejo.html es una página de escritorio y no
   dice dónde viven en un teléfono, así que la ubicación se decidió acá: un ⚙ al lado
   del 🔊 y una hoja que sube desde abajo, que se cierra tocando afuera.

   Ni una pieza nueva: los rótulos son los siete de festejo.html, literales y en su
   orden; el pill .sw, el título .bloque h3, los botones .b / .b.fuerte y el .registro
   son sus piezas, con los colores traducidos a las variables de esta app, como ya se
   hizo con el resto del festejo. Ni un color nuevo.
   ========================================================================= */

/* El ⚙ es el 🔊: la misma clase, el mismo tamaño, el mismo tratamiento. */

/* 🔴 Y el renglón de arriba va por encima de la pantalla del bingo.
   .festejo tapa el teléfono entero con z-index 38. El ⚙ tiene que poder tocarse en
   TODOS los estados, incluido ése, así que la barra se apila por arriba. #app no crea
   contexto de apilamiento —no tiene position ni z-index— así que este 39 compite
   directamente con el 38 de la capa del festejo, y gana. */
.topline{position:relative;z-index:39;}

.hoja-fondo{
  position:absolute;inset:0;z-index:40;display:none;
  background:rgba(26,21,32,.28);
}
.hoja-fondo.puesta{display:block;}

.hoja{
  position:absolute;left:0;right:0;bottom:0;z-index:41;
  max-height:82%;overflow:auto;
  background:var(--paper);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;box-shadow:0 -12px 30px rgba(26,21,32,.18);
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(101%);visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.9,.3,1),visibility .28s;
}
.hoja.puesta{transform:none;visibility:visible;}
.sin-movimiento .hoja{transition:none;}

/* El título de bloque del prototipo, con los colores de esta app. */
.hoja h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.hoja h3 + *{margin-bottom:16px;}

/* El pill del prototipo. */
.switches{display:flex;flex-wrap:wrap;gap:8px;}
.sw{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--paper);border-radius:999px;
  padding:7px 13px;font-size:13.5px;cursor:pointer;user-select:none;color:var(--ink);
}
.sw input{accent-color:var(--accent);margin:0;}
.sw:focus-within{outline:2px solid var(--accent);outline-offset:2px;}

/* Los botones del diagnóstico, y su registro. */
.botones{display:flex;flex-wrap:wrap;gap:8px;}
.b{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-family:var(--body);font-size:13.5px;cursor:pointer;
}
.b.fuerte{background:var(--accent);color:#fff;border-color:var(--accent);}
.b:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.registro{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;height:104px;overflow:auto;line-height:1.6;
}
.registro div:first-child{color:var(--accent);font-weight:600;}
.hoja .nota{font-size:13px;color:var(--muted);line-height:1.55;margin:10px 0 0;}
.hoja .nota b{color:var(--ink);}

/* ============================================================================
   EL CARTÓN CUADRADO, portado de prototipo/festejo.html.

   🔴 Por qué existe. El port dibujaba `.grid90` para TODA variante, y `.grid90` son
   nueve columnas: es el cartón del 90. Un cartón simple de 9 celdas —el 3×3— salía
   en UNA SOLA FILA de nueve, con las celdas aplastadas. Es lo que llegó al teléfono.

   `.grid90` NO se toca: sigue siendo el cartón del 90, que es 3×9 y está bien así.
   Esto es el otro cartón, el cuadrado, y las columnas se las pone el DOM desde la
   geometría que manda el servidor: 9→3, 16→4, 25→5, 36→6, y el 75 es 5×5.

   Los números son los del prototipo, tal cual: gap 8, borde 2, radio 16, padding 10;
   celda de aspect-ratio 1, radio 11, display 600 a 24px.

   El único que no se pudo copiar es el fondo de la celda: el prototipo usa
   --papel-hondo #F1ECF6 y esta app no tiene ese color. Va --ground #F5F3F7, que es su
   fondo hundido y el más cercano que ya existe. Ni un color nuevo.
   ========================================================================= */
.carton{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* el DOM la pisa con las que pide la variante */
  gap:8px;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:16px;
  padding:10px;
  transition:border-color .35s,box-shadow .35s;
}

/* La celda del prototipo. Va a la misma especificidad que `.cell.hit` y compañía —dos
   clases— y DESPUÉS que ellas en el archivo, así que sin las tres reglas de abajo les
   ganaría el fondo y las celdas marcadas quedarían todas grises. */
.carton .cell{
  aspect-ratio:1;
  border-radius:11px;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:24px;
  background:var(--ground);color:var(--ink);
}
.carton .cell.hit{background:var(--accent);color:#fff;}
.carton .cell.need{background:var(--warn-soft);color:var(--warn);}
.carton .cell.win{background:var(--gold);color:#fff;}
.carton .cell.empty{background:#FBFAFC;}


/* ============================================================================
   LAS DE LA LISTA B QUE VIVEN EN miniapp.css.

   miniapp.css es copia BYTE A BYTE del <style> de prototipo/miniapp.html y una suite lo
   afirma: editarlo ahí rompe esa igualdad. Pero estos tres valores los fija el OTRO
   prototipo, festejo.html, que es el que manda para estas piezas. Van acá, que es la
   capa propia de la pantalla, y la copia byte a byte sigue intacta.
   ========================================================================= */

/* El aviso urgente va en 700, no en 600: es el peso que le pone .aviso.urgente. */
.status.near{font-weight:700;}

/* El rótulo espacia .12em, no .1em. */
.strip-k{letter-spacing:.12em;}

/* La lista de premios redondea 12px, no 10px. */
.payout{border-radius:12px;}

/* ============================================================================
   🔴 EL CARTEL DE RECONEXIÓN, con nombre propio.

   Era un DEFECTO VIVO, no una diferencia con el prototipo. Se llamaba .banner, igual
   que la barra del ¡LÍNEA! que se portó de festejo.html, y extras.css le ganaba a
   miniapp.css: "Perdiste el hilo por un momento" se dibujaba como una barra violeta
   flotante de 23px encima del bolillero, en position:absolute.

   Son dos piezas distintas y ahora tienen dos nombres. .banner se queda con la del
   prototipo, que es quien la define. Ésta recupera el aspecto que tenía en miniapp.css:
   cartel ÁMBAR INLINE, en el flujo, sin position ni z-index.
   ========================================================================= */
.aviso-corte{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--warn-soft);border:1px solid #F0CFA0;
  border-radius:12px;padding:11px 12px;
}
.aviso-corte b{display:block;color:var(--warn);font-size:14px;}
.aviso-corte span{font-size:13px;color:#8A5A2B;}