📱 Responsividade

<!-- Mobile-First com Tailwind -->
<div class="
  p-4          // Padding base (mobile)
  md:p-6       // Mais padding em tablet+
  lg:p-8       // Ainda mais em desktop+

  grid
  grid-cols-1  // 1 coluna (mobile)
  md:grid-cols-2  // 2 colunas (tablet+)
  lg:grid-cols-3  // 3 colunas (desktop+)

  gap-4        // Gap base
  lg:gap-6     // Gap maior em desktop

  text-sm      // Texto menor (mobile)
  md:text-base // Texto normal (tablet+)
">
  ...
</div>

<!-- Equivalente CSS puro -->
<style>
.container {
  padding: 1rem;           /* Base: mobile */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) { /* md: */
  .container {
    padding: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) { /* lg: */
  .container {
    padding: 2rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
</style>

<!-- Padroes comuns em dashboards -->

<!-- Grid responsivo de cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card KPI 1</div>
  <div>Card KPI 2</div>
  <div>Card KPI 3</div>
  <div>Card KPI 4</div>
</div>

<!-- Sidebar que aparece em desktop -->
<aside class="hidden md:block w-64 fixed left-0 top-0">
  Sidebar
</aside>

<!-- Botao hamburguer so em mobile -->
<button class="md:hidden p-2">
  ☰
</button>

<!-- Texto que muda de tamanho -->
<h1 class="text-xl md:text-2xl lg:text-3xl">
  Titulo Responsivo
</h1>

<!-- Elemento que some em mobile -->
<span class="hidden sm:inline">
  Texto so visivel em telas maiores
</span>

<!-- Estrategia 1: Scroll horizontal -->
<div class="overflow-x-auto">
  <table class="w-full min-w-[600px]">
    ...
  </table>
</div>

<!-- Estrategia 2: Esconder colunas -->
<table>
  <thead>
    <tr>
      <th>Nome</th>  <!-- Sempre visivel -->
      <th class="hidden md:table-cell">Email</th>
      <th class="hidden lg:table-cell">Telefone</th>
      <th>Status</th>  <!-- Sempre visivel -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana Silva</td>
      <td class="hidden md:table-cell">ana@email.com</td>
      <td class="hidden lg:table-cell">(11) 99999</td>
      <td>Ativo</td>
    </tr>
  </tbody>
</table>

<!-- Estrategia 3: Cards em mobile -->
<div class="md:hidden space-y-4">
  <!-- Card por item -->
  <div class="bg-dark-800 p-4 rounded-lg">
    <div class="font-medium">Ana Silva</div>
    <div class="text-sm text-neutral-400">ana@email.com</div>
    <div class="text-sm">Status: Ativo</div>
  </div>
</div>

<!-- Tabela so em desktop -->
<table class="hidden md:table w-full">
  ...
</table>

<!-- Header com hamburguer -->
<header class="sticky top-0 z-50 bg-dark-900 border-b">
  <div class="flex items-center justify-between h-14 px-4">

    <!-- Hamburguer (so mobile) -->
    <button
      class="md:hidden p-2 hover:bg-dark-700 rounded"
      onclick="toggleMenu()"
    >
      ☰
    </button>

    <!-- Logo -->
    <span class="font-bold">Dashboard</span>

    <!-- Acoes -->
    <div>...</div>
  </div>
</header>

<!-- Overlay -->
<div
  id="overlay"
  class="fixed inset-0 bg-black/50 z-40 hidden md:hidden"
  onclick="toggleMenu()"
></div>

<!-- Drawer/Sidebar -->
<aside
  id="sidebar"
  class="fixed top-0 left-0 h-full w-64 bg-dark-800 z-50
         transform -translate-x-full transition-transform
         md:translate-x-0 md:static"
>
  <!-- Close button (so mobile) -->
  <button class="md:hidden absolute top-4 right-4" onclick="toggleMenu()">
    ✕
  </button>

  <nav class="p-4 space-y-2">
    <a href="#">Dashboard</a>
    <a href="#">Pedidos</a>
    <a href="#">Clientes</a>
  </nav>
</aside>

<script>
function toggleMenu() {
  const sidebar = document.getElementById('sidebar');
  const overlay = document.getElementById('overlay');

  sidebar.classList.toggle('-translate-x-full');
  overlay.classList.toggle('hidden');
  document.body.classList.toggle('overflow-hidden');
}
</script>

<!-- Botao touch-friendly -->
<button class="
  min-h-[44px]     // Altura minima Apple
  min-w-[44px]     // Largura minima
  px-6 py-3        // Padding generoso
  text-base        // Texto legivel

  // Feedback visual
  active:scale-95  // Leve encolhimento ao tocar
  active:bg-blue-700
">
  Salvar
</button>

<!-- Espacamento entre botoes -->
<div class="flex gap-3">  <!-- gap-3 = 12px -->
  <button>Cancelar</button>
  <button>Confirmar</button>
</div>

<!-- Lista com itens tocaveis -->
<ul class="divide-y divide-dark-600">
  <li class="
    py-4 px-4       // Padding generoso
    min-h-[56px]    // Altura minima
    flex items-center
    active:bg-dark-700  // Feedback
  ">
    Item da lista
  </li>
</ul>

<!-- CSS para desabilitar zoom no double-tap -->
<style>
* {
  touch-action: manipulation;
}
</style>