/* =======================
   MOBILE ULTIMATE TUNE
   Melhorias completas para smartphone (CSS-only)
   ======================= */

/* ---------- Variáveis base (ajustáveis) ---------- */
:root{
  --hdrH: 60px;               /* altura do header no mobile; ajuste conforme seu layout */
  --padX: 14px;
  --padY: 12px;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* ---------- Regras gerais ---------- */
html{ scroll-behavior: smooth; }
@media (max-width: 1100px){
  html{ font-size: clamp(14px, 3.8vw, 16px); }
  body{ line-height: 1.45; -webkit-tap-highlight-color: transparent; }

  /* Alvos de toque confortáveis */
  a, button, .btn { min-height: 44px; }
  input, select, textarea { font-size: 16px; } /* evita zoom no iOS */

  /* Header e conteúdo */
  header{ position: sticky; top: 0; z-index: 10000; }
  main, #view, .content, .page{
    padding: calc(var(--hdrH) + var(--padY)) var(--padX) 22px;
    max-width: 100%;
  }

  /* Evitar horizontais acidentais */
  body{ overflow-x: hidden; }
  .wrap, .container, .section{ max-width: 100%; }

  /* Imagens e mídias responsivas */
  img, video, canvas, svg{ max-width: 100%; height: auto; border-radius: var(--radius); }
  iframe{ max-width: 100%; }

  /* Tabelas com scroll quando necessário */
  table{ width: 100%; border-collapse: collapse; }
  .table-wrap, table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grids e cards compactos */
  .grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
  .cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }

  /* Navegação principal: rolável/visível no mobile */
  nav.sidebar, nav[role="navigation"], nav.main-menu{
    z-index: 10001; pointer-events: auto;
    display: block;
    padding: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    box-shadow: none;
    background: inherit;
  }
  nav.sidebar a, nav[role="navigation"] a, nav.main-menu a{
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 8px 12px; border-radius: 10px; text-decoration: none;
  }

  /* Backdrop (se existir) não atrapalha quando oculto */
  .backdrop{ pointer-events: none; }
  body.menu-open .backdrop{ pointer-events: auto; }

  /* Seções ancoradas compensam o header fixo */
  [id]{ scroll-margin-top: calc(var(--hdrH) + 10px); }
}

/* ---------- Ajustes finos por largura ---------- */
@media (max-width: 480px){
  :root{ --hdrH: 58px; --padX: 12px; }
  nav.sidebar a, nav[role="navigation"] a, nav.main-menu a{ padding: 8px 10px; }
}
@media (max-width: 380px){
  :root{ --hdrH: 54px; --padX: 10px; }
}

/* ---------- Acessibilidade e movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Safe area (notch) ---------- */
@supports (padding: max(0px)){
  @media (max-width:1100px){
    body{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
    header{ padding-top: max(0px, env(safe-area-inset-top)); }
  }
}

/* ---------- Z-index de segurança ---------- */
@media (max-width: 1100px){
  header{ z-index: 10000; position: sticky; }
  nav.sidebar, nav[role="navigation"], nav.main-menu{ z-index: 10001; }
  .backdrop{ z-index: 9999; }
}