/* «Pruebas» — la hoja de estilo COMPARTIDA del estante.
   ---------------------------------------------------------------------------
   Todo lo que es igual en cualquier prueba: la paleta y los tipos de zaxfun, la
   hoja, el botón de volver, la cabecera, el panel del resultado, el puente al
   juego, el pie y el texto que se lee debajo. Lo que cambia de una prueba a
   otra —la zona donde se juega y sus estados— vive en el CSS de cada una.

   Nació dentro de «Reflejos» y subió aquí al llegar «Colores», que es cuando se
   pudo ver qué se repetía de verdad: abstraer con un solo ejemplo delante es
   como salen las plantillas que no valen para el segundo.

   HAY UNA SOLA COPIA. Cada prueba la enlaza con un symlink
   (`css/base.css → ../../../zaxfun/pruebas/css/base.css`) para poder trabajar
   sola en su servidor local, y `publicar.sh` materializa el enlace al
   desplegar. Mobile-first. */

:root {
  --fondo:       #05060f;
  --panel:       rgba(255, 255, 255, .045);
  --panel-borde: rgba(255, 255, 255, .09);
  --texto:       #e9edfb;
  --texto-tenue: #8e97b8;
  --cian:        #6fd3ff;
  --violeta:     #b98cff;
  --oro:         #ffd479;
  --rojo:        #ff6b8a;
  --verde:       #4ade9b;
  --radio:       20px;
  --tipo-titulo: 'Space Grotesk', system-ui, sans-serif;
  --tipo-texto:  'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(58% 46% at 50% 26%, #141c40 0%, transparent 72%),
    var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* La página SÍ rueda —debajo del test hay texto que tiene que poder leerse—,
   pero dentro de la zona no puede haber selección ni menú contextual: un
   pulsado largo sacando «copiar» a mitad de un intento lo estropea. */
.zona { -webkit-user-select: none; user-select: none; }

.hoja {
  max-width: 640px;
  margin: 0 auto;
  padding: max(3.6rem, calc(env(safe-area-inset-top) + 3.2rem)) 1.15rem 3rem;
}

/* ---------- Vuelta a casa ---------- */

#atras {
  position: fixed;
  top: max(.85rem, env(safe-area-inset-top));
  left: .9rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: rgba(9, 12, 28, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panel-borde);
  color: var(--texto-tenue);
  font: 500 .84rem/1 var(--tipo-texto);
  text-decoration: none;
}

/* ---------- Silencio ----------
   En la otra punta de la barra de arriba, frente a la marca: el sonido de una
   prueba son cuatro efectos, pero quien esté en la oficina o al lado de alguien
   durmiendo tiene que poder callarlo sin buscarlo. Lo recuerda para toda la
   casa (`zaxfun_mudo`), así que se apaga una vez y ya.

   Va por encima de la barra (`z-index` 30) y no dentro: el HTML de la barra lo
   escribe `rejilla.js` al publicar y es el mismo para las siete páginas, y
   «el pulso» ya trae su propio botón de silencio. */

#sonido {
  position: fixed;
  /* Centrado con la marca de la barra: la barra mide su relleno de arriba (que
     crece con la muesca del iPhone) + la marca + .5rem, así que la mitad de ese
     relleno deja el botón a la misma altura con muesca y sin ella. */
  top: calc(max(.5rem, env(safe-area-inset-top)) / 2);
  right: .8rem;
  z-index: 31;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(9, 12, 28, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panel-borde);
  color: var(--texto-tenue);
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
}
#sonido.apagado { opacity: .55; }

/* ---------- Cabecera ---------- */

.cabecera { text-align: center; margin-bottom: 1.4rem; }

.titulo {
  margin: 0 0 .45rem;
  font: 700 clamp(1.9rem, 7vw, 2.6rem)/1.05 var(--tipo-titulo);
  letter-spacing: -.02em;
}

.lema {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--texto-tenue);
  font-size: .98rem;
  line-height: 1.5;
}

/* ---------- Resultado ---------- */

.resultado.fuera { display: none; }

.resultado {
  padding: 1.5rem 1.25rem 1.35rem;
  border: 1px solid var(--panel-borde);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(111, 211, 255, .07), transparent 60%),
    var(--panel);
  text-align: center;
  animation: entra .35s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
}

.cifra {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
  font-family: var(--tipo-titulo);
  font-variant-numeric: tabular-nums;
}
.cifra span {
  /* `inline-block` es obligatorio: el motor le aplica un `scale` al aterrizar
     y un `span` en línea no admite transformaciones. */
  display: inline-block;
  transform-origin: 50% 60%;
  font-size: clamp(3.2rem, 15vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cian);
  text-shadow: 0 0 38px rgba(111, 211, 255, .28);
}
.cifra small { font-size: 1.1rem; font-weight: 500; color: var(--texto-tenue); }

.veredicto {
  margin: .7rem 0 1.1rem;
  font-size: 1.02rem;
  line-height: 1.5;
}
.veredicto b { color: var(--oro); }

/* La barra: dónde caes dentro de la población. Izquierda = más rápido. */
.barra {
  position: relative;
  height: 8px;
  margin: 0 0 .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde), var(--oro) 55%, var(--rojo));
  opacity: .55;
}
/* La posición la lleva el motor (`Anim`), no una transición de CSS: las dos a
   la vez se pelean y el punto llega dos veces. */
.barra-tu {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--fondo), 0 0 14px rgba(255, 255, 255, .7);
  transition: opacity .25s ease;
}

.marca {
  margin: 0 0 1.2rem;
  color: var(--texto-tenue);
  font-size: .87rem;
}
.marca b { color: var(--texto); }

.acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.boton {
  padding: .8rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe4a3, var(--oro));
  color: #2a1d02;
  font: 700 1rem/1 var(--tipo-titulo);
  cursor: pointer;
  box-shadow: 0 12px 30px -14px var(--oro);
}

.boton-plano {
  padding: .8rem 1.3rem;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  font: 600 .95rem/1 var(--tipo-texto);
  cursor: pointer;
}

/* El paso a El Pulso. Tiene marco propio y aro al pasar, igual que las
   tarjetas de la portada: aquí empieza otra cosa, y tiene que verse. */
.siguiente {
  position: relative;
  display: block;
  padding: .95rem 1.1rem;
  border: 1px solid rgba(185, 140, 255, .3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(185, 140, 255, .12), rgba(185, 140, 255, .04));
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.siguiente b {
  display: block;
  margin-bottom: .18rem;
  font: 700 1rem/1.2 var(--tipo-titulo);
  color: var(--violeta);
}
.siguiente span { font-size: .88rem; line-height: 1.45; color: var(--texto-tenue); }
.siguiente::after {
  content: '→';
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--violeta);
  font-size: 1.15rem;
}

/* ---------- Pie ---------- */

.pie {
  margin: 1.6rem 0 0;
  text-align: center;
  color: var(--texto-tenue);
  font-size: .84rem;
}
.pie b { color: var(--oro); }

/* ---------- Lo que se lee ---------- */

.info {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--panel-borde);
  font-size: .95rem;
  line-height: 1.65;
  color: #c3cae4;
}

.info-titulo {
  margin: 2.1rem 0 .8rem;
  font: 600 1.18rem/1.25 var(--tipo-titulo);
  color: var(--texto);
  letter-spacing: -.01em;
}
.info-titulo:first-child { margin-top: 0; }

.info p { margin: 0 0 1rem; }

.info-pasos { margin: 0; padding: 0 0 0 1.15rem; }
.info-pasos li { margin-bottom: .85rem; }
.info-pasos b { display: block; color: var(--texto); font-weight: 600; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 .9rem;
  font-size: .9rem;
}
.tabla th, .tabla td {
  padding: .55rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--panel-borde);
  vertical-align: top;
}
.tabla th { color: var(--texto-tenue); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.tabla td:first-child { color: var(--cian); font-variant-numeric: tabular-nums; white-space: nowrap; }

.nota { font-size: .84rem; color: var(--texto-tenue); }

.info-preguntas { margin: 0; }
.info-preguntas dt { margin-top: 1rem; font-weight: 600; color: var(--texto); }
.info-preguntas dd { margin: .25rem 0 0; }

.info-otros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.4rem;
}
.info-otros h2 { width: 100%; }
.info-otros a {
  padding: .5rem .9rem;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: var(--panel);
  color: var(--texto-tenue);
  font-size: .88rem;
  text-decoration: none;
}

/* ---------- El pasar por encima ----------
   Un solo bloque y encerrado en `@media (hover: hover)`: en un teléfono el
   navegador dispara `:hover` al TOCAR y lo deja puesto, así que sin esto el
   botón que acabas de pulsar se queda encendido hasta que toques otro.
   El levantarse, el hundirse al pulsar y el aro NO están aquí: son el gesto
   común de la casa y viven en `comun/css/tacto.css`, que se carga después.
   Aquí queda solo lo que es color de esta hoja. */
@media (hover: hover) {
  #atras:hover  { color: var(--texto); border-color: rgba(255, 255, 255, .2); }
  #sonido:hover { border-color: rgba(255, 255, 255, .2); }
  .boton-plano:hover { color: var(--texto); border-color: rgba(255, 255, 255, .22); }
  .siguiente:hover   { border-color: rgba(185, 140, 255, .6); }
  .info-otros a:hover { color: var(--texto); border-color: rgba(255, 255, 255, .22); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}