/* ═══════════════════════════════════════════════════════════
   mobile.css — Responsividade e breakpoints
═══════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  .sim-layout {
    grid-template-columns: 260px 1fr;
  }
  .checker-layout {
    grid-template-columns: 280px 1fr;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .all-visions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── TABLET MENOR (≤ 820px) ── */
@media (max-width: 820px) {
  :root { --header-h: 56px; }

  .sim-layout,
  .checker-layout {
    grid-template-columns: 1fr;
  }

  .bp-layout {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .all-visions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .foto-grid {
    grid-template-columns: 1fr;
  }
}

/* ── MOBILE (≤ 600px) ── */
@media (max-width: 600px) {
  /* Header mobile */
  .app-header {
    padding: 0 var(--space-4);
    gap: var(--space-2);
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
  }

  .header-left { width: 100%; justify-content: space-between; height: var(--header-h); }
  .header-actions { gap: var(--space-2); }

  /* Menu mobile */
  .mobile-menu-btn { display: flex; }

  .nav-tabs {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: var(--space-2) 0 var(--space-3);
    border-top: 1px solid var(--border-subtle);
    gap: var(--space-1);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-tabs.open { display: flex; }
  .nav-tab {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    justify-content: flex-start;
    font-size: 14px;
  }
  .nav-tab span { flex: 1; }

  /* Main padding */
  .main { padding: var(--space-4); }

  /* Section */
  .section-title { font-size: 22px; }
  .section-sub { font-size: 13px; }

  /* Grids */
  .grid-4,
  .grid-3,
  .grid-2,
  .summary-cards,
  .redundancy-grid {
    grid-template-columns: 1fr;
  }

  .all-visions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .combo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .color-picker-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards */
  .cond-grid { grid-template-columns: 1fr; }

  /* Checker */
  .checker-layout { grid-template-columns: 1fr; }

  /* Preview */
  .preview-canvas { padding: var(--space-4); min-height: 160px; }
  .prev-ui-card { min-width: 0; width: 100%; max-width: 280px; }

  /* Safe swatches */
  .safe-swatches { gap: var(--space-2); }
  .swatch { width: 36px; height: 36px; }

  /* Vision list */
  .vision-pct { display: none; }

  /* BP layout mobile já é 1 col acima */

  /* Foto */
  .foto-grid { grid-template-columns: 1fr; }

  /* Theme toggle text */
  .theme-toggle-text { display: none; }
}

/* ── MOBILE XS (≤ 380px) ── */
@media (max-width: 380px) {
  .all-visions-grid { grid-template-columns: 1fr 1fr; }
  .combo-grid { grid-template-columns: 1fr; }
  .color-picker-grid { grid-template-columns: 1fr; }
}

/* ── PRINT ── */
@media print {
  .app-header { position: static; }
  .nav-tabs { display: none; }
  .tab-panel { display: block !important; break-inside: avoid; }
  .section-title { page-break-before: always; }
}