/**
 * ============================================
 * SD DISTRIBUCIONES - SISTEMA DE DISEÑO
 * ============================================
 * Versión: 2.0
 * Color Corporativo: #0072CE
 * Framework Base: Bootstrap 5.3.0
 * ============================================
 */

:root {
    /* ============================================
       COLORES PRINCIPALES - SD DISTRIBUCIONES
       ============================================ */
    
    /* Color Corporativo Principal */
    --sd-blue: #0072CE;
    --sd-blue-dark: #005BA1;
    --sd-blue-darker: #004477;
    --sd-blue-light: #3D9AE2;
    --sd-blue-pale: #E5F3FC;
    --sd-blue-xpale: #F2F9FE;
    
    /* ============================================
       COLORES SEMÁNTICOS
       ============================================ */
    
    /* Success - Verde */
    --sd-success: #2E7D32;
    --sd-success-light: #E8F5E9;
    --sd-success-dark: #1B5E20;
    
    /* Warning - Naranja */
    --sd-warning: #F57C00;
    --sd-warning-light: #FFF3E0;
    --sd-warning-dark: #E65100;
    
    /* Danger - Rojo */
    --sd-danger: #C62828;
    --sd-danger-light: #FFEBEE;
    --sd-danger-dark: #B71C1C;
    
    /* Info - Azul claro */
    --sd-info: #0288D1;
    --sd-info-light: #E1F5FE;
    --sd-info-dark: #01579B;
    
    /* ============================================
       ESCALA DE GRISES
       ============================================ */
    --sd-gray-900: #212121;
    --sd-gray-800: #424242;
    --sd-gray-700: #616161;
    --sd-gray-600: #757575;
    --sd-gray-500: #9E9E9E;
    --sd-gray-400: #BDBDBD;
    --sd-gray-300: #E0E0E0;
    --sd-gray-200: #EEEEEE;
    --sd-gray-100: #F5F5F5;
    --sd-gray-50: #FAFAFA;
    --sd-white: #FFFFFF;
    --sd-black: #000000;
    
    /* ============================================
       GRADIENTES CORPORATIVOS
       ============================================ */
    --sd-gradient-primary: linear-gradient(135deg, #0072CE 0%, #004477 100%);
    --sd-gradient-hero: linear-gradient(135deg, #005BA1 0%, #004477 100%);
    --sd-gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    --sd-gradient-horizontal: linear-gradient(90deg, #0072CE 0%, #005BA1 100%);
    
    /* ============================================
       SOMBRAS
       ============================================ */
    --sd-shadow-sm: 0 1px 3px rgba(0, 114, 206, 0.08);
    --sd-shadow-md: 0 4px 12px rgba(0, 114, 206, 0.12);
    --sd-shadow-lg: 0 8px 24px rgba(0, 114, 206, 0.16);
    --sd-shadow-xl: 0 16px 48px rgba(0, 114, 206, 0.20);
    
    /* Sombras para hover */
    --sd-shadow-hover: 0 6px 16px rgba(0, 114, 206, 0.15);
    
    /* ============================================
       TIPOGRAFÍA
       ============================================ */
    --sd-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                       'Helvetica Neue', Arial, sans-serif;
    --sd-font-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    
    /* Tamaños de fuente */
    --sd-font-xs: 0.75rem;      /* 12px */
    --sd-font-sm: 0.875rem;     /* 14px */
    --sd-font-base: 0.9375rem;  /* 15px */
    --sd-font-md: 1rem;         /* 16px */
    --sd-font-lg: 1.125rem;     /* 18px */
    --sd-font-xl: 1.25rem;      /* 20px */
    --sd-font-2xl: 1.5rem;      /* 24px */
    --sd-font-3xl: 2rem;        /* 32px */
    
    /* Pesos de fuente */
    --sd-font-light: 300;
    --sd-font-normal: 400;
    --sd-font-medium: 500;
    --sd-font-semibold: 600;
    --sd-font-bold: 700;
    
    /* ============================================
       ESPACIADO (Sistema de 4px)
       ============================================ */
    --sd-space-0: 0;
    --sd-space-1: 0.25rem;   /* 4px */
    --sd-space-2: 0.5rem;    /* 8px */
    --sd-space-3: 0.75rem;   /* 12px */
    --sd-space-4: 1rem;      /* 16px */
    --sd-space-5: 1.25rem;   /* 20px */
    --sd-space-6: 1.5rem;    /* 24px */
    --sd-space-8: 2rem;      /* 32px */
    --sd-space-10: 2.5rem;   /* 40px */
    --sd-space-12: 3rem;     /* 48px */
    --sd-space-16: 4rem;     /* 64px */
    --sd-space-20: 5rem;     /* 80px */
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --sd-radius-none: 0;
    --sd-radius-sm: 0.25rem;    /* 4px */
    --sd-radius-md: 0.5rem;     /* 8px */
    --sd-radius-lg: 0.75rem;    /* 12px */
    --sd-radius-xl: 1rem;       /* 16px */
    --sd-radius-2xl: 1.5rem;    /* 24px */
    --sd-radius-full: 9999px;   /* Círculo completo */
    
    /* ============================================
       TRANSICIONES
       ============================================ */
    --sd-transition: all 0.2s ease;
    --sd-transition-fast: all 0.15s ease;
    --sd-transition-slow: all 0.3s ease;
    --sd-transition-transform: transform 0.3s ease;
    --sd-transition-opacity: opacity 0.2s ease;
    
    /* ============================================
       Z-INDEX (Capas)
       ============================================ */
    --sd-z-base: 0;
    --sd-z-dropdown: 1000;
    --sd-z-sticky: 1020;
    --sd-z-fixed: 1030;
    --sd-z-modal-backdrop: 1040;
    --sd-z-modal: 1050;
    --sd-z-popover: 1060;
    --sd-z-tooltip: 1070;
    
    /* ============================================
       DIMENSIONES LAYOUT
       ============================================ */
    --sd-sidebar-width: 260px;
    --sd-sidebar-collapsed-width: 80px;
    --sd-header-height: 60px;
    --sd-container-max-width: 1400px;
}

/* ============================================
   RESET Y BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--sd-font-family);
    font-size: var(--sd-font-base);
    line-height: 1.5;
    color: var(--sd-gray-900);
    background-color: var(--sd-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TIPOGRAFÍA BASE
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--sd-space-4);
    font-weight: var(--sd-font-semibold);
    line-height: 1.2;
    color: var(--sd-gray-900);
}

h1 {
    font-size: var(--sd-font-3xl);
    font-weight: var(--sd-font-bold);
}

h2 {
    font-size: var(--sd-font-2xl);
}

h3 {
    font-size: var(--sd-font-xl);
}

h4 {
    font-size: var(--sd-font-lg);
}

h5, h6 {
    font-size: var(--sd-font-md);
}

p {
    margin-bottom: var(--sd-space-4);
}

a {
    color: var(--sd-blue);
    text-decoration: none;
    transition: var(--sd-transition);
}

a:hover {
    color: var(--sd-blue-dark);
    text-decoration: underline;
}

/* ============================================
   UTILIDADES DE COLOR DE TEXTO
   ============================================ */

.text-primary { color: var(--sd-blue) !important; }
.text-success { color: var(--sd-success) !important; }
.text-warning { color: var(--sd-warning) !important; }
.text-danger { color: var(--sd-danger) !important; }
.text-info { color: var(--sd-info) !important; }
.text-muted { color: var(--sd-gray-500) !important; }
.text-dark { color: var(--sd-gray-900) !important; }
.text-light { color: var(--sd-gray-100) !important; }

/* ============================================
   UTILIDADES DE BACKGROUND
   ============================================ */

.bg-primary { background-color: var(--sd-blue) !important; }
.bg-primary-light { background-color: var(--sd-blue-pale) !important; }
.bg-success { background-color: var(--sd-success) !important; }
.bg-success-light { background-color: var(--sd-success-light) !important; }
.bg-warning { background-color: var(--sd-warning) !important; }
.bg-warning-light { background-color: var(--sd-warning-light) !important; }
.bg-danger { background-color: var(--sd-danger) !important; }
.bg-danger-light { background-color: var(--sd-danger-light) !important; }
.bg-info { background-color: var(--sd-info) !important; }
.bg-info-light { background-color: var(--sd-info-light) !important; }
.bg-light { background-color: var(--sd-gray-100) !important; }
.bg-white { background-color: var(--sd-white) !important; }

/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */

.sd-container {
    max-width: var(--sd-container-max-width);
    margin: 0 auto;
    padding: 0 var(--sd-space-4);
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sd-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--sd-gray-400);
    border-radius: var(--sd-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sd-gray-500);
}

/* ============================================
   ANIMACIONES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-in-right {
    animation: slideInRight 0.3s ease;
}

/* ============================================
   LOADER / SPINNER
   ============================================ */

.sd-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--sd-gray-300);
    border-top-color: var(--sd-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.sd-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */

@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}