/* ========================================
   Sistema Académico ISFER - Variables CSS
   Archivo Central de Variables de Colores
   ======================================== */

:root {
     /* ========================================
       COLORES PRINCIPALES - VERDE ISFER
       ======================================== */
     --primary-color: #00783c;
     --primary-dark: #005a2d;
     --primary-darker: #003d1f;
     --primary-light: #009b4d;

     /* RGB values for box-shadow (same colors as above) */
     --primary-rgb: 0, 120, 60;
     /* #00783c */
     --primary-dark-rgb: 0, 90, 45;
     /* #005a2d */
     --primary-light-rgb: 0, 155, 77;
     /* #009b4d */

     /* ========================================
       COLORES DE ESTADO
       ======================================== */
     --success-color: #10b981;
     --success-dark: #059669;
     --success-darker: #047857;

     /* RGB values for success */
     --success-rgb: 16, 185, 129;
     /* #10b981 */
     --success-dark-rgb: 5, 150, 105;
     /* #059669 */

     --info-color: #3b82f6;
     --info-dark: #2563eb;

     /* RGB values for info */
     --info-rgb: 59, 130, 246;
     /* #3b82f6 */

     --warning-color: #f59e0b;
     --warning-dark: #d97706;
     --warning-darker: #b45309;

     /* RGB values for warning */
     --warning-rgb: 245, 158, 11;
     /* #f59e0b */
     --warning-dark-rgb: 217, 119, 6;
     /* #d97706 */

     --danger-color: #ef4444;
     --danger-dark: #dc2626;

     /* RGB values for danger */
     --danger-rgb: 239, 68, 68;
     /* #ef4444 */

     --purple-color: #8b5cf6;
     --purple-dark: #7c3aed;

     /* RGB values for purple */
     --purple-rgb: 139, 92, 246;
     /* #8b5cf6 */

     /* ========================================
       COLORES DE UI - BACKGROUNDS
       ======================================== */
     --body-bg: #f8f9fa;
     --card-bg: #ffffff;

     /* Fondos Verdes */
     --bg-green-pastel: #d4edda;
     --bg-green-light: #f8fdf9;
     --bg-green-lighter: #e8f7f0;
     --bg-green-lightest: #f0faf5;

     /* Fondos Neutrales */
     --bg-gray-light: #f7fafc;
     --bg-gray: #f3f4f6;
     --bg-gray-dark: #e2e3e5;

     /* ========================================
       COLORES DE TEXTO
       ======================================== */
     --text-primary: #2d3748;
     --text-secondary: #718096;
     --text-muted: #a0aec0;
     --text-dark: #1a4d2e;

     /* ========================================
       SIDEBAR
       ======================================== */
     --sidebar-bg: #1a1a1a;
     --sidebar-hover: #2d2d2d;
     --sidebar-width: 260px;

     /* ========================================
       BORDERS
       ======================================== */
     --border-light: #e2e8f0;
     --border-medium: #cbd5e0;
     --border-green: #b8dcc8;
     --border-primary: #00783c;

     /* ========================================
       GRADIENTES COMUNES
       ======================================== */
     --gradient-primary: linear-gradient(135deg, #00783c 0%, #005a2d 100%);
     --gradient-primary-reverse: linear-gradient(135deg, #005a2d 0%, #00783c 100%);
     --gradient-primary-vertical: linear-gradient(180deg,
               #005a2d 0%,
               #00783c 100%);

     --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
     --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
     --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
     --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

     --gradient-login-bg: linear-gradient(135deg,
               #00783c 0%,
               #005a2d 50%,
               #003d1f 100%);
     --gradient-navbar: linear-gradient(135deg, #005a2d 0%, #038544 100%);
     --gradient-content-header: linear-gradient(180deg, #ffffff 0%, #d4edda 100%);
     --gradient-content-header2: linear-gradient(#d4edda 0%, #ffffff 100%);

     /* ========================================
       SOMBRAS
       ======================================== */
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.12);

     --shadow-primary: 0 4px 12px rgba(0, 120, 60, 0.3);
     --shadow-primary-lg: 0 6px 16px rgba(0, 120, 60, 0.4);
     --shadow-success: 0 4px 12px rgba(5, 150, 105, 0.4);
     --shadow-warning: 0 4px 12px rgba(217, 119, 6, 0.4);

     /* ========================================
       EFECTOS DE FOCUS
       ======================================== */
     --focus-ring-primary: 0 0 0 0.25rem rgba(0, 120, 60, 0.25);
     --focus-ring-primary-sm: 0 0 0 2px rgba(0, 120, 60, 0.1);
     --focus-ring-primary-lg: 0 0 0 4px rgba(0, 120, 60, 0.15);

     /* ========================================
       COLORES DE PROMEDIO
       ======================================== */
     --promedio-aprobado-bg: #d1e7dd;
     --promedio-aprobado-text: #0f5132;

     --promedio-desaprobado-bg: #f8d7da;
     --promedio-desaprobado-text: #842029;

     --promedio-pendiente-bg: #e2e3e5;
     --promedio-pendiente-text: #41464b;

     /* ========================================
       BORDERS RADIUS
       ======================================== */
     --radius-sm: 6px;
     --radius-md: 8px;
     --radius-lg: 10px;
     --radius-xl: 12px;
     --radius-2xl: 16px;
     --radius-full: 50%;

     /* ========================================
       TRANSITIONS
       ======================================== */
     --transition-fast: all 0.2s ease;
     --transition-base: all 0.3s ease;
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     /* ========================================
       GRADIENTES DE ROLES
       ======================================== */
     --gradient-student: linear-gradient(135deg, #009b4d 0%, #00b359 100%);
     --gradient-teacher: linear-gradient(135deg, #005a2d 0%, #00783c 100%);
}