/* ================================================================
   GRIZALUM-PRINCIPAL.css - ARCHIVO MAESTRO DEL SISTEMA v4.0
   Sistema Financiero Profesional para Empresas Peruanas
   Importa todos los módulos CSS en orden específico y correcto
   ================================================================ */

/* 
   🏗️ ARQUITECTURA MODULAR GRIZALUM
   ================================
   Este archivo es el CONTROLADOR PRINCIPAL que orquesta
   todos los módulos CSS del sistema financiero.
   
   ✅ Orden específico requerido - NO MODIFICAR
   ✅ Cada módulo tiene responsabilidad específica
   ✅ Sistema completamente modular y escalable
*/

/* ===== 01 - BASE DEL SISTEMA ===== */
/* Reset, variables CSS, tipografía base, configuración inicial */
@import url('./01-base-sistema.css');

/* ===== 02 - ESTRUCTURA GENERAL ===== */
/* Layout principal, containers, grids, flexbox base */
@import url('./02-estructura-general.css');

/* ===== 03 - MENÚ LATERAL ===== */
/* Sidebar, navegación, company selector, branding */
@import url('./03-menu-lateral.css');

/* ===== 04 - BARRA SUPERIOR ===== */
/* Header ejecutivo, controles de período, notificaciones, IA */
@import url('./04-barra-superior.css');

/* ===== 05 - TARJETAS DE NÚMEROS ===== */
/* KPIs, métricas financieras, indicadores de rendimiento */
@import url('./05-tarjetas-numeros.css');

/* ===== 06 - GRÁFICOS Y CHARTS ===== */
/* Visualizaciones Chart.js, contenedores de gráficos */
@import url('./06-graficos-charts.css');

/* ===== 07 - MODALES DEL SISTEMA ===== */
/* Popups, dialogs, formularios, gestión de empresas */
@import url('./07-modales-sistema.css');

/* ===== 08 - NOTIFICACIONES ===== */
/* Toasts, alertas, badges, sistema de avisos */
@import url('./08-notificaciones.css');

/* ===== 09 - RESPONSIVE MÓVIL ===== */
/* Adaptaciones móvil, tablet, breakpoints, touch */
@import url('./09-responsive-mobile.css');

/* ===== 10 - TEMAS Y COLORES ===== */
/* Sistema de temas, personalización, modos oscuro/claro */
@import url('./10-temas-colores.css');

/* ================================================================
   🎨 OVERRIDE PERSONALIZADO
   ================================================================ 
   Agrega aquí cualquier estilo específico que necesites
   sin modificar los archivos modulares originales

/* 🤖 ASISTENTE IA - ESTILOS OVERRIDE */
#aiAssistantPanel {
    position: fixed !important;
    top: 100px !important;
    right: 30px !important;
    width: 420px !important;
    height: 550px !important;
    background: white !important;
    border: 2px solid var(--primary-color, #d4af37) !important;
    border-radius: 16px !important;
    z-index: 999999 !important;
    display: none !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
    font-family: var(--font-primary, 'Inter') !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#aiAssistantPanel.show {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#aiAssistantPanel .ai-panel-header {
    background: linear-gradient(135deg, var(--primary-color, #d4af37) 0%, var(--secondary-color, #b8860b) 100%) !important;
    color: white !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#aiAssistantPanel .ai-chat-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem !important;
}

#aiAssistantPanel .ai-control-btn {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* ================================================================
   📊 ESTADÍSTICAS DEL SISTEMA
   ================================================================ 
   
   📁 Archivos CSS: 10 módulos + 1 principal = 11 total
   🎯 Líneas de código: ~3,000+ líneas organizadas
   📱 Responsive: 5 breakpoints (móvil → desktop)
   🎨 Temas: 6 predefinidos + 2 estacionales + custom
   ⚡ Rendimiento: Optimizado para carga rápida
   🔧 Mantenimiento: Modular y escalable
   
   ================================================================ */

/* ================================================================
   🚀 INFORMACIÓN DE VERSIÓN
   ================================================================ */
/*
   Versión: 4.0 Professional
   Última actualización: 2025
   Desarrollado para: Empresas Peruanas
   Compatibilidad: Todos los navegadores modernos
   Framework: CSS Puro (sin dependencias)
   Metodología: BEM + Modular CSS
   Responsive: Mobile-first approach
*/

/* ================================================================
   📋 ORDEN DE CARGA CRÍTICO
   ================================================================ 
   
   ⚠️  IMPORTANTE: El orden de los @import es CRÍTICO
   ⚠️  NO modificar el orden sin revisar dependencias
   ⚠️  base-sistema.css SIEMPRE debe ir primero
   ⚠️  temas-colores.css SIEMPRE debe ir último
   
   ================================================================ */

/* ================================================================
   🛠️ MODO DEBUG (DESARROLLO)
   ================================================================ */
/*
   Descomenta la siguiente sección para modo debug:
   
   * {
       outline: 1px solid rgba(255, 0, 0, 0.1);
   }
   
   .metric-card, .chart-card {
       outline: 2px solid rgba(0, 255, 0, 0.3);
   }
*/

/* ================================================================
   ✅ SISTEMA GRIZALUM LISTO PARA PRODUCCIÓN
   ================================================================ */