/**
 * ============================================================================
 * SISTEMA-DESIGN.CSS
 * Sistema de Diseño Unificado - Sistema de Gestión Estudintes
 * ============================================================================
 * 
 * Este es el ÚNICO archivo que contiene variables CSS globales.
 * Todos los módulos del sistema deben importar este archivo.
 * 
 * PROHIBIDO duplicar variables CSS en otros archivos.
 * 
 * @author Sistema Académico MINERD
 * @version 2.0.0
 * @date 11 de Enero de 2026
 * ============================================================================
 */

/* ============================================================================
   VARIABLES CSS GLOBALES
   ============================================================================ */

:root {
    /* ========================================
       COLORES PRIMARIOS - IDENTIDAD MINERD
       ======================================== */
    
    /* Azul MINERD - Color oficial del sistema */
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;  /* COLOR PRINCIPAL */
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* ========================================
       COLORES FUNCIONALES
       ======================================== */
    
    /* Éxito (verde) */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #10b981;  /* COLOR PRINCIPAL */
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;
    
    /* Peligro (rojo) */
    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;  /* COLOR PRINCIPAL */
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    
    /* Advertencia (ámbar/amarillo) */
    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;  /* COLOR PRINCIPAL */
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;
    
    /* Información (azul claro/cyan) */
    --info-50:  #ecfeff;
    --info-100: #cffafe;
    --info-200: #a5f3fc;
    --info-300: #67e8f9;
    --info-400: #22d3ee;
    --info-500: #06b6d4;  /* COLOR PRINCIPAL */
    --info-600: #0891b2;
    --info-700: #0e7490;
    --info-800: #155e75;
    --info-900: #164e63;
    
    /* ========================================
       COLORES NEUTRALES - ESCALA DE GRISES
       ======================================== */
    
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Alias útiles */
    --white: #ffffff;
    --black: #000000;
    
    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    
    /* ============================================================================
   FUENTES Y EMOJIS
   ============================================================================ */

/* Noto Color Emoji - Para emojis de color en todos los navegadores */
/* Se carga desde Google Fonts CDN en main.php como fallback */
--font-family-sans: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
--font-family-mono: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
--font-family-emoji: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    
    /* Tamaños de texto (escala modular 1.125) */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px - BASE */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    
    /* Pesos de fuente */
    --font-light:      300;
    --font-normal:     400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;
    --font-extrabold:  800;
    --font-black:      900;
    
    /* Altura de línea */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;
    
    /* Espaciado entre letras */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;
    
    /* ========================================
       ESPACIADO (Sistema base 8px)
       ======================================== */
    
    --spacing-0:  0;
    --spacing-px: 1px;
    --spacing-0-5: 0.125rem;  /* 2px */
    --spacing-1:  0.25rem;    /* 4px */
    --spacing-1-5: 0.375rem;  /* 6px */
    --spacing-2:  0.5rem;     /* 8px */
    --spacing-2-5: 0.625rem;  /* 10px */
    --spacing-3:  0.75rem;    /* 12px */
    --spacing-4:  1rem;       /* 16px */
    --spacing-5:  1.25rem;    /* 20px */
    --spacing-6:  1.5rem;     /* 24px */
    --spacing-7:  1.75rem;    /* 28px */
    --spacing-8:  2rem;       /* 32px */
    --spacing-9:  2.25rem;    /* 36px */
    --spacing-10: 2.5rem;     /* 40px */
    --spacing-12: 3rem;       /* 48px */
    --spacing-14: 3.5rem;     /* 56px */
    --spacing-16: 4rem;       /* 64px */
    --spacing-20: 5rem;       /* 80px */
    --spacing-24: 6rem;       /* 96px */
    
    /* ========================================
       BORDES Y RADIOS
       ======================================== */
    
    /* Radio de bordes */
    --radius-none: 0;
    --radius-sm:   0.25rem;   /* 4px */
    --radius-md:   0.375rem;  /* 6px */
    --radius-lg:   0.5rem;    /* 8px */
    --radius-xl:   0.75rem;   /* 12px */
    --radius-2xl:  1rem;      /* 16px */
    --radius-3xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;    /* Círculo completo */
    
    /* Ancho de bordes */
    --border-0: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-4: 4px;
    --border-8: 8px;
    
    /* ========================================
       SOMBRAS
       ======================================== */
    
    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-none: 0 0 #0000;
    
    /* Sombras de colores (para botones) */
    --shadow-primary:  0 4px 14px 0 rgba(59, 130, 246, 0.39);
    --shadow-success:  0 4px 14px 0 rgba(16, 185, 129, 0.39);
    --shadow-danger:   0 4px 14px 0 rgba(239, 68, 68, 0.39);
    --shadow-warning:  0 4px 14px 0 rgba(245, 158, 11, 0.39);
    
    /* ========================================
       TRANSICIONES Y ANIMACIONES
       ======================================== */
    
    /* Duraciones */
    --duration-75:   75ms;
    --duration-100:  100ms;
    --duration-150:  150ms;
    --duration-200:  200ms;
    --duration-300:  300ms;
    --duration-500:  500ms;
    --duration-700:  700ms;
    --duration-1000: 1000ms;
    
    /* Funciones de timing */
    --ease-linear:     linear;
    --ease-in:         cubic-bezier(0.4, 0, 1, 1);
    --ease-out:        cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Transiciones comunes */
    --transition-fast:   all var(--duration-150) var(--ease-out);
    --transition-base:   all var(--duration-300) var(--ease-out);
    --transition-slow:   all var(--duration-500) var(--ease-out);
    
    /* ========================================
       Z-INDEX (Capas de profundidad)
       ======================================== */
    
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-modal:     1040;
    --z-popover:   1050;
    --z-tooltip:   1060;
    
    /* ========================================
       ANCHOS Y TAMAÑOS
       ======================================== */
    
    /* Contenedores */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;
    
    /* ========================================
       BREAKPOINTS (para referencia en JS)
       ======================================== */
    
    --breakpoint-sm:  640px;
    --breakpoint-md:  768px;
    --breakpoint-lg:  1024px;
    --breakpoint-xl:  1280px;
    --breakpoint-2xl: 1536px;
}

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

/* Box-sizing global */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset de márgenes */
* {
    margin: 0;
    padding: 0;
}

/* Configuración base del documento */
html {
    font-size: 16px; /* Base 16px para accesibilidad */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Body base */
body {
    font-family: var(--font-family-sans), var(--font-family-emoji);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--gray-900);
    background-color: var(--gray-50);
    min-height: 100vh;
}

/* Emoji fix - Asegurar emojis de color en todos los navegadores */
.emoji,
span[role="img"],
a[class*="btn"] .btn-icon {
    font-family: var(--font-family-emoji) !important;
}

/* Imágenes responsive */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Inputs y forms heredan fuente */
input,
button,
textarea,
select {
    font: inherit;
}

/* Prevenir desbordamiento de texto */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* ============================================================================
   CLASES UTILITARIAS - COLORES
   ============================================================================ */

/* Colores de texto */
.text-primary   { color: var(--primary-500); }
.text-success   { color: var(--success-500); }
.text-danger    { color: var(--danger-500); }
.text-warning   { color: var(--warning-500); }
.text-info      { color: var(--info-500); }
.text-gray      { color: var(--gray-500); }
.text-gray-dark { color: var(--gray-700); }
.text-white     { color: var(--white); }
.text-muted     { color: var(--gray-500); }

/* Colores de fondo */
.bg-primary   { background-color: var(--primary-500); }
.bg-success   { background-color: var(--success-500); }
.bg-danger    { background-color: var(--danger-500); }
.bg-warning   { background-color: var(--warning-500); }
.bg-info      { background-color: var(--info-500); }
.bg-gray      { background-color: var(--gray-100); }
.bg-white     { background-color: var(--white); }

/* ============================================================================
   CLASES UTILITARIAS - TIPOGRAFÍA
   ============================================================================ */

/* Tamaños de texto */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* Pesos de fuente */
.font-light     { font-weight: var(--font-light); }
.font-normal    { font-weight: var(--font-normal); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

/* Alineación de texto */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* Transformación de texto */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }

/* ============================================================================
   CLASES UTILITARIAS - ESPACIADO
   ============================================================================ */

/* Margin */
.m-0  { margin: 0; }
.m-1  { margin: var(--spacing-1); }
.m-2  { margin: var(--spacing-2); }
.m-3  { margin: var(--spacing-3); }
.m-4  { margin: var(--spacing-4); }
.m-6  { margin: var(--spacing-6); }
.m-8  { margin: var(--spacing-8); }

/* Margin horizontal/vertical */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-4    { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--spacing-1); }
.p-2  { padding: var(--spacing-2); }
.p-3  { padding: var(--spacing-3); }
.p-4  { padding: var(--spacing-4); }
.p-6  { padding: var(--spacing-6); }
.p-8  { padding: var(--spacing-8); }

/* ============================================================================
   CLASES UTILITARIAS - LAYOUT
   ============================================================================ */

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Flex utilities */
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Gap */
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* ============================================================================
   CLASES UTILITARIAS - BORDES
   ============================================================================ */

/* Border radius */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Border width */
.border-0 { border-width: 0; }
.border-1 { border-width: var(--border-1); }
.border-2 { border-width: var(--border-2); }

/* ============================================================================
   CLASES UTILITARIAS - SOMBRAS
   ============================================================================ */

.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Media queries para responsive */
@media (min-width: 640px) {
    .sm\:hidden { display: none; }
    .sm\:block  { display: block; }
    .sm\:flex   { display: flex; }
}

@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block  { display: block; }
    .md\:flex   { display: flex; }
}

@media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    .lg\:block  { display: block; }
    .lg\:flex   { display: flex; }
}

/* ============================================================================
   ACCESIBILIDAD
   ============================================================================ */

/* Focus visible mejorado */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Screen readers only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ============================================================================
   MODO OSCURO (Preparado para futuro)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* Variables para dark mode se pueden agregar aquí en el futuro */
    /* Por ahora el sistema no soporta dark mode */
}

/* ============================================================================
   FIN DEL ARCHIVO
   ============================================================================ */