/* ── Tablet y abajo ────────────────────────────────── */
@media (max-width: 640px) {
  #app { padding: 1rem 0.75rem 3rem; }

  .card        { padding: 1.25rem; border-radius: var(--r-lg); }
  .card-hero   { padding: 2.5rem 1.25rem 2rem; }

  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  .row2 { grid-template-columns: 1fr; }

  .btn-xl { padding: 14px 12px; }

  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .metric-card .m-num { font-size: 18px; }

  .brow { flex-direction: column; }
  .brow .btn { justify-content: center; width: 100%; }

  .steps .step-label { display: none; }
  .steps .step-label.active { display: block; }

  .tabs .tab { font-size: 12px; padding: 6px 6px; }

  .admin-table { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 8px 8px; }
}

/* ── Muy pequeño ────────────────────────────────────── */
@media (max-width: 380px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .folio-display { font-size: 18px; }
}