# 📱 RESPONSIVE DESIGN

## Breakpoints de Bootstrap

| Breakpoint | Min Width | Dispositivo | Uso en Admin Panel |
|------------|-----------|-------------|-------------------|
| **xs** | 0px | Móvil pequeño | Stack vertical, padding reducido |
| **sm** | 576px | Móvil grande | Stack vertical |
| **md** | 768px | Tablet | Stack vertical |
| **lg** | 992px | Desktop | Grid 2 columnas activo |
| **xl** | 1200px | Desktop grande | Grid 2 columnas |
| **xxl** | 1400px | Desktop XL | Grid 2 columnas |

---

## Media Queries

### Mobile (<576px)

```css
@media (max-width: 575px) {
    /* Header del Tab: reducir tamaño de título */
    .tab-header h3 {
        font-size: 1rem;
    }

    /* Cards: reducir padding */
    .form-section.card .card-body {
        padding: 0.75rem !important;
    }

    /* Container: reducir padding lateral */
    .container-fluid {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Botones: full width */
    .tab-header button {
        width: 100%;
        margin-top: 0.5rem;
    }
}
```

### Tablet (576px - 991px)

```css
@media (max-width: 991px) {
    /* Header del Tab: reducir padding */
    .tab-header {
        padding: 0.75rem;
    }

    /* Título: tamaño medio */
    .tab-header h3 {
        font-size: 1.1rem;
    }

    /* Grid: todavía en stack vertical */
}
```

### Desktop (≥992px)

```css
@media (min-width: 992px) {
    /* Grid de 2 columnas activo */
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    /* Espaciado normal */
}
```

---

## Patrones Responsive

### Header del Tab

#### HTML Responsive

```html
<div class="rounded p-4 mb-4 shadow text-white"
     style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%);">
    <!-- flex-wrap permite que el botón baje en mobile -->
    <!-- gap-3 mantiene espaciado consistente -->
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h3 class="h4 mb-1 fw-bold">Título</h3>
            <p class="mb-0 small">Descripción</p>
        </div>
        <button class="btn btn-sm btn-outline-light">Botón</button>
    </div>
</div>
```

#### CSS Responsive

```css
@media (max-width: 576px) {
    /* El botón baja automáticamente con flex-wrap */
    /* gap-3 mantiene el espaciado */

    /* Opcional: hacer botón full-width */
    .tab-header button {
        width: 100%;
    }

    /* Reducir padding del header */
    .tab-header {
        padding: 0.75rem !important;
    }
}
```

---

### Grid de 2 Columnas

#### HTML Responsive

```html
<div class="row g-3">
    <!-- col-lg-6: 2 columnas en desktop (≥992px) -->
    <!-- Stack vertical automático en mobile/tablet (<992px) -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>
</div>
```

**Comportamiento:**
- **Desktop (≥992px)**: 2 columnas lado a lado
- **Mobile/Tablet (<992px)**: Stack vertical automático
- **Gap**: 1rem (16px) entre elementos

---

### Botones de Vista Previa

#### HTML Responsive

```html
<div class="btn-group btn-group-sm" role="group">
    <button type="button" class="btn btn-outline-secondary active">
        <i class="bi bi-display"></i> Desktop
    </button>
    <button type="button" class="btn btn-outline-secondary">
        <i class="bi bi-phone"></i> Mobile
    </button>
</div>
```

#### CSS Responsive

```css
@media (max-width: 576px) {
    /* Reducir tamaño de botones en mobile */
    .btn-group.btn-group-sm .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Opcional: full width */
    .btn-group.btn-group-sm {
        width: 100%;
    }
}
```

---

### Cards

#### HTML Responsive (Automático)

```html
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
    <div class="card-body">
        <!-- Contenido -->
    </div>
</div>
```

#### CSS Responsive

```css
@media (max-width: 575px) {
    /* Reducir padding en cards */
    .card-body {
        padding: 0.75rem !important;
    }

    /* Reducir margen entre cards */
    .card {
        margin-bottom: 0.75rem !important;
    }
}
```

---

## Contenedor Principal

### HTML

```html
<div class="container-fluid py-4" style="max-width: 1400px;">
    <!-- Contenido -->
</div>
```

### CSS Responsive

```css
/* Desktop: ancho máximo 1400px */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1400px;
    }
}

/* Tablet: ancho completo con padding */
@media (max-width: 991px) {
    .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* Mobile: padding reducido */
@media (max-width: 575px) {
    .container-fluid {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}
```

---

## Vista Previa Responsive

### Simular Mobile en Preview

```javascript
const btnMobile = document.getElementById('previewMobile');
const preview = document.getElementById('componentPreview');

btnMobile.addEventListener('click', function() {
    // Simular ancho mobile (375px - iPhone SE)
    preview.style.maxWidth = '375px';
    preview.style.margin = '0 auto';

    // Opcional: agregar border para visualizar límites
    preview.style.border = '1px solid #e9ecef';
});
```

### Simular Desktop en Preview

```javascript
const btnDesktop = document.getElementById('previewDesktop');
const preview = document.getElementById('componentPreview');

btnDesktop.addEventListener('click', function() {
    // Restaurar ancho completo
    preview.style.maxWidth = '100%';
    preview.style.margin = '0';

    // Remover border
    preview.style.border = 'none';
});
```

---

## Anchos de Referencia para Dispositivos

| Dispositivo | Ancho (px) | Uso en Preview |
|-------------|------------|----------------|
| iPhone SE | 375 | Mobile pequeño |
| iPhone 12/13 | 390 | Mobile estándar |
| iPhone 14 Pro Max | 430 | Mobile grande |
| iPad Mini | 768 | Tablet |
| iPad Pro | 1024 | Tablet grande |
| Desktop | 1200+ | Desktop estándar |

---

## Tipografía Responsive

### Headers

```css
/* Desktop: tamaño completo */
@media (min-width: 992px) {
    .tab-header h3 {
        font-size: 1.5rem; /* 24px */
    }

    .card-title {
        font-size: 1rem; /* 16px */
    }
}

/* Tablet: tamaño reducido */
@media (max-width: 991px) {
    .tab-header h3 {
        font-size: 1.1rem; /* 17.6px */
    }
}

/* Mobile: tamaño mínimo */
@media (max-width: 575px) {
    .tab-header h3 {
        font-size: 1rem; /* 16px */
    }

    .card-title {
        font-size: 0.9rem; /* 14.4px */
    }
}
```

---

## Espaciado Responsive

### Padding

```css
/* Desktop: padding completo */
@media (min-width: 992px) {
    .tab-header {
        padding: 1.5rem; /* 24px */
    }

    .card-body {
        padding: 1rem; /* 16px */
    }
}

/* Mobile: padding reducido */
@media (max-width: 575px) {
    .tab-header {
        padding: 0.75rem !important; /* 12px */
    }

    .card-body {
        padding: 0.75rem !important; /* 12px */
    }
}
```

---

## Utilidades de Bootstrap para Responsive

### Display

```html
<!-- Ocultar en mobile, mostrar en desktop -->
<div class="d-none d-lg-block">Solo en desktop</div>

<!-- Mostrar en mobile, ocultar en desktop -->
<div class="d-lg-none">Solo en mobile</div>

<!-- Mostrar en todos los tamaños -->
<div class="d-block">Siempre visible</div>
```

### Flex Direction

```html
<!-- Columna en mobile, fila en desktop -->
<div class="d-flex flex-column flex-lg-row">
    <div>Item 1</div>
    <div>Item 2</div>
</div>
```

### Text Alignment

```html
<!-- Centrado en mobile, izquierda en desktop -->
<p class="text-center text-lg-start">Texto</p>
```

---

## Testing Responsive

### Checklist

- [ ] Probar en mobile (<576px)
- [ ] Probar en tablet (768px)
- [ ] Probar en desktop (≥992px)
- [ ] Header del tab se adapta correctamente
- [ ] Grid de 2 columnas se convierte en stack vertical
- [ ] Cards mantienen legibilidad
- [ ] Botones no se cortan
- [ ] Vista previa funciona en todos los tamaños

### Herramientas

1. **Chrome DevTools**: F12 → Toggle Device Toolbar (Ctrl+Shift+M)
2. **Firefox Responsive Design Mode**: F12 → Toggle Responsive Design Mode
3. **Dispositivos reales**: Probar en iPhone, iPad, Android

---

## Volver al Índice

[← Volver al README](README.md)