/* ═══════════════════════════════════════════════════════════════════
   responsive.css — Adaptações responsivas Central TI Cliomed
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .grid-4    { grid-template-columns: repeat(2, 1fr); }
  .grid-3    { grid-template-columns: repeat(2, 1fr); }

  .header-date { display: none; }
}

/* ─── Mobile (≤ 768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Sidebar vira drawer */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    width: 280px;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }

  .sidebar-close-btn { display: flex; }

  .sidebar-overlay.open {
    display: block;
  }

  /* Main não tem margem pois sidebar está por cima */
  .main-wrapper { margin-left: 0; }

  /* Header */
  .menu-toggle-btn { display: flex; }

  .user-name { display: none; }

  .search-wrapper { max-width: none; flex: 1; }

  /* Content */
  .page-content { padding: 16px 14px 32px; }

  /* Grids viram 1 coluna */
  .grid-2, .grid-3, .grid-4, .grid-auto, .grid-auto-lg {
    grid-template-columns: 1fr;
  }

  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Welcome banner */
  .welcome-banner { padding: 20px 18px; border-radius: var(--radius-lg); }
  .welcome-banner h1 { font-size: 1.15rem; }
  .welcome-banner::before, .welcome-banner::after { display: none; }
  .welcome-meta { flex-direction: column; gap: 6px; }

  /* Checklist tabs scroll */
  .checklist-tabs {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Filter bar */
  .filter-bar { gap: 8px; }
  .filter-search { max-width: 100%; }

  /* Pop/Tutorial cards */
  .pop-meta, .tutorial-meta { gap: 8px; }

  /* Link card */
  .link-card { flex-wrap: wrap; }
}

/* ─── Mobile pequeno (≤ 480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .stats-bar { grid-template-columns: 1fr 1fr; }

  .page-title { font-size: 1.2rem; }

  .app-header { padding: 0 12px; gap: 8px; }

  .checklist-container-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .sistema-footer { flex-direction: column; align-items: flex-start; gap: 8px; }

  .contato-infos { gap: 8px; }

  .card-footer { gap: 6px; }

  .btn { padding: 6px 10px; font-size: 0.8rem; }
}

/* ─── Desktop largo (≥ 1280px) ───────────────────────────────────── */
@media (min-width: 1280px) {
  .grid-auto    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .app-header, .sidebar-overlay { display: none !important; }
  .main-wrapper { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .card, .pop-card, .tutorial-card, .contato-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}