/**
 * WebOptimer Pro - Estilos Principales (Importador)
 * 
 * Este archivo importa todos los módulos CSS.
 * Para mantener la Regla 8 (máx 600 líneas), los estilos están divididos en:
 * - base.css: Variables, reset, tipografía, utilidades
 * - components.css: Cards, buttons, forms, badges, tables, alerts
 * - layout.css: Header, footer, grid system, dashboard layouts
 * - pages.css: Hero, landing sections, auth pages
 * 
 * @author WebOptimer Pro Team
 * @version 1.0.0
 */

/* Importar módulos CSS */
@import url('base.css');
@import url('components.css');
@import url('layout.css');
@import url('pages.css');

/* ============================================
   RESPONSIVE (Común a todas las páginas)
   ============================================ */
@media (max-width: 1024px) {
  .dashboard-layout,
  .admin-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar,
  .admin-sidebar {
    display: none;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  html { font-size: 14px; }
  
  .hero-title { font-size: 2.5rem; }
  
  .nav-links { display: none; }
  
  .menu-toggle { display: block; }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .btn-lg {
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}