/* ══════════════════════════════════════════════════════════
   responsive.css — Adaptación a tablet/móvil. Capa 4 de 5.
   Breakpoints: móvil <768px · tablet 768–1024px · desktop >1024px.
   El layout de escritorio (sidebar fijo) vive en layout.css y NO se
   altera por encima de 1024px: aquí solo se SUMAN ajustes hacia abajo.
   ══════════════════════════════════════════════════════════ */

/* ---------- Desktop (>1024px) ---------- */
/* El backdrop del cajón nunca debe verse en escritorio (evita que el
   overlay quede pegado si se agranda la ventana con el menú abierto). */
@media (min-width: 1025px) {
  .sidebar-backdrop { display: none !important; }
}

/* ---------- Tablet y móvil (≤1024px): sidebar deslizable ---------- */
@media (max-width: 1024px) {
  .topbar-mobile-toggle { display: flex; }      /* aparece la hamburguesa */

  .admin-sidebar {
    transform: translateX(-100%);               /* cajón oculto por defecto */
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .admin-sidebar { transform: translateX(0); }

  .admin-main { margin-left: 0; }               /* contenido a ancho completo */

  .topbar-center { display: none; }             /* breadcrumb se oculta */
  .topbar-right  { margin-left: auto; }         /* controles alineados a la derecha */

  body { overflow-x: hidden; }                  /* sin scroll horizontal */
}

/* ---------- Móvil (<768px): compactar topbar y apilar ---------- */
@media (max-width: 767px) {
  .content-wrapper { padding: 16px; }

  .topbar-brand-sub { display: none; }
  .user-info { display: none; }                 /* solo avatar en móvil */

  .admin-topbar { gap: 10px; padding: 0 12px; }
  .topbar-sep { display: none; }                /* libera espacio en la topbar */
  .org-toggle .org-btn { padding: 5px 9px; }

  /* Grids y formularios a una sola columna */
  .form-grid.cols-2 { grid-template-columns: 1fr; }

  .page-head { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; }

  /* Tablas anchas: scroll horizontal dentro de su contenedor (no de la página) */
  .data-table-wrap { overflow-x: auto; }
  .data-table { min-width: 560px; }
}

/* ---------- Pantallas muy pequeñas (<380px) ---------- */
@media (max-width: 380px) {
  .topbar-brand-name { font-size: 13px; }
  .login-card { padding: 24px 20px; }
}