/* NOMBRE_APP · «Mis preguntas» (sección 3). Adaptado de my-questions.css de BomberoFlash:
   las cuatro listas en pestañas con su cuenta, y cada libro como una lista de capítulos
   sobre una sola superficie. Problemáticas lleva un medidor de olvidos (8 aviso, 16 fuera).
   Fase 4: las pestañas son píldoras y cada libro, una hoja blanca redondeada. */
.myq { display: grid; gap: var(--esp-5, 20px); max-width: 860px; }
.myq__cabeza { display: grid; gap: var(--esp-1, 4px); }

.myq__pestanas { display: flex; gap: var(--esp-2, 8px); padding: 4px; overflow-x: auto; scrollbar-width: none; }
.myq__pestanas::-webkit-scrollbar { display: none; }
.myq__pestana {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linea); border-radius: var(--radio-pildora, 999px);
  background: var(--superficie); color: var(--tinta-2); font-size: .9375rem; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: var(--mv-c);
}
.myq__pestana:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.myq__pestana[aria-selected="true"] { border-color: var(--marca); background: var(--marca); color: #fff; }
.myq__cuenta { color: var(--tenue); font-size: var(--tam-m, .875rem); font-weight: 650; font-variant-numeric: tabular-nums; }
.myq__pestana[aria-selected="true"] .myq__cuenta { color: var(--marino-borde, #c5d2e6); }
@media (max-width: 420px) {
  .myq__pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2, 8px); overflow: visible; }
  .myq__pestana { justify-content: space-between; padding-inline: 14px; }
}

.myq__panel { display: grid; gap: var(--esp-6, 24px); }
.myq__explica { max-width: var(--medida, 62ch); color: var(--texto); line-height: 1.55; }
.myq__libro { border: 1px solid var(--linea-suave); border-radius: var(--s3-radio, 24px); background: var(--superficie); box-shadow: var(--sombra-suave); overflow: hidden; }
.myq__libro-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3, 12px) var(--esp-4, 16px); padding: var(--esp-4, 16px) var(--esp-5, 20px); }
.myq__libro-cabeza h2 { color: var(--tinta); font: 600 1.25rem/1.25 var(--letra-serif, Georgia, serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.myq__libro-cabeza p { margin-top: 2px; color: var(--tenue); font-size: var(--tam-m, .875rem); }
.myq__temas { list-style: none; }
.myq__tema { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4, 16px); padding: var(--esp-3, 12px) var(--esp-5, 20px); border-top: 1px solid var(--linea-suave); }
.myq__tema-texto { display: grid; gap: 2px; min-width: 0; }
.myq__tema-texto strong { color: var(--tinta-2); font-size: .9375rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.myq__tema-texto > span { color: var(--tenue); font-size: var(--tam-s, .8125rem); }
.myq__tema .boton { flex: none; min-height: 44px; }

/* Medidor de olvidos: pista de 16 con una marca en el 8 (aviso) */
.myq__medidor { position: relative; display: block; width: min(220px, 100%); height: 6px; margin-top: 6px; border-radius: 3px; background: var(--linea-suave); }
.myq__medidor > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ambar); }
.myq__medidor > i { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; background: var(--superficie); }
.myq__tema--problema.es-suspendida .myq__medidor > span { background: var(--ambar-tinta); }

.myq__vacio { display: grid; justify-items: start; gap: var(--esp-3, 12px); padding: var(--esp-6, 24px); border-radius: var(--s3-radio, 24px); background: var(--crema, #f7f1e8); }
.myq__ilustracion { width: 72px; height: 72px; }
.myq__vacio p { max-width: var(--medida, 62ch); color: var(--texto); line-height: 1.55; }

@media (max-width: 560px) {
  .myq__libro-cabeza { padding: var(--esp-4, 16px); }
  .myq__libro-cabeza .boton { width: 100%; }
  .myq__tema { padding: var(--esp-3, 12px) var(--esp-4, 16px); }
}
.myq > *, .myq__panel > * { min-width: 0; }