/* Juego de completar una tabla con desplegables (ver assets/js/juego-tabla.js) */
.envoltorio.ancho { max-width: 1200px; }
.instrucciones { text-align: center; color: var(--suave); }

/* En pantallas estrechas la tabla se desplaza de lado sin mover la página */
.desplazable { overflow-x: auto; padding-bottom: 8px; }

#tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}
#tabla th, #tabla td {
  padding: 8px 6px;
  border-radius: 14px;
  text-align: center;
  background: #fff;
  border: 3px solid var(--borde);
  transition: background .2s, border-color .2s;
}
#tabla .esquina, #tabla .estados th { background: none; border: 0; }

.grupo img { display: block; width: 100%; max-width: 110px; height: 80px; margin: 0 auto; }
.nombre-grupo { display: block; margin-top: 4px; font-size: clamp(.9rem, 1.8vw, 1.2rem); }

#tabla .titulo-fila {
  width: 18%;
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-size: clamp(.85rem, 1.6vw, 1.1rem);
}

#tabla select {
  width: 100%;
  padding: 8px 4px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  font-weight: bold;
  cursor: pointer;
}

/* Columna completa: verde si está bien, rojo si hay algún fallo */
#tabla .bien { background: #ecf8f1; border-color: var(--acento); }
#tabla .mal  { background: #fde2df; border-color: #d9443b; }
#tabla .mal select { animation: temblar .35s; }

#tabla .estado { border: 0; background: none; font-weight: bold; min-height: 1.5em; }
#tabla .estado.bien { color: var(--acento); background: none; }
#tabla .estado.mal  { color: #d9443b; background: none; }

.creditos { text-align: center; color: var(--suave); font-size: .8rem; margin-top: 32px; }

.final { text-align: center; font-size: 1.4rem; }

@keyframes temblar {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}