# Diseño Responsivo — Ejemplos completos de layouts

## CSS Grid — Layout de página completo

```css
.layout-app {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .layout-app {
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "sidebar footer";
    grid-template-columns: 260px 1fr;
  }
}

header { grid-area: header; }
main   { grid-area: main;   }
footer { grid-area: footer; }
.sidebar { grid-area: sidebar; }
```

---

## Flexbox para componentes

```css
/* Navegación responsiva */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Tarjeta con footer pegado al fondo */
.tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tarjeta-cuerpo {
  flex: 1;  /* Ocupa el espacio disponible */
}

.tarjeta-footer {
  margin-top: auto;  /* Siempre al fondo */
}
```

---

## Imágenes responsivas

```html
<!-- srcset para diferentes densidades de pantalla -->
<img
  src="imagen-800w.jpg"
  srcset="imagen-400w.jpg 400w, imagen-800w.jpg 800w, imagen-1200w.jpg 1200w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Descripción de la imagen"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
/>

<!-- Picture para art direction -->
<picture>
  <source media="(min-width: 1024px)" srcset="imagen-horizontal.webp" />
  <source media="(min-width: 640px)" srcset="imagen-cuadrada.webp" />
  <img src="imagen-vertical.jpg" alt="Imagen del producto" />
</picture>
```

---

## Patrones Tailwind para layouts comunes

```html
<!-- Sidebar + contenido -->
<div class="flex min-h-screen">
  <aside class="w-64 shrink-0 hidden lg:block bg-gray-800 text-white">
    <!-- Sidebar -->
  </aside>
  <main class="flex-1 overflow-auto p-6">
    <!-- Contenido -->
  </main>
</div>

<!-- Dashboard con cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
  <!-- Métrica 1 -->
  <!-- Métrica 2 -->
</div>

<!-- Formulario de dos columnas en pantallas grandes -->
<form class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div class="md:col-span-2"><!-- Campo de ancho completo --></div>
  <div><!-- Campo izquierdo --></div>
  <div><!-- Campo derecho --></div>
</form>

<!-- Hero section centrado -->
<section class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold max-w-3xl">Título</h1>
  <p class="mt-4 text-lg text-gray-600 max-w-xl">Subtítulo descriptivo.</p>
</section>
```

---

## Accesibilidad y responsivo

```html
<!-- Botón de menú móvil con aria apropiado -->
<button
  aria-label="Abrir menú de navegación"
  aria-expanded="false"
  aria-controls="nav-mobile"
  class="lg:hidden p-2"
>
  <svg ...>...</svg>
</button>

<nav id="nav-mobile" class="hidden lg:flex" aria-label="Navegación principal">
  <!-- Links -->
</nav>
```

```css
/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```
