/* ============================================
   RESPONSIVE.CSS — ajustes para móvil y tablet
   ============================================ */

@media (max-width: 860px) {
  .sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px 16px;
    align-items: center;
  }
  .sidebar-logo { padding: 0 12px 0 0; }
  .nav-item { white-space: nowrap; }
}

@media (max-width: 560px) {
  main { padding: 20px 16px; }
  .topbar { padding: 14px 16px; }
  .login-card { padding: 32px 24px; margin: 16px; }
}