/* Versión para móvil. Todas las reglas empiezan por .movil, la clase que pone
   assets/js/movil.js en <html> cuando detecta un móvil; en el PC no se aplica nada. */

/* ---------- Común ---------- */
.movil body { font-size: 17px; -webkit-tap-highlight-color: transparent; }
.movil .cabecera { padding: 12px 12px 16px; }
.movil .cabecera h1 { font-size: 1.35rem; line-height: 1.25; }
.movil .envoltorio { padding: 10px; }
.movil h2 { font-size: 1.25rem; }
.movil .instrucciones { font-size: .95rem; margin: 6px 0 12px; }
.movil .boton { padding: 14px 32px; }

/* Que una pulsación larga no abra menús ni seleccione texto al arrastrar */
.movil .ficha, .movil .frase, .movil .animal, .movil .paso, .movil .pieza, .movil .silaba, .movil img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* Listas de asignaturas y juegos: una columna, con el icono a la izquierda */
.movil .rejilla { grid-template-columns: 1fr; gap: 10px; }
.movil .tarjeta {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  text-align: left;
}
.movil .tarjeta .icono  { font-size: 2.2rem; flex: none; }
.movil .tarjeta .nombre { font-size: 1.05rem; }

/* ---------- Formar palabras (juego-palabras) ---------- */
.movil .fila { gap: 12px; padding: 10px; margin-bottom: 12px; }
.movil .palabra { flex-basis: 100%; }
.movil .imagen { flex: 0 0 100%; height: 150px; }

/* ---------- Tabla con desplegables (juego-tabla) ---------- */
/* La tabla se desplaza de lado; la columna de títulos se queda fija a la izquierda */
.movil #tabla { min-width: 640px; border-spacing: 4px; }
.movil #tabla .titulo-fila { position: sticky; left: 0; z-index: 1; font-size: .8rem; }
.movil #tabla select { font-size: .85rem; padding: 6px 2px; }
.movil .grupo img { height: 60px; }

/* ---------- Clasificar a los lados (juego-clasificar) ---------- */
/* Las zonas van arriba, una al lado de la otra, y las tarjetas debajo */
.movil .tablero { grid-template-columns: 1fr 1fr; gap: 8px; }
.movil #centro {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  padding: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.movil .zona { min-height: 150px; padding: 8px; border-width: 3px; }
.movil .zona h2 { font-size: 1.05rem; }
.movil .zona .pista { font-size: .75rem; margin-bottom: 6px; }
.movil .zona .huecos { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; }
.movil .nombre-animal { font-size: .8rem; }
.movil .animal.colocada .nombre-animal { font-size: .65rem; }

/* Tarjetas de texto */
.movil .animal.frase { min-height: 56px; }
.movil .animal.frase .nombre-animal { font-size: .85rem; }
.movil .animal.colocada.frase .nombre-animal { font-size: .75rem; }

/* Variante de seis zonas: tres a cada lado */
.movil .lado { gap: 8px; }
.movil .lado .zona { min-height: 0; padding: 6px; }
.movil .lado .zona h2 { font-size: .8rem; gap: 4px; margin-bottom: 6px; }
.movil .lado .zona h2 img { width: 40px; }
.movil .tablero.seis #centro { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---------- Dos fases (juego-fases) ---------- */
/* Las frases van debajo, también con el móvil en horizontal */
.movil .fases { grid-template-columns: 1fr; }
.movil #frases { position: static; min-height: 0; }
.movil .dibujo { width: 70px; }

/* ---------- Ordenar (juego-ordenar) ---------- */
.movil #banco { padding: 8px; min-height: 0; }
.movil .ordenar { gap: 14px; }

/* ---------- Números con palabras (juego-numeros) ---------- */
/* El número y la respuesta se quedan arriba mientras se baja por las palabras */
.movil .numeros { grid-template-columns: 1fr; gap: 10px; }
.movil .objetivo { top: 0; z-index: 2; padding: 8px; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .25); }
.movil .numero { font-size: 3.6rem; }
.movil .contador { font-size: .85rem; }
.movil .respuesta { min-height: 56px; margin-top: 6px; padding: 8px; gap: 5px; }
.movil .pieza.colocada { font-size: .95rem; padding: 6px 8px; }
.movil .objetivo .final { font-size: 1.1rem; }
.movil .objetivo .final p { margin: 8px 0; }
.movil .banco { position: static; padding: 8px; gap: 8px; }
.movil .grupo-palabras { gap: 6px; padding-bottom: 8px; }
.movil .pieza { font-size: .85rem; padding: 8px 9px; }

/* ---------- Completar sílabas (juego-silabas) ---------- */
/* Dibujo más pequeño para que la palabra y las sílabas quepan sin bajar */
.movil .juego-silabas { gap: 10px; }
.movil .lamina { padding: 8px; }
.movil #dibujo-palabra { width: auto; height: 26vh; max-width: 80%; }
.movil .escrita { font-size: 2.4rem; margin-top: 2px; }
.movil .hueco { border-width: 3px; }
.movil #silabas { gap: 8px; padding: 10px; }
.movil .silaba { min-width: 60px; font-size: 1.5rem; padding: 8px 10px; }
.movil .lamina .final { font-size: 1.1rem; }