/* ============================================================
   MeuDesejoVIP — Responsividade global (mobile/tablet)
   Cobre: home pública, painel admin, painel modelo, painel cliente
   ============================================================ */

/* ===== Imagens e mídia nunca estouram a tela ===== */
img, video, canvas, svg { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(255,45,142,.2); }

/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px){
  .wrap, .grid { max-width: 100% !important; }
  /* painéis: sidebar mais estreita */
  .dashboard-sidebar { width: 220px !important; }
}

/* ============================================================
   MOBILE (≤768px) — reorganização geral
   ============================================================ */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  /* ----- HOME pública: coluna única ----- */
  .grid, .wrap.grid { grid-template-columns: 1fr !important; display: block !important; }
  .col-side { margin-top: 18px; }
  .cards, .cards.v7 { grid-template-columns: repeat(2,1fr) !important; }

  /* ----- PAINÉIS (admin/modelo/cliente): sidebar vira menu deslizante ----- */
  .dashboard-layout { display: block !important; }
  .dashboard-sidebar{
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 80% !important; max-width: 300px; z-index: 1000;
    transform: translateX(-105%); transition: transform .25s ease;
    overflow-y: auto; box-shadow: 4px 0 30px rgba(0,0,0,.5);
  }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-main { margin-left: 0 !important; width: 100% !important; padding: 16px 14px 70px !important; }

  /* botão hambúrguer (injetado via JS) */
  #mobMenuBtn{
    position: fixed; top: 12px; left: 12px; z-index: 1001;
    width: 42px; height: 42px; border-radius: 11px; border: 1px solid rgba(255,255,255,.15);
    background: rgba(20,20,23,.92); backdrop-filter: blur(8px); color: #fff;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  #mobMenuOverlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999; display: none;
  }
  #mobMenuOverlay.show { display: block; }
  /* empurra o conteúdo do painel pra não ficar atrás do botão */
  .dashboard-main > .top, .dashboard-main > .adm-head:first-child { padding-left: 52px; min-height: 42px; }

  /* ----- KPIs e grids dos painéis: colapsam ----- */
  .kpis, .adm-kpis, .g6, .g4s, .g3, .g3s, .g2, .g2s, .cpage, .quickgrid { grid-template-columns: 1fr 1fr !important; }
  .g3s, .g2s, .cpage { grid-template-columns: 1fr !important; }

  /* ----- Tabelas: scroll horizontal em vez de quebrar ----- */
  .adm-table, table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* ----- Topbar dos painéis ----- */
  .top { flex-wrap: wrap; gap: 10px; }
  .tsrch, .top .tsrch { min-width: 100% !important; order: 3; }
  .tacts { margin-left: 0 !important; gap: 12px; flex-wrap: wrap; }

  /* ----- Hero ----- */
  .hero, .hero-slide { min-height: 220px; }
  .hero-body { max-width: 100% !important; padding: 26px 20px !important; }
  .hero-body h1 { font-size: 1.8rem !important; }

  /* ----- Cards de conteúdo ----- */
  .card .nm { font-size: .82rem; }

  /* ----- Modais: largura total ----- */
  .modal, .modal-box, .ficha { width: 95% !important; max-width: 95% !important; }

  /* ----- Forms: campos full-width ----- */
  .form-row, .form-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MOBILE pequeno (≤480px)
   ============================================================ */
@media (max-width: 480px){
  .cards, .cards.v7 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .kpis, .adm-kpis, .g6, .g4s, .g2, .g2s { grid-template-columns: 1fr !important; }
  .hero-body h1 { font-size: 1.5rem !important; }
  .sec-head h2 { font-size: 1rem; }
  /* esconde texto longo de navegação, mantém ícones */
  body { font-size: 14px; }
}

/* ===== Botões e áreas de toque maiores no celular ===== */
@media (max-width: 768px){
  .btn, button, .sidebar-nav-item, .nav-in a { min-height: 42px; }
  input, select, textarea { font-size: 16px !important; } /* evita zoom automático no iOS */
}