# 📐 ESTRUCTURA DE LAYOUT ## Container Principal ```html
``` **Características:** - `container-fluid`: Ancho flexible con padding - `py-4`: 1.5rem (24px) padding vertical - `max-width: 1400px`: Limita el ancho máximo para legibilidad --- ## Header del Tab (OBLIGATORIO EN TODOS LOS COMPONENTES) ### Estructura Completa ```html

[TÍTULO DEL COMPONENTE]

[Descripción breve del componente]

``` ### Elementos Clave - ✅ **Gradiente navy como fondo**: `#0E2337` → `#1e3a5f` - ✅ **Border-left orange de 4px**: `#FF8600` - ✅ **Icono orange en el título**: `color: #FF8600` - ✅ **Botón de reset alineado a la derecha** - ✅ **Responsive**: `flex-wrap` con `gap-3` para mobile ### Iconos Comunes por Tipo de Componente | Tipo de Componente | Icono Sugerido | Clase Bootstrap Icons | |--------------------|----------------|----------------------| | Notificaciones/Anuncios | Megáfono | `bi-megaphone-fill` | | Navegación/Menú | Barras | `bi-layout-text-window` | | Colores/Estilos | Paleta | `bi-palette` | | Textos/Contenido | Texto | `bi-chat-text` | | Configuración General | Engranaje | `bi-gear-fill` | | Imágenes/Media | Imagen | `bi-image` | | Formularios | Portapapeles | `bi-clipboard-check` | --- ## Sistema de Grid ### Layout de 2 Columnas (Estándar) ```html
...
...
...
...
...
``` **Breakpoints:** - `col-lg-6`: 2 columnas en pantallas ≥992px - Stack vertical automático en pantallas <992px - `g-3`: Gap de 1rem (16px) entre columnas ### Layout de 3 Columnas (Menos Común) ```html
Card 1
Card 2
Card 3
``` ### Layout Full Width ```html
``` --- ## Estructura Completa de un Admin Panel ```html Admin: [Component Name]

[TÍTULO DEL COMPONENTE]

[Descripción breve]

Sección 1
Sección 2
Vista Previa en Tiempo Real
Los cambios se reflejan en tiempo real
``` --- ## Cards de Configuración ### Card Estándar ```html
[TÍTULO DE LA SECCIÓN]
``` ### Card de Vista Previa ```html
Vista Previa en Tiempo Real
Los cambios se reflejan en tiempo real
``` **Diferencia clave:** Border-left ORANGE (#FF8600) en lugar de navy --- ## Responsive Behavior ### Desktop (≥992px) - Grid de 2 columnas activo - Header con layout horizontal - Espaciado completo ### Tablet (768px - 991px) - Stack vertical de columnas - Header con layout horizontal (flex-wrap si es necesario) - Espaciado completo ### Mobile (<768px) - Stack vertical completo - Header con botón debajo del título (flex-wrap) - Espaciado reducido ```css @media (max-width: 991px) { .tab-header { padding: 0.75rem; } .tab-header h3 { font-size: 1.1rem; } } @media (max-width: 575px) { .tab-header h3 { font-size: 1rem; } .card-body { padding: 0.75rem !important; } } ``` --- ## Volver al Índice [← Volver al README](README.md)