/* ============================================================
   MIL MULTIVERSOS — Admin Panel Responsive CSS
   Breakpoints: 768px (mobile), 1024px (tablet)
   ============================================================ */

/* ── Topbar del admin ── */
.adm-topbar {
  background: #fff;
  border-bottom: 1px solid var(--cream3);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 12px;
}

/* ── Layout base ── */
.adm-main  { background: #f5f3ef; flex: 1; overflow-x: hidden; min-width: 0; }
.adm-content { padding: 32px; }

/* ============================================================
   TABLET — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .adm-topbar { padding: 0 20px; }
  .adm-content { padding: 24px; }
  /* KPIs 2 columnas */
  .kpis-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   MOBILE — 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Topbar compacto con sangrado superior */
  .adm-topbar {
    padding: 0 14px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    height: auto !important;
    min-height: 54px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  /* Ocultar texto/elementos no esenciales en topbar */
  .adm-topbar .adm-topbar-date { display: none !important; }
  .adm-topbar .btn span,
  .adm-topbar a span { display: none !important; }

  /* Contenido */
  .adm-content { padding: 14px !important; }

  /* Layout wrapper: sidebar oculto, main a full width */
  body > div[style*="display:flex"],
  .app-layout,
  .adm-wrap {
    display: block !important;
  }
  .adm-main  { width: 100% !important; min-width: 0 !important; }
  .adm-wrap .adm-main { height: auto !important; overflow: visible !important; }

  /* KPIs: 2 columnas en móvil */
  .kpis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-card  { padding: 14px 16px !important; }
  .kpi-val   { font-size: 24px !important; }

  /* Grids de 2 columnas → 1 columna */
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Tablas: scroll horizontal */
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
  }
  .data-table { min-width: 560px !important; }
  .data-table-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  .data-table th, .data-table td { padding: 10px 12px !important; }

  /* Stats rows */
  .stats-row { flex-wrap: wrap !important; gap: 10px !important; }
  .stats-row > * { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; }

  /* Filters bar */
  .filters-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .filters-bar form,
  .filters-bar select,
  .filters-bar input { width: 100% !important; }

  /* Modales */
  .modal-overlay { padding: 12px !important; align-items: flex-end !important; }
  .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh;
  }
  .modal-header { padding: 18px 20px 0 !important; }
  .modal-body   { padding: 16px 20px 24px !important; }

  /* Página título */
  .adm-page-title { font-size: 22px !important; margin-bottom: 2px !important; }
  .adm-page-sub   { font-size: 12px !important; margin-bottom: 18px !important; }

  /* Grids genéricos inline */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Panel de admin: mensajes (igual que inbox guía) */
  .adm-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    overflow: visible !important;
  }
  .adm-wrap .adm-main {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   SMALL — 480px
   ============================================================ */
@media (max-width: 480px) {
  .kpis-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .adm-content { padding: 10px !important; }
  .data-table { min-width: 480px !important; }
}