/* ==========================================================================
   FinanceXLab — Exercises
   Estilos de todos los tipos de ejercicio (SECCIÓN 1/2) y de la página de
   módulo: ticket, selector de nivel, juego cronometrado, ordenar por toque,
   resumen de nivel, calculadora integrada. Depende de tokens.css.
   ========================================================================== */

.modulo-breadcrumb {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.modulo-concepto p {
  margin-top: 8px;
}
.modulo-concepto-ejemplo {
  margin-top: 12px;
  color: var(--text-primary);
  font-weight: 600;
}

.selector-nivel {
  transition: border-color 0.2s, color 0.2s;
}
.selector-nivel.activo {
  border-color: var(--border-active);
  color: var(--text-primary);
}

.ejercicio-ticket {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 14px 0;
}
.ejercicio-ticket-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.ejercicio-explicacion {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ejercicio-indicadores p {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.ejercicio-indicadores .xp-sesion {
  color: var(--accent-green);
}

.resumen-nivel {
  margin-top: 20px;
}
.resumen-nivel ul {
  margin-top: 10px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---- Ordenar por toque (equivalente funcional a drag & drop) ---------- */

.dd-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
}
.dd-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.dd-item-disponible {
  width: auto;
}

/* ---- Juego cronometrado ------------------------------------------------- */

.timed-game-status {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---- Calculadora de porcentajes (módulo 1.5) ---------------------------- */

.calculadora-bloque {
  margin-top: 14px;
}
.calculadora-bloque + .calculadora-bloque {
  margin-top: 20px;
}
.calculadora-resultado {
  margin-top: 8px;
  color: var(--accent-green);
  font-size: 1.1rem;
}
.calculadora-slider {
  width: 100%;
}
.calculadora-input {
  width: 100%;
  margin-top: 8px;
}

/* ---- Hub de módulos (grid) ------------------------------------------- */

.grid-modulos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .grid-modulos { grid-template-columns: repeat(3, 1fr); }
}
.modulo-card {
  cursor: pointer;
}