/* ==========================================================================
   Club PlazaGames — pantalla vertical de 32", 1080 x 1920.

   Todo se mide en rem sobre una grilla de diseño de 1080 x 1920 px:
   1rem = 16px de diseño. El html escala esa grilla al alto y ancho reales,
   así la misma hoja sirve para la pantalla del local y para probar en el
   navegador del escritorio sin que cambie ninguna proporción.
   ========================================================================== */

@import url("tipografias.css");

html {
  font-size: calc(min(100vw / 1080, 100vh / 1920) * 16);
  -webkit-text-size-adjust: 100%;
}

:root {
  --amarillo: #f6ce52;
  --amarillo-hondo: #efc244;
  --crema: #fdfdf2;
  --crema-hondo: #f6f4e2;

  --verde: #4caf20;
  --verde-claro: #6dc72a;
  --verde-hondo: #2f7a10;
  --verde-texto: #2e8b12;

  --naranja: #f0821e;
  --naranja-claro: #f79a34;
  --naranja-hondo: #b9520a;
  --naranja-texto: #e8541c;

  --rojo: #dd3524;
  --rojo-hondo: #a8261d;
  --rojo-marca: #d92d1c;
  --precio: #de4a1a;

  --tinta: #57450f;
  --tinta-suave: #7f651a;
  --tinta-tenue: #a8914e;

  /* Destello de cuatro puntas, para el brillo de la marca y del arco. */
  --destello: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12C7 11 11 7 12 0z' fill='%23ffffff'/%3E%3C/svg%3E");
  --borde: #e5ce86;
  --blanco: #fff;

  --radio: 2rem;
  --radio-chico: 1.1rem;
  --sombra: 0 1.1rem 2.2rem rgba(120, 80, 10, 0.18);
}

* { box-sizing: border-box; }

/* `display: flex` de .boton le gana al `hidden` del navegador, y los botones
   escondidos se veían igual. Esto lo corta para todo el sistema. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Amarillo más luminoso arriba y más ámbar hacia los bordes: le da volumen
     a una pantalla de 32" que si no queda como una plancha de color. */
  background: radial-gradient(135% 95% at 50% 26%, #ffe073 0%, #f9cb43 46%, #ecb62a 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

/* El arco de colores que cierra la pantalla abajo. */
.arco {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26rem;
  z-index: 0;
  pointer-events: none;
  /* Una circunferencia enorme con el centro muy por debajo de la pantalla:
     así el arco sale ancho y bajo, como una loma, y no como media luna.
     Tres bandas (verde adentro, dorada al medio, roja afuera) y un filo
     claro arriba, que es lo que le da el brillo. */
  background: radial-gradient(
    circle 168.5rem at 50% 172.5rem,
    transparent 0 154.4rem,
    #46a81c 154.4rem 158.6rem,
    transparent 158.6rem 159.3rem,
    #f0b302 159.3rem 162.3rem,
    transparent 162.3rem 163rem,
    var(--rojo) 163rem 168rem,
    rgba(255, 255, 255, 0.5) 168rem 168.5rem,
    transparent 168.5rem
  );
  filter: drop-shadow(0 -0.3rem 1rem rgba(120, 60, 0, 0.16));
}

/* --- Armazón --------------------------------------------------------------- */

.pantalla {
  position: relative;
  z-index: 1;
  width: 67.5rem;                    /* 1080 px */
  min-height: max(120rem, 100vh);    /* 1920 px, o la ventana si es más alta */
  margin: 0 auto;
  padding: 3rem 3rem 28rem;
  display: flex;
  flex-direction: column;
}

.pantalla--centrada { justify-content: center; }

/* --- Tipografía ------------------------------------------------------------ */

h1, h2, h3 {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
h1 { font-size: 3.75rem; color: var(--verde-texto); text-transform: uppercase; }
h2 { font-size: 2.5rem; color: var(--naranja-texto); text-transform: uppercase; }
h3 { font-size: 2rem; color: var(--tinta); }

.rotulo {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  display: block;
  margin-bottom: 0.6rem;
}
.tenue { color: var(--tinta-tenue); }
.centro { text-align: center; }
.grande { font-size: 2.25rem; }
.bajada { font-size: 2rem; color: var(--tinta-suave); margin: 0.75rem 0 0; }

.cifra {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: var(--verde-texto);
  line-height: 1;
}

/* --- Marca ----------------------------------------------------------------- */

.marca {
  text-align: center;
  position: relative;
  /* Halo claro detrás del logo: lo despega del fondo amarillo. */
  background: radial-gradient(46% 34% at 50% 42%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%);
}
.marca--chica { background: none; }

/* Los dos destellos que flanquean el logo. */
.marca::before,
.marca::after {
  content: "";
  position: absolute;
  background: var(--destello) center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
.marca::before { left: 2rem; top: 5rem; width: 4rem; height: 4rem; }
.marca::after { right: 2.5rem; top: 4rem; width: 2.8rem; height: 2.8rem; }
.marca--chica::before,
.marca--chica::after { display: none; }

.marca-cinta,
.marca-pie {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  color: var(--rojo-marca);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  margin: 0;
}
.marca-cinta { font-size: 1.9rem; margin-bottom: 1.5rem; }
.marca-pie { font-size: 3rem; margin-top: 1.5rem; letter-spacing: 0.5em; }

.marca-fichas {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.marca-fichas span {
  width: 8.5rem;
  height: 8.5rem;
  display: grid;
  place-items: center;
  border-radius: 2.1rem;
  border: 0.22rem solid #2c7c0e;
  /* Primer degradado: el brillo de la mitad de arriba. Segundo: el verde. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 44%,
      rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #8ada3e 0%, #5cbc26 50%, #3f9c16 100%);
  box-shadow:
    0 1rem 0 #24680a,
    0 1.6rem 2.2rem rgba(120, 80, 10, 0.38),
    inset 0 -0.55rem 0.7rem rgba(0, 0, 0, 0.2);
  color: var(--blanco);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  text-shadow: 0 0.18rem 0.3rem rgba(0, 0, 0, 0.35);
}
.marca--chica .marca-fichas span {
  width: 4rem;
  height: 4rem;
  font-size: 2.6rem;
  border-radius: 1rem;
  border-width: 0.12rem;
  box-shadow: 0 0.35rem 0 var(--verde-hondo);
}
.marca--chica .marca-cinta { font-size: 1.1rem; margin-bottom: 0.75rem; }
.marca--chica .marca-pie { font-size: 1.5rem; margin-top: 0.75rem; }

/* --- Botones --------------------------------------------------------------- */

.boton {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  width: 100%;
  min-height: 7.5rem;
  padding: 1rem 2rem;
  border: 0.2rem solid #2f7a10;
  border-radius: 1.75rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #7fd438 0%, #47ab19 55%, #3c9714 100%);
  box-shadow:
    0 0.85rem 0 var(--verde-hondo),
    0 1.3rem 1.8rem rgba(120, 80, 10, 0.28),
    inset 0 -0.4rem 0.55rem rgba(0, 0, 0, 0.12);
  color: var(--blanco);
  text-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.28);
  font-family: "Quicksand", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.boton:active {
  transform: translateY(0.6rem);
  box-shadow: 0 0.25rem 0 var(--verde-hondo), 0 0.5rem 0.8rem rgba(120, 80, 10, 0.22);
}
.boton small {
  flex-basis: 100%;   /* la aclaración baja a su propio renglón */
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.92;
}

.boton--naranja {
  border-color: #a8490a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 45%,
      rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffab45 0%, #f4761a 55%, #e5620b 100%);
  box-shadow:
    0 0.85rem 0 var(--naranja-hondo),
    0 1.3rem 1.8rem rgba(120, 80, 10, 0.28),
    inset 0 -0.4rem 0.55rem rgba(0, 0, 0, 0.1);
}
.boton--naranja:active {
  box-shadow: 0 0.25rem 0 var(--naranja-hondo), 0 0.5rem 0.8rem rgba(120, 80, 10, 0.22);
}

.boton--rojo {
  border-color: #8f1f16;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ef6154 0%, #d93323 55%, #c22a1b 100%);
  box-shadow:
    0 0.85rem 0 var(--rojo-hondo),
    0 1.3rem 1.8rem rgba(120, 80, 10, 0.28),
    inset 0 -0.4rem 0.55rem rgba(0, 0, 0, 0.16);
}
.boton--rojo:active {
  box-shadow: 0 0.25rem 0 var(--rojo-hondo), 0 0.5rem 0.8rem rgba(120, 80, 10, 0.22);
}

.boton--vacio {
  background: var(--crema);
  border: 0.22rem solid var(--borde);
  box-shadow: 0 0.5rem 1.2rem rgba(120, 80, 10, 0.12);
  color: var(--tinta-suave);
  text-shadow: none;
}
.boton--vacio:active { transform: translateY(0.3rem); box-shadow: none; }

.boton--chico { min-height: 4.5rem; font-size: 1.6rem; border-radius: 1.1rem; box-shadow: 0 0.4rem 0 var(--verde-hondo); }
.boton--chico:active { transform: translateY(0.3rem); box-shadow: 0 0.15rem 0 var(--verde-hondo); }
.boton--chico.boton--vacio { box-shadow: none; }
.boton--chico.boton--rojo { box-shadow: 0 0.4rem 0 var(--rojo-hondo); }
.boton--chico.boton--naranja { box-shadow: 0 0.4rem 0 var(--naranja-hondo); }

.boton[disabled], .boton--apagado {
  background: var(--crema-hondo);
  border-color: #ded8bb;
  color: var(--tinta-tenue);
  box-shadow: 0 0.75rem 0 #ded8bb;
  text-shadow: none;
  pointer-events: none;
}

.botonera { display: grid; gap: 1.5rem; }
.botonera--par { grid-template-columns: 1fr 1fr; }
.botonera--chica { gap: 0.75rem; margin-top: 1.5rem; }

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: 2rem;
}

/* --- Tarjetas -------------------------------------------------------------- */

.tarjeta {
  background: linear-gradient(180deg, #fffdf3 0%, #faf6e4 100%);
  border-radius: 2.2rem;
  padding: 2.5rem;
  box-shadow: var(--sombra), inset 0 0.15rem 0 rgba(255, 255, 255, 0.9);
}
.tarjeta > h2 { margin-bottom: 1.5rem; }
.tarjeta + .tarjeta { margin-top: 2rem; }
.grilla > .tarjeta + .tarjeta { margin-top: 0; }  /* dentro de una grilla manda el gap */
.tarjeta--borde { border: 0.25rem solid var(--verde); }

/* --- Ventana emergente (aviso de socio reconocido) ------------------------- */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(40, 30, 5, 0.55);
}
.modal-tarjeta {
  background: var(--crema);
  border: 0.25rem solid var(--verde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 3.9rem;
  text-align: center;
  max-width: 52rem;
}
.modal-tarjeta h2 { font-size: 3.25rem; }
.modal-tarjeta .bajada { font-size: 2.6rem; }
.modal-tarjeta--roja { border-color: var(--rojo); }

.grilla { display: grid; gap: 1.5rem; }
.grilla--2 { grid-template-columns: 1fr 1fr; }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }

.metrica { text-align: left; position: relative; overflow: hidden; }
.metrica .cifra { font-size: 4.5rem; }
.metrica .rotulo { margin: 0.4rem 0 0; }

/* Ícono al agua sobre el borde derecho de la tarjeta. */
.metrica::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7.5rem;
  height: 7.5rem;
  opacity: 0.18;
  background-image: var(--icono, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.separador { height: 0.15rem; background: var(--borde); border: none; margin: 2rem 0; }

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.2rem;
  border-radius: 10rem;
  background: var(--amarillo-hondo);
  color: var(--tinta);
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.insignia--nivel { color: var(--blanco); }
.insignia--verde { background: var(--verde); color: var(--blanco); }
.insignia--roja { background: var(--rojo); color: var(--blanco); }

/* --- Mensajes -------------------------------------------------------------- */

.mensaje {
  border-radius: var(--radio-chico);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  font-size: 1.9rem;
  font-weight: 600;
  background: var(--crema);
  border-left: 0.6rem solid var(--verde);
}
.mensaje.error { border-left-color: var(--rojo); color: var(--rojo-hondo); }
.mensaje.warning { border-left-color: var(--naranja); }

/* --- Formularios ----------------------------------------------------------- */

.campo { margin-bottom: 2rem; }
.campo:last-child { margin-bottom: 0; }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="date"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  padding: 1.4rem 1.6rem;
  border: 0.2rem solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: "Quicksand", sans-serif;
  font-size: 2.1rem;
  font-weight: 600;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 0.3rem rgba(76, 175, 32, 0.18);
}
input::placeholder, textarea::placeholder { color: #c3b489; font-weight: 500; }
input[type="color"] { padding: 0.4rem; height: 5rem; }

.campo--fecha select { display: inline-block; width: auto; min-width: 11rem; margin-right: 0.75rem; }

.casilla {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.9rem;
  font-weight: 600;
}
.casilla input { width: 2.6rem; height: 2.6rem; accent-color: var(--verde); }

.error-campo {
  color: var(--rojo-hondo);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
}
.ayuda { color: var(--tinta-tenue); font-size: 1.5rem; margin: 0.5rem 0 0; }
[data-lector-aviso] { font-size: 3rem; color: var(--rojo); }

.fila-boton { display: flex; gap: 1rem; align-items: flex-end; }
.fila-boton .campo { flex: 1; margin-bottom: 0; }
.fila-boton > input { flex: 1; }
.fila-boton .boton { width: auto; flex: none; }  /* el botón no se come el campo */

/* --- Tablas ---------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 1.75rem; }
th {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-align: left;
  padding: 0 1rem 1rem;
  border-bottom: 0.15rem solid var(--borde);
}
td { padding: 1.4rem 1rem; border-bottom: 0.1rem solid rgba(229, 206, 134, 0.5); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mas { color: var(--verde-texto); font-weight: 700; }
.menos { color: var(--rojo); font-weight: 700; }
.vacio { color: var(--tinta-tenue); font-style: italic; }

/* Listas largas: se ven máximo ~6 filas y el resto queda con scroll adentro,
   para que la tarjeta no estire la pantalla. */
.tabla-desplazable { max-height: 40rem; overflow-y: auto; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 0.1rem solid rgba(229, 206, 134, 0.5);
  font-size: 1.9rem;
}
.lista li:last-child { border-bottom: none; }

.codigo {
  font-family: "Oswald", monospace;
  font-size: 2rem;
  letter-spacing: 0.18em;
  color: var(--naranja-texto);
  font-weight: 600;
}

/* ==========================================================================
   Tótem: lo que ve el socio
   ========================================================================== */

.portada-hueco { flex: 1; }

.barra-nivel {
  height: 2.2rem;
  border-radius: 10rem;
  background: var(--crema-hondo);
  overflow: hidden;
  border: 0.15rem solid var(--borde);
}
.barra-nivel span {
  display: block;
  height: 100%;
  border-radius: 10rem;
  background: linear-gradient(90deg, var(--verde-claro), var(--verde));
}

.cabecera-socio {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.avatar {
  width: 7rem;
  height: 7rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja));
  color: var(--blanco);
  font-size: 2.8rem;
  font-weight: 700;
  box-shadow: 0 0.4rem 0 var(--naranja-hondo);
}
.cabecera-socio h1 { font-size: 3rem; text-transform: none; }

.ficha-cuadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf0 100%);
  border-radius: 1.8rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 0.8rem 1.6rem rgba(120, 80, 10, 0.14);
  border: 0.25rem solid transparent;
}
.ficha-cuadro--alcanza { border-color: var(--verde); }
.ficha-cuadro--lejos { opacity: 0.62; }
.ficha-cuadro .emoji { font-size: 5.5rem; line-height: 1; }
.ficha-cuadro .nombre { font-size: 2rem; font-weight: 700; }
.ficha-cuadro .precio {
  font-family: "Oswald", sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--precio);
  text-transform: uppercase;
}

.lector-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
}
.lector-marco {
  width: 22rem;
  height: 22rem;
  border-radius: 3rem;
  border: 0.6rem dashed var(--verde);
  display: grid;
  place-items: center;
  font-size: 9rem;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1); border-color: var(--verde); }
  50% { transform: scale(1.04); border-color: var(--naranja); }
}
.lector-marco--ok {
  animation: capturado 0.6s ease-out;
  border-color: var(--verde);
}
@keyframes capturado {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); border-color: var(--verde); box-shadow: 0 0 0 0.6rem rgba(90, 168, 90, 0.25); }
  100% { transform: scale(1); }
}

.lector-progreso {
  display: flex;
  gap: 0.8rem;
}
.lector-progreso span {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(92, 74, 18, 0.18);
  transition: background 0.3s ease, transform 0.3s ease;
}
.lector-progreso span.lector-progreso__lleno {
  background: var(--verde);
  transform: scale(1.15);
}

.qr-marco {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 2rem;
  display: inline-block;
  box-shadow: var(--sombra);
}
.qr-marco svg { display: block; width: 26rem; height: 26rem; }
.qr-marco--chico svg { width: 14rem; height: 14rem; }

.cuenta-atras {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 5;
  background: rgba(92, 74, 18, 0.14);
  border-radius: 10rem;
  padding: 0.6rem 1.6rem;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
  text-transform: uppercase;
}

.pie-admin {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 2rem;
}
.pie-admin a {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(92, 74, 18, 0.42);
}
.pie-admin-ruleta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 5.4rem;
  margin-left: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  vertical-align: middle;
}
.pie-admin-ruleta svg { width: 100%; height: 100%; }

/* ==========================================================================
   Panel del operador
   ========================================================================== */

.panel-barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.panel-barra h1 { flex: 1; font-size: 3.25rem; }

.panel-filtros { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.panel-filtros select { flex: 1; }

.pestanas {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.pestanas a {
  flex: none;
  padding: 0.85rem 1rem;
  border-radius: 10rem;
  background: var(--crema);
  color: var(--tinta-suave);
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--sombra);
}
.pestanas a.activa { background: var(--verde); color: var(--blanco); }

.ficha-socio {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 0.1rem solid rgba(229, 206, 134, 0.5);
}
.ficha-socio:last-child { border-bottom: none; }
.ficha-socio .datos { flex: 1; min-width: 0; }
.ficha-socio .nombre { font-size: 2.1rem; font-weight: 700; }
.ficha-socio .meta { font-size: 1.6rem; color: var(--tinta-tenue); }
.ficha-socio .saldo-chico { font-family: "Oswald", sans-serif; font-size: 2rem; color: var(--verde-texto); }

.acciones { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Dentro de una tabla los botones van en una sola línea: si envuelven, la
   columna se angosta y quedan uno encima del otro. */
td .acciones { flex-wrap: nowrap; }
td:last-child { white-space: nowrap; }
.acciones form { display: contents; }
.acciones .boton { width: auto; padding-inline: 2rem; }

/* --- Cámara ---------------------------------------------------------------- */

.camara {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 3rem;
  background: rgba(60, 45, 5, 0.72);
}
.camara-caja {
  width: 100%;
  max-width: 60rem;
  background: var(--crema);
  border: 0.3rem solid var(--verde);
  border-radius: var(--radio);
  padding: 3rem;
  text-align: center;
  box-shadow: 0 2rem 4rem rgba(60, 45, 5, 0.4);
}
.camara-caja h2 { color: var(--verde-texto); font-size: 3rem; }
/* El visor: la imagen de la cámara con una mira para apuntar. */
.camara-visor {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 2rem 0 0;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: #111;
}
.camara-visor video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camara-mira {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0.45rem solid rgba(255, 255, 255, 0.85);
  border-radius: 1.6rem;
  /* La sombra enorme oscurece todo lo que queda fuera de la mira. */
  box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.camara-mira--ok {
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 100rem rgba(76, 175, 32, 0.28);
}

.camara-estado {
  margin: 1.5rem 0;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  color: var(--tinta-suave);
}
.camara-ok {
  color: var(--verde-texto);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.camara-error { color: var(--rojo-hondo); font-weight: 700; }
/* Renglón chico que muestra que el visor está mirando de verdad. */
.camara-pulso {
  margin: -0.75rem 0 1rem;
  font-variant-numeric: tabular-nums;
  min-height: 2rem;
}

/* --- Teclado en pantalla --------------------------------------------------- */

.teclado {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--crema);
  border-top: 0.3rem solid var(--borde);
  padding: 1.5rem;
  box-shadow: 0 -1rem 3rem rgba(92, 74, 18, 0.2);
}
.teclado[hidden] { display: none; }
.teclado-filas { display: grid; gap: 0.9rem; max-width: 62rem; margin: 0 auto; }
.teclado-fila { display: flex; gap: 0.9rem; justify-content: center; }
.teclado button {
  flex: 1;
  min-width: 4.5rem;
  height: 6rem;
  border: 0.15rem solid var(--borde);
  border-radius: 1rem;
  background: var(--blanco);
  color: var(--tinta);
  font-family: "Quicksand", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.teclado button:active { background: var(--amarillo-hondo); transform: translateY(0.2rem); }
.teclado button[data-tecla="espacio"] { flex: 5; }
.teclado button[data-tecla="listo"] { background: var(--verde); color: var(--blanco); border-color: var(--verde-hondo); flex: 2; }
.teclado button[data-tecla="borrar"] { background: var(--amarillo-hondo); flex: 2; }
.teclado-numerico .teclado-filas { max-width: 34rem; }

/* --- Teclado del PIN ------------------------------------------------------- */

.pin-puntos {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.pin-puntos i {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--borde);
}
.pin-puntos i.lleno { background: var(--verde); transform: scale(1.15); }

.pin-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pin-teclas button {
  height: 8rem;
  border: 0.2rem solid var(--borde);
  border-radius: 1.5rem;
  background: var(--blanco);
  color: var(--tinta);
  font-family: "Quicksand", sans-serif;
  font-size: 3.25rem;
  font-weight: 700;
  cursor: pointer;
}
.pin-teclas button:active { background: var(--amarillo-hondo); transform: translateY(0.25rem); }

/* --- Sorteo a pantalla completa -------------------------------------------- */

.sorteo-pleno {
  min-height: max(114rem, 90vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
}
.sorteo-pleno .monto { font-size: 9rem; }
.sorteo-pleno .ganador { font-size: 5rem; font-weight: 700; color: var(--naranja-texto); }

.ruleta-grande { width: 28rem; height: 35rem; }
[data-ruleta-rueda] { transform-origin: 50px 50px; }

@media print {
  .arco, .teclado, .cuenta-atras, .pestanas, .panel-barra, .no-imprimir { display: none !important; }
  html { font-size: 12px; }
  body { background: #fff; }
  .pantalla { width: auto; min-height: 0; padding: 0; }
}