/* ══════════════════════════════════════════════════════════════════════════
   Las reglas del Manual de Identidad ONDA, aplicadas al simulador.

   Va DESPUES de simulador.css y existe por separado a proposito: simulador.css
   es la hoja del producto --que haya un boton, que la lista sea una grilla--, y
   esta es la capa de marca --de que color es ese boton y como entra en
   pantalla--. Separadas, se puede revisar el cumplimiento del manual leyendo un
   solo archivo de 150 lineas en vez de buscarlo entre 200 de maquetado.

   Fuente: /srv/02-onda/diseno/identidad/ (Manual de Identidad ONDA y Sistema
   de movimiento, v1.0 agosto 2026). La implementacion de referencia es
   /srv/01-infra/nginx/onda/portal.css, el login de Authelia.
   ══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────── EL CIAN ────────────────────────────────────
   «El color Onda solo aparece cuando algo esta ocurriendo.»
   Mas de dos apariciones por pantalla y deja de señalar.

   LAS DOS DE AQUI, y por que esas:

     1. LA ACCION PRINCIPAL. El boton que continua. Hay exactamente uno por
        pantalla: los demas son .secondary o .ghost.
     2. LO QUE ESTA OCURRIENDO. En el examen es la barra de avance --«progreso
        y conexion» esta en la lista del SI del manual--. En el inicio y en los
        resultados no hay barra, asi que la pantalla gasta una sola aparicion.

   EL FOCO NO ES CIAN, y es una decision, no un olvido: en una pantalla de
   examen ya hay boton y barra, y el anillo seria la tercera. Va en el color
   de texto con 3 px, que tiene mas contraste que el cian sobre cualquiera de
   los dos fondos. (En el portal de Authelia el foco SI es cian: alli es la
   aparicion 2 porque no hay barra de avance.)

   DEJARON DE SER CIAN, y antes lo eran todos a la vez: el borde de la opcion
   elegida, el hover de las tarjetas, el recuadro del reproductor, el hueco de
   la frase, el antetitulo y el selector desplegable. Eran hasta seis
   apariciones en una pantalla. Van en gris, que es lo que el manual pide para
   lo que no esta ocurriendo. El puente de simulador.css ya los dejo en
   --sup-texto; aqui solo se devuelve el cian a los dos que lo merecen. */

/* APARICION 1 DE 2: la accion principal. */
.btn{
  background: var(--senal);
  border-color: var(--senal);
  color: var(--senal-ink);
}
/* Al pulsar NO se escala: se apaga. La regla 02 vale tambien para el press,
   que es donde mas se rompe sin querer. */
.btn:hover{ filter: brightness(1.10); }
.btn:active{ filter: brightness(0.92); }

/* Secundario y fantasma: grises. Si fueran cian serian la tercera. */
.btn.secondary{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn.secondary:hover, .btn.ghost:hover{ border-color: var(--ink); filter: none; }

/* APARICION 2 DE 2: lo que esta ocurriendo. La barra de avance del examen. */
.progress div{ background: var(--senal); }

/* LAS DOS RESPUESTAS DE UNA PREGUNTA SI/NO SON OPCIONES EQUIVALENTES, no una
   accion principal y su alternativa. Que "Si, es real" saliera cian hacia dos
   cosas malas a la vez: gastaba la aparicion que le toca al boton que continua
   --con la barra de avance ya eran tres en la misma pantalla-- y le daba peso
   visual a una de las dos respuestas, que en una prueba de vocabulario es
   empujar a quien duda. Las dos en gris; el cian se lo queda "Siguiente". */
.yn .btn{ background: transparent; border-color: var(--line); color: var(--ink); }
.yn .btn:hover{ border-color: var(--ink); filter: none; }

/* Un boton deshabilitado NO es una accion disponible, asi que no señala y no
   gasta una aparicion. Es lo que mantiene la cuenta en dos en las tareas de
   listening, donde conviven el boton de reproducir --que es la accion del
   momento-- y un "Siguiente" que todavia no se puede pulsar. */
.btn:disabled{ background: transparent; border-color: var(--line); color: var(--muted); }

/* ─── LA ESCALA MCER ───────────────────────────────────────────────────────
   Cinco bandas de dominio creciente, de A1-A2 a C2.

   VAN EN GRISES, y no es una perdida: el manual pone "relleno de graficos" en
   la lista del NO del cian, y una escala es exactamente eso. Lo que si lleva
   cian es DONDE ESTAS VOS, que es M02 --el dato que llega-- y la unica marca
   que alguien busca cuando abre sus resultados. Pintada la escala entera de
   color, esa marca se pierde dentro del grafico.

   La rampa es el color de texto con opacidad creciente, asi que contrasta
   contra el fondo en los dos temas sin una sola regla por tema. Antes eran
   cinco literales escritos dos veces en el JS --barra y leyenda-- que no
   seguian al tema. */
.scale .seg.b1, .legend i.b1{ background: color-mix(in srgb, var(--ink) 18%, var(--surface)); }
.scale .seg.b2, .legend i.b2{ background: color-mix(in srgb, var(--ink) 34%, var(--surface)); }
.scale .seg.b3, .legend i.b3{ background: color-mix(in srgb, var(--ink) 50%, var(--surface)); }
.scale .seg.b4, .legend i.b4{ background: color-mix(in srgb, var(--ink) 66%, var(--surface)); }
.scale .seg.b5, .legend i.b5{ background: color-mix(in srgb, var(--ink) 82%, var(--surface)); }

/* TU PUNTAJE. Venia en rojo --el color de error-- y no es un error: es el
   resultado, y en la pantalla donde aparece es el dato que se fue a buscar.
   Cian, que es lo que el manual reserva para el estado de llegada. */
.scale .you{ background: var(--senal); }
.scale .you span{ color: var(--senal); }

/* El antetitulo era cian decorativo, que es justo lo que el manual prohibe. */
.eyebrow{ color: var(--muted); }

/* «Ahora te toca hablar» es un elemento activo, pero en la pantalla de
   speaking ya estan la barra y el boton. Se resuelve invirtiendo el texto:
   igual de fuerte, sin gastar una tercera aparicion. */
.phase.go{ background: var(--ink); color: var(--bg); }


/* ─────────────────────────── EL MOVIMIENTO ──────────────────────────────
   Sistema de movimiento ONDA v1.0.

     REGLA 02  Nada entra por escala. Todo entra por desplazamiento y
               opacidad, entre 6 y 12 px de recorrido.
     M04       Una sola curva, --ease-onda, en el 100% de las transiciones.
     REGLA 03  Con prefers-reduced-motion el movimiento se detiene.

   El simulador llegaba con 2 transiciones y ningun @keyframes: el movimiento
   estaba ausente, no simplificado.

   TODO LO QUE OCULTA ALGO VA DENTRO DE `no-preference`. Es la trampa de la
   regla 03: si la entrada se escribe como `opacity:0` + animacion y el
   navegador apaga las animaciones, el elemento se queda invisible para siempre
   y la pantalla aparece vacia. Declarado asi, con movimiento reducido no hay
   nada que ocultar -- no hay animacion que apagar. */

/* Transiciones de estado. La misma curva para el 100%, y duracion de token:
   ningun componente escribe un numero. */
.tile, .opt, .btn, .gapin, select.dd, input.line, textarea, .chip, summary{
  transition: border-color var(--dur-micro) var(--ease-onda),
              background-color var(--dur-micro) var(--ease-onda),
              color var(--dur-micro) var(--ease-onda),
              filter var(--dur-micro) var(--ease-onda);
}
/* Estaba literal en `.3s`. El avance es la señal de la pantalla: va en la
   duracion media, que es la que usa el resto del sistema para lo que se
   mueve solo. */
.progress div{ transition: width var(--dur-medio) var(--ease-onda); }

@media (prefers-reduced-motion: no-preference){

  /* La pantalla entra. 10 px, dentro del rango 6-12 de la regla 02. */
  @keyframes onda-entra{
    from{ opacity: 0; transform: translateY(10px); }
    to  { opacity: 1; transform: none; }
  }
  /* Para lo que ya esta centrado con translateX(-50%) y no puede perderlo. */
  @keyframes onda-entra-centrado{
    from{ opacity: 0; transform: translate(-50%, 10px); }
    to  { opacity: 1; transform: translate(-50%, 0); }
  }

  .stage, .wrap > section, .hero-score, .confirm{
    animation: onda-entra var(--dur-medio) var(--ease-onda) both;
  }

  /* Las listas entran escalonadas. 60 ms de --stagger y un tope de ocho pasos:
     el manual corta ahi porque a partir del noveno la lista deja de leerse
     como una entrada y se siente como una demora. El resto entra en bloque,
     que es exactamente lo que hace no declarar mas nth-child. */
  .tiles .tile, .opts .opt, .skills .skill{
    animation: onda-entra var(--dur-medio) var(--ease-onda) both;
  }
  .tiles .tile:nth-child(1), .opts .opt:nth-child(1), .skills .skill:nth-child(1){ animation-delay: 0ms; }
  .tiles .tile:nth-child(2), .opts .opt:nth-child(2), .skills .skill:nth-child(2){ animation-delay: calc(var(--stagger) * 1); }
  .tiles .tile:nth-child(3), .opts .opt:nth-child(3), .skills .skill:nth-child(3){ animation-delay: calc(var(--stagger) * 2); }
  .tiles .tile:nth-child(4), .opts .opt:nth-child(4), .skills .skill:nth-child(4){ animation-delay: calc(var(--stagger) * 3); }
  .tiles .tile:nth-child(5), .opts .opt:nth-child(5){ animation-delay: calc(var(--stagger) * 4); }
  .tiles .tile:nth-child(6), .opts .opt:nth-child(6){ animation-delay: calc(var(--stagger) * 5); }
  .tiles .tile:nth-child(7), .opts .opt:nth-child(7){ animation-delay: calc(var(--stagger) * 6); }
  .tiles .tile:nth-child(8), .opts .opt:nth-child(8){ animation-delay: calc(var(--stagger) * 7); }

  /* La correccion aparece despues de responder: es un dato que llega, asi que
     entra como entra todo, por desplazamiento. */
  .fb, .evalitem, .revline{
    animation: onda-entra var(--dur-micro) var(--ease-onda) both;
  }

  /* El aviso flotante ya esta centrado con translateX(-50%). */
  .toast{ animation: onda-entra-centrado var(--dur-medio) var(--ease-onda) both; }

  /* EL RELOJ EN ROJO ES LA UNICA SEÑAL EN BUCLE DE LA INTERFAZ, y por eso es
     la unica excepcion a la curva: el manual manda `linear` para lo que se
     repite. Opacidad y nada mas -- un latido por escala seria la regla 02 rota
     en el elemento que mas se mira de la pantalla. */
  @keyframes onda-latido{
    0%, 100%{ opacity: 1; }
    50%     { opacity: .62; }
  }
  .timer.low{ animation: onda-latido 1.2s linear infinite; }
}