/* ============================================================================
   MYMTEC VARIABLES CSS
   Sistema centralizado de variables de colores para DUX3

   IMPORTANTE: Este archivo define las variables COMUNES que NO cambian por tema.
   Los colores del tema (sidebar, menú) están hardcodeados en cada archivo de tema:
   - mymtec.dux.css (verde #00885b)
   - mymtec.fux.css (rojo #dc3545 sidebar, gris #44545C primary)
   - mymtec.duxgt.css (azul #006588)

   REGLAS DE USO:
   - Variables Bootstrap (--primary, --danger, etc.) = definidas en cada tema
   - Variables de estado (--estado-*) = badges de estado de operaciones
   - Variables de tabla (--table-*) = DataTables y grillas
   ============================================================================ */

:root {
    /* ========================================
       SECCIÓN 1: COLORES SEMÁNTICOS ADICIONALES
       (Para componentes que no usan Bootstrap)
       ======================================== */

    --color-orange: #fd7e14;
    --color-orange-light: #f7d8b3;
    --color-purple: #6f42c1;
    --color-teal: #20c997;
    --color-pink: #e83e8c;

    /* ========================================
       SECCIÓN 2: ESCALA DE GRISES
       ======================================== */

    --gray-50: #f5f5f5;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* ========================================
       SECCIÓN 3: ESTADOS DE OPERACIONES
       Mapeo de clases .estadoXX a variables
       ======================================== */

    --estado-pendiente: #f1c40f;        /* estado0, estado00 - Amarillo - Pendiente */
    --estado-proceso: #e67e22;          /* estado10, estado2 - Naranja - En proceso */
    --estado-completado: #27ae60;       /* estado20, estado30, estado80 - Verde - Completado */
    --estado-error: #e74c3c;            /* estado40, estado3 - Rojo - Error/Rechazado */
    --estado-info: #4679BD;             /* estado4 - Azul - Información */
    --estado-especial: #a63ce7;         /* estado50 - Púrpura - Especial */
    --estado-secundario: #2753ae;       /* estado60 - Azul oscuro - Secundario */
    --estado-terciario: #27ae99;        /* estado70 - Teal - Terciario */
    --estado-cuaternario: #ae9727;      /* estado90 - Mostaza - Cuaternario */
    --estado-inactivo: #CCCCCC;         /* estado100 - Gris - Inactivo */

    /* ========================================
       SECCIÓN 4: COMPONENTES DATATABLES
       ======================================== */

    --table-border: #A2D9CE;
    --table-border-cell: #e3e3e3;
    --table-row-selected-bg: #c3e5fa;
    --table-row-selected-border: #D6EAF8;
    --table-row-modified-bg: #f1a947;
    --table-row-correct-bg: #d4edda;
    --table-row-error-bg: #f8d7da;
    --table-row-revisar-bg: #fff3cd;
    --table-row-naranja-bg: #f7d8b3;
    --table-row-info-bg: #cbe7f2;
    --table-header-bg: var(--theme-primary);
    --table-header-color: #fff;
    --table-footer-bg: var(--theme-primary);

    /* Paginación */
    --pagination-bg: #ECF0F1;
    --pagination-color: #686c6c;
    --pagination-active-bg: var(--theme-primary);
    --pagination-active-color: #fff;

    /* ========================================
       SECCIÓN 5: PALETA PARA GRÁFICOS (Chart.js)
       ======================================== */

    --chart-color-1: #17a2b8;           /* cyan/info */
    --chart-color-2: #28a745;           /* verde/success */
    --chart-color-3: #dc3545;           /* rojo/danger */
    --chart-color-4: #ffc107;           /* amarillo/warning */
    --chart-color-5: #6f42c1;           /* púrpura */
    --chart-color-6: #fd7e14;           /* naranja */
    --chart-color-7: #20c997;           /* teal */
    --chart-color-8: #e83e8c;           /* rosa */

    /* Paleta pastel para gráficos de ranking/pie (10 colores) */
    --chart-pastel-1: #729ece;          /* azul pastel */
    --chart-pastel-2: #ff9e4a;          /* naranja pastel */
    --chart-pastel-3: #67bf5c;          /* verde pastel */
    --chart-pastel-4: #ed665d;          /* rojo pastel */
    --chart-pastel-5: #ad8bc9;          /* púrpura pastel */
    --chart-pastel-6: #a8786e;          /* marrón pastel */
    --chart-pastel-7: #ed97ca;          /* rosa pastel */
    --chart-pastel-8: #a2a2a2;          /* gris pastel */
    --chart-pastel-9: #cdcc5d;          /* amarillo/lima pastel */
    --chart-pastel-10: #6dccda;         /* cyan pastel */

    /* ========================================
       SECCIÓN 6: FORMULARIOS Y CONTROLES
       ======================================== */

    --input-focus-shadow: var(--theme-primary);
    --input-required-border: var(--theme-primary);
    --selectize-active-bg: var(--theme-primary);

    /* ========================================
       SECCIÓN 7: COMPONENTES UI
       ======================================== */

    --tooltip-bg: var(--gray-800);
    --tooltip-color: #fff;
    --card-header-bg: var(--theme-primary);
    --card-header-color: #fff;
    --modal-header-bg: var(--theme-primary);
    --modal-header-color: #fff;

    /* ========================================
       SECCIÓN 8: VARIANTES DE COLORES SEMÁNTICOS
       ======================================== */

    /* Variantes light/dark de colores Bootstrap */
    --danger-light: #FFCBCB;        /* Fondo rojo claro para errores/validación */
    --success-light: #90EE90;       /* Fondo verde claro para éxito */
    --warning-light: #fff3cd;       /* Fondo amarillo claro para advertencias */
    --info-light: #d1ecf1;          /* Fondo azul claro para información */

    /* Componentes de info box/alert */
    --info-bg: #d9edf7;             /* Fondo info box */
    --info-border: #bce8f1;         /* Borde info box */
    --info-text: #31708f;           /* Texto info box */

    /* ========================================
       SECCIÓN 9: COMPATIBILIDAD LEGACY
       Variables existentes que se mantienen
       para no romper código actual
       ======================================== */

    --loginUp: var(--theme-primary);
    --loginDown: #17a2b8;
    --loginBody: #28a745;
    --trackingLine: #dddddd;
    --trackingIcon: #dddddd;
}

/* ========================================
   SECCION 10: BOTONES DE GRILLA (DataTables)
   Estilos para btnAddRow, btnImport, btnExport
   ======================================== */

/* Boton Agregar (Verde) */
.btnAddRow {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

.btnAddRow:hover,
.btnAddRow:focus {
    background-color: #218838 !important;
    border-color: #218838 !important;
    color: #fff !important;
}

/* Boton Exportar Excel (Naranja) */
.btnExport {
    background-color: var(--color-orange) !important;
    border-color: var(--color-orange) !important;
    color: #fff !important;
}

.btnExport:hover,
.btnExport:focus {
    background-color: #e96b02 !important;
    border-color: #e96b02 !important;
    color: #fff !important;
}

/* Boton Importar Excel (Azul) */
.btnImport {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
}

.btnImport:hover,
.btnImport:focus {
    background-color: #138496 !important;
    border-color: #138496 !important;
    color: #fff !important;
}

/* Estado disabled */
.btnAddRow:disabled,
.btnExport:disabled,
.btnImport:disabled,
.btnImportExcel:disabled,
.btnImportPDF:disabled,
.btnDelRow:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Boton Importar Excel Personalizado (Azul) - ABR573 */
.btnImportExcel {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
}

.btnImportExcel:hover,
.btnImportExcel:focus {
    background-color: #138496 !important;
    border-color: #138496 !important;
    color: #fff !important;
}

/* Boton Importar PDF (Azul) - EEA100 */
.btnImportPDF {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: #fff !important;
}

.btnImportPDF:hover,
.btnImportPDF:focus {
    background-color: #138496 !important;
    border-color: #138496 !important;
    color: #fff !important;
}

/* Boton Eliminar Fila (Rojo) */
.btnDelRow {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

.btnDelRow:hover,
.btnDelRow:focus {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
    color: #fff !important;
}