/* ============================================================
   M.E.T.A.S · Las actividades se pueden hacer sin el dedo
   ------------------------------------------------------------
   Medido en las 74 misiones: había **2 314 elementos que responden
   al clic y a los que el teclado no llegaba**. Clasifica, Identifica,
   Empareja, el memorama y las analogías se arman con <div> y onclick.
   Un alumno con discapacidad motora podía leer la teoría entera y no
   hacer una sola actividad.

   ⚠️ Y el patrón que ya estaba en 18 misiones (centena.js) NO servía:
   pone role="button" y tabindex="0", pero un <div> así **no responde
   a Enter ni a la barra espaciadora** —eso solo lo hace un <button>
   de verdad—. Comprobado: se enfoca, se ve enfocado, y al pulsar
   Enter no pasa nada. Eso es peor que no poder llegar: es una parada
   de tabulador que promete algo y no lo cumple. Por eso el JS de al
   lado añade la mitad que faltaba.

   Aquí va la OTRA mitad que faltaba: **que se vea dónde está el
   foco**. Un foco que no se ve es el mismo callejón sin salida, y en
   la pantalla de un teléfono al sol el contorno de fábrica del
   navegador no se distingue —la misma razón por la que el chip activo
   de la barra de grupos va relleno y no solo con el borde—.
   ============================================================ */

/* Doble anillo: uno del color del fondo y otro del color de la misión.
   Así se ve encima de una tarjeta clara, de una oscura y del color que
   traiga cada actividad, sin tener que acertar con el contraste en 74
   misiones. Es el mismo recurso que el chip activo de la barra. */
.ta-tecla:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 6px var(--pri, #1565c0);
  border-radius: 6px;
  /* Que el anillo no se lo coma el borde del contenedor. */
  position: relative;
  z-index: 3;
}

/* El foco NO se pinta al tocar con el dedo —:focus-visible ya lo evita—,
   pero algunos navegadores viejos no lo entienden y dejarían el anillo
   puesto después de cada toque, que en una actividad de veinte fichas es
   ruido. Por eso el respaldo se limita al foco por teclado. */
.ta-tecla:focus:not(:focus-visible){ box-shadow: none; }

/* En modo de alto contraste del sistema manda el color del sistema: el
   nuestro se ignora y sin esto no quedaría anillo ninguno. */
@media (forced-colors: active){
  .ta-tecla:focus-visible{ outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
}

/* ============================================================
   La sopa de letras, sin el dedo
   ------------------------------------------------------------
   El JS de al lado hace de las 144 celdas UNA sola parada de
   tabulador y anda por dentro con las flechas. Aquí va lo que sin
   verse no sirve de nada: dónde está el cursor, y cómo se juega.
   ============================================================ */

/* El mismo doble anillo de arriba, y por la misma razón: encima de
   una celda ya marcada —que va rellena del color de la misión— un
   contorno de un solo color no se distingue. */
#sopaGrid .sopa-cell:focus-visible,
#sopaGrid .sopa-c:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 6px var(--pri, #1565c0);
  position: relative;
  z-index: 3;
}
#sopaGrid .sopa-cell:focus:not(:focus-visible),
#sopaGrid .sopa-c:focus:not(:focus-visible){ box-shadow: none; }

@media (forced-colors: active){
  #sopaGrid .sopa-cell:focus-visible,
  #sopaGrid .sopa-c:focus-visible{ outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
}

/* Regla 6: se dice cómo se juega, pero SOLO a quien está usando el
   teclado. Con el dedo, tres renglones de instrucciones encima de la
   sopa son tres renglones que le tapan la cuadrícula. */
.sopa-teclas-ayuda{
  display: none;
  margin: .5rem 0 0;
  padding: .45rem .6rem;
  font-size: .82rem;
  line-height: 1.35;
  border-radius: 8px;
  background: var(--card, #fff);
  border: 2px solid var(--pri, #1565c0);
  color: var(--tx, #1f2937);
}
#sopaGrid:focus-within + .sopa-teclas-ayuda{ display: block; }