/* «Reflejos» — solo lo suyo.
   ---------------------------------------------------------------------------
   Todo lo compartido con las demás pruebas (paleta, hoja, cabecera, resultado,
   botones, pie y el texto de abajo) está en `base.css`, que es un enlace a la
   única copia que hay en `zaxfun/pruebas/css/`. Aquí queda la zona que cambia
   de color y la fila de los cinco intentos, que no las tiene nadie más. */

/* ---------- LA ZONA ----------
   Un solo elemento que cambia de color según `body[data-estado]`. Nada de
   pantallas que se sustituyen: el ojo tiene que poder quedarse clavado en el
   mismo sitio, porque lo que se mide es justo eso. */

.zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: min(56vh, 380px);
  margin: 0 0 1.1rem;
  padding: 2rem 1.4rem;
  border: 1px solid var(--panel-borde);
  border-radius: 26px;
  background: var(--panel);
  color: var(--texto);
  font-family: var(--tipo-texto);
  text-align: center;
  cursor: pointer;
  /* Sin transición de color a propósito en el paso a verde: media décima de
     fundido son 100 ms sumados al resultado de todo el mundo. El resto de
     estados sí puede fundir, pero como el cambio que importa es ese, se deja
     seco en todos para no tener dos comportamientos distintos. */
  transition: transform .12s ease, box-shadow .25s ease;
}
.zona:active { transform: scale(.995); }

.zona-icono {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid currentColor;
  opacity: .35;
  transition: opacity .2s ease, transform .2s ease;
}

.zona-titular {
  font: 700 clamp(1.6rem, 6.5vw, 2.3rem)/1.1 var(--tipo-titulo);
  letter-spacing: -.02em;
}

.zona-pie {
  max-width: 26ch;
  font-size: .92rem;
  line-height: 1.45;
  opacity: .72;
}

/* Reposo: es un panel de zaxfun con un botón dentro. */
body[data-estado="listo"] .zona {
  border-color: rgba(111, 211, 255, .3);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, .08), 0 18px 50px -30px var(--cian);
}
body[data-estado="listo"] .zona-icono { border-color: var(--cian); opacity: .55; }
body[data-estado="listo"] .zona-titular { color: var(--cian); }

/* Espera. Rojo apagado, no chillón: va a estar en pantalla varios segundos y
   tiene que dejar ver el verde como un golpe, no como un matiz. */
body[data-estado="esperando"] .zona {
  background: #4a1626;
  border-color: #6d2036;
  color: #ffd8e1;
  cursor: default;
}
body[data-estado="esperando"] .zona-icono { animation: latido 1.4s ease-in-out infinite; }

@keyframes latido {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.08); }
}

/* EL VERDE. Lo más plano y luminoso posible: cualquier degradado o sombra
   retrasa el momento en que el ojo lo da por cambiado. */
body[data-estado="ya"] .zona {
  background: var(--verde);
  border-color: var(--verde);
  color: #06281a;
}
body[data-estado="ya"] .zona-icono { opacity: .8; }

/* Adelantado */
body[data-estado="pronto"] .zona {
  background: #43310e;
  border-color: #6b4d13;
  color: var(--oro);
}

/* Entre intentos: enseña el número que acaba de hacer. */
body[data-estado="entre"] .zona {
  border-color: rgba(255, 212, 121, .32);
  box-shadow: 0 18px 50px -30px var(--oro);
}
body[data-estado="entre"] .zona-titular { color: var(--oro); }

body[data-estado="fin"] .zona { display: none; }

/* ---------- Los cinco intentos ---------- */

.intentos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.intentos li {
  min-width: 60px;
  padding: .5rem .35rem;
  border: 1px solid var(--panel-borde);
  border-radius: 12px;
  background: var(--panel);
  color: var(--texto-tenue);
  font: 600 .82rem/1 var(--tipo-titulo);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.intentos li {
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.intentos li.hecho { color: var(--texto); border-color: rgba(111, 211, 255, .28); }
/* El peor se tacha en pantalla: es más honesto que descartarlo por detrás y
   que el promedio no cuadre con lo que la persona vio. Se encoge y se apaga
   medio segundo después del resultado, para que el gesto se vea. */
.intentos li.tirado {
  opacity: .38;
  transform: scale(.88);
  border-color: var(--panel-borde);
  text-decoration: line-through;
}
.intentos li.activo { border-color: var(--oro); color: var(--oro); }

/* Al terminar la fila SE QUEDA: es el recibo. Ahí están los cinco números y el
   que se tiró, tachado. Esconderla y enseñar solo el promedio obligaría a
   creerse la cuenta; así se puede comprobar. */
body[data-estado="fin"] .intentos { margin-bottom: .9rem; }