/* ============================================================
   responsive.css — Adaptación a tablet y móvil.
   ============================================================ */

@media (max-width: 900px) {
  .charts-row { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .screen { padding: 20px 14px 50px; }
  .hero-card, .card { padding: 22px 18px; }
  .hero-title { font-size: 1.6rem; }
  .splash-title { font-size: 2rem; }
  .results-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card__value { font-size: 1.2rem; }
  .question-enunciado { font-size: 1.05rem; }
  .option-card { padding: 13px 14px; font-size: 0.92rem; }
  .avatar-chip { width: 50px; height: 50px; font-size: 1.35rem; }
  .a11y-panel { width: 86%; right: -100%; }
  .docente-toolbar { flex-direction: column; align-items: stretch; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .topbar { top: 10px; right: 10px; }
}

@media (max-width: 400px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
  .ranking-row { grid-template-columns: 30px 1fr auto; }
  .ranking-row__pct { display: none; }
}