/* ==========================================================================
   Design Tokens (CSS Variables) - SINTERH Premium UI
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

   :root {
     /* ----------------------------------------------------------------------
        Brand Colors (Institucional)
        ---------------------------------------------------------------------- */
     --primary: #0A2540;           /* Azul profundo (Navbars, sidebars) */
     --primary-light: #4A90E2;     /* Azul interactivo (Links, botones primarios) */
     --primary-gradient: linear-gradient(135deg, #0A2540 0%, #173b61 100%);
     
     --accent: #00E5FF;            /* Cian (Micro-interacciones, hover states) */
     --accent-hover: #00c4db;      /* Cian oscuro para active states */
   
     /* ----------------------------------------------------------------------
        Backgrounds (Fondos)
        ---------------------------------------------------------------------- */
     --bg-app: #F4F7FC;            /* Gris-azulado luminoso (fondo general app) */
     --bg-surface: #FFFFFF;        /* Superficies sólidas (tarjetas, modales) */
     --bg-glass: rgba(255, 255, 255, 0.85); /* Superficies Glass (Header principal) */
     --bg-glass-dark: rgba(10, 37, 64, 0.95); /* Sidebar Glassmorphism */
     
     /* ----------------------------------------------------------------------
        Typography Colors
        ---------------------------------------------------------------------- */
     --text-primary: #1A1F36;      /* Texto de alto contraste (Títulos) */
     --text-secondary: #697386;    /* Texto de contraste medio (Subtítulos, labels) */
     --text-on-primary: #FFFFFF;   /* Texto sobre fondos oscuros (Blanco puro) */
   
     /* ----------------------------------------------------------------------
        Semantic Status Colors
        ---------------------------------------------------------------------- */
     --status-success: #00CD98;    /* Activo, Aprobado */
     --status-success-bg: rgba(0, 205, 152, 0.1); 
     
     --status-warning: #FFAB00;    /* Pendiente, Precaución */
     --status-warning-bg: rgba(255, 171, 0, 0.1);
     
     --status-danger: #FF4A68;     /* Rechazado, Error, Bajas */
     --status-danger-bg: rgba(255, 74, 104, 0.1);
     
     --status-info: #8A2BE2;       /* Información, Novedades */
     --status-info-bg: rgba(138, 43, 226, 0.1);
   
     /* ----------------------------------------------------------------------
        Borders & Dividers
        ---------------------------------------------------------------------- */
     --border-subtle: rgba(10, 37, 64, 0.08); /* Líneas divisorias delicadas */
     --border-focus: rgba(74, 144, 226, 0.5); /* Anillo de foco accesible */
   
     /* ----------------------------------------------------------------------
        Shadows (Elevación)
        ---------------------------------------------------------------------- */
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 12px 24px rgba(0, 37, 64, 0.12);
     --shadow-glass: 0 8px 32px rgba(0, 37, 64, 0.08); /* Sombra para el panel glass */
   
     /* ----------------------------------------------------------------------
        Border Radius (Suavidad geométrica)
        ---------------------------------------------------------------------- */
     --radius-sm: 6px;             /* Inputs, badges, botones pequeños */
     --radius-md: 10px;            /* Botones principales, dropdowns */
     --radius-lg: 20px;            /* Tarjetas principales, modales */
     --radius-full: 9999px;        /* Elementos circulares (avatares, pill badges) */
   
     /* ----------------------------------------------------------------------
        Typography Metrics
        ---------------------------------------------------------------------- */
     --font-family: 'Inter', system-ui, -apple-system, sans-serif;
     --text-xs: 0.75rem;   /* 12px */
     --text-sm: 0.875rem;  /* 14px */
     --text-base: 1rem;    /* 16px */
     --text-lg: 1.125rem;  /* 18px */
     --text-xl: 1.25rem;   /* 20px */
     --text-2xl: 1.5rem;   /* 24px */
     --text-3xl: 2rem;     /* 32px */
   
     /* ----------------------------------------------------------------------
        Transitions & Animations
        ---------------------------------------------------------------------- */
     --transition-fast: 0.15s ease;
     --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
     
     /* Layout Dimensions */
     --sidebar-width: 280px;
     --sidebar-width-collapsed: 80px;
     --header-height: 70px;
   }