/**
 * styles.css - Sistema CSS Modular SGIVE
 * Archivo maestro que importa todos los módulos
 * Última actualización: 2025
 */

/* === 00. Variables y Tokens de Diseño === */
@import url('css/00-variables.css');

/* === 01. Animaciones === */
@import url('css/01-animations.css');

/* === 02. Reset y Normalización === */
@import url('css/02-reset.css');

/* === 03. Layout Base === */
@import url('css/03-layout.css');

/* === 04. Navegación === */
@import url('css/04-navigation.css');

/* === 05. Botones === */
@import url('css/05-buttons.css');

/* === 06. Cards y Componentes === */
@import url('css/06-cards.css');

/* === 07. Formularios === */
@import url('css/07-forms.css');

/* === 08. Tablas === */
@import url('css/08-tables.css');

/* === 09. Modales y Paneles === */
@import url('css/09-modals.css');

/* === 10. Normatividad (Página específica) === */
@import url('css/10-normatividad.css');

/* === 11. Boletines (Página específica) === */
@import url('css/11-boletines.css');

/* === 12. Avisos (Página específica) === */
@import url('css/12-avisos.css');

/* === 13. Utilidades === */
@import url('css/13-utilities.css');

/* === 14. Responsive === */
@import url('css/14-responsive.css');

/* === 15. Panoramas - Imágenes CSS Autónomas === */
@import url('css/15-panoramas-css-images.css');

/* === 16. Boletines - Imágenes CSS Autónomas === */
@import url('css/16-boletines-css-images.css');

/* === 17. Emergencias - Imágenes CSS Autónomas === */
@import url('css/17-emergencias-css-images.css');

/* === 18. Dashboard Sidebar === */
@import url('css/18-dashboard-sidebar.css');

/* === 19. Imágenes Responsivas (NUEVO) === */
@import url('css/19-images-responsive.css');

/**
 * ARQUITECTURA MODULAR
 * 
 * Este sistema CSS está organizado en 16 módulos independientes:
 * 
 * - Variables (00): Tokens de diseño, colores, espaciado, tipografía
 * - Animations (01): @keyframes y clases de animación
 * - Reset (02): Normalización de estilos base
 * - Layout (03): Estructura principal (header, footer, container)
 * - Navigation (04): Sistema de navegación completo
 * - Buttons (05): Componentes de botones
 * - Cards (06): Tarjetas y componentes de contenido
 * - Forms (07): Elementos de formularios
 * - Tables (08): Tablas y directorios
 * - Modals (09): Paneles laterales y overlays
 * - Normatividad (10): Estilos específicos de la sección
 * - Boletines (11): Estilos específicos de la sección
 * - Avisos (12): Estilos específicos de la sección
 * - Utilities (13): Clases de utilidad
 * - Responsive (14): Media queries centralizadas
 * 
 * BENEFICIOS:
 * - Mejor organización y mantenimiento
 * - Carga y cacheo más eficiente
 * - Desarrollo en equipo simplificado
 * - Fácil localización de estilos
 * - Escalabilidad mejorada
 * 
 * CONVENCIONES:
 * - Variables CSS (custom properties) para valores reutilizables
 * - Nomenclatura BEM en componentes complejos
 * - Mobile-first approach en responsive
 * - Animaciones con respeto a prefers-reduced-motion
 * 
 * COMPATIBILIDAD:
 * - Navegadores modernos (últimas 2 versiones)
 * - IE11 no soportado
 * - Diseño responsive: 320px - 1440px+
 */