/* ── Aprender (tanda 299) ──
   Hoja propia: solo la baja /aprender. Antes esta pantalla eran tres
   cajas con borde de color que únicamente servían para llevarte a otra
   pantalla; ahora las guías se ven aquí y las categorías son filtros. */

/* ── Sigue donde lo dejaste ──
   Lo que hace volver. Sin esto, quien dejó un curso a medias tiene que
   acordarse de cuál era y buscarlo. Va con los azules FIJOS
   (`--navy-solid-*`) y no con `--navy`: el panel es oscuro en los dos
   temas y lleva blanco encima. */
.aprender-seguir {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(115deg, var(--navy-solid-dark), var(--navy-solid-light) 62%, #347fae);
  color: var(--blanco-fijo);
  border-radius: var(--radius-xl);
  padding: 24px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.aprender-seguir::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0.55;
}
.aprender-seguir > * { position: relative; z-index: 1; }
/* El aro de progreso: el mismo truco que el reloj de un torneo en
   marcha — `--vuelta` va de 0 a 1 y lo pone el JavaScript. */
.aprender-aro {
  --vuelta: 0;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--blanco-fijo) calc(var(--vuelta) * 360deg), rgba(255, 255, 255, 0.25) 0);
}
.aprender-aro b {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--navy-solid);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--t-md);
}
.aprender-seguir-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aprender-seguir-rotulo {
  font-size: var(--t-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a9cee3;
  font-weight: 700;
}
.aprender-seguir-texto strong { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.2; }
.aprender-seguir-sub { font-size: var(--t-sm); color: #bfdcec; }
.aprender-seguir-boton { margin-left: auto; background: var(--blanco-fijo); color: var(--navy-solid-dark); flex: none; }
.aprender-seguir-boton:hover { background: #e1f0f4; color: var(--navy-solid-dark); }

/* ── Los filtros ──
   Las categorías dejan de ser una pantalla intermedia y pasan a ser
   chips. El separador marca que lo de la derecha es otra cosa: la
   categoría es UNA (excluyente) y el nivel es un interruptor. */
.aprender-filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}
.aprender-chip {
  border: 1px solid var(--border-strong);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-md);
  font-weight: 500;
  font-family: inherit;
  color: var(--text-mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, color 0.15s;
}
.aprender-chip:hover { border-color: var(--navy); color: var(--navy); }
.aprender-chip.activa { background: var(--navy); border-color: var(--navy); color: var(--blanco-fijo); }
.aprender-chip-n {
  background: var(--ice);
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 1px 8px;
}
.aprender-chip.activa .aprender-chip-n { background: rgba(255, 255, 255, 0.22); color: var(--blanco-fijo); }
.aprender-filtros-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

/* Los chips de filtro de /aprender, para un dedo (tanda 312). */
@media (pointer: coarse) {
  .aprender-chip {
    min-height: 44px;
  }
}