/**
 * MAIN.CSS - Master Stylesheet Index
 * Importa todos los estilos en orden correcto
 * Orden crítico: Variables → Reset → Typography → Layout → Components → Animations → Utilities → Responsive
 */

/* 1. Variables & Design Tokens */
@import url('./variables.css');

/* 2. Reset & Base Styles */
@import url('./reset.css');

/* 3. Typography System */
@import url('./typography.css');

/* 4. Layout & Grid System */
@import url('./layout.css');

/* 5. Components */
@import url('./components.css');

/* 6. Animations & Effects */
@import url('./animations.css');

/* 7. Utility Classes */
@import url('./utilities.css');

/* 8. Responsive Design */
@import url('./responsive.css');

/* 9. Modern Rebranding Styles (2026 Design) */
@import url('./modern-rebranding.css');

/* 10. Modern UI Enhancements */
@import url('./modern-ui.css');

/* 11. Specialized Styles (Organigrama) */
@import url('./orgchart-styles.css');

/**
 * CSS ARCHITECTURE OVERVIEW
 * 
 * Esta estructura modular permite:
 * - Mantenimiento más fácil
 * - Reutilización de componentes
 * - Escalabilidad
 * - Separación de responsabilidades
 * 
 * Cada archivo tiene un propósito específico:
 * 
 * variables.css (CSS Custom Properties)
 *   ├─ Color palette
 *   ├─ Typography scale
 *   ├─ Spacing units
 *   ├─ Border radius
 *   ├─ Shadows
 *   ├─ Transitions
 *   ├─ Z-index scale
 *   └─ Container sizes
 * 
 * reset.css (Base Normalization)
 *   ├─ CSS reset
 *   ├─ Focus styles
 *   ├─ Selection colors
 *   ├─ Scrollbar styling
 *   └─ Global transitions
 * 
 * typography.css (Text & Font System)
 *   ├─ Headings (h1-h6)
 *   ├─ Paragraphs
 *   ├─ Text utilities
 *   ├─ Font weights
 *   ├─ Links
 *   ├─ Lists
 *   ├─ Code blocks
 *   └─ Special text effects
 * 
 * layout.css (Flexbox & Grid)
 *   ├─ Containers
 *   ├─ Flexbox utilities
 *   ├─ Grid system
 *   ├─ Spacing utilities
 *   ├─ Sizing
 *   ├─ Positioning
 *   └─ Display utilities
 * 
 * components.css (UI Components)
 *   ├─ Header & Navigation
 *   ├─ Hero sections
 *   ├─ Cards
 *   ├─ Buttons
 *   ├─ Forms
 *   ├─ Footer
 *   ├─ Floating elements
 *   └─ Specialized components
 * 
 * animations.css (Motion & Effects)
 *   ├─ Keyframe animations
 *   ├─ Animation utilities
 *   ├─ Glassmorphism effects
 *   ├─ Hover effects
 *   ├─ Loading states
 *   ├─ Transitions
 *   └─ Gradient effects
 * 
 * utilities.css (Helper Classes)
 *   ├─ Accessibility
 *   ├─ Background & borders
 *   ├─ Shadows
 *   ├─ Colors
 *   ├─ Cursor & interaction
 *   ├─ Filters & effects
 *   ├─ Transforms
 *   └─ Miscellaneous
 * 
 * responsive.css (Media Queries)
 *   ├─ Mobile (0-640px)
 *   ├─ Tablet (641-768px)
 *   ├─ Tablet landscape (769-1024px)
 *   ├─ Desktop (1025-1280px)
 *   ├─ Large desktop (1281px+)
 *   ├─ High DPI displays
 *   ├─ Touch devices
 *   ├─ Print styles
 *   └─ Accessibility preferences
 * 
 * orgchart.css (Specialized)
 *   └─ Organigrama/organizational chart specific styles
 */