:root {
  /* ======== COLORES PRINCIPALES ======== */
  /* Colores base del sistema */
  --primary: #005E6F;                  /* Verde-azulado oscuro - color principal */
  --primary-dark: #004A58;             /* Versión oscura del color principal */
  --secondary: #01D1D0;                /* Turquesa - color secundario */
  --secondary-dark: #00BFBE;           /* Versión oscura del color secundario */
  --accent: #F0B92D;                   /* Amarillo/dorado - acento */
  
  /* Alias para mantener compatibilidad con código existente */
  --primary-color: var(--primary);     /* Alias para primary */
  --secondary-color: var(--secondary); /* Alias para secondary */
  --accent-color: var(--accent);       /* Alias para accent */
  
  /* Estados y utilidades */
  --success: #28a745;                  /* Verde - éxito/activo */
  --danger: #dc3545;                   /* Rojo - error/inactivo */
  --warning: #ffc107;                  /* Amarillo - advertencia/pendiente */
  --info: #17A2B8;                     /* Azul claro - información */
  --light: #f8f9fa;                    /* Claro - fondos muy claros */
  --dark: #4D4D64;                     /* Azul grisáceo oscuro - texto principal */
  
  /* Alias para estados */
  --state-active: var(--success);      /* Estado activo */
  --state-inactive: var(--danger);     /* Estado inactivo */
  --state-pending: var(--warning);     /* Estado pendiente */
  --state-info: var(--info);           /* Estado informativo */
  
  /* ======== COLORES DE FONDO ======== */
  --bg-primary: #FFFFFF;                /* Blanco - fondo principal */
  --bg-secondary: #F2F7F8;             /*  Gris con leve tono verde-azulado */
  --bg-accent: #D6F3F0;                /* Turquesa muy claro - fondo acento */
  
  /* Fondos de estados */
  --bg-active: #DFF6E4;                /* Verde claro - fondo para estados activos */
  --bg-inactive: #FFEFEF;              /* Rojo claro - fondo para estados inactivos */
  --bg-pending: #FFF4E5;               /* Amarillo claro - fondo para estados pendientes */
  --bg-info: #E8F4FF;                  /* Azul claro - fondo para estados informativos */
  
  /* ======== COLORES DE SIDEBAR ======== */
  --sidebar-bg: #2c3e50;               /* Fondo del sidebar */
  --sidebar-hover: #34495e;            /* Hover de elementos en sidebar */
  --sidebar-active: #1a252f;           /* Estado activo en sidebar */
  --sidebar-text: #ecf0f1;             /* Color de texto en sidebar */
  --sidebar-accent: var(--primary);    /* Color de acento en sidebar */
  
  /* ======== NEUTRALES ======== */
  --neutral-dark: var(--dark);         /* Azul grisáceo oscuro - texto principal */
  --neutral-medium: #6C757D;           /* Gris medio para texto secundario */
  --neutral-light: #CAC7A7;            /* Beige - elementos neutros */
  
  /* ======== TIPOGRAFÍA ======== */
  --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* ======== ESPACIADO Y DIMENSIONES ======== */
  /* Dimensiones específicas */
  --sidebar-width: 250px;              /* Ancho del sidebar */
  --header-height: 50px;               /* Altura del header */
  --content-padding: 15px;             /* Padding para el contenido */
  
  /* Espaciado general */
  --spacing-xs: 0.25rem;               /* 4px */
  --spacing-sm: 0.5rem;                /* 8px */
  --spacing-md: 1rem;                  /* 16px */
  --spacing-lg: 1.5rem;                /* 24px */
  --spacing-xl: 2rem;                  /* 32px */
  
  /* ======== SOMBRAS ======== */
  /* Sombras generales */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* Alias para sombras con nomenclatura más descriptiva */
  --shadow-small: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-large: 0 10px 25px rgba(92, 99, 105, 0.2);
  
  /* ======== BORDES ======== */
  /* Bordes generales */
  --border-radius: 8px;
  --border-color: rgba(0, 0, 0, 0.1);
  
  /* Variantes de radio de borde */
  --border-radius-sm: 4px;
  --border-radius-md: 7px;
  --border-radius-lg: 12px;
}