# 📏 SISTEMA DE GRID Y ESPACIADO

## Grid de Bootstrap

### Sistema de 12 Columnas

```css
.container-fluid {
    max-width: 1400px;         /* Máximo ancho del admin panel */
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

.row {
    --bs-gutter-x: 1.5rem;     /* Espacio horizontal entre columnas */
    --bs-gutter-y: 0;          /* Espacio vertical */
}
```

### Uso en Admin Panels

```css
.row.g-3 {                     /* Gap de 1rem (16px) */
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.row.g-2 {                     /* Gap de 0.5rem (8px) */
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}
```

---

## Breakpoints

| Breakpoint | Min Width | Max Width | Dispositivo | Comportamiento |
|------------|-----------|-----------|-------------|----------------|
| **xs** | 0px | 575px | Móvil | Stack vertical |
| **sm** | 576px | 767px | Tablet pequeña | Stack vertical |
| **md** | 768px | 991px | Tablet | Stack vertical |
| **lg** | 992px | 1199px | Desktop | 2 columnas |
| **xl** | 1200px | 1399px | Desktop grande | 2 columnas |
| **xxl** | 1400px | ∞ | Desktop XL | 2 columnas |

### Punto de Quiebre Principal: lg (992px)

```html
<!-- 2 columnas en desktop (≥992px), stack en mobile/tablet (<992px) -->
<div class="col-lg-6">Columna 1</div>
<div class="col-lg-6">Columna 2</div>
```

---

## Clases de Grid Comunes

### Layout de 2 Columnas (Admin Panel Estándar)

```html
<div class="row g-3">
    <!-- Columna izquierda -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>

    <!-- Columna derecha -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>

    <!-- Fila completa (opcional) -->
    <div class="col-12">
        <!-- Vista previa o cards full-width -->
    </div>
</div>
```

### Layout de 3 Columnas Desiguales

```html
<div class="row g-2 mb-2">
    <div class="col-5">Campo 1</div>
    <div class="col-5">Campo 2</div>
    <div class="col-2">Campo 3</div>
</div>
```

### Layout de 2 Columnas Iguales (Campos de Color)

```html
<div class="row g-2 mb-2">
    <div class="col-6">
        <label>Color Fondo</label>
        <input type="color" class="form-control form-control-color w-100">
    </div>
    <div class="col-6">
        <label>Color Texto</label>
        <input type="color" class="form-control form-control-color w-100">
    </div>
</div>
```

### Full Width

```html
<div class="col-12">
    <!-- Contenido full-width -->
</div>
```

---

## Sistema de Espaciado

### Escala de Espaciado (rem)

Bootstrap utiliza una escala basada en `rem`:

```css
/* Bootstrap Spacing Scale */
0 = 0
1 = 0.25rem  (4px)
2 = 0.5rem   (8px)
3 = 1rem     (16px)
4 = 1.5rem   (24px)
5 = 3rem     (48px)
```

### Margin (m) y Padding (p)

#### Margin

```html
<!-- Margin Bottom -->
.mb-2  /* margin-bottom: 0.5rem (campos de formulario) */
.mb-3  /* margin-bottom: 1rem (cards, secciones) */
.mb-4  /* margin-bottom: 1.5rem (headers) */

<!-- Margin Right -->
.me-2  /* margin-right: 0.5rem (iconos) */
.me-1  /* margin-right: 0.25rem (iconos pequeños) */

<!-- Margin Left -->
.ms-2  /* margin-left: 0.5rem */

<!-- Margin Top -->
.mt-1  /* margin-top: 0.25rem (hints) */
.mt-3  /* margin-top: 1rem (separadores) */

<!-- Margin 0 (reset) -->
.m-0   /* margin: 0 */
.mb-0  /* margin-bottom: 0 */
```

#### Padding

```html
<!-- Padding uniforme -->
.p-4   /* padding: 1.5rem (header del tab) */
.p-3   /* padding: 1rem (card-body estándar) */

<!-- Padding vertical -->
.py-4  /* padding-top y bottom: 1.5rem (container principal) */
.py-3  /* padding-top y bottom: 1rem */

<!-- Padding horizontal -->
.px-3  /* padding-left y right: 1rem */
```

---

## Uso Estándar en Admin Components

### Tabla de Referencia

| Elemento | Clase | Valor Real | Uso |
|----------|-------|------------|-----|
| **Container Principal** | `.py-4` | 1.5rem (24px) | Padding vertical del contenedor |
| **Header del Tab** | `.mb-4` | 1.5rem (24px) | Separación después del header |
| **Cards** | `.mb-3` | 1rem (16px) | Separación entre cards |
| **Campos de Formulario** | `.mb-2` | 0.5rem (8px) | Separación entre campos |
| **Card Body** | `.p-3` | 1rem (16px) | Padding interno de cards |
| **Iconos en Título** | `.me-2` | 0.5rem (8px) | Espacio después de iconos grandes |
| **Iconos en Label** | `.me-1` | 0.25rem (4px) | Espacio después de iconos pequeños |
| **Títulos de Card** | `.mb-3` | 1rem (16px) | Separación después del título |
| **Hints/Small Text** | `.mt-1` | 0.25rem (4px) | Espacio antes de hints |

---

## Gap Utilities

### Flexbox/Grid Gap

```html
<!-- Gap en flex containers -->
<div class="d-flex gap-2">     /* 0.5rem (8px) entre elementos */
<div class="d-flex gap-3">     /* 1rem (16px) entre elementos */

<!-- Gap en grid (row) -->
<div class="row g-2">          /* 0.5rem (8px) entre columnas */
<div class="row g-3">          /* 1rem (16px) entre columnas */
```

### Ejemplo: Header Responsive con Gap

```html
<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>
```

**Qué hace:**
- `gap-3`: 1rem de espacio entre elementos hijos
- `flex-wrap`: Permite que el botón baje a la siguiente línea en mobile
- Mantiene espaciado consistente sin margins complejos

---

## Auto Layout

### Margin Auto

```html
<!-- Centrar horizontalmente -->
.mx-auto  /* margin-left: auto; margin-right: auto; */

<!-- Empujar a la derecha -->
.ms-auto  /* margin-left: auto; */
```

### Padding Auto (No existe en Bootstrap)

Bootstrap NO tiene padding auto. Usar flexbox para alineación:

```html
<div class="d-flex justify-content-between">
    <div>Izquierda</div>
    <div>Derecha</div>
</div>
```

---

## Ejemplos Completos

### Container Principal del Admin

```html
<div class="container-fluid py-4" style="max-width: 1400px;">
    <!-- py-4: 1.5rem (24px) padding vertical -->
    <!-- max-width: 1400px para no ser demasiado ancho -->
</div>
```

### Header del Tab

```html
<div class="rounded p-4 mb-4 shadow text-white"
     style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%);">
    <!-- p-4: 1.5rem (24px) padding uniforme -->
    <!-- mb-4: 1.5rem (24px) margin-bottom -->
</div>
```

### Card Estándar

```html
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
    <div class="card-body p-3">
        <!-- mb-3: 1rem (16px) margin-bottom del card -->
        <!-- p-3: 1rem (16px) padding del body -->

        <h5 class="fw-bold mb-3">Título</h5>
        <!-- mb-3: 1rem (16px) separación después del título -->

        <div class="mb-2">
            <!-- mb-2: 0.5rem (8px) separación entre campos -->
        </div>
    </div>
</div>
```

### Campo de Formulario con Label e Icono

```html
<div class="mb-2">
    <label for="field" class="form-label small mb-1 fw-semibold">
        <i class="bi bi-palette me-1" style="color: #FF8600;"></i>
        <!-- me-1: 0.25rem (4px) después del icono -->
        Nombre del Campo
    </label>
    <input type="text" id="field" class="form-control form-control-sm">
    <small class="text-muted d-block mt-1">
        <!-- mt-1: 0.25rem (4px) antes del hint -->
        Texto de ayuda
    </small>
</div>
```

---

## Responsive Spacing

### Desktop (≥992px)

Usar espaciado estándar sin modificaciones.

### Mobile (<576px)

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

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

    /* Reducir padding en cards */
    .card-body {
        padding: 0.75rem !important;
    }
}
```

---

## Volver al Índice

[← Volver al README](README.md)