/* ============================================================
   SIMULADOR CICAPER 2026 - Main Stylesheet
   Importa todos los módulos del Design System
   ============================================================ */

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

/* 2. Reset y estilos base */
@import url('base.css');

/* 3. Sistema de layout */
@import url('layout.css');

/* 4. Componentes UI */
@import url('components.css');

/* 5. Utilidades */
@import url('utilities.css');

/* 6. Animaciones */
@import url('animations.css');

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

/* 8. Impresión */
@import url('print.css');

/* ============ ESTILOS GLOBALES ADICIONALES ============ */

/* Smooth scroll para navegadores que lo soporten */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Focus visible mejorado */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Prevenir layout shift */
img, video {
  aspect-ratio: attr(width) / attr(height);
}

/* Tipografía fluida */
html {
  font-size: clamp(14px, 1vw + 12px, 18px);
}