/* ==========================================================================
   responsive.css — Adaptación a pantallas pequeñas
   (se carga el último para poder sobrescribir las reglas anteriores)
   ========================================================================== */

/* Tablet: la barra lateral pasa debajo del calendario */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .cal-wrap { order: 1; }
  .side { order: 2; }
}

/* Móvil */
@media (max-width: 560px) {
  h1 { font-size: 30px; }
  .day { min-height: 84px; padding: 3px; }
  .meta { --w: 30px; }
  .meta.ev { width: auto; max-width: 100%; }
  .tab { padding: 10px 10px; font-size: 15px; }
  .meta .tag { font-size: 11px; }
  .dow div { padding: 6px 3px; text-align: center; }
  .cols, .pick, .detail { grid-template-columns: 1fr; }
  .mrow { grid-template-columns: 30px minmax(0, 1fr); }
  .mrow .md { grid-column: 2; }
  .mrow input { grid-column: 1 / -1; }
}